google-audit.jpg

Our Google Lighthouse audit secret revealed…

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

We are evolving our methods to improve our codes. Adding cache plugins and increasing the server performance. One frustration, that we can relate and have in common, is how do you benchmark it and figure out what we been 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 are able to get this done.

Lighthouse is an open source webpage audit tool from Google. It is available in developer tools as a chrome extension and a node command line module.

Lighthouse conducts audits in a few key areas. Which include performance, accessibility, best practices and Progressive Web Applications. It gives you an overview of your user experience and issues you might have with your website.

Google Lighthouse audits webpage and ranks them out of 100. A “Good” score is above 80 and a “bad end user experience” is score lower than 80.

At wetopi.com we continuously strive in improving our services, the speed of our servers and the accessibility of our website. Our obsession is for the betterment of our customers.

In this article, we will share with you how we improved our website Google Lighthouse audit score. We started with low expectations. We built wetopi on top of an old and over-bloated theme, but we ended up with an impressive result.

This is our journey

A bad google lighthouse audit score

To the glory of almost reaching the score of 100!!

How did we do it?

Before we begin,

This is our first refactoring effort focussed on Lighthouse. We decided to take the experimental approach and work our way through the report findings. The result? was spectacular! and a brilliant surprise for us.

Let’s get to the gritty details. We will reproduce the steps from an old backup of our site.

We cloned our site with wetopi cloning tool, created a new development server running in a sub-domain.

This is as easy as a simple click with wetopi:

we restore a backup to reproduce the  Increase Score process

The process

We’ll run the Audits we have in our developer’s panel with the default options:

optimizing score with Google audit with default options

Let’s do it!

How do I use google lighthouse?

In Chrome browser, right click on the webpage, select inspect, a sidebar should appear on your right side or below depending on your setting.

On the top bar where you see elements, console, choose Audits.  Scroll down through the options and click Run audits.

When we run the Audits. Google lighthouse result was a list of opportunities sorted by “Estimated Savings” in seconds. Let’s tackle the first optimization:

Please wait for a few mins for the result to appear.

Defer unused css:

Defer unused css to Optimize audit lighthouse

We were loading a huge CSS file. This is the price to pay when we use an all-purpose WordPress theme. In our case, we took the decision to clean this CSS file.

To take control of our theme CSS, in our functions.php, from our child theme, we dequeue the theme main style and replaced it by our curated one with an enqueue:

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);

This “curation” task requires a lot of time. We ended up reducing our style.css by half of it original size. Mainly stripping woocommerce, slider, and other not used css codes.

To help us identify unused blocks of CSS code, we used the Chrome developers tool Coverage

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. Since 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

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 to this plugin is, it weighs less than 10 KB. There are no options to configure, simply install the plugin and lazy loading will simply work.

NOTE: after 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.

Preconnect:

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. In order to modify 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 was 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 newer jQuery version 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 us to set 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 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 lets 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 HTTP/2 requires a secured connection. This means adding more time dealing with https and Secure Certificates.

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

HTTPS increase 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:

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

In order 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 give 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 for 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 in two blocks were our approach: a plugin combination for our corporate site pages and a second one for our blog posts.

We installed “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”, we restricted ourselves to the “Page” or “Post” filter options:

Plugin load filter used to Increase Score in Google Lighthoouse 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 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 wetopi hosting panel. Sounds good to add this offline functionality to our customers. 

WordPress plugin ecosystem is like Doraemon’s pouch: 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 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 reaching 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 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. 

Extra Bonus

Here are a couple of considerations we should take in serious account when dealing with WordPress performance.

Reduce plugin pressure.

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

Don’t install plugins you strictly don’t 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 in the theme selection. Theme is a crucial piece in a WordPress site. Everything depends on it.

I hope we have enlightened you on how you can increase the speed of your website using Google audits aka Lighthouse.

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

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

At wetopi, we want to minimize the friction that every professional face when working and hosting WordPress projects.

In short, we are just techies passionate about WordPress. With wetopi, a specialized WordPress hosting, we want to go further to offer professionals and agencies a platform to work efficiently and effectively.

Not a wetopi user?

Try now – you’ll find an efficient way to work with WordPress

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

1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 4.64 out of 5)
Loading...
Our Google Lighthouse audit secret revealed…