Lazy Loading - What's Behind It?

Lazy Loading strategies may seem like a good idea at first, as they can significantly improve the performance of websites. However, especially with high access volumes, Lazy Loading strategies can also have disadvantages. We explain in detail how Lazy Loading strategies can be implemented and what potential drawbacks may outweigh the benefits in our article.

Performance Benefits of Lazy Loading

The loading time of a website should be as short as possible - this brings some crucial benefits. Lazy Loading is a strategy that can help reduce the loading time of websites.

However, in addition to simply optimising the loading times of a website, it is always important to keep an eye on the Server Response Time (SRT) and optimise it as much as possible for overall performance. Ensuring an adequate cache size and using fast SSD or NVMe storage media should also be ensured beforehand.

There are numerous benefits to short loading times:

User Experience, Revenue, and Customer Retention

The loading time of a website plays a crucial role in user experience. Pages with relatively long loading times often lead to impatient users clicking away to the next search result. As a visitor to your own website, losing these users means sabotaging your own visitor numbers and conversion rate with poor performance.

Improved Ranking

At the same time, page speed is also a significant ranking factor: Google aims to provide users with a satisfying experience in their search for information - similar to user experience, pages with particularly short loading times often enjoy significant ranking advantages. Mobile and desktop loading times are always measured separately. Improving loading times through software development often leads to a noticeable improvement in ranking.

Lower Advertising Costs

In addition to the ranking benefits, loading time also plays an important role in your own Google Ads advertising: long loading times have a negative impact on the quality score in Google Ads - and thus implicitly on the cost per click. For pages with long loading times, Google Ads advertising for websites may therefore be significantly more expensive. It is also important to consider that users are just as impatient when clicking on ad links as they are when opening websites from SERPs - they click away after a few seconds of loading time and do not visit the site. The cost per click thus leads to a significantly lower number of visitors - essentially wasting your advertising budget carelessly. Through tailored software development and, if necessary, the use of lazy loading strategies, a lot of money can often be saved and advertising efficiency improved.

Faster Crawling

Google assigns a specific "crawling budget" to each domain. The bot only crawls the site during this allocated time period. The slower the loading time, the fewer pages are crawled overall. This also means that it takes significantly longer for all subpages or changes to appear in the Google index.

Lazy Loading Strategies to Reduce Loading Times

In essence, lazy loading aims to increase pagespeed and server speed, thus reducing the duration of loading time. This is achieved by only loading objects on the page that are not necessarily needed (e.g. images and graphics) when the user is likely to need them. Objects that are "below the fold" - i.e. outside the visible area for the user - are only loaded when the user scrolls there. Other content, such as dynamic content within a static webpage, is only loaded when the user is likely to want to see it.

Lazy Loading, unlike Eager Load, allows only the data that is needed to be loaded, and only when it is needed. This results in significantly lower data volumes being loaded for many visitors, leading to improved performance. Lazy Loading effectively avoids loading more and more data, even leading to extensive data cascades.

Options for Implementing Lazy Loading

In the field of software development, more and more technical solutions have been created in recent years to implement Lazy Loading strategies. In some cases, existing options can be individually adapted or extended through custom software development.

Widely known and well-established options include:

• Defining objects by adding the "eager" or "auto" loading attributes (native Lazy Loading, especially for images and iframes)
• Using a specific Wordpress plugin
• Using the IntersectionObserver (e.g. for animations)
• Loading content only upon initialization (retrieval or modification)
  Using virtual proxies (an object that looks the same acts as a "placeholder" in the right place, data loading is only initialized when the object is used)
• Using Ghosts (similar to virtual proxy but already usable without loading data)
• Value Holder (placeholder object manages data retrieval for data objects)

Another important strategy is Code-Splitting, which can be used for JavaScript, CSS, and HTML. The code is split into smaller parts, with only the essential parts being loaded initially, and the rest loaded on demand afterwards.

Disadvantages of Lazy Loading Strategies

As mentioned earlier, when implementing Lazy Loading strategies, some potential disadvantages must also be considered, which may not always be fully or only partially offset by software development.

Primary Content is Not Indexed by Google

As "Primary Content" refers to those contents that are only displayed when a user takes action - such as additional items at the end of a list that are only loaded when the user has scrolled that far.

Such content cannot be crawled by the Googlebot in principle - so they are not indexed. This can potentially lead to significant issues with the correct indexing of websites.

Image loading times are often insufficiently reduced

To load images using lazy loading strategies, a corresponding (often quite large) script must first be loaded to deliver the data to the lazy load. In some cases, loading the script may take longer than loading the images themselves would take. A real advantage for loading times often only arises when many very large images need to be loaded.

Conversely, when dealing with a large number of images and HD videos, it is often more sensible to consider using a Content Delivery Network (CDN).

Potential issues with website construction and user rejection

Even with careful software development, problems with website construction can arise from the use of lazy loading. Users often feel disturbed by lazy loading functionalities - and may then leave such websites or be much more hesitant when making a purchase or evaluating the website. This, in turn, has negative consequences for revenue, customer retention (repeat purchases), bounce rate, or website recommendations.

Another issue arises especially with JavaScript integration when the user's browser settings do not allow scripts. In this case, there is often a negative user experience.

In addition, with an unfavourable page structure, backtracking is often not possible.

Restricted functionality of tracking pixels

It must also be considered that without additional measures, all tracking pixels are only loaded when they come into the visible area. However, this can be avoided through appropriate countermeasures (eager attribute or class definition and exclusion in JavaScript) during software development.

If this is not done, performance metrics (clicks, conversions, etc.) cannot be accurately recorded.

Last Issue

Lazy loading leads, on the one hand, to a significant complication of the code and the integration of sometimes large scripts and external libraries - which in turn can extend loading times.

It must be considered that Lazy Load is usually successful in reducing the number of queries - however, this can sometimes lead to data sources being confronted with a large number of individual queries. This is often a major issue, especially for databases, as their functionality is generally optimised to provide comprehensive results with few queries. A high number of individual queries can put a significant strain on databases, especially with high levels of traffic (the so-called SELECT N+1 problem). Additionally, the network structure is often excessively burdened by high numbers of individual queries.

This aspect must be taken into account in software development and when planning Lazy Loading strategies to avoid overloading data sources and consequently causing further delays in loading times (e.g. the use of a Load Balancer).

Image credit: Gerd Altmann on Pixabay