{"id":287494,"date":"2019-05-15T08:04:40","date_gmt":"2019-05-15T15:04:40","guid":{"rendered":"http:\/\/css-tricks.com\/?p=287494"},"modified":"2019-07-14T23:05:14","modified_gmt":"2019-07-15T06:05:14","slug":"a-deep-dive-into-native-lazy-loading-for-images-and-frames","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/a-deep-dive-into-native-lazy-loading-for-images-and-frames\/","title":{"rendered":"A Deep Dive into Native Lazy-Loading for Images and Frames"},"content":{"rendered":"

Today’s websites are packed with heavy media assets like images and videos. Images make up around 50% of an average website’s traffic<\/a>. Many of them, however, are never shown to a user because they’re placed way below the fold<\/a>.<\/p>\n

What\u2019s this thing about images being lazy, you ask? Lazy-loading<\/strong> is something that\u2019s been covered quite a bit<\/a> here on CSS-Tricks, including a thorough guide with documentation for different approaches using JavaScript<\/a>. In short, we\u2019re talking about a mechanism that defers the network traffic necessary to load content when it\u2019s needed \u2014 or rather when trigger the load when the content enters the viewport.<\/p>\n

The benefit? A smaller initial page that loads faster and saves network requests for items that may not be needed if the user never gets there.<\/p>\n

If you read through other lazy-loading guides on this or other sites, you\u2019ll see that we\u2019ve had to resort to different tactics to make lazy-loading work. Well, that\u2019s about to change when lazy-loading will be available natively in HTML as a new loading<\/code> attribute\u2026 at least in Chrome<\/a> which will hopefully lead to wider adoption. Chrome is currently developing and testing support for native lazy-loading and is expected to enable it in Chrome 76, which is slated to release on 30th July 2019.<\/p>\n

<\/p>\n\"Eager\n<\/picture>\n

The pre-native approach<\/h3>\n

Until now, developers like ourselves have had to use JavaScript (whether it\u2019s a library or something written from scratch) in order to achieve lazy-loading. Most libraries work like this:<\/p>\n