{"id":135,"date":"2018-11-11T14:12:43","date_gmt":"2018-11-11T14:12:43","guid":{"rendered":"https:\/\/www.imperva.com\/learn\/?post_type=performance&#038;p=135"},"modified":"2023-12-20T17:01:56","modified_gmt":"2023-12-20T17:01:56","slug":"lazy-loading","status":"publish","type":"performance","link":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/","title":{"rendered":"Lazy Loading"},"content":{"rendered":"<h2 class=\"t3\">What is Lazy Loading<\/h2>\n<p>Lazy loading is the practice of delaying load or initialization of resources or objects until they\u2019re actually needed to improve performance and save system resources. For example, if a web page has an image that the user has to scroll down to see, you can display a placeholder and lazy load the full image only when the user arrives to its location.<\/p>\n<p>The benefits of lazy loading include:<\/p>\n<ul>\n<li><strong><span class=\"lato-bold-text\">Reduces initial load time<\/span><\/strong>\u00a0\u2013 Lazy loading a webpage reduces page weight, allowing for a quicker\u00a0<a href=\"https:\/\/www.imperva.com\/learn\/performance\/page-load-time\/\">page load time<\/a>.<\/li>\n<li><strong><span class=\"lato-bold-text\">Bandwidth conservation<\/span><\/strong>\u00a0\u2013 Lazy loading conserves bandwidth by delivering content to users only if it\u2019s requested.<\/li>\n<li><strong><span class=\"lato-bold-text\">System resource conservation<\/span><\/strong>\u00a0\u2013 Lazy loading conserves both server and client resources, because only some of the images, JavaScript and other code actually needs to be rendered or executed.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-136 size-full\" src=\"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg\" alt=\"Lazy loading when first loaded and after the entire page loads\" width=\"801\" height=\"502\" srcset=\"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg 801w, https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2-300x188.jpg 300w, https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2-768x481.jpg 768w, https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2-582x365.jpg 582w, https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2-510x320.jpg 510w, https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2-80x50.jpg 80w, https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2-574x360.jpg 574w, https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2-420x263.jpg 420w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><\/p>\n<h2 class=\"t3\">Lazy Loading vs. Eager Loading<\/h2>\n<p>While lazy loading delays the initialization of a resource, eager loading initializes or loads a resource as soon as the code is executed. Eager loading also involves pre-loading related entities referenced by a resource. For example, a PHP script with an include statement performs eager loading\u2014as soon as it executes, eager loading pulls in and loads the included resources.<\/p>\n<p>Eager loading is beneficial when there is an opportunity or need to load resources in the background. For example, some websites display a \u201cloading\u201d screen and eagerly load all the resources required for the web application to run.<\/p>\n<h2 class=\"t3\">Lazy Loading Implementing Methods<\/h2>\n<p>There are several open source libraries that can be used to implement lazy loading, including:<\/p>\n<ul>\n<li><strong><span class=\"lato-bold-text\">blazy.js<\/span><\/strong>\u00a0\u2013 blazy.js is a lightweight JavaScript library for lazy loading and multi-serving images, iframes, video and other resources.<\/li>\n<li><strong><span class=\"lato-bold-text\">LazyLoad<\/span><\/strong>\u00a0\u2013 LazyLoad is a script that automatically loads images as they enter the viewport.<\/li>\n<\/ul>\n<p>Methods for implementing lazy loading in your code include:<\/p>\n<ul>\n<li><strong><span class=\"lato-bold-text\">Lazy initialization<\/span><\/strong>\u00a0\u2013 This method sets objects to null. Object data is loaded only after and whenever invoking them, check if null, and if so, load object data.<\/li>\n<li><strong><span class=\"lato-bold-text\">Virtual proxy<\/span><\/strong>\u00a0\u2013 when accessing an object, call a virtual object with same interface as the real object. When the virtual object is called, load the real object, then delegate to it.<\/li>\n<li><strong><span class=\"lato-bold-text\">Ghost<\/span><\/strong>\u00a0\u2013 load an object in partial state, only using an identifier. The first time a property on the object is called, load the full data.<\/li>\n<li><strong><span class=\"lato-bold-text\">Value holder<\/span><\/strong>\u00a0\u2013 create a generic object that handles lazy loading behavior. This object should appear in place of an object\u2019s data fields.<\/li>\n<\/ul>\n<h2 class=\"t3\">Lazy Loading Images<\/h2>\n<p>To lazy load an image, display a lightweight placeholder image, and replace with the real full-size image on scroll.<\/p>\n<p>There are several technical approaches to lazy loading images:<\/p>\n<ul>\n<li>Inline\u00a0<code>&lt;img&gt;<\/code>\u00a0tags, using JavaScript to populate the tag if image is in viewport<\/li>\n<li>Event handlers such as\u00a0<code>scroll<\/code>\u00a0or\u00a0<code>resize<\/code><\/li>\n<li>The\u00a0<a href=\"https:\/\/w3c.github.io\/IntersectionObserver\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Intersection Observer API<\/a><\/li>\n<li>The CSS background-image property<\/li>\n<\/ul>\n<h2 class=\"t3\">Lazy Loading Video<\/h2>\n<p>To lazy load a video that doesn\u2019t autoplay, you can use the HTML5 video tag\u2019s preload attribute.<\/p>\n<p>For videos that autoplay, Google Chrome provides lazy loading automatically. In other browsers, you will need to declare the following attributes in the video tag:<\/p>\n<pre>&lt;video autoplay muted loop playsinline width=\"xx\" height=\"xx\" poster=\"placeholder-image.jpg\"&gt;\r\n<\/pre>\n<h2 class=\"t3\">Lazy Loading Best Practices<\/h2>\n<p>When performing lazy loading, consider the following tips:<\/p>\n<ul>\n<li>Only lazy load resources that are displayed below the fold or outside the user\u2019s viewport. In code, only lazy load objects that are not needed for initial or essential system operations.<\/li>\n<li>When lazy loading an image, asynchronously decode it using the JavaScript decode() method before inserting it into the DOM. Otherwise, large images can cause the browser to freeze.<\/li>\n<li>Handle errors in case the image or object fails to load.<\/li>\n<li>Offer a\u00a0<code>noscript<\/code>\u00a0in case JavaScript is not available. Otherwise users with JavaScript disabled will not see any lazy-loaded resources.<\/li>\n<\/ul>\n<div class=\"ddos-banner\"><div class=\"wrap\"><p>See how Imperva CDN can help you with website performance.<\/p>\n<div class=\"cta-container\">\n                                                    <a class=\"impv-yellow-btn\"  event-action=\"Click\"  event-category=\"LC Banner\"  event-label=\"Request demo\"  gtm-track  target=\"_self\" href=\"javascript:openModal('modalid3533', '\/learn\/banner\/virtual\/request-demo\/', 'Personal Demo Request | Imperva');\">Request demo<\/a>\n                                                    <a class=\"gst-yellow-dark-text-btn\"  event-action=\"Click\"  event-category=\"LC Banner\"  event-label=\"Learn more\"  gtm-track  target=\"_self\" href=\"https:\/\/www.imperva.com\/products\/cdn-content-delivery-network\/\">Learn more<\/a>\n                                                <\/div><\/div><\/div><h2 class=\"t3\">Lazy Loading and CDN<\/h2>\n<p>Lazy loading and content delivery networks (CDNs), such as\u00a0<a href=\"https:\/\/www.imperva.com\/products\/cdn-content-delivery-network\/\">Imperva\u2019s CDN<\/a>, are two ways to improve page load time and optimize the end-user experience. A CDN helps by placing resources on a\u00a0<a href=\"https:\/\/www.imperva.com\/learn\/performance\/cdn-caching\/\">cache server<\/a>\u00a0closer to the user, allowing them to access it much faster.<\/p>\n<p>How does lazy loading compare to a CDN for website performance optimization?<\/p>\n<ul>\n<li>Lazy loading avoids unnecessary resource downloads or code execution. However it can\u2019t help when the user actually requests large or numerous resources.<\/li>\n<li>A CDN caches resources and can serve them to users much faster \u2013 but it may transmit unnecessary resources which users don\u2019t actually need.<\/li>\n<\/ul>\n<p>The optimal solution is to combine both techniques \u2013 by implementing lazy loading while serving resources via a CDN, you ensure that only the resources actually needed by users are downloaded, and that when a user actually needs a resource it is cached and delivered fast.<\/p>","protected":false},"featured_media":0,"menu_order":0,"template":"","categories":[7],"class_list":["post-135","performance","type-performance","status-publish","hentry","category-cdn-guide"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is Lazy Loading | Lazy vs. Eager Loading | Imperva<\/title>\n<meta name=\"description\" content=\"Lazy loading is an optimization technique that delays the loading of objects, allowing for a quicker load time. Find out how it can be used to make your website faster.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Lazy Loading | Lazy vs. Eager Loading | Imperva\" \/>\n<meta property=\"og:description\" content=\"Lazy loading is an optimization technique that delays the loading of objects, allowing for a quicker load time. Find out how it can be used to make your website faster.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/\" \/>\n<meta property=\"og:site_name\" content=\"Learning Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T17:01:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data2\" content=\"Itamar Verta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/\",\"url\":\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/\",\"name\":\"What is Lazy Loading | Lazy vs. Eager Loading | Imperva\",\"isPartOf\":{\"@id\":\"https:\/\/www.imperva.com\/learn\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg\",\"datePublished\":\"2018-11-11T14:12:43+00:00\",\"dateModified\":\"2023-12-20T17:01:56+00:00\",\"description\":\"Lazy loading is an optimization technique that delays the loading of objects, allowing for a quicker load time. Find out how it can be used to make your website faster.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#primaryimage\",\"url\":\"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg\",\"contentUrl\":\"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg\",\"width\":801,\"height\":502},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.imperva.com\/learn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Performance\",\"item\":\"https:\/\/www.imperva.com\/learn\/performance\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lazy Loading\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.imperva.com\/learn\/#website\",\"url\":\"https:\/\/www.imperva.com\/learn\/\",\"name\":\"Learning Center\",\"description\":\"Imperva\",\"publisher\":{\"@id\":\"https:\/\/www.imperva.com\/learn\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.imperva.com\/learn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.imperva.com\/learn\/#organization\",\"name\":\"Imperva Inc\",\"url\":\"https:\/\/www.imperva.com\/learn\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.imperva.com\/learn\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2023\/06\/Linkedin-FB-OG-sharing.jpeg\",\"contentUrl\":\"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2023\/06\/Linkedin-FB-OG-sharing.jpeg\",\"width\":1200,\"height\":627,\"caption\":\"Imperva Inc\"},\"image\":{\"@id\":\"https:\/\/www.imperva.com\/learn\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Lazy Loading | Lazy vs. Eager Loading | Imperva","description":"Lazy loading is an optimization technique that delays the loading of objects, allowing for a quicker load time. Find out how it can be used to make your website faster.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/","og_locale":"en_US","og_type":"article","og_title":"What is Lazy Loading | Lazy vs. Eager Loading | Imperva","og_description":"Lazy loading is an optimization technique that delays the loading of objects, allowing for a quicker load time. Find out how it can be used to make your website faster.","og_url":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/","og_site_name":"Learning Center","article_modified_time":"2023-12-20T17:01:56+00:00","og_image":[{"url":"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes","Written by":"Itamar Verta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/","url":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/","name":"What is Lazy Loading | Lazy vs. Eager Loading | Imperva","isPartOf":{"@id":"https:\/\/www.imperva.com\/learn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#primaryimage"},"image":{"@id":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg","datePublished":"2018-11-11T14:12:43+00:00","dateModified":"2023-12-20T17:01:56+00:00","description":"Lazy loading is an optimization technique that delays the loading of objects, allowing for a quicker load time. Find out how it can be used to make your website faster.","breadcrumb":{"@id":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#primaryimage","url":"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg","contentUrl":"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2019\/01\/Lazy-Loading-2.jpg","width":801,"height":502},{"@type":"BreadcrumbList","@id":"https:\/\/www.imperva.com\/learn\/performance\/lazy-loading\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.imperva.com\/learn\/"},{"@type":"ListItem","position":2,"name":"Performance","item":"https:\/\/www.imperva.com\/learn\/performance\/"},{"@type":"ListItem","position":3,"name":"Lazy Loading"}]},{"@type":"WebSite","@id":"https:\/\/www.imperva.com\/learn\/#website","url":"https:\/\/www.imperva.com\/learn\/","name":"Learning Center","description":"Imperva","publisher":{"@id":"https:\/\/www.imperva.com\/learn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.imperva.com\/learn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.imperva.com\/learn\/#organization","name":"Imperva Inc","url":"https:\/\/www.imperva.com\/learn\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.imperva.com\/learn\/#\/schema\/logo\/image\/","url":"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2023\/06\/Linkedin-FB-OG-sharing.jpeg","contentUrl":"https:\/\/www.imperva.com\/learn\/wp-content\/uploads\/sites\/13\/2023\/06\/Linkedin-FB-OG-sharing.jpeg","width":1200,"height":627,"caption":"Imperva Inc"},"image":{"@id":"https:\/\/www.imperva.com\/learn\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.imperva.com\/learn\/wp-json\/wp\/v2\/performance\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.imperva.com\/learn\/wp-json\/wp\/v2\/performance"}],"about":[{"href":"https:\/\/www.imperva.com\/learn\/wp-json\/wp\/v2\/types\/performance"}],"version-history":[{"count":4,"href":"https:\/\/www.imperva.com\/learn\/wp-json\/wp\/v2\/performance\/135\/revisions"}],"predecessor-version":[{"id":1236,"href":"https:\/\/www.imperva.com\/learn\/wp-json\/wp\/v2\/performance\/135\/revisions\/1236"}],"wp:attachment":[{"href":"https:\/\/www.imperva.com\/learn\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.imperva.com\/learn\/wp-json\/wp\/v2\/categories?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}