Whatever the purpose of a website, its long loading times will effectively deter visitors. Fast page loading and performance (site performance) are key to building a positive web user experience. One possible reason why a site loads slowly is the size of the page. Or, more specifically, the size of all the elements placed on it and the amount of content. Lots of images, videos and other media can slow down a site and contribute to frustrated visitors leaving it in favour of competitors. Fortunately, there is a solution that does not require stripping content. It is lazy loading. It improves the performance of your site and even has a beneficial effect on SEO! Find out more about him.
What is lazy loading?
Lazy loading, or on-demand loading, is an optimisation technique that aims to load key resources at a given time. The browser does not download all of them from the server at once, only the priority ones to be visible to the user. The lazy loading technique is mainly used for graphics and images on a page. These are usually the largest in size. A website with implemented lazy loading only loads the required content at the beginning and does not load the rest until the user needs it.
This process is described as 'lazy' because it involves delaying loading until it is necessary. In the same way that some people put off tasks until there is no more escape from action. However, in this case, laziness is a great thing!
How do you know this technique?
This may be the first time you have heard the term "lazy loading". However, I can assure you that you have encountered this technique many times. The most common example is Google Graphics. If I search for manuli, Google will present me with a dozen or so images on a single results page. Loading all these images on the page at once makes no sense. Why? Because I probably won't scroll very far before I find an image I like and leave. This is why lazy loading is implemented in Google Graphics. For hidden content, Google loads surrogate images instead of the real ones. These load for a much shorter time, and the actual images only load quickly when I scroll down.
What are the advantages of lazy charging?
The lazy loading technique offers many advantages. The main ones are:
- speeding up the initial loading time of web pages by reducing their initial size needed to load
- improved user experience. This is directly linked to a reduction in waiting times for resources to load)
- reduced network load by avoiding the transfer of unnecessary data
Lazy loading and SEO
The loading speed of a website is one of the most important ranking factors. The issue therefore seems simple. Lazy loading has a positive effect on SEO because, with this technique, site visitors do not have to wait long to see the resources they are interested in. However, there have been rumours in the past that search engine robots prefer sites whose pure code HTML are able to scrawl correctly, and lazy loading is an additional script, causing indexing problems. Fortunately, bots are such specialised mechanisms, and lazy loading is already such a common technique, that its correct implementation has no negative impact on the positioning.
Implementation of lazy loading
You will certainly be interested to know what the implementation of lazy loading looks like from a technical point of view. In a nutshell It involves the implementation of suitable JavaScript code that tracks where on the page the visitor is located. With this information, so-called above-the-fold content can be displayed to the user. These are the ones that can be seen without having to scroll down the website.
If you decide on lazy loading and know the basics of working with code, familiarise yourself with the Google's official guidelineshow to implement them. The three methods proposed by the Mountain View giant are:
IntersectionObserver API and polyfill
native lazy loading of images and iframes
open sourcelibraries supporting data loading
If your sites are based on WordPress, you can also use the appropriate plug-in such as Lazy Loader.
Lazy loading versus eager loading - what is the difference?
Downloading data for display can occur not only by lazy loading. The reverse process to lazy loading is the eager loading. This is downloading all data immediately when the page or application screen is displayed. When does this technique apply? When a lot of resources need to load in the background for the site to function properly.
It is worth noting at this point that lazy loading is a useful feature, but should not be used when it is not needed. If the page is short and/or contains mainly 'light' content (i.e. dominated by text with minimal images/videos), it is best to avoid over-combining and implementing additional scripting. Such actions can be counterproductive.
Lazy doesn't always mean bad
Lazy loading is a commonly used solution when creating and optimising websites. It allows you to reduce the loading time of your website and thus make it more user-friendly. If you choose lazy loading, test your site with the new feature before launching it. Any errors can prevent hidden content from being displayed at all, and no content is even worse than slow-loading content. Also remember that lazy loading is not a necessary optimisation measure. If your pages are not rich in large resources, you can skip this step.
English 
Polish 
German