{"id":47757,"date":"2023-04-07T15:17:27","date_gmt":"2023-04-07T15:17:27","guid":{"rendered":"https:\/\/www.arimetrics.com\/glosario-digital\/lazy-loading"},"modified":"2026-06-26T20:27:55","modified_gmt":"2026-06-26T20:27:55","slug":"lazy-loading","status":"publish","type":"encyclopedia","link":"https:\/\/www.arimetrics.com\/en\/digital-glossary\/lazy-loading","title":{"rendered":"Lazy Loading"},"content":{"rendered":"<p><strong>Definition<img decoding=\"async\" class=\"boxpad alignright wp-image-47984 size-full\" src=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2023\/04\/lazy-loading-1.jpg\" alt=\"lazy-loading\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2023\/04\/lazy-loading-1.jpg 300w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2023\/04\/lazy-loading-1-150x150.jpg 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/strong><\/p>\n<p><strong>Lazy loading<\/strong> is a programming technique used in web development <strong>to load resources asynchronously onto a web page.<\/strong> In other words, it consists of delaying the loading of certain elements, such as images and videos, until they are really needed.<\/p>\n<p>Specifically, when lazy loading is used, images, videos, and other media are loaded only when the user approaches them while scrolling through the page.<\/p>\n\n<h2>Benefits of Lazy Loading<\/h2>\n<p>Among the benefits of Lazy Loading we can mention the following:<\/p>\n<ul>\n<li><strong>Improves page load<\/strong> <strong>time:<\/strong> By not having to load all the elements of the page at the same time, lazy loading allows faster loading of those elements that the user needs to see immediately. This significantly improves the overall page load time, which in turn can improve the user experience and decrease the bounce rate.<\/li>\n<li><strong>Reduce bandwidth usage:<\/strong> By loading page elements asynchronously, lazy loading also reduces users&#8217; bandwidth usage, which can be especially useful on slow or expensive connections. If images, videos, or other heavy elements are used, this can make a big difference in page loading speed.<\/li>\n<li><strong>Decreases battery consumption:<\/strong> On mobile devices, lazy loading can have a big impact on battery life. By reducing the number of items charged at the same time, power consumption is decreased and battery life is extended.<\/li>\n<\/ul>\n<h2>How to lazy load<\/h2>\n<p>Implementing lazy loading on a web page is relatively straightforward, although it requires some technical knowledge. Generally speaking, it can be done as follows:<\/p>\n<ol>\n<li><strong>Identify the elements that will load asynchronously<\/strong>: As mentioned above, lazy loading is usually used for images and videos, but it can also be applied to other elements such as JavaScript or <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/css\">CSS<\/a> files. In any case, it is important to identify which elements will be loaded on a deferred basis in order to implement the corresponding code.<\/li>\n<li><strong>Add the necessary<a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/javascript\"> JavaScript<\/a> code:<\/strong> To implement lazy loading it is necessary to use <strong>JavaScript code<\/strong> that is responsible for managing the loading of the elements. There are several libraries and plugins that facilitate this task, so it is not necessary to write the code from scratch. Among the most popular options are Lazy Load, Lozad.js or Lazy Load XT.<\/li>\n<li><strong>Configure the code according to the needs:<\/strong> Once you have chosen the library or <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/plugin\">plugin<\/a> to use, it is necessary to configure it <strong>according to the needs<\/strong> of our website. This includes things like the loading speed of elements, how they are displayed (for example, with transition effects), or how you define the items to load asynchronously.<\/li>\n<li><strong>Test the effect on loading speed<\/strong>: Once lazy loading has been implemented, it is important to check that the page load time has indeed been reduced. To do this, you can use tools such as PageSpeed Insights or GTmetrix, which allow you to measure the loading time and the overall speed of the page.<\/li>\n<\/ol>\n<h2>Frequently asked questions about Lazy Loading<\/h2>\n<div class=\"geo-faq-block\">\n<details class=\"geo-faq-item\">\n<summary>What is Lazy Loading?<\/summary>\n<p>Definition Lazy loading is a programming technique used in web development to load resources asynchronously onto a web page. In other words, it consists of delaying the loading of certain elements, such as images and videos, until they are really needed. In the Arimetrics glossary it is placed in a digital marketing context to clarify its role, uses and practical implications.<\/p>\n<\/details>\n<details class=\"geo-faq-item\">\n<summary>What is Lazy Loading used for in digital marketing?<\/summary>\n<p>It is used to better analyse an action, tool, channel or behaviour related to acquisition, measurement, communication, sales or user experience. Its value depends on applying it to a concrete decision.<\/p>\n<\/details>\n<details class=\"geo-faq-item\">\n<summary>How is Lazy Loading related to a digital strategy?<\/summary>\n<p>It is related to digital strategy when it affects objectives, data, content, technology, campaigns or conversion processes. That is why it should be reviewed together with the business context, not as an isolated term.<\/p>\n<\/details>\n<details class=\"geo-faq-item\">\n<summary>What should be considered when working with Lazy Loading?<\/summary>\n<p>It is advisable to review its definition, context, associated metrics, limitations and possible risks. It is also useful to validate whether the concept has a real impact on performance, user experience or decision-making.<\/p>\n<\/details>\n<\/div>\n<p><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"DefinedTerm\",\n      \"@id\": \"https:\/\/www.arimetrics.com\/en\/digital-glossary\/lazy-loading#definedterm\",\n      \"name\": \"Lazy Loading\",\n      \"description\": \"Definition of Lazy Loading in the Arimetrics Digital Glossary.\",\n      \"inDefinedTermSet\": {\n        \"@type\": \"DefinedTermSet\",\n        \"name\": \"Arimetrics Digital Glossary\",\n        \"url\": \"https:\/\/www.arimetrics.com\/en\/digital-glossary\"\n      }\n    },\n    {\n      \"@type\": \"FAQPage\",\n      \"@id\": \"https:\/\/www.arimetrics.com\/en\/digital-glossary\/lazy-loading#faq\",\n      \"mainEntity\": [\n        {\n          \"@type\": \"Question\",\n          \"name\": \"What is Lazy Loading?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Definition Lazy loading is a programming technique used in web development to load resources asynchronously onto a web page. In other words, it consists of delaying the loading of certain elements, such as images and videos, until they are really needed. In the Arimetrics glossary it is placed in a digital marketing context to clarify its role, uses and practical implications.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"What is Lazy Loading used for in digital marketing?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"It is used to better analyse an action, tool, channel or behaviour related to acquisition, measurement, communication, sales or user experience. Its value depends on applying it to a concrete decision.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"How is Lazy Loading related to a digital strategy?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"It is related to digital strategy when it affects objectives, data, content, technology, campaigns or conversion processes. That is why it should be reviewed together with the business context, not as an isolated term.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"What should be considered when working with Lazy Loading?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"It is advisable to review its definition, context, associated metrics, limitations and possible risks. It is also useful to validate whether the concept has a real impact on performance, user experience or decision-making.\"\n          }\n        }\n      ]\n    }\n  ]\n}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Definition Lazy loading is a programming technique used in web development to load resources asynchronously onto a web page. In other words, it consists of delaying the loading of certain elements, such as images and videos, until they are really needed. Specifically, when lazy loading is used, images, videos, and other media are loaded only [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","encyclopedia-tag":[920],"class_list":["post-47757","encyclopedia","type-encyclopedia","status-publish","hentry","encyclopedia-tag-lazy-loading"],"_links":{"self":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia\/47757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media?parent=47757"}],"wp:term":[{"taxonomy":"encyclopedia-tag","embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia-tag?post=47757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}