Google PageSpeed. Score 100. Lazy loading

Google tries to make the web faster|safer|better?! Ine of the best tools that are widely used is Google PageSpeed. It can provide us some reasonable issues related to site performance and usability. You definitely should check it. I have tested it and here is my short story about getting amazing results.

I thought that it is unreal to reach score 100. But, after a few hours of removing and rewriting js/css I get it.

Google page speed 100

I’m using Hugo to build my blog. It is simple and very fast static site generator. My blog theme is based on Jane with some modifications. Actually, I cut some stuff that was not relevant for me.

Drop Jquery

Yep, in the theme, I found Jquery library. Several years ago it was very popular, and developers get a bad habit related to this lib.

When I click on the button - I need to scroll to the top of the page. Install Jquery.

Every small logic can be implemented with or without Jquery. Unfortunately, developers do not want to deal with low-level JS API and just load tons of JS to do simple things.

I just removed all unnecessary things and stared to use pure JS. Here is a cool story that I recommend you to read: Removing jQuery from GitHub.com frontend

Optimize Disqus

If you have some comment system installed on the site, there is a change that it is not optimized. Disqus is loaded every time, even if user is on the top of the page and reading article. But there is a simple solution on how to fix this issue.

Intersection Observer API - when user scrolls down to the form, and it should be visible - you can load it. So it is like Lazy Loading.
Simple code that can help you to get a few points in the page speed. Place this HTML code in the place where you want to see comments:

1
2
3
4
5
6

<div id="disqus_thread"
     data-page-url="//example.com/you-page-url"
     data-script-url="//{DisqusShortname}.disqus.com/embed.js"
>
  Comments 
</div>

JS code that you need:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// https://usefulangle.com/post/251/disqus-comments-improve-page-load-speed
;(function (window, document) {
  'use strict';
  window.disqusLoader = function (selector) {
    var element = document.querySelector(selector);
    if(!element){
      return;
    }
    var disqus_observer = new IntersectionObserver(function(entries) {
      // comments section reached
      // start loading Disqus now
      if(entries[0].isIntersecting) {
        // noinspection JSUnusedLocalSymbols
        var disqus_config = function () {
          // noinspection JSUnresolvedVariable
          this.page.url = element.dataset.pageUrl;
        };
        (function() {
          var d = document, s = d.createElement('script');
          s.src = element.dataset.scriptUrl;
          // noinspection JSCheckFunctionSignatures
          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
        // once executed, stop observing
        disqus_observer.disconnect();
      }
    }, { threshold: [0] });
    disqus_observer.observe(document.querySelector("#disqus_thread"));
  };
}(window, document));

30 lines of JS can make internet better. Comments will be loaded only when div #disqus_thread becomes visible. You can add more rules, for example if the user sees the bottom of the article, or the last paragraph - then load Disqus comments. The code will be more complicated, but UX will be better.

Youtube lazy loader

Yes, inserting youtube iframe into the page also slows down the page loading. I do not like that. So I used the same approach as with Disqus. Lazy Loading :heart: The main difference here is a placeholder. I show an image to the user in the places where Youtube should be but is not loaded:

Youtube Logo. Gray

Here is my main load function, that injects youtube iframe to the correct place

1
2
3
4
5
6
7
8
9

function load (element) {
    if (!element.dataset.loaded) {
      element.dataset.loaded = true
      element.innerHTML = '<iframe ' +
        'allowfullscreen ' +
        'style="width:' + element.clientWidth + 'px;height:' + element.clientHeight + 'px" ' +
        'src="' + element.dataset.url + '"></iframe>';
    }
}

In Jquery you can deal with data attributes via data element. In the pure js world, we can use element.dataset property to get all data-* attributes. If you do not like the placeholder - you can generate video thumbnail and use it.

Caching

You need to enable caching for your assets. Do not know what you are using Apache or Nginx, but you should definitely configure cache control. Just google, it is one of the simplest steps.

Drop everything

If you do not use something - you should remove it from the page. Any js or css files should be dropped. Even more, if you have some selectors in CSS that are not used - you should remove them.

After each step, you should take measurements and check how it helps. Google PageSpeed can show some general information, and you can use it to make your site better.

Let’s Make the Web Faster ;)