Speed up of your web pages with Google Lighthouse

Pragmatic Nerdz
Feb 26, 2021 - 6 Minutes

Why you should care about the speed of your pages? Since 2018, Google is using the page mobile site speed for ranking its search results. Page speed is also important to user experience, pages with a longer load time tend to have higher bounce rates and lower average time on page.

Google Lighthouse is a tool that helps developers to identify performance issues on their pages,  and provides recommendations to address those issues. This article will show you how to leverage Lighthouse for improving your pages speed.

Installing Lighthouse

  1. Download and Install Google Chrome for Desktop.
  2. Open Google Chrome.
  3. Install the Lighthouse Chrome Extension.

Running Lighthouse

Lighthouse in Chrome Dev Tool
Lighthouse in Chrome Dev Tool
  1. Open Chrome in incognito mode. It's important to run Lighthouse in incognito mode, to prevent that any data stored locally by Chrome to impact the results of the audit.
  2. Change the page to mobile view. This is important because Google uses mobile page speed for ranking search results. 
  3. Open the Lighthouse in the Google Dev Tools
  4. Enter the URL you want to audit.
  5. For the purpose of this article I select the only category Performance and the device Mobile.
  6. Then click on the button Generate Report.

The Results

Lighthouse Audit
Lighthouse Audit

After clicking on the button Generate Report, Lighthouse performs the audit and assign a score of 66/100.  This shows there is room for improvement. 

Fixing the issues

Step 1: Fix the images

Lighthouse suggestions
Lighthouse suggestions

The wort issue reported by Lighthouse is related images in the page. Since bloggers are uploading high quality images, they are quite heavy; most of them are 1200x800px with a size of up to 4Mb!

Since 90% of the page visits are from mobile devices, we are going to resize all images to a maximum of 400px wide. For that, we've integrated ImageKit.io to resize all images on the fly.  Ex: The large image  https://s3.amazonaws.com/prod-wutsi/upload/2021/02/05/23/afee283d-7399-49fb-9ebe-83c76195edcf.jpg having 4.3Mb, is converted by ImageKit.io to https://ik.imagekit.io/toifevuwjn/upload/2021/02/05/23/tr:w-400,h-252,fo-auto/afee283d-7399-49fb-9ebe-83c76195edcf.jpg at 400x252px and 19Kb! A compression ratio of 99%!

After resizing all images, the lighthouse score jumped from 66 to 75!

Lighthouse score after image opitmization
Lighthouse score after image opitmization

Step 2: Fix the render blocking resources

Next issue to resolve are the render-blocking resources. Render blocking resources are static files, such as fonts, HTML, CSS, and JavaScript, that are vital to the process of rendering a web page. When the browser encounters a render blocking resource, it stops downloading the rest of the resources until these critical files are processed. The more render blocking resource you have, to slower your page will be.

Here are the render blocking resources of the pages: Bootstrap, Font Awesome, jQuery and the Google Fonts. 

Fixing render blocking stylesheets

Font Awesome provide great alternate images for website, but is slow to download. We are downloading a 90Kb file, just to display social network images.

The strategy to fix Font Awesome:

  1. Add in the <head> the styles of the social network images used by the page, so that those images will be available right away to the browser, without waiting for any css file to be downloaded and processed.
  2. Download the Font Awesome css file asynchronously, so that it no longer blocs the rendering of the page

The HTML before:

<link href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" rel="stylesheet">

The HTML after optimizing Font Awesome:

<head>
  ...
  <script type="text/css">
    .fa, .fab, .fal, .far, .fas {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1
    }
    .fa-facebook:before {content: "\f09a"}
    .fa-linkedin:before {content: "\f08c"}
    .fa-youtube:before {content: "\f167"}
    .fa-twitter:before {content: "\f099"}
    .fa-rss:before {color: #ee802f}
  </script>
  <link as="style" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>
  <noscript>
    <link href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" rel="stylesheet">
  </noscript>

Apply the same recipe for the stylesheet of Bootstrap. Use the Chrome Coverage tool to identify the Bootstrap css needed by the page, and add them in the head section.

Receive my Stories your e-mail inbox as soon as I publish them.
Subscribe to my Blog 
<head>
  ....
  <script type="text/css">
    .fa, .fab, .fal, .far, .fas {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1
    }
    .fa-facebook:before {content: "\f09a"}
    .fa-linkedin:before {content: "\f08c"}
    .fa-youtube:before {content: "\f167"}
    .fa-twitter:before {content: "\f099"}
    .fa-rss:before {color: #ee802f}

    .... /* Bootstrap css definitions */
  </script>
  <link as="style" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>

  <link as="style" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>

  <noscript>
    <link href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  </noscript>
  ...
</head>

After optimizing the stylesheets, the score increased from 75 to 78.

Lighthouse score after stylesheet optimization
Lighthouse score after stylesheet optimization

Fixing render blocking fonts

The site is using the Google Fonts Lora and PT Sans.

With a declaration like this:

<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet"/>
  1. The browser will download the font information from https://fonts.googleapis.com/css2?family=Lora&display=swap
  2. After, it will download the font needed for rendering the text (usually .woff or .woff2 files) that are located in the domain https://fonts.gstatic.com

To optimize the loading of the font, we are going to:

  1. Pre-connect to the domain https://fonts.gstatic.com to speed up the connection to this domain.
  2. Use <link rel='preload' > to give a hint to the browser download the resource as soon as possible
  3. Download the fonts asynchronously to unblock the rendering of the page.

The HTML before:

<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"/>

The HTML after optimizing the font download:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Lora&display=swap">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="https://fonts.googleapis.com/css2?family=Lora&display=swap">

<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap">

<noscript>
  <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"/>
</noscript>

After applying the recipe to all the Google Fonts and re-running Lighthouse, the score increased from 78 to 79.

Lighthouse score after font loading optimization
Lighthouse score after font loading optimization

Fix render blocking scripts

Last issue to resolve are the Bootstrap javascripts: bootstrap.js,jquery.js and popper.js. 

  1. Download bootstrap scripts (bootstrap.js and popper.js) asynchronously so that they no longer block the rendering on the page
  2. Do not change the download strategy of jquery.js because it's a required by bootstrap.js
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script async src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Then the lighthouse score jumped to 82.

Lighthouse score after javascript optimization
Lighthouse score after javascript optimization

Take away from this exercise:

  1. Run lighthouse in Incognito mode for mobile.
  2. Reduce your image size to optimize your network usage.
  3. Download asynchronously fonts, javascript and stylesheet to eliminate rendering blocking resource.

The next round of optimization will focus on increasing the lighthouse score to 90+. That will be the subject of a future article.

Defer non-critical CSS

Learn how to defer non-critical CSS with the goal of optimizing the Critical Rendering Path, and improving FCP (First Contentful Paint).

web.dev

Defer non-critical CSS

Asynchronous Google Fonts For Page Speed

Eliminate the render blocking effect of Google Fonts by loading the font CSS asynchronously, plus a page speed boost from preload and preconnect resource hints.

pagespeedchecklist.com

Asynchronous Google Fonts For Page Speed

Eliminate the render blocking effect of Google Fonts by loading the font CSS asynchronously, plus a page speed boost from preload and preconnect resource hints.

pagespeedchecklist.com
Performance
Lighthouse
Page Speed