13 posts tagged with "Optimization"

If your site uses the standard Google Fonts embed, every new visitor's browser has to connect to two Google domains before it can draw your text in the right typeface. Self-hosting Google Fonts removes both of those connections, and the font files arrive over the connection your page is already using.

My team and I have tested this extensively over years of speed optimization work at SpeedVitals, and self-hosting consistently makes a good difference. The tricky part is that the steps look completely different on WordPress, Shopify, Webflow, Next.js, or a Jekyll site.

In this article, I'll show you how to self-host Google Fonts on 20 platforms, how to prepare the files so they stay small, and how to confirm that no request to Google is left behind.

Whenever you read a website performance optimization checklist, you'll usually find 30 or 40 tips listed as if they carry equal weight. Minify CSS, enable HTTP/3, self-host Google Fonts, convert images to WebP, add a CDN, and so on.

But a browser doesn't load your page from a checklist. It follows a dependency chain. A 20 KB image saving can't make up for a server that takes one second to send the HTML, and HTTP/3 can't make 700 KB of unnecessary JavaScript cheap to execute.

So which optimizations actually move your Core Web Vitals, and in what order should you make them? Let's find out.

When I started building Moon Dasha, a SaaS platform powered by Vedic Astrology, I chose Vite, React, and TypeScript because I wanted a fast development workflow without giving up the flexibility required for a large web application.

Vite kept development quick, and the first version of the website loaded well. But as the application grew to include more calculators, reports, result tabs, blog posts, and images, its production performance required a lot more attention.

Shopify speed optimization is not about chasing a perfect Lighthouse score once and forgetting about it.

For most Shopify stores, speed problems come from a few repeat offenders: heavy themes, too many apps, oversized images, third-party scripts, render-blocking CSS, web fonts, and dynamic widgets that shift the page after it loads.

If you found this article, you probably saw a warning about layout shift, CLS, or "Avoid large layout shifts" while testing your website.

In simple terms, some element on your web page has moved after the page has already started loading. It could be an image, ad, iframe, font, cookie banner, product card, or any content loaded by JavaScript.

This is not just a small visual issue. When content moves unexpectedly, users lose their reading position, click the wrong element, or feel that the page is unstable.