{"id":64741,"date":"2019-05-07T04:15:22","date_gmt":"2019-05-07T11:15:22","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/"},"modified":"2019-05-07T04:15:22","modified_gmt":"2019-05-07T11:15:22","slug":"hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/","title":{"rendered":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/05\/hybrid-lazy-loading-progressive-migration-native\/\"><title>Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading<\/title><\/p>\n<article>\n<header>\n<h1>Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading<\/h1>\n<address>Andrea Verlicchi<\/address>\n<p>                  <time datetime=\"2019-05-06T13:30:59+02:00\">2019-05-06T13:30:59+02:00<\/time><time datetime=\"2019-05-07T11:05:32+00:00\">2019-05-07T11:05:32+00:00<\/time><\/header>\n<p>In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months.<\/p>\n<blockquote><p>\u201cYeah, great news, but we\u2019ll have to wait until all browsers support it.\u201d<\/p><\/blockquote>\n<p>If this was the first thing that crossed your mind, keep reading. I will try and convince you of the opposite.<\/p>\n<p>Let\u2019s start with a comparison between native lazy loading and the good ol\u2019 JavaScript-driven one.<\/p>\n<h3>Native Versus JavaScript-Driven Lazy Loading<\/h3>\n<p>Lazy loading is a way to improve the performance of a website or web application by maximizing the rendering speed of the above-the-fold images and iframes (and sometimes videos) by deferring the loading of below-the-fold content.<\/p>\n<h4>JavaScript-Driven Lazy Loading<\/h4>\n<p>In order to lazy load images or iframes, it\u2019s a very common practice to mark them up by replacing the proper <code>src<\/code> attribute with a similar data attribute, <code>data-src<\/code>, then to rely on a JavaScript solution to detect when the images\/iframes are getting close to the visible portion of the website (typically because the user scrolled down) and to copy the data attributes into the proper ones, then triggering the deferred loading of their content.<\/p>\n<pre><code><img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/turtle.jpg\" alt=\"Lazy turtle\" class=\"lazy\">\n<\/code><\/pre>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h4>Native Lazy Loading<\/h4>\n<p>According to the <a href=\"http:\/\/github.com\/whatwg\/html\/pull\/3752\/\">native lazy loading specification<\/a> (still under development), if you want to lazy load images or iframes using the native lazy loading feature, you would just need to add the <code>loading=lazy<\/code> attribute on the related tag.<\/p>\n<pre><code><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/turtle.jpg?w=900\" alt=\"Lazy turtle\" loading=\"lazy\">\n<\/code><\/pre>\n<p>Addy Osmani wrote extensively about this topic in his article \u201c<a href=\"https:\/\/addyosmani.com\/blog\/lazy-loading\/\">Native Image Lazy-Loading For The Web!<\/a>\u201d in which he stated that the Google Chrome team are already developing the feature and intend to ship it in Chrome 75.<\/p>\n<p>Other Chromium-based browsers like Opera and Microsoft Edge will also benefit from this development by gaining the same feature in their first update based on Chromium 75.<\/p>\n<h3>Get Started With Native Lazy Loading<\/h3>\n<p>In case your website\u2019s images are downloaded all at once at page landing without lazy loading, you can enable (where supported) native lazy loading in your website as easily as adding an HTML attribute. The <code>loading<\/code> attribute tells browsers which images are important to load immediately, and which ones can be downloaded lazily as the users scroll down. The same attribute can be applied to iframes.<\/p>\n<p>In order to tell browsers that a particular image is important so they can load it as soon as possible, you must add the <code>loading=\"eager\"<\/code> attribute on the <code>img<\/code> tag. The best practice is to do this for the primary images \u2014 typically for the ones that will be displayed above the fold.<\/p>\n<pre><code><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/rabbit.jpg?w=900\" alt=\"Fast rabbit\" loading=\"eager\">\n<\/code><\/pre>\n<p>To tell browsers that an image should be downloaded lazily, just add the <code>loading=\"lazy\"<\/code> attribute. This is a best practice only if you do it only to secondary images \u2014 typically for the ones will be displayed below the fold.<\/p>\n<pre><code><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/turtle.jpg?w=900\" alt=\"Lazy turtle\" loading=\"lazy\">\n<\/code><\/pre>\n<p>Just by adding the <code>loading<\/code> attribute to your images and iframes, you will enable your website to use native lazy loading as a progressive enhancement. Your website will gradually benefit from it as support arrives to your users in most modern browsers.<\/p>\n<p>This is the best approach to use if your website is not using any kind of lazy loading today, but if you already implemented a JavaScript-driven lazy loading solution, you might want to keep it while progressively switching to native lazy loading.<\/p>\n<p>The ideal solution would be to start using native lazy loading right away, and use a polyfill to make it work across all browsers. Unfortunately, native lazy loading is not a feature we can polyfill with JavaScript.<\/p>\n<div><\/div>\n<h3>No Use For A Polyfill<\/h3>\n<p>When a new browser technology is released to a single browser, the open-source community usually releases a JavaScript polyfill to provide the same technology to the rest of the browsers. For example, the <code>IntersectionObserver<\/code> polyfill uses JavaScript and DOM elements to coordinate <code>Element.getBoundingClientRect()<\/code> to reproduce the behavior of the native API.<\/p>\n<p>But the case of native lazy loading is different because a JavaScript polyfill for <code>loading=\"lazy\"<\/code> would have to <em>prevent<\/em> browsers from loading content as soon as they find a URL in the markup of an image or iframe. JavaScript has no control on this initial stage of page rendering, therefore it is not possible to polyfill native lazy loading.<\/p>\n<h3>Hybrid Lazy Loading<\/h3>\n<p>If you are not satisfied with having native lazy loading only as a progressive enhancement, or you have already implemented JavaScript-based lazy loading and don\u2019t want to lose this feature in less modern browsers (but still want to enable native lazy loading on browsers that support it), then you need a different solution. Introducing: hybrid lazy loading.<\/p>\n<blockquote>\n<p>\n    <a aria-label=\"Share on Twitter\" href=\"http:\/\/twitter.com\/share?text=Hybrid%20lazy%20loading%20is%20a%20technique%20to%20use%20native%20lazy%20loading%20on%20browsers%20that%20support%20it,%20otherwise,%20rely%20on%20JavaScript%20to%20handle%20the%20lazy%20loading.%0A&#038;url=https:\/\/smashingmagazine.com%2F2019%2F05%2Fhybrid-lazy-loading-progressive-migration-native%2F\"><br \/>\n      Hybrid lazy loading is a technique to use native lazy loading on browsers that support it, otherwise, rely on JavaScript to handle the lazy loading.<\/p>\n<p>    <\/a>\n  <\/p>\n<div>\n<div>\n      <span>\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>In order to do hybrid lazy loading, you need to mark up your lazy content using the <code>data<\/code> attributes instead of the real ones (such as in JavaScript-driven lazy loading), and to add the <code>loading=\"lazy\"<\/code> attribute.<\/p>\n<pre><code><img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/turtle.jpg\" loading=\"lazy\" alt=\"Lazy turtle\">\n<\/code><\/pre>\n<p>Then you require some JavaScript. In the first place, you need to <strong>detect whether or not native lazy loading is supported by the browser<\/strong>. Then, do one of the following for every element with the <code>loading=\"lazy\"<\/code> attribute:<\/p>\n<ul>\n<li>If native lazy loading is supported, copy the <code>data-src<\/code>  attribute value to the <code>src<\/code> attribute;<\/li>\n<li>If not supported, initialize a JavaScript lazy loading script or plugin to do that as the elements enter the viewport.<\/li>\n<\/ul>\n<p>It\u2019s not very hard to write the JavaScript code required to perform these operations on your own. You can detect if native lazy loading is supported with the condition:<\/p>\n<pre><code>if ('loading' in HTMLImageElement.prototype)\n<\/code><\/pre>\n<p>If it is, just copy the <code>src<\/code> attribute value from <code>data-src<\/code>. If it\u2019s not, initialize some lazy-loading script of your choice.<\/p>\n<p>Here\u2019s a snippet of code that does that.<\/p>\n<div>\n<pre><code><!-- In-viewport images should be loaded normally, or eagerly -->\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/important.jpg?w=900\" loading=\"eager\" alt=\"Important image\">\n\n<!-- Let\u2019s lazy-load the rest of these images -->\n<img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy1.jpg\" loading=\"lazy\" alt=\"Lazy image 1\">\n<img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy2.jpg\" loading=\"lazy\" alt=\"Lazy image 2\">\n<img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy3.jpg\" loading=\"lazy\" alt=\"Lazy image 3\">\n\n<script>\n  (function() {\n    if (\"loading\" in HTMLImageElement.prototype) {\n      var lazyEls = document.querySelectorAll(\"[loading=lazy]\");\n      lazyEls.forEach(function(lazyEl) {\n        lazyEl.setAttribute(\n          \"src\",\n          lazyEl.getAttribute(\"data-src\")\n        );\n      });\n    } else {\n      \/\/ Dynamically include a lazy loading library of your choice\n      \/\/ Here including vanilla-lazyload\n      var script = document.createElement(\"script\");\n      script.async = true;\n      script.src =\n        \"https:\/\/cdn.jsdelivr.net\/npm\/vanilla-lazyload@12.0.0\/dist\/lazyload.min.js\";\n      window.lazyLoadOptions = {\n        elements_selector: \"[loading=lazy]\"\n        \/\/eventually more options here\n      };\n      document.body.appendChild(script);\n    }\n  })();\n<\/script>\n<\/code><\/pre>\n<\/div>\n<p>You can find and test the code above in <a href=\"https:\/\/www.andreaverlicchi.eu\/lazyload\/demos\/native_lazyload_conditional_old.html\">this live demo<\/a>.<\/p>\n<p>Still, that is a very basic script, and things can get complicated when you\u2019re using additional attributes or tags to get responsive images (such as the <code>srcset<\/code> and <code>sizes<\/code> attributes or even the <code>picture<\/code> and <code>source<\/code> tags).<\/p>\n<h3>A Little Third-Party Help<\/h3>\n<p>For the past four years, I\u2019ve been maintaining an open-source lazy load script named \u201c<code>vanilla-lazyload<\/code>\u201d and, in a couple of days after Addy Osmani wrote about native lazy loading, the community reacted by asking me if my script could act as a polyfill.<\/p>\n<p>As I explained before, you cannot create a polyfill for the native lazy loading feature, however, I thought of a solution that would make it easier for developers to begin the transition to native lazy loading, without needing to write any of the JavaScript code that I\u2019ve mentioned before.<\/p>\n<p>Starting from version 12 of <code>vanilla-lazyload<\/code>, you can just set the <code>use_native<\/code> option to <code>true<\/code> to enable hybrid lazy loading. The script is only 2.0 kB gzipped and it\u2019s already available on <a href=\"https:\/\/github.com\/verlok\/lazyload\">GitHub<\/a>, <a href=\"https:\/\/www.npmjs.com\/package\/vanilla-lazyload\">npm<\/a>, and <a href=\"https:\/\/www.jsdelivr.com\/package\/npm\/vanilla-lazyload\">jsDelivr<\/a>.<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/verlok\/lazyload\">Get to know <code>vanilla-lazyload<\/code> on GitHub<\/a><\/li>\n<\/ul>\n<h3>Demos<\/h3>\n<p>You can start playing around with native lazy loading today by downloading <a href=\"https:\/\/www.google.com\/intl\/it\/chrome\/canary\/\">Chrome Canary<\/a> or <a href=\"https:\/\/www.microsoftedgeinsider.com\/en-us\/\">Microsoft Edge Insider<\/a> (<em>dev channel<\/em>) then enabling the flags \u201cEnable lazy image loading\u201d and \u201cEnable lazy frame loading\u201d. To enable these flags, enter <code>about:flags<\/code> in your browser\u2019s URL field and search for \u201clazy\u201d in the search box.<\/p>\n<h4>Native Lazy Loading Demo<\/h4>\n<p>To analyze how native lazy loading works in the developer tools, you can start playing with the following demo. In this one, <strong>not a single line of JavaScript is used<\/strong>. Yes, it\u2019s just full plain native lazy loading.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.andreaverlicchi.eu\/lazyload\/demos\/native_lazyload.html\">Test native lazy loading demo<\/a><\/li>\n<\/ul>\n<p><strong>What to expect<\/strong>: All images are fetched at once, but with different HTTP responses. The ones with the response code <code>200<\/code> are the eagerly loaded images, while the ones with the response code <code>206<\/code> are only partially fetched in order to get the initial information about the images. Those images will then be fetched completely with a <code>200<\/code> response code when you scroll down.<\/p>\n<h4>Hybrid Lazy Loading Demo<\/h4>\n<p>To analyze how hybrid lazy loading works, you can start playing with the next demo. Here, <code>vanilla-lazyload@12.0.0<\/code> is used and the <code>use_native<\/code> option is set to <code>true<\/code>:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.andreaverlicchi.eu\/lazyload\/demos\/native_lazyload_conditional.html\">Test hybrid lazy loading demo<\/a><\/li>\n<\/ul>\n<p><strong>What to expect<\/strong>: Try the demo on different browsers to see how it behaves. On browsers that support native lazy loading, the behavior would be the same as in the native lazy loading demo. On browsers that do not support native lazy loading, the images will be downloaded as you scroll down.<\/p>\n<p>Please note that <code>vanilla-lazyload<\/code> uses the IntersectionObserver API under the hood, so you would need to polyfill it on Internet Explorer and less recent versions of Safari. It\u2019s not a big deal if a polyfill is not provided, though, because in that case <code>vanilla-lazyload<\/code> would just download all the images at once.<\/p>\n<p><strong>Note<\/strong>: <em>Read more in the \u201c<a href=\"https:\/\/github.com\/verlok\/lazyload\/blob\/master\/README.md#to-polyfill-or-not-to-polyfill-intersectionobserver\">To Polyfill Or Not To Polyfill<\/a>\u201d chapter of<\/em> <code>vanilla-lazyload<\/code><em>\u2019s readme file.<\/em><\/p>\n<div><\/div>\n<h3>Try Hybrid Lazy Loading In Your Website<\/h3>\n<p>Since native lazy loading is coming soon to some browsers, why don\u2019t you give it a chance today using hybrid lazy loading? Here\u2019s what you need to do:<\/p>\n<h4>HTML Markup<\/h4>\n<p>The simplest image markup is made by two attributes: <code>src<\/code> and <code>alt<\/code>.<\/p>\n<p>For the above-the-fold images, you should leave the <code>src<\/code> attribute and add the <code>loading=\"eager\"<\/code> attribute.<\/p>\n<pre><code><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/important.jpg?w=900\" loading=\"eager\" alt=\"Important image\">\n<\/code><\/pre>\n<p>For below-the-fold images, you should replace the <code>src<\/code> attribute with the data attribute <code>data-src<\/code> and add the <code>loading=\"lazy\"<\/code> attribute.<\/p>\n<pre><code><img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy.jpg\" loading=\"lazy\" alt=\"A lazy image\">\n<\/code><\/pre>\n<p>If you want to use responsive images, do the same with the <code>srcset<\/code> and <code>sizes<\/code> attributes.<\/p>\n<pre><code><img alt=\"A lazy image\" \n    loading=\"lazy\" \n    data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy.jpg\" \n    data-srcset=\"lazy_400.jpg 400w, lazy_800.jpg 800w\" \n    data-sizes=\"100w\">\n<\/code><\/pre>\n<p>If you prefer to use the <code>picture<\/code> tag, change the <code>srcset<\/code>, <code>sizes<\/code> and <code>src<\/code> also in the <code>source<\/code> tags.<\/p>\n<div>\n<pre><code><picture>\n    <source \n        media=\"(min-width: 1200px)\" \n        data-srcset=\"lazy_1200.jpg 1x, lazy_2400.jpg 2x\">\n    <source \n        media=\"(min-width: 800px)\" \n        data-srcset=\"lazy_800.jpg 1x, lazy_1600.jpg 2x\">\n    <img alt=\"A lazy image\" \n        loading=\"lazy\" \n        data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy.jpg\">\n<\/picture>\n<\/code><\/pre>\n<\/div>\n<p>The <code>picture<\/code> tag can also be used to selectively load the WebP format for your images.<\/p>\n<p><strong>Note<\/strong>: <em>If you want to know more usages of<\/em> <code>vanilla-lazyload<\/code><em>, please read the \u201c<a href=\"https:\/\/github.com\/verlok\/lazyload\/blob\/master\/README.md#-getting-started---html\">Getting Started<\/a>\u201d HTML section of its readme file.<\/em><\/p>\n<h4>JavaScript Code<\/h4>\n<p>First of all, you need to include <code>vanilla-lazyload<\/code> on your website.<\/p>\n<p>You can load it from a CDN like jsDelivr:<\/p>\n<div>\n<pre><code><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vanilla-lazyload@12.0.0\/dist\/lazyload.min.js\"><\/script>\n<\/code><\/pre>\n<\/div>\n<p>Or you can install it using npm:<\/p>\n<pre><code>npm install vanilla-lazyload@12\n<\/code><\/pre>\n<p>It\u2019s also possible to use an <code>async<\/code> script with automatic initialization; load it as a ES module using <code>type=\"module\"<\/code> or load it as AMD using RequireJS. Find more ways to include and use <code>vanilla-lazyload<\/code> in the \u201c<a href=\"https:\/\/github.com\/verlok\/lazyload\/blob\/master\/README.md#-getting-started---script\">Getting Started<\/a>\u201d script section of the readme file.<\/p>\n<p>Then, in your website\/web application\u2019s JavaScript code, include the following:<\/p>\n<pre><code>var pageLazyLoad = new LazyLoad({\n    elements_selector: \"[loading=lazy]\",\n    use_native: true \/\/ ? enables hybrid lazy loading\n});\n<\/code><\/pre>\n<p><strong>Note<\/strong>: <em>The script has plenty of other settings you can use to customize<\/em> <code>vanilla-lazyload<\/code><em>\u2019s behavior, e.g. to increase the distance of the scrolling area from which to start loading the elements or to load elements only if they stayed in the viewport for a given time.  Find more settings in the <a href=\"https:\/\/github.com\/verlok\/lazyload\/blob\/master\/README.md#-api\">API section<\/a> of the readme file.<\/em><\/p>\n<h4>All Together, Using An <code>async<\/code> Script<\/h4>\n<p>To put it all together and use an <code>async<\/code> script to maximize performance, please refer to the following HTML and JavaScript code:<\/p>\n<div>\n<pre><code><!-- In-viewport images should be loaded normally, or eagerly -->\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/important.jpg?w=900\" loading=\"eager\" alt=\"Important image\">\n\n<!-- Let\u2019s lazy-load the rest of these images -->\n<img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy1.jpg\" loading=\"lazy\" alt=\"Lazy image 1\">\n<img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy2.jpg\" loading=\"lazy\" alt=\"Lazy image 2\">\n<img data-src=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/lazy3.jpg\" loading=\"lazy\" alt=\"Lazy image 3\">\n\n<!-- Set the options for the global instance of vanilla-lazyload -->\n<script>\n  window.lazyLoadOptions = {\n    elements_selector: \"[loading=lazy]\",\n    use_native: true \/\/ ? enables hybrid lazy loading\n  };\n<\/script>\n\n<!-- Include vanilla lazyload 12 through an async script -->\n<script async src=\"https:\/\/cdn.jsdelivr.net\/npm\/vanilla-lazyload@12.0.0\/dist\/lazyload.min.js\"><\/script>\n<\/code><\/pre>\n<\/div>\n<p>That\u2019s it! With these very simple and easy steps, you\u2019ll have enabled hybrid lazy loading in your website!<\/p>\n<h3>Important Best Practices<\/h3>\n<ul>\n<li>Apply lazy loading only to the images that you know that will probably be displayed below the fold. Eagerly load the ones above the fold to maximize performance. If you just apply lazy load to all images in your page, you\u2019ll slow down rendering performance.<\/li>\n<li>Use CSS to reserve some space for the images before they are loaded. That way, they\u2019ll push the rest of the content below. If you don\u2019t do that, a larger number of images will be placed above the fold before they should, triggering immediate downloads for them. If you need a CSS trick to do that, you can find one in the <a href=\"https:\/\/github.com\/verlok\/lazyload#-tips--tricks\">tips and tricks section of the readme<\/a> of <code>vanilla-lazyload<\/code>.<\/li>\n<\/ul>\n<h3>Pros And Cons<\/h3>\n<table>\n<thead>\n<tr>\n<th data-tablesaw-priority=\"persist\"><\/th>\n<th>NATIVE LAZY LOADING<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>PROS<\/strong><\/td>\n<td>\n<ul>\n<li>No JavaScript required;<\/li>\n<li>No setup headaches, it just works;<\/li>\n<li>No need to reserve space for images using CSS tricks;<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>CONS<\/strong><\/td>\n<td>\n<ul>\n<li>It does not work today on all browsers;<\/li>\n<li>The initial payload is higher, because of the prefetch of the initial 2 kb for every image.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<thead>\n<tr>\n<th data-tablesaw-priority=\"persist\"><\/th>\n<th>JAVASCRIPT-DRIVEN LAZY LOADING<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>PROS<\/strong><\/td>\n<td>\n<ul>\n<li>It works consistently across all browsers, right now;<\/li>\n<li>You can do very highly customized UI tricks, like the blur-in effect or the delayed loading.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>CONS<\/strong><\/td>\n<td>\n<ul>\n<li>It relies on JavaScript to load your content.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<thead>\n<tr>\n<th data-tablesaw-priority=\"persist\"><\/th>\n<th>HYBRID LAZY LOADING<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>PROS<\/strong><\/td>\n<td>\n<ul>\n<li>It gives you the chance to enable and test native lazy loading where supported;<\/li>\n<li>It enables lazy loading on all browsers;<\/li>\n<li>You can transparently remove the script dependency as soon as native lazy loading support will be widespread.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>CONS<\/strong><\/td>\n<td>\n<ul>\n<li>It still relies on JavaScript to load your content.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Wrapping Up<\/h3>\n<p>I\u2019m very excited that native lazy loading is coming to browsers, and I can\u2019t wait for <em>all<\/em> browser vendors to implement it!<\/p>\n<p>In the meantime, you can either choose to enrich your HTML markup for progressive enhancement and get native lazy loading only where supported, or you can go for hybrid lazy loading and get both native and JavaScript-driven lazy loading until the day native lazy loading will be supported by the vast majority of browsers.<\/p>\n<p>Give it a try! Don\u2019t forget to <a href=\"https:\/\/github.com\/verlok\/lazyload\">star\/watch <code>vanilla-lazyload<\/code> on GitHub<\/a>, and let me know your thoughts in the comments section.<\/p>\n<h4><span>Further Reading<\/span> on SmashingMag:<\/h4>\n<ul>\n<li><a title=\"Read 'Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver'\" href=\"https:\/\/www.smashingmagazine.com\/2018\/01\/deferring-lazy-loading-intersection-observer-api\/\" rel=\"bookmark\">Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver<\/a><\/li>\n<li><a title=\"Read 'Lazy Loading JavaScript Modules With ConditionerJS'\" href=\"https:\/\/www.smashingmagazine.com\/2018\/03\/lazy-loading-with-conditioner-js\/\" rel=\"bookmark\">Lazy Loading JavaScript Modules With ConditionerJS<\/a><\/li>\n<li><a title=\"Read 'Front-End Performance Checklist 2019'\" href=\"https:\/\/www.smashingmagazine.com\/2019\/01\/front-end-performance-checklist-2019-pdf-pages\/\" rel=\"bookmark\">Front-End Performance Checklist 2019 (PDF, Apple Pages, MS Word)<\/a><\/li>\n<li><a title=\"Read 'How Improving Website Performance Can Help Save The Planet'\" href=\"https:\/\/www.smashingmagazine.com\/2019\/01\/save-planet-improving-website-performance\/\" rel=\"bookmark\">How Improving Website Performance Can Help Save The Planet<\/a><\/li>\n<\/ul>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/logo-red-3.png?w=900\" alt=\"Smashing Editorial\"><span>(dm, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00 In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \u201cYeah, great news, but we\u2019ll have to&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":64742,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-64741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy LoadingHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \u201cYeah, great news, but we\u2019ll have to wait until\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy LoadingHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \u201cYeah, great news, but we\u2019ll have to wait until\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-05-07T11:15:22+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-05-07T11:15:22+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy LoadingHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \u201cYeah, great news, but we\u2019ll have to wait until\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#article\",\"name\":\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies\",\"headline\":\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/turtle.jpg?fit=%2C&ssl=1\"},\"datePublished\":\"2019-05-07T04:15:22-07:00\",\"dateModified\":\"2019-05-07T04:15:22-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#listItem\",\"name\":\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#listItem\",\"position\":3,\"name\":\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/\",\"name\":\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies\",\"description\":\"Hybrid Lazy Loading: A Progressive Migration To Native Lazy LoadingHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \\u201cYeah, great news, but we\\u2019ll have to wait until\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/turtle.jpg?fit=%2C&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#mainImage\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/05\\\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\\\/#mainImage\"},\"datePublished\":\"2019-05-07T04:15:22-07:00\",\"dateModified\":\"2019-05-07T04:15:22-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies","description":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy LoadingHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \u201cYeah, great news, but we\u2019ll have to wait until","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#article","name":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies","headline":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/turtle.jpg?fit=%2C&ssl=1"},"datePublished":"2019-05-07T04:15:22-07:00","dateModified":"2019-05-07T04:15:22-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#listItem","name":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#listItem","position":3,"name":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/","name":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies","description":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy LoadingHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \u201cYeah, great news, but we\u2019ll have to wait until","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/turtle.jpg?fit=%2C&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#mainImage"},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/#mainImage"},"datePublished":"2019-05-07T04:15:22-07:00","dateModified":"2019-05-07T04:15:22-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies","og:description":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy LoadingHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \u201cYeah, great news, but we\u2019ll have to wait until","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/","article:published_time":"2019-05-07T11:15:22+00:00","article:modified_time":"2019-05-07T11:15:22+00:00","twitter:card":"summary","twitter:title":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading | Design for Immersive Technologies","twitter:description":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy LoadingHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading Andrea Verlicchi 2019-05-06T13:30:59+02:002019-05-07T11:05:32+00:00In the past few weeks, you might have heard or read about native lazy loading, which is coming to Chromium 75 in the upcoming months. \u201cYeah, great news, but we\u2019ll have to wait until"},"aioseo_meta_data":{"post_id":"64741","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 20:25:18","updated":"2026-09-01 10:07:01","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHybrid Lazy Loading: A Progressive Migration To Native Lazy Loading\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading","link":"https:\/\/www.taterboy.com\/blog\/2019\/05\/hybrid-lazy-loading-a-progressive-migration-to-native-lazy-loading\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-gQd","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/05\/turtle.jpg?fit=%2C&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/64741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=64741"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/64741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/64742"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=64741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=64741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=64741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}