Lazy loading is a website optimization technique that reduces bandwidth and improves user experience. Also referred to as on-demand loading, the technique tells a user’s browser to only load assets currently in the view frame.
As a user moves through a page, assets load as the relevant page sections becomes visible. A common implementation of lazy loading is the infinite scroll feature. This is used in many social media platforms.
In this post, you’ll learn about the advantages of lazy loading, and how to leverage this technique to avoid buffer time and content shifts.
Lazy loading advantages
Lazy loading helps ensure that page assets are only loaded when needed. If a user never views a specific portion of a page, there is no reason to load that section.
By minimally loading your media, your site gains two advantages:
1. Improved performance
Site performance is determined by how fast pages load and how quickly content becomes accessible to users. Lazy loading ensures that bandwidth priority is given to media that users try to view immediately. When a user begins using a site without waiting for it to load entirely, the experience is often better.
2. Reduced cost
Every asset you serve to users requires bandwidth along with associated costs. Therefore, restricting serving assets to those your visitors actually use reduces bandwidth freeing it for other visitors. This decreases overall usage costs.
Three tips for faster & easier lazy loading
Though beneficial, a lazy load isn’t always easy to implement. Below we provide tips to tackle barriers so that you can implement the technique.
For a manual process, you’ll need to apply these tips on your own. If you’re using a file uploader, check out the official documentation for best practices and hacks.
1. Avoid buffer time
While lazy loading can reduce page load times, if users quickly scroll through pages, they still may wait for media to load. As a user scrolls, information is sent back to the web server regarding content in viewing range. As content becomes visible, it is loaded. However, this communication isn’t instantaneous — it takes time to trigger the media. A user scrolling faster than this communication will have to wait for the media buffer before viewing.
To avoid buffer time we suggest these remedies:
Solution – Low-resolution placeholders
Loading low-resolution placeholders when a user enters a site prevents the user from seeing media placeholders and provides an idea of content as it loads. Unfortunately, this solution negates some potential bandwidth savings.
Solution – Intersection observer API calls
Extending the margins of your Intersection Observer API calls can also help with buffer time issues. This API enables you to define what content is loaded and when based on the current viewable area. Rather than only loading assets directly within the viewing area, you extend the area margin. This includes the media right below your visible area, causing it to load before your user scrolls. This reduces the chance that a user scrolls faster than the media loads.
To implement this, include the rootMargin parameter in your observer. A margin of around 500px should be sufficient. You should also be careful how you set your threshold. You want to keep this value low to reduce chances of a user waiting with a placeholder.
2. Avoid content shifts
Lazy loading can lead to content shifting if you do not use placeholders to reserve page areas. Without placeholders, your content will fill the available space even where media elements are supposed to be. This becomes annoying for users since text or other elements relocate when media loads.
Solution – specify media dimensions
You can avoid content shifts by specifying the dimensions of your media in its container. Specifying dimensions tells a user’s browser to reserve that space for the media element. This forces content to display as it would when all elements loads, even for lazy loads.
3. Avoid lazy load abuse
Though a powerful tool, lazy loading can be abused. For example, if you lazy load all media on your page, nothing will load until the JavaScript executes. Depending on site design, this may not be until after your HTML and CSS. This means users won’t see your media until all content not defined by lazy loading is served.
Lazy loading with short page heights or minimal media creates additional issues. In these cases, the weight (in loading time) of the JavaScript needed to implement lazy loading offsets any potential performance benefits.
Solution – selective use
To avoid these issues, make sure that you use lazy loading selectively. Reserve lazy loading for elements that are only viewable after a user scrolls or clicks a menu. Keep in mind, that sites with responsive design have different parameters regarding what should be visible immediately and what can be lazy-loaded.
Conclusion
Hopefully, this article helped you understand what lazy loading is and how to leverage it to improve loading performance and costs. You can find more information about lazy loading in this guide. If you’re a React Native developer, you might find this comprehensive tutorial useful. Be sure to experiment with different techniques and tooling until you find the process that works best for you.
Also, to ensure that your overall code quality is high and follows best practices check out Codacy’s static analysis tool to automate your code review.
——————–
About the author
Gilad David Maayan is a technology writer who has worked with over 150 technology companies including SAP, Samsung NEXT, NetApp and Imperva, producing technical and thought leadership content that elucidates technical solutions for developers and IT leadership.
