How to Ace the Google Lighthouse Speed Test

The Bare Minimum

These are the basics everyone talks about — essential steps that are relatively simple but can make a noticeable impact:

1. Use Images the Right Size:

• Resize images to the exact dimensions needed on your site.
• Avoid scaling down large images with CSS.

2. Remove Third-Party JavaScript:

• Extra scripts from add-ons (looking at you Wordpress), widgets, and tracking pixels will slow down your site.
• Only use third-party scripts that are absolutely necessary.

3. Use Next-Gen Image Formats:

• Serve images in formats like WebP or AVIF for better compression and quality.

4. Utilize a CDN:

• Content Delivery Networks reduce latency by serving content closer to users.
• They also help manage traffic spikes.

5. Optimize Server Caching Policies:

• Set appropriate Cache-Control headers on you nginx/Apache/whatever server you use for the website.
• Use long cache lifetimes for static assets, so the browser keeps them in memory and doesn't always reload the images from the server.

6. Lazy Load and Eliminate Render-Blocking Resources:

• Implement lazy loading for images and iframes.
• Defer non-critical CSS and JavaScript to avoid blocking the main render path.

These steps are foundational and will get you a decent score, but if you want to hit the top marks, it’s time to go deeper.

The Real Deal: Advanced Optimization

To truly ace the Lighthouse speed test, you need to go beyond the basics and fine-tune your site to the core.

1. Critical CSS Only:

• Extract and inline only the CSS required to render above-the-fold content.
• Avoid loading full CSS files upfront; defer the rest.

2. REALLY minimize JavaScript usage:

• Reduce JavaScript on your site, even the one you write yourself, and use CSS3 and vanilla HTML5 as far as possible.
• Remove unused code – i.e. only include the code that needed on every page. Don't have any GLOBAL javascript "just in case" on every page.

3. Responsive, Form Factor-Specific Images:

• Serve different image sizes based on the user’s device.
• Use the srcset attribute to provide multiple image resolutions.
• Design principle: A high-res iMac needs a different image than an older Android phone! Make several versions of every image.

4. Inline All SVGs:

• Instead of loading SVGs as external files, inline them directly into the HTML.
• This reduces HTTP requests and allows for better styling and animation.

5. Minimize HTML Class Names:

• Shorten class names to just a few characters.
• For example, use .btn instead of .button-primary-large.
• Minify the HTML to remove unnecessary spaces and comments.

6. Only load the fonts and characters needed per page

• Always load fonts from your own server (host e.g. Google fonts locally)
• Only load the characters needed, don't load all characters per font set.

7. Remove Spaces and Optimize Markup:

• Minify your HTML, CSS, and JS.
• Strip out all redundant spaces, line breaks, and comments.

It probably goes without saying, but Flipsite does all of the above for you – automatically.

Why Does This Matter?

You might wonder — why go through all this effort just to ace a speed test? Here’s why it’s worth it:

Faster load times lead to happier users, as even a one-second delay can significantly increase bounce rates. Optimized pages feel smoother and more responsive, enhancing overall user satisfaction. From an SEO perspective, Google considers page speed a ranking factor, meaning a higher Lighthouse score can directly impact search engine rankings and improve visibility in search results. Faster websites also tend to have higher conversion rates, as studies show that every second saved can lead to more sales, sign-ups, or other key goals. Given that most web traffic comes from mobile devices, optimizing for speed ensures a better experience across all platforms. Additionally, performance optimizations like image compression and code minification reduce data transfer, leading to lower hosting costs and improved performance, particularly for users on slower networks.

Investing time in these optimizations isn’t just about getting a high score — it’s about creating a faster, more efficient, and user-friendly website that benefits both your audience and your business.

Final Thoughts

Scoring high on Google Lighthouse isn’t just about following a checklist. It’s about deeply understanding how web performance works and optimizing every layer of your site. Start with the basics, but don’t stop there. Dive deep into the real optimizations, and you’ll see the difference — not just in Lighthouse scores but in user experience and engagement.

This can be done by hand, but it’s super tedious. You’ll need some kind of framework for it. We know, because we struggled with it. The inception of Flipsite was a framework that made this possible, and we’ve made it open-source and available on Github.

Other website builders claim they can score high on Lighthouse tests — and they can in one out of four categories, namely Best Practices and sometimes SEO — but not on Speed! And speed is the #1 factor affecting Accessibility, SEO, and Best Practices.

Go ahead, test the front page of any other website builder and you’ll see they score between 70 and 80 points on speed on average — not 100%. Flipsite on the other hand, doesn’t compromise on speed.