Title: Lazy Loading Author: Kriko Published: Mar 8, 2021 Last modified: Jul 12, 2026 --- 1. [Home](https://kriko.io/) / 2. [Glossary](https://kriko.io/glossary) / 3. L Letter # Lazy Loading **Lazy Loading** is a performance optimisation technique that delays the loading of images, videos, iframes or similar resources on a web page until they are needed by the user. This method is especially used on long pages and visually heavy websites to improve initial page load speed. With Lazy Loading, only the resources in the visible area are loaded first when the user enters the page; content further down the page is loaded when the user approaches that section or when the relevant area becomes visible. The main purpose of this technique is to prevent unnecessary resource consumption during the initial page load. For example, an e-commerce category page may contain many product images. If all product images below the first visible section are loaded at the same time, page speed can be negatively affected. With Lazy Loading, images outside the viewport are delayed. This reduces the initial load, makes the page usable faster and can improve the user experience. Lazy Loading is particularly useful for e-commerce websites, blogs, news websites, portfolio pages and media-heavy content. Large images, videos and third-party iframe content can significantly affect page performance. Loading these resources only when needed can provide a faster experience for users and help browser and server resources be used more efficiently. However, using Lazy Loading for every resource is not always correct; critical content and images in the first visible area of the page should be managed carefully. In modern web development, Lazy Loading can be implemented in different ways. One of the simplest methods is to use the native HTML `loading="lazy"` attribute for images. When this attribute is defined inside an image tag, the browser may delay loading the image until it is needed. In more advanced scenarios, the Intersection Observer API can be used with JavaScript. This structure helps manage loading more precisely by detecting whether an image or content block is approaching the visible area. When applying Lazy Loading, special care should be taken with important images at the top of the page. If a main image, hero image or large visual element that affects the Largest Contentful Paint metric is loaded late, page experience and Core Web Vitals performance may be negatively affected. For this reason, critical images in the first visible area should usually not be lazy-loaded; they should be loaded with priority. Lazy Loading is more suitable for content below the fold that users will see as they scroll down. From an SEO perspective, Lazy Loading can be useful when implemented correctly. Improving page speed, supporting user experience and reducing resource usage can indirectly contribute to search performance. However, incorrectly configured Lazy Loading can make it harder for search engine bots to discover images or content properly. Therefore, images should use proper `src`, `alt` text, size attributes and accessible HTML structure; content added only later through JavaScript and not visible to bots should be avoided. It is not accurate to say that Lazy Loading will definitely reduce bounce rate or improve SEO rankings. These metrics are affected by many factors other than page speed, including content quality, user intent, design, trust signals, pricing, competition and conversion flow. However, when used correctly, Lazy Loading can help pages load faster, allow users to interact with content more comfortably and create a better experience, especially on mobile devices. In summary, **Lazy Loading** is an effective performance optimisation method that allows resources on web pages to load only when needed. It can reduce the initial load, support page speed and improve user experience, especially on websites with heavy image and media usage. However, this technique should be used carefully, with critical images, SEO accessibility, Core Web Vitals metrics and real user experience evaluated together. ## Discover it in the dictionary ### Master Data Management (MDM) Master Data Management, commonly abbreviated as MDM, is an approach used to define and manage an organisation’s core business data according to shared rules.… ### Brief A brief is an information and direction document prepared to ensure that a task, project, campaign or creative work is understood correctly and moves… ### Mixed Workload A mixed workload refers to different types of processes and applications operating simultaneously within the same computing environment. It brings together workloads with different… ### Pattern Recognition Pattern recognition is a field of machine learning concerned with identifying, analysing and interpreting recurring structures within data. It enables computer systems to detect… ### Accessibility Accessibility refers to the ability of individuals to access physical, digital, social, cultural and public spaces, products, services and information as independently, safely and… ### Doorway Pages Doorway pages are low-quality pages created to gain visibility in search engines for specific queries, while offering little real value to users and mainly… ### Return on Ad Spend (ROAS) ROAS stands for Return on Ad Spend and refers to the revenue generated from advertising spend. It is an important digital marketing metric that… ### Application Programming Interface (API) An Application Programming Interface, commonly abbreviated as API, is a software interface that allows controlled access to specific functions of an application, service, operating… ### Simple Mail Transfer Protocol (SMTP) SMTP, short for Simple Mail Transfer Protocol, is an application-layer protocol used to send emails and transfer them between mail servers. In simple terms,… ## Track the digital heartbeat with Kriko Subscribe to receive curated insights, news, and ideas shaping the digital landscape. By checking this box, you acknowledge and accept our [privacy policy](https://kriko.io/privacy-policy).