The same page, before and after
Høstlys is a fictional coffee roaster. Its landing page is built the way many small business sites are, with full-size photos, a CSS framework, an icon font and render-blocking fonts and scripts. The optimized version looks the same to a visitor, but loads much faster on a phone.
Results
Google PageSpeed Insights, mobile (emulated mid-range phone on a slow 4G connection), measured 11 October 2026. Lab results vary a little between runs.
| Metric | Before | After |
|---|---|---|
| Performance score | 66 | 97 |
| Largest Contentful Paint | 26.6 s | 2.4 s |
| First Contentful Paint | 3.3 s | 0.8 s |
| Speed Index | 4.6 s | 0.8 s |
| Cumulative Layout Shift | 0.053 | 0.077 |
| Page weight | 4.8 MB | 34 KB |
| Render-blocking files | 6 | 0 |
| Accessibility score | 85 | 100 |
| SEO score | 91 | 100 |
What was changed
-
Images resized to the size they are shown at
The photos were 4000 and 2400 pixels wide, straight from a camera, 4.6 MB in total. They are now resized for phones and screens (800 to 1600 px), served as AVIF with WebP as a fallback, and the browser picks the right size with
srcset. The images below the first screen load only when the visitor scrolls to them. -
The main image is loaded first
The hero image is the largest element on the first screen, so it is preloaded with high priority instead of waiting behind stylesheets and scripts.
-
No render-blocking files
The page loaded Bootstrap, Font Awesome, jQuery and a JavaScript bundle before showing anything, but used almost none of it. They are gone: the page needs about 2.5 KB of its own CSS, which is now inlined, and three small SVG icons replace a whole icon font.
-
Fonts no longer block the first paint
Three font families in fifteen weights became one family in two weights, loaded without blocking the first paint. The text appears right away in a system font and switches to the brand font a moment later.
-
Less content jumping around
Images have their dimensions set, and the promo bar is part of the page from the start instead of being pushed in by a script one second later. A small shift remains when the brand font replaces the system font. It stays within Google's "good" range (under 0.1), and could be removed completely by hosting the font on the site itself.
-
Accessibility and SEO basics
Fixed a colour contrast issue, a skipped heading level and a missing main landmark, and added a meta description.
The pictures in this demo are drawn by a script, which is why the optimized files are so small. Real photos keep more detail, so the savings are usually smaller, but the same steps apply.
Why it matters
Most small business websites are visited on a phone, often on a mobile connection. A page that shows its main content after several seconds loses visitors before they read anything, and Google uses the same speed metrics (Core Web Vitals) as one of its ranking signals.
This kind of work does not need a redesign or a new platform. Most of the gain comes from a handful of changes to images, fonts and scripts.