How to get a 100 in Google Lighthouse

How to get a 100 in Google Lighthouse

To rank high in Google Lighthouse is hard work when your WordPress page is complex.

We wanted to share our experience achieving a 100% performance score in the Google Lighthouse audit.

Table of Contents

Does Google Lighthouse matter?

Web developers and designers have been striving to improve website SEO, accessibility, and usability. 

We are evolving our methods to improve our code, functionalities, and site performance. But one frustration, that we can have in common, is how we benchmark our page improvements and validate that what we are doing is creating an impact.

There are various applications out there that can help you in this. Yet few can offer the result as per Google’s requirement and benchmark.

Now, thanks to Google  Lighthouse Audit Score, we can get this done.

What is Google Lighthouse Audit

Google Lighthouse is an open-source audit tool from Google.

It uses your connection and site data to measure your website’s performance, but also its SEO performance, PWA, and other best practices.

Lighthouse conducts audits in a few key areas. Which include:

  • Performance,
  • SEO,
  • Accessibility,
  • Best practices and
  • Progressive Web Applications.

It gives you an overview of the user experience and issues you might have with your website.

What is a good score on Lighthouse?

Google Lighthouse audits the web page and classifies it between 0 and 100.

A “Good” (green) score is above 90. A Poor (orange) ranges 89 to 50, and a “bad end-user experience” (red) is a score lower than 50.

Google lighthouse score levels
Lighthouse score ranges: 0 to 49 Poor – 50 to 89 Needs Improvement – 90 to 100 Good

Google Lighthouse vs PageSpeed Insights

Lighthouse is integrated directly into the Chrome DevTools, under the “Lighthouse” panel but it’s also used as the test engine in the online performance test tool Google PageSpeed Insights

PageSpeed insights LCP FID CLS FCP INP y TTFB
PageSpeed Insights of wetopi.com at the end of this improvement process.

While Google PageSpeed uses the information generated by Lighthouse, enriching it with data from your audience,
Lighthouse delivers you more than just “Performance”.

Lighthouse audits other aspects like SEO, Accessibility, Progressive Web App, etc.

If you are a developer, another difference is that you can also run Lighthouse programmatically. Google Lighthouse is available as a nodejs module you can run from code or command line.

About this Google Lighthouse How-to

In this article, we will share with you how we improved our website’s Google Lighthouse audit score.

We started with low expectations. Our initial site was built on top of an old and over-bloated theme. At that moment, we ended up with an impressive result taking into account where we started off.

However, this year we moved our site to the latest WordPress Full Site Editing theme “Twenty Twenty-Two”.

We are still shocked!

We never thought it would be so easy to get a full 100 in all tests with this soo young WordPress Full site Editing Theme.

This is our journey

  • from here:
A bad google lighthouse audit score
  • to here:

How to open google lighthouse?

You can find the Lighthouse in your Chrome browser Developer Tools.

To open the “Developer Tools”, select:

  • “Top Menu→View→Developer→Developer Tools” or
  • “⌥+⌘+I” on Mac or
  • “F12+Ctrl+Shift+I” on Windows.

Note: you can also open it from the top right “Three dot menu”:

Access the Developer Tools from the three dot menu

On the top bar where you see Elements, Console, … choose Audits.

Scroll down through the options and click Run audits.

Always test changes in a Staging server

This Google Audit report will suggest lots of changes. Staging environments are the solution

If during a test, you don’t want to break your production site:

Clone your server to create a Staging environment!

To clone a WordPress site with Wetopi is as easy as a simple click.

Let’s clone our site with our wetopi cloning tool. This creates in a few seconds a new server running in a development subdomain:

Create a staging to test the Google Lighthouse suggested changes

Set Google Lighthouse options

A good start is to run the Audits with the default options:

optimizing score with Google audit with default options

After a few seconds, the audit finishes and Google Lighthouse shows us a list of opportunities sorted by “Estimated Savings” in seconds.

Let’s tackle the first optimization opportunity.

Working on the opportunities Google Lighthouse results suggest

This was our first refactoring effort focused on the Google Lighthouse audit tool. We decided to take the experimental approach and work our way through the report findings.

Let’s get to the gritty details. We will reproduce the steps in our staging server.

Defer unused CSS

Optimize audit lighthouse Defer unused CSS

We were loading a huge CSS file.

If you work with an all-purpose WordPress theme, this is the price to pay.

In our case, we took the decision manually clean this CSS file. We removed the features we knew were not used, eg. all the woo-commerce styles.

Replacing the main style CSS file

To take control of our theme CSS, we dequeue the theme’s main style and replaced it with our curated one adding an wp_enqueue.

In our functions.php of our Child Theme we added this piece of code:

