Tips To Get a 90% Lighthouse Performance Score

Google lighthouse performance score is very important for SEO. lots of people house in the SEO performance increased by optimising the page speed. But when we are looking at our own website we can see lots of third party scripts, what can we do to improve Google lighthouse performance score?

Recently we have tried to optimise one of our own websites by following the following tips where how to get 100% score for desktop and more than 90% score for mobile.

Reduce the requests number on page

Any HTTP request sending from user’s browser to your web server contributing to the slower performance. So we have to try to reduce the request number as much as possible. In our test, we have reduced the total request from 120 to 40.

Lazy load the off-screen images

We don't want to harm user experience to see blank images. But for a normal webpage, we can always lazy load the off-screen images. Displaying images once a user scrolling to the images' position.

Javascript code for offloading off-screen images:

<script>
function lzload() {
  var imgDefer = document.getElementsByTagName('img');
  for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute('data-src')) {
      var boundingClientRect = imgDefer[i].getBoundingClientRect();
      if(boundingClientRect.top < window.innerHeight) {
        imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
        imgDefer[i].removeAttribute("data-src");
      }
    }
  }
}

window.addEventListener('scroll', lzload);
window.addEventListener('load', lzload);
window.addEventListener('resize', lzload);

</script>

Then you have to change image src to be data-src which tells the browser not load the image URL until user started to scroll to the image's position.

Offload third party javascript tags

Some javascript tags are essential for the first screen, but we can offload the other JavaScript once a user started to scroll.

We can do so to the scripts like a Facebook like button or the other javascript trackers.

Javascript code to offload thrid party tags until user scrolling:

window.addEventListener(
  'scroll',
  function () {
    setTimeout(function () {
      ;(function () {
        var st = document.createElement('script')
        st.type = 'text/javascript'
        st.async = true
        st.src = 'MY_URL'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(st, s)
      })()
    }, 100)
  },
  { once: true }
)

Remove useless CSS and Javascripts

Nowadays people like to use a CSS framework like bootstrap to build a website. This massively reduced the development time. But one problem there are lots of unused codes. we can identify the unused codes with the Chrome browser.

There is a feature called coverage. You can see the not used CSS and JavaScript code marked by Chrome browser. Butter be careful to remove the unused code because the code might be used by the other pages.

Preconnect domains DNS

Reconnecting the domains used on the page, the time to request third party scripts can be reduced.

Check which domains are used by your webpages, pre-connect them at the header of your webpages.

Preconnect example:

<link rel="preconnect" href="https://example.com">

100% performance score

How people use Pubperf:

SEO Agency uses pubperf to audit the page speed of the client's website and optimise based on the recommendations. Then generate an ongoing report for your clients. They are able to show the job they have done on the website.

Digital publishers use pubperf to manage the website performance for a large number of websites. It is important to have a fast website, but it is a pain to keep running page speed report on tons of websites they own.