Lazy loading means waiting to render content on a webpage until the user or the browser needs it. Lazy loading can help speed up webpage load times.
After reading this article you will be able to:
Copy article link
Lazy loading is a technique for waiting to load certain parts of a webpage — especially images — until they are needed. Instead of loading everything all at once, known as "eager" loading, the browser does not request certain resources until the user interacts in such a way that the resources are needed. When implemented properly, lazy loading can speed up page load times.
This type of loading is called "lazy" because it encourages a web browser to procrastinate. When displaying a lazy loading webpage, a browser essentially says, "I will wait to load these images until I really need to." When displaying an eager loading webpage, a browser takes the opposite attitude: "I will take care of everything right away!" While procrastination sometimes carries negative connotations in the real world, in this case it is often more efficient.
For instance, a blog post might have an image at the top of the page and a diagram near the bottom. Someone reading the blog post might not reach the bottom of the text for several minutes, so the browser waits to load the diagram until the reader scrolls to that section. This way, the page loads more quickly at first, because the browser is loading one image instead of two.
User navigation typically is what triggers lazy loading images. In particular, when a user scrolls down on a page, that tells the browser to load the images that appear there.
When a webpage loads, the part that a user sees is called "above the fold," while the part that the user does not see yet is called "below the fold."* Images that are above the fold need to load right away, or else the user experience will be impacted. But the user does not see images below the fold until they scroll down. Thus, images below the fold can use lazy loading.
*What does "fold" mean? "Above the fold" and "below the fold" originated from newspaper layouts. Newspapers typically come folded in half horizontally, and the front half — the area above the fold — is what the reader sees first. When the term is applied to a web layout, the "fold" is the bottom of the user's screen.
One way to implement lazy loading is to use the HTML attribute loading in an image tag. Adding loading="lazy", as in the example below, tells the browser to wait to load the image until the user scrolls close to it:
<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">Web developers can also use programming frameworks to implement more sophisticated lazy loading. Angular is commonly used for this purpose. The JavaScript library React also supports lazy loading.
Cloudflare Mirage is another way to implement lazy loading. In addition to automatically resizing images, Mirage acts as a lazy loader, only loading images on demand. The Cloudflare Mirage feature is available to Cloudflare customers on the Pro and Business self-serve plans, as well as Enterprise customers.
media property added to tell the browser when to load them (learn more).loading attribute described above for images.Faster page load: All else being equal, webpages with smaller file sizes load faster. With lazy loading, a webpage starts off smaller than its full size and thus loads faster. Speedy web performance has numerous benefits, including better SEO, higher conversion rates, and an improved user experience.
No unnecessary content: Suppose a page loads multiple below-the-fold images but the user exits the page before scrolling down. In such a case, the bandwidth used to deliver the images and the browser's time spent requesting and rendering the images were essentially wasted. In contrast, lazy loading ensures that these images only load when necessary. This saves time and processing power, and it may save money for the website owner because less bandwidth is used.
Users may request resources faster than expected: For instance, if a user scrolls quickly down a page, they might have to wait for the images to load. This could negatively impact user experience.
Additional communication with server: Instead of requesting all the page content at once, the browser might have to send multiple requests to the website's servers for content as the user interacts with the page. The use of a content delivery network (CDN) minimizes this potential drawback, because the images are cached by the CDN and the browser does not have to send a request all the way to the origin server to fetch them.
Additional code for the browser to process: If a developer adds several lines of JavaScript to a webpage to tell the browser how to lazy load page resources, this adds to the amount of code that the browser has to load and process. If done inefficiently, this slight additional loading and processing time might outweigh the time saved by lazy loading.
Eager loading is loading all webpage resources at the same time, or as soon as possible. Some applications that use eager loading may display a "Loading" screen. Complex, code-heavy web applications, such as online games, may prefer to use eager loading.
A number of factors impact web performance, but these three steps are a good starting point for making a website faster:
See more ways to improve webpage performance: Tips to improve website speed
Sales
About Performance
Performance and SEO
Learning Center Navigation