Skillbox: How To Make Google Fall In Love With Your Website: Optimizing The Loading Speed Of The Pages

Google’s research showed that when a loading speed of a page grows from 1 to 3 seconds, the possibility of a user leaving a website immediately increases by 32%. If a loading speed grows from 1 to 5 seconds, this possibility increases by 90%. By the way, it takes nearly 15 seconds on average for all the pages to load. It’s too slow, especially knowing that 53% of users leave pages that take more than three seconds to load. Lucky for us, this allows us to stand out among our competitors.

What Exactly Is Lazy Loading?

A webpage could contain many images, and often it critically affects the loading speed of the pages’ content. However, we don’t always have an opportunity to reduce the number of images. If you want to preserve all your media content and increase the users’ behavior at the same time, a deferred (lazy) loading function might come in handy.

x16004611122019_27e9aa5bdf801f94f7728fe14d1ac0.width-1110.png.pagespeed.ic.7zh2cKfj_x.png Page performance before the lazy loading mechanism was implemented.

Lazy loading is a pattern that deferred the loading of several page elements, displaying them only when a user scrolls a page down to see them. This means that when a user opens a page, only its structure, texts, and styles load. The images and the other content located below the first scroll screen, load later. When we upload the images 'lazily ', we reduce the initial loading speed of a page, the page’s initial size, and the use of computer system resources. This also positively affects the page performance.

How To Implement The Lazy Loading Mechanism

There are a few ways to implement lazy loading, according to Google’s recommendations.

Event Handling (for instance, scroll or resize)

This option works if browsers’ compatibility is critically important to you. However, such a handler might experience some potential performance problems due to the repeated processing delay calls.

Intersection Observer API

This tool is simpler to use and read than the event handling code. In this case, all the developers have to do is to register it for element monitoring instead of writing code for their visibility detection. Its only flaw is that all browsers don’t support it.

Chrome ver. 4-57, Mozilla Firefox ver. 2-54, all IE’s versions, Safari ver. 3.1-11.1, Microsoft Edge ver. 12-15 and Opera ver. 10.1-44 either don’t support API or support only some of its functions.

Delayed Image Loading In CSS

This tool’s work is based on JavaScript. JavaScript identifies when an element appears in a viewing area and assigns a class that uses stylization generating a background image. In this case, an image uploads only when it’s necessary. Unlike the <img> tags that load regardless of their visibility, the CSS image load requires a lot of suggestions.

Ready-made Solutions

If you don’t want to busy yourself with the technical implementation of a lazy loading function, there are lots of ready-made libraries for you to use. Many of these libraries use markup templates similar to the ones described above. Some of the best ready-made solutions are lazysizes, lozad.js, Blazy, yall.js.

What To Do Next

We have to make sure that Google is capable of indexing the content that requires lazy loading. Google Guide contains recommendations on how to do that.

You can use the Puppeteer script for local testing. After you launch this script, please take a close look at the screenshots it creates. If these screenshots contain all the necessary content, this means everything’s fine. You can also check if everything is in its place with the help of the URL Checker Tool in Search Console.

x16004611122019_d58f50d1222620cd1cfe95da3a9122.width-1110.png.pagespeed.ic.WUAuCFwY_-.png Page performance after the lazy loading mechanism was implemented.
Другие интересные статьи