function my_load_child_scripts() {
    wp_dequeue_style( THEME_SHORT.'-theme' );
    wp_deregister_style( THEME_SHORT.'-theme' );

    wp_enqueue_style( THEME_SHORT . '-child-theme' , get_stylesheet_directory_uri() . '/style.css', array(), false, 'all' ); 
}
add_action( 'wp_enqueue_scripts', 'my_load_child_scripts', 100);

Identifying unused css code

To help us identify unused blocks of CSS code, we used the Coverage Chrome Developers Tool.

This “curation” task requires a lot of time. We ended up reducing our style.css by half of its original size. Mainly stripping woo-commerce, all the slider features, and other not used CSS codes.

The result? We jumped from 54 to 66 in audit Performance score:

Performance audit result 66

Defer offscreen images

This “Defer offscreen images” has a potential estimated saving time of 1.05 seconds!

Defer offscreen images

Google did a great job giving a “Learn more” to help us solve the problem.

Offscreen images are images that appear below the fold.

If users can’t see offscreen images when they load a page, there’s no reason to download the offscreen images as part of the initial page load

Lazy Loading forces images to load only when they are “above the fold” – in other words, only images that come into view in a user’s browser will load.

NEW: Native Lazy Loading Arrived with WordPress 5.5

In our current WordPress, we removed this plugin.

If you do prefer the idea of a plugin to solve your lazy loading needs, after some research looking for the fastest and lightest plugin to resolve this problem, we solved this first optimization with Lazy Load by WP Rocket. It is currently active on over 20,000 installs with a 4 out of 5-star rating. The big advantage of this plugin is, that it weighs less than 10 KB. There are no options to configure, simply install the plugin and lazy loading will simply work.

NOTE: after the Lazy Load install, please go to your WordPress admin settings and select the lazy load of images.

The lazy load moved us from 66 to 70 in audit performance score.

Add the Preconnect tag

Establishing connections often involves significant time in slow networks, particularly when it comes to secure connections, as it may involve DNS lookups, redirects, and several round trips to the final server that handles the user’s request. Informing the browser of our intention is as simple as adding a “preconnect” link tag to our page:

We must add the “preconnect” in our head tag. To do this modifying headers we have to edit, in our child theme dir, the header.php

<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://stats.g.doubleclick.net">

Eliminate render-blocking resources

It’s common to find in our Opportunities e “dance” between “Defer unused CSS” and “Eliminate render-blocking resources”. Now it’s time to reduce the javascript.

Removing videos and its blocking js code:

One big decision we took was to remove the video embeds from our external video service Wistia. We observed in Audits that Wistia CSS and javascript where blocking the rendering execution. Even the thumbnails served weren’t at all optimized.

We replaced video embeds with simple infographic explanations.

Another cleanup we did was to remove jquery migrate (our chrome console log gave us the clue showing a “JQMIGRATE: Migrate is installed, version 1.4.1″)

jQuery Migrate simplifies the process of moving older jQuery code to a newer jQuery versions by identifying deprecated features. In our case, jQuery Migrate is not needed, we are running updated plugins and themes. Let’s try our site without it.

Removing jquery migrate:

Let’s add this code to our functions.php

//Remove JQuery migrate
function remove_jquery_migrate( $scripts ) {
    if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {
        $script = $scripts->registered['jquery'];
 
        if ( $script->deps ) { // Check whether the script has any dependencies
            $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
        }
    }
}
 
add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

This piece of code, when not in wp-admin, checks if we register jquery then we remove jquery-migrate from the dependencies array.

Always check all your site pages and corners if they are functioning as expected. In our case everything was fine!.

And an Audit lighthouse re-run gave us our first green 89 Score in performance:

Removing videos and jquery migrate increase Performance to 89

Serving our google fonts and tuning with font-display:

Continuing our task to reduce blocking. Google audit suggests setting font-display fallback.

The new font-display descriptor for @font-face lets developers decide how their web fonts will render (or fallback), depending on how long it takes for them to load. The idea is to not block the rendering process so font-face is rendered with a fallback at first if it’s not loaded, but the font is swapped as soon as it loads.

Another improvement we can do is to serve the google fonts from our server. Our wetopi servers are ultrafast and have a better cache policy.

We will disable all the google fonts in our theme admin panel and download the files.

Here is a tip. Google fonts site does not provide all the font formats! we want at least woff and woff2. We found this project online: http://google-webfonts-helper A Hassle-Free Way to Self-Host Google Fonts. @majodev Thanks!

This is how we self-host our google fonts:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: fallback;
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: fallback;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Roboto'), local('Roboto-Regular'),
       url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
self-hosting google fonts let you increase performance
self-host google fonts to increase performance

Introducing Cache and secure connections with https

In this performance step, we will enable our cache plugin WP Super Cache and enable the Letsencrypt certificate to serve pages with HTTPS.

The only downside is that HTTP/2 requires a secured connection. This means adding more time to dealing with HTTPS and Secure Certificates.

But we are confident in wetopi infrastructure, servers are finely tuned and use the latest protocol HTTP/2 with TLS 1.3

HTTPS increases Google Audit Performance

The result? : Awesomeness 2.0!

Thanks to HTTPS, we jumped to the “green scores” in performance and also in Best Practices. 

At this point the Opportunities list is short:

Opportunities to speed up application Performance and increase Google Lighthouse Score

The first point still points to the CSS and javascript. We decided to spend more time finding more unused styles to reduce the size. While working on the cleanup, what we discovered was that we were loading javascript code of plugins that were not required on the home page.

To be more “selective” in “how” and “when” plugin assets are loaded we can take two directions:

  1. Use a plugin capable of taking control over javascript and CSS asset loading: e.g. W3 Total Cache. It gives us the control to use the “defer” and “prefetch” techniques.
  2. Code in our functions.php the logic to load plugins only when required. Or find a plugin to help in this selection.

We bet on the last option. There is a downside though, the downside is that we can make useless the browser cache system if we are aggressive in plugin combinations. We can potentially end up ruining the browser cache strategy by having a different concatenated javascript and style CSS file in each and every site page.

Splitting plugins into two blocks was our approach: a plugin combination for our corporate site pages and a second one for our blog posts.

We installed the “Plugin Load Filter” to implement this approach. This plugin lets you enable/disable plugins depending on lots of criteria. Be careful, don’t be crazy!

In short, it gives you a config page with 2 tabs. On the “Filter registration” tab you decide the plugins you want to control. Then for those plugins you want to manage based on “Page Type,” you can switch to the second tab “Page Filter Activations”. This is where you can go crazy. In our case we were “binary”, and we restricted ourselves to the “Page” or “Post” filter options:

Plugin load filter used to Increase Score in Google Lighthouse audit

This has reduced the size of our main javascript giving us a decent 97 in performance and a decent First Full Content Paint time of 1.6 secs in 3G networks:

97 in performance and First Content Paint of 1.6 secs

We are satisfied with the performance score, lets’s go to the next Lighthouse audit section.

Mastering Progressive Web App score

Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, …

https://en.wikipedia.org/wiki/Progressive_web_applications

Not every web page needs this offline functionality. In our case, our customers usually go to our web page to click the login button. If our website goes down, they will lose the path to the wetopi hosting panel. Sounds good to add this offline functionality to our customers. 

WordPress plugin ecosystem is like Doraemon’s pocket: There will always be a plugin to solve your problem.

Searching for  Progressive Web App we found SuperPWA.

This plugin is awesome. We installed it and configured it by simply uploading our app icons. In less than an hour, our PWA  was up and running.

Super Progressive Web Apps configuration page
Super PWA configuration page.

The Audit result was an impressive 100!

Thanks to Super PWA for creating this awesome plugin and making it available to the WordPress community.

At that point, we were green and reached the 100 Score in all sections. The accessibility and SEO list of fixes were easy to resolve: especially the main images without alt descriptions and buttons without accessible names.

We achieved almost 100% in the Google Lighthouse audit

We are satisfied with the overall result for the amount of time invested. Moving Accessibility-score and Best Practices Score to the 100 would mean a change in design and Theme. 

Consider not using PWA

PWA optimizes your WordPress site for Google’s SERP spiders. This is a “must-have” if the Page Load Time of your site is a problem.

When we moved our wetopi site to the last “Twenty Twenty-Two” full site editing Theme, the Page Load times were so low that we decided to remove the PWA functionality. In the end, one less plugin also means more speed.

Extra Bonus

Here are a couple of considerations to keep in mind when it comes to WordPress performance.

Reduce plugin pressure.

Adding plugins means adding load to our server and to our end-user browser.

Do not install plugins you strictly do not need.

Especially those plugins with impact in the front end. Plugins add load to our website. Plugins add unnecessary style sheets and javascript which leads to a constant need to load each time the page is loaded.

Build on top of light themes.

In our next website “refactoring” we’ll take special attention to the theme selection. The Theme is a crucial piece of a WordPress site. Everything depends on it.

In our last web restyling, we decided to embrace the Full Site Editing feature of the last WordPress Core generation. The result was impressive.

We installed the “Twenty Twenty-Two” and updated all our media to SVG and WebP. With this simple change, we jumped immediately to 99~100 in the Audit results.

I hope we have enlightened you on how you can increase your website speed using the Audits panel of Chrome DevTools aka Lighthouse.

If you plan to optimize your own site, count on us.

With wetopi, you have free development servers and free migrations. Let’s migrate a copy of your production site and start with the Google Audit Optimization now!

We are techies passionate about WordPress. With wetopi, a Managed WordPress Hosting, we want to minimize the friction that every professional faces when working and hosting WordPress projects.

Not a wetopi user?

Free full performance servers for your development and test.
No credit card required.

See how Wetopi stacks up against your current hosting

Migrating sites to us is free and completely effortless on your part.

No hidden small text.
No commitments.
No credit card.

Try before you buy.