{"id":17244,"date":"2022-03-15T09:32:49","date_gmt":"2022-03-15T08:32:49","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=17244"},"modified":"2022-03-15T09:42:09","modified_gmt":"2022-03-15T08:42:09","slug":"how-to-boost-performance-with-lazy-loading","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/","title":{"rendered":"How to Boost Performance With Lazy Loading"},"content":{"rendered":"\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-bf3eda16      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-is-lazy-loading-the-basics\" class=\"uagb-toc-link__trigger\">What is lazy loading? The basics:<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#lazy-loading-vs-eager-loading\" class=\"uagb-toc-link__trigger\">Lazy Loading vs. Eager Loading<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#lazy-loading-vs-code-splitting\" class=\"uagb-toc-link__trigger\">Lazy Loading vs. Code Splitting<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#why-use-lazy-loading\" class=\"uagb-toc-link__trigger\">Why use Lazy loading<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#lazy-loading-in-programming\" class=\"uagb-toc-link__trigger\">Lazy Loading in programming<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#lazy-loading-in-pure-software-development\" class=\"uagb-toc-link__trigger\">Lazy Loading in pure Software Development<\/a><li class=\"uagb-toc__list\"><a href=\"#implementing-lazy-loading-in-web-development-on-micro-front-ends\" class=\"uagb-toc-link__trigger\">Implementing Lazy Loading in Web development on Micro front-ends<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-are-micro-front-ends\" class=\"uagb-toc-link__trigger\">What are micro front-ends?<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#thinking-lazy-loading-in-micro-front-ends\" class=\"uagb-toc-link__trigger\">Thinking Lazy-loading in Micro front-ends<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#angular\" class=\"uagb-toc-link__trigger\">Angular<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#react\" class=\"uagb-toc-link__trigger\">React<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#other-lazy-loading-best-practices\" class=\"uagb-toc-link__trigger\">Other Lazy Loading Best Practices<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusions\" class=\"uagb-toc-link__trigger\">Conclusions<\/a><\/ul><\/ul><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<p>If you&#8217;ve always thought that the term &#8220;lazy&#8221; only has a negative meaning, <strong>you\u2019re about to find out that this is not the case<\/strong>. This guide, developed with <a href=\"https:\/\/www.be-tse.it\" class=\"ek-link\">Be Digitech Solutions<\/a><strong><a href=\"https:\/\/www.be-tse.it\" class=\"ek-link\">, <\/a>analyzes how the \u201clazy loading\u201d design pattern\/technique is a game-change<\/strong>r for improving user experience, accelerating loading times, and optimizing software performance and quality.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-8022905c gb-headline-text\">What is lazy loading? The basics:<\/h2>\n\n\n\n<p>First things first: when we talk about lazy loading (also called on-demand loading) we are referring to an abstract concept &#8211; the idea of <strong>loading a particular resource or set of resources only when they\u2019re really needed<\/strong> (by the application or by already-active resources), and not before. In this context,&nbsp; loading is described as \u201clazy\u201d because it\u2019s deferred until the point at which the resource is really needed.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-c177ce29 gb-headline-text\">Lazy Loading vs. Eager Loading<\/h3>\n\n\n\n<p>One of the most common (and basic) scenarios that shows lazy loading in action is found on a modern web page. If the page contains images that are not visible on the starting viewport, <strong>these are probably lazy-loaders<\/strong>, which means that initialization is delayed until the user scrolls down to each image\u2019s location. At this point, specific techniques prompt the loading process to begin, allowing the user to see the image.&nbsp;<\/p>\n\n\n\n<p>Implementation of this strategy has a number of benefits, especially in applications where <strong>content is dynamically generated by users<\/strong> or where large amounts of resources have to be initialized at a given time. Instead of simultaneously loading and rendering all the content, the required data is lazy-loaded until it\u2019s needed by the client.<\/p>\n\n\n\n<p>In contrast, when \u201ceager loading\u201d techniques are applied in this kind of scenario, exactly the opposite occurs: eager loading starts the initialization and loading process of a resource, or set of resources, as soon as the code is globally executed. <strong>A \u201cloading spinner\u201d is usually displayed, indicating that the resources required for the application to run are being eager loaded<\/strong>, until the process is complete. To summarise the general concept;&nbsp; eager loading provides everything that is or will be required, both in the present and for the future.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"810\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/website-gf1f13b50c_1280-1024x810.png\" alt=\"lazy loading user content\" class=\"wp-image-17252\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/website-gf1f13b50c_1280-1024x810.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/website-gf1f13b50c_1280-300x237.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/website-gf1f13b50c_1280-768x607.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/website-gf1f13b50c_1280.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Lazy Loading is especially effective in scenarios of user-generated content.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"gb-headline gb-headline-5d359189 gb-headline-text\">Lazy Loading vs. Code Splitting<\/h3>\n\n\n\n<p>Another technique for improving web page loading time that can be confused with lazy loading is code splitting. <strong>HTML, CSS and Javascript can all be split into smaller chunks<\/strong>, to be delivered as needed. In this context, lazy loading is the process of loading parts (chunks) of your application lazily, while code splitting is just splitting the application into lazily loaded chunks. Most of the time the code a Javascript bundle contains isn\u2019t needed in its entirety when a user loads a web page or application;&nbsp; <strong>lazy loading allows only the necessary parts of the chunked bundle to be served<\/strong>, which avoids wasting time downloading and parsing unused code. Lazy loading and code splitting work well together and are a powerful combination when it comes to improving resource usage and performance.<\/p>\n\n\n\n<p>Some of the key benefits of implementing lazy loading for images, videos, and common front-end objects include:<\/p>\n\n\n\n<p><strong>1- Reduced browser effort<br><\/strong>One of the main, and most direct, effects of lazy loading: a drastic reduction in the work of the browser. Without lazy loading, the browser will likely load material the user may never see or use, wasting both data and processing time. <strong>After the browser downloads the media, the content is then decoded and rendered on the page<\/strong>. The demand for browser effort is considerable if there&#8217;s a lot of dynamically generated content or many resources to load.<\/p>\n\n\n\n<p><strong>2- Reduced Critical Rendering Path<br><\/strong>The Critical Rendering Path is the process performed by the browser to interpret front-end code (HTML, CSS, and Javascript) and convert it into displayable content. Since Lazy loading means loading resources only when they\u2019re needed, <strong>the process identifies unnecessary resources as non-blocking, shortening the Critical Rendering Path<\/strong>. This process also translates into reduced page load times.<\/p>\n\n\n\n<p><strong>3- Bandwidth saving and improved performance<br><\/strong>By decreasing the strain on the browser, the implementation of lazy loading results in a tangible reduction of bandwidth usage. <strong>The number of HTTP requests during the first-page load (and therefore the first-page load time) is also reduced<\/strong>, as are bytes of data server by the server or CDN services, and general demand on overall system resources. This means faster loading and improved app performance.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>This is a key point: bandwidth saving has a <strong>considerable impact on networking costs<\/strong>, especially in Cloud environments where bandwidth has a directly proportional impact on infrastructure costs.<\/p><\/blockquote><\/figure>\n\n\n\n<h2 class=\"gb-headline gb-headline-6b6fb9ca gb-headline-text\">Why use Lazy loading<\/h2>\n\n\n\n<p>Lazy loading is more than just a technique used to improve front-end performance of web applications, it is a design pattern widely used in programming. <strong>To load lazily really means waiting to get data or process an object until it\u2019s needed<\/strong>. Loading data before that point that is&nbsp; never used is a waste of time.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-c3e70f08 gb-headline-text\">Lazy Loading in programming<\/h3>\n\n\n\n<p>In programming code there are several ways of implementing lazy loading, all of which aim to improve overall performance by loading resources only when needed. The most common are:&nbsp;<\/p>\n\n\n\n<p>&#8211; <strong>Lazy Initialization<\/strong>, where the resource object is initially set to null. Each additional request to this object will check for null equality and assign the resource the object data, loading it \u201con the fly\u201d<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">private MyObject object;\n\npublic <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">void<\/span> getObject(Type type) {\n    <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">this<\/span>.object == <span class=\"hljs-literal\">null<\/span>) {\n        <span class=\"hljs-keyword\">this<\/span>.object = <span class=\"hljs-keyword\">new<\/span> MyObject(type);\n    }\n\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">this<\/span>.object;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>&#8211; <strong>Virtual proxy<\/strong>, where an object commonly called a \u201cvirtual proxy\u201d shares an interface with the real object. The first time a property of the virtual proxy is accessed, the real object is initialized. From that point on, accessing properties of the virtual object returns the corresponding property of the real object. <strong>This is basically a combination of the Lazy Initialization and Proxy design patterns<\/strong>. The Virtual Proxy pattern is a memory-saving technique that recommends postponing the creation of an object until it is needed. This technique is used when creating an object that is expensive in terms of memory usage or the processing involved.<\/p>\n\n\n\n<p>A virtual proxy represents an object that is quite similar to one that might be lazily initialized, with the difference that the second object is actually empty. When you try to access the proxy object for the first time, the virtual proxy creates a new instance of the real object and fills it &#8211; a process similar to an on-demand initialization.<br><br>&#8211; <strong>Ghost<\/strong>, in which the resource object is partially loaded, usually using only an identifier, with the rest of the data loaded the first time a property on the resource is accessed. <strong>The \u201cghost object\u201d corresponds to the real object, but not in its full state<\/strong>. The ghost object may be empty or may contain some fields. When a user tries to access fields that haven&#8217;t been loaded yet, the ghost object fully initializes itself.<br><br>&#8211; <strong>Value holder<\/strong>, in which another object handles the lazy loading behavior and is used in the main object&#8217;s property <strong>GET<\/strong> accessors. The facade should appear in place of the target object\u2019s data fields.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-03d11384 gb-headline-text\">Lazy Loading in pure Software Development<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/TypeScript-foto1-1024x683.gif\" alt=\"\" class=\"wp-image-17103\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/TypeScript-foto1-1024x683.gif 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/TypeScript-foto1-300x200.gif 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/TypeScript-foto1-768x512.gif 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/TypeScript-foto1-1536x1024.gif 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/02\/TypeScript-foto1-600x400.gif 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Lazy Loading can achieve faster loading times, avoids resource waste, and improve performance in software development.<\/figcaption><\/figure>\n\n\n\n<p>In app development, lazy loading is a common way of splitting up the main application into smaller modules that are loaded in the background, instead of loading the entire application immediately. <strong>This helps the application load faster and prevents resource waste, improving performance<\/strong>. In software development, a lazy loading approach allows the specification of the default routines that are compiled and loaded into memory during runtime. As the application may contain unused features, lazy loading is meant to shorten a program&#8217;s initial opening and overall execution times. In this context, lazy loading can be also referred to as dynamic function loading.&nbsp;<\/p>\n\n\n\n<p>In general, software contains features that are implemented by various modules and components. Lazy loading gives system instructions that specify loading essential modules and components only, to improve startup speed and overall program performance. <strong>The threading process of the software functions means program components load into memory during program runtimes, like modules or DLLs<\/strong>. During this phase, some threads are essential and immediately necessary, while others may be delayed until a particular event occurs, such as a specific user choice or action. In this case, a lazy loading design pattern is applied to load that resource only when the software really needs it.&nbsp;<\/p>\n\n\n\n<p>The more resources are dependent on event or action activation, the more lazy loading can impact <strong>performance, hardware resources, and CPU usage<\/strong>. If the lion\u2019s share of resources is used at startup, lazy loading is not likely to improve performance.<br><br>The same techniques described above are applied in the <strong>realisation of high-quality web applications from the perspective of micro front-ends<\/strong>, in which components or sub-parts of the main application, which can be both large and complex, are loaded dynamically and asynchronously through the lazy loading strategy in order to achieve a drastic improvement in performance and resource use.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-4cd206f0 gb-headline-text\">Implementing Lazy Loading in Web development on Micro front-ends<\/h2>\n\n\n\n<h3 class=\"gb-headline gb-headline-93731ce2 gb-headline-text\">What are micro front-ends?<\/h3>\n\n\n\n<p>The microservices architectural structure has gained tremendous popularity <strong>when dealing with the limitations of large-scale, monolithic back-ends<\/strong>. In recent years we\u2019ve seen another architecture attract almost the same amount of hype: micro-frontends.&nbsp;<\/p>\n\n\n\n<p>This new strategy has been designed to break down front-end monoliths into smaller and simpler chunks, which can be developed, tested independently, and deployed as a single product. <strong>The micro front-end architecture assembles many independently deliverable front-end components into one whole application<\/strong>. This helps bypass the limitations of large-scale monolithic front-ends, allowing functionalities such as integrating progressive features in the existing codebase, fitting the built tools required into the build process, and scaling development so that multiple teams can work on a single software simultaneously.<\/p>\n\n\n\n<p>This architecture, in which many independently deliverable front-end components are assembled into one whole application, is called micro front-ends.&nbsp;<\/p>\n\n\n\n<p>Some of the main benefits of micro front-ends are:<\/p>\n\n\n\n<p>&#8211; production of more scalable and maintainable codebases;<br>&#8211; incremental updating and upgrading of single components; incrementally<br>&#8211; implementation of different technologies, frameworks, and stacks;<br>&#8211; decoupling development with many autonomous teams<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-f7d1942a gb-headline-text\">Thinking Lazy-loading in Micro front-ends<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Micro-Frontend-1024x576.png\" alt=\"low code and no code platforms\" class=\"wp-image-16978\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Micro-Frontend-1024x576.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Micro-Frontend-300x169.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Micro-Frontend-768x432.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Micro-Frontend-1536x864.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Micro-Frontend-2048x1152.png 2048w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Micro-Frontend-896x504.png 896w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Micro-Frontend-400x225.png 400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Micro front-ends can also benefit from lazy loading techniques.<\/figcaption><\/figure>\n\n\n\n<p>The benefits listed above are in fact the same benefits provided on the other end by microservices: <strong>micro front-ends is in fact a microservice-like architecture that applies the concept of microservices to the browser side<\/strong>. When it comes to reassembling the individual chunks of the front-end application into a greater whole (a process called aggregation), currently micro front-ends splits into two categories:<\/p>\n\n\n\n<p>&#8211; build time aggregation, in which micro front-end composition needs a building phase before the artifact can be consumed by a web browser<br>&#8211; in-browser aggregation: all the aggregation is done directly on the browser page, without any prior aggregation phase<\/p>\n\n\n\n<p>When simultaneously using a framework for building micro front-ends and a modern front-end framework to build reactive user-interfaces, lazy loading plays an important role. When using a front-end framework to build applications, <strong>lazy loading allows Javascript components to be loaded asynchronously when a specific route is activated<\/strong>. This ensures that only the required modules are loaded and used when the application is loaded for the first time, helping the application to decrease loading times and creating a more responsive application for the end-user.<\/p>\n\n\n\n<p>The basic function of lazy loading, where image loading is optimised by downloading content only when the user needs it, is magnified in the production of both micro front-ends and UI components. <strong>Let\u2019s think bigger, though<\/strong>: an entity objectively more complex than an image, such as a UI component (e.g., a button counter, a dynamic form, or a dynamic section) when used and loaded into an application, has a significant impact on time loads and resource consumption by the application itself. So why does the application need to load that UI component before any real access and usage? This is where lazy loading comes into play, <strong>allowing the component or specific part to be loaded only when needed<\/strong>, just like images in the browser.<\/p>\n\n\n\n<p>In a real-world scenario, there may be hundreds of components that communicate with each other at a given moment. Loading them all synchronously would have a major negative impact on performance. Going one step further: what if the UI component is very complex, perhaps a whole application full of rich functionalities? In that scenario, <strong>micro front-end and lazy loading become a powerful combination<\/strong>, providing high-quality modularity and increased performance. Lazy loading of modules and components is a concept supported by all modern JavaScript frameworks, such as Angular and React.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-4a6a0df7 gb-headline-text\">Angular<\/h3>\n\n\n\n<p>Implementation of lazy loading in Angular demands the creation of modules for each section of the application. The required modules are loaded when the user accesses the component. These components are usually accessed by routes, therefore lazy loading is configured in the routing so that the required module is loaded when the user accesses the required route. <strong>This ensures that only necessary modules are used , and only as required<\/strong>, which helps create a highly responsive application. In Angular, module splitting may be achieved in several ways,&nbsp; using one module for each sub-system of the application, or using modules for every section (SharedModule, UserModule).<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-0b048f72 gb-headline-text\">React<\/h3>\n\n\n\n<p>React has two features that make it very easy to apply code-splitting and lazy loading to React components: <strong>React.lazy()<\/strong> and <strong>React.Suspense<\/strong>. The former function enables the rendering of a dynamic import as a regular component.&nbsp;<\/p>\n\n\n\n<p>Dynamic imports are a&nbsp; code-splitting method that, as previously discussed, is a central key to lazy loading. A core feature as of React 16.6, <strong>React.lazy() <\/strong>eliminates the need for a third-party library such as react-loadable. <strong>React.Suspense<\/strong> enables the loading indicator to be specified in the event that the components in the tree below it are not yet ready to render.<br>Both <strong>React.lazy()<\/strong> and <strong>React.Suspense<\/strong> enable users to perform route-based code-splitting without using an external package. Route components are simply converted into lazy components, wrapping all the routes with a Suspense component.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-6bd03f1b gb-headline-text\">Other Lazy Loading Best Practices<\/h2>\n\n\n\n<p>When performing lazy loading, there are certain considerations to bear in mind.<br>For front-end resources, remember that only resources that are not displayed inside the user\u2019s viewport should be lazy loaded . In order to avoid freezing the browser, you should asynchronously decode images before DOM insertions.&nbsp;<\/p>\n\n\n\n<p>Provide an error handler to fail gracefully in case the resource cannot be loaded, and use appropriate polyfills to provide support for older or incompatible browsers. The process of delivering images only when needed seems cool, but in practice, it may cause delays in image loading. A user may reach an image location and be forced to wait a few seconds or milliseconds before the image fully loads. In that case, <strong>using the Intersection Observer API, which allows users to know when an observed element enters or exits the browser\u2019s viewport, becomes very important<\/strong>. In addition, consider starting image loading when it is located several hundred pixels before the viewport.<br><br>In app or web-app-style page development, when lazy-loading components based on route structure, avoid using lazy loading for frequently shared components, <strong>pay additional attention to dividing the application into modules<\/strong>, and provide a simplified way to share information between modules.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-753047bc gb-headline-text\">Conclusions<\/h2>\n\n\n\n<p>This article analyzes the lazy loading technique, showing how powerful it is when used properly and paired with other development and production strategies and best practices. In today\u2019s programming world, <strong>lazy loading is a fundamental tool used by all contemporary front-end and back-end development frameworks<\/strong>. Lazy loading improves loading times, resource usage, and network activities, and minimises the waste of resources and functionality, thus improving the overall quality of the application and user experience.<\/p>\n\n\n\n<p>The article also explores how lazy loading means slightly different things according to context: lazy loading can be applied to front-end objects and resources, <strong>software activities and modules, modules and components inside the aggregation of micro front-ends<\/strong> and within the composition of bundles by choosing from a range of popular front-end frameworks.\u00a0If you are skilled or interested in these topics, visit <a href=\"https:\/\/www.be-tse.it\/\">https:\/\/www.be-tse.it\/<\/a> to discover more about lazy loading, micro front-ends, and more.<\/p>\n\n\n\n<p>[jwp-video n=\u201c1\u201d]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve always thought that the term &#8220;lazy&#8221; only has a negative meaning, you\u2019re about to find out that this is not the case. This guide, developed with Be Digitech Solutions, analyzes how the \u201clazy loading\u201d design pattern\/technique is a game-changer for improving user experience, accelerating loading times, and optimizing software performance and quality. What&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/\">Read more<\/a><\/p>\n","protected":false},"author":94,"featured_media":17245,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":10,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[36],"tags":[9881,9951],"collections":[],"class_list":{"0":"post-17244","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-backend","8":"tag-microservices","9":"tag-software-architecture","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Boost Performance With Lazy Loading - Codemotion Magazine<\/title>\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.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Boost Performance With Lazy Loading\" \/>\n<meta property=\"og:description\" content=\"If you&#8217;ve always thought that the term &#8220;lazy&#8221; only has a negative meaning, you\u2019re about to find out that this is not the case. This guide, developed with Be Digitech Solutions, analyzes how the \u201clazy loading\u201d design pattern\/technique is a game-changer for improving user experience, accelerating loading times, and optimizing software performance and quality. What&#8230; Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-15T08:32:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-15T08:42:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Riccardo Degni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Riccardo Degni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/\"},\"author\":{\"name\":\"Riccardo Degni\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\"},\"headline\":\"How to Boost Performance With Lazy Loading\",\"datePublished\":\"2022-03-15T08:32:49+00:00\",\"dateModified\":\"2022-03-15T08:42:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/\"},\"wordCount\":2706,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Portada-Lazy-Loading.jpg\",\"keywords\":[\"Microservices\",\"Software Architecture\"],\"articleSection\":[\"Backend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/\",\"name\":\"How to Boost Performance With Lazy Loading - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Portada-Lazy-Loading.jpg\",\"datePublished\":\"2022-03-15T08:32:49+00:00\",\"dateModified\":\"2022-03-15T08:42:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Portada-Lazy-Loading.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Portada-Lazy-Loading.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Lazy Loading: discover it's benefits, best practices, and more.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/how-to-boost-performance-with-lazy-loading\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Backend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/backend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Boost Performance With Lazy Loading\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\",\"name\":\"Riccardo Degni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"caption\":\"Riccardo Degni\"},\"description\":\"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.\",\"sameAs\":[\"http:\\\/\\\/www.riccardodegni.com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/riccardodegni\\\/\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/riccardo-degni\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Boost Performance With Lazy Loading - Codemotion Magazine","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.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/","og_locale":"en_US","og_type":"article","og_title":"How to Boost Performance With Lazy Loading","og_description":"If you&#8217;ve always thought that the term &#8220;lazy&#8221; only has a negative meaning, you\u2019re about to find out that this is not the case. This guide, developed with Be Digitech Solutions, analyzes how the \u201clazy loading\u201d design pattern\/technique is a game-changer for improving user experience, accelerating loading times, and optimizing software performance and quality. What&#8230; Read more","og_url":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-03-15T08:32:49+00:00","article_modified_time":"2022-03-15T08:42:09+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg","type":"image\/jpeg"}],"author":"Riccardo Degni","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Riccardo Degni","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/"},"author":{"name":"Riccardo Degni","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb"},"headline":"How to Boost Performance With Lazy Loading","datePublished":"2022-03-15T08:32:49+00:00","dateModified":"2022-03-15T08:42:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/"},"wordCount":2706,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg","keywords":["Microservices","Software Architecture"],"articleSection":["Backend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/","url":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/","name":"How to Boost Performance With Lazy Loading - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg","datePublished":"2022-03-15T08:32:49+00:00","dateModified":"2022-03-15T08:42:09+00:00","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg","width":1920,"height":1080,"caption":"Lazy Loading: discover it's benefits, best practices, and more."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/backend\/how-to-boost-performance-with-lazy-loading\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Backend","item":"https:\/\/www.codemotion.com\/magazine\/backend\/"},{"@type":"ListItem","position":3,"name":"How to Boost Performance With Lazy Loading"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb","name":"Riccardo Degni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","caption":"Riccardo Degni"},"description":"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.","sameAs":["http:\/\/www.riccardodegni.com\/","https:\/\/www.linkedin.com\/in\/riccardodegni\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-600x600.jpg","author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg",1920,1080,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-768x432.jpg",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg",1920,1080,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading.jpg",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/03\/Portada-Lazy-Loading-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_comment_info":0,"uagb_excerpt":"If you&#8217;ve always thought that the term &#8220;lazy&#8221; only has a negative meaning, you\u2019re about to find out that this is not the case. This guide, developed with Be Digitech Solutions, analyzes how the \u201clazy loading\u201d design pattern\/technique is a game-changer for improving user experience, accelerating loading times, and optimizing software performance and quality. What&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=17244"}],"version-history":[{"count":9,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17244\/revisions"}],"predecessor-version":[{"id":17275,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17244\/revisions\/17275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/17245"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=17244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=17244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=17244"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=17244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}