• Skip to main content
  • Skip to primary sidebar

Technical Notes Of
Ehi Kioya

Technical Notes Of Ehi Kioya

  • About
  • Contact
MENUMENU
  • Blog Home
  • AWS, Azure, Cloud
  • Backend (Server-Side)
  • Frontend (Client-Side)
  • SharePoint
  • Tools & Resources
    • CM/IN Ruler
    • URL Decoder
    • Text Hasher
    • Word Count
    • IP Lookup
  • Linux & Servers
  • Zero Code Tech
  • WordPress
  • Musings
  • More
    Categories
    • Cloud
    • Server-Side
    • Front-End
    • SharePoint
    • Tools
    • Linux
    • Zero Code
    • WordPress
    • Musings
Home » Web Development » The State Of Lazy-Loading – Why You Should Go Native

The State Of Lazy-Loading – Why You Should Go Native

By Ehi Kioya Leave a Comment

Google officially announced in April 2019 that Chrome will start supporting native lazy-loading of images and iframes.

This means that instead of developers relying on custom code to make images load lazily (as has been the case for so long), lazy-loading will now be automatically enabled at a browser-level (starting from Chrome 76).

Google has even released a WordPress plugin that allows site owners and web developers to take advantage of this new feature.

But why do you need lazy-loading in the first place?

Why Images Should Be Lazy-Loaded

Lazy-loading is also sometimes referred to as on-demand loading. It is a technique for optimizing web content with speed improvements being its major advantage.

Without lazy loading, an entire web page is loaded and the full page is rendered to the user at once. But with lazy-loading, only the sections of a web page that is immediately required by the user are loaded. The remaining sections of the web page is delayed until the user requests them by taking an action (such as scrolling down) on the page.

By loading content (images especially) lazily as described above, websites can significantly speed up their page load times which in turn could potentially improve the entire user experience. And since lazy-loaded pages are faster, they may also rank better in terms of SEO.

Lazy-Loading – Why You Should Go Native

If you don’t already have the lazy-loading feature implemented on your website, now might be a good time to consider it. But if you want lazy-loading, do you have to go with Google’s “brand new” native lazy-loading feature? Or should you instead continue using older custom code techniques?

Without getting into too much details of how lazy-loading works from a programmatic perspective, here are my thought on the matter…

Lazy-loading seeks to improve performance and reduce overhead. But traditional solutions for lazy-loading actually add some overhead themselves. This is because they rely on loading, parsing, and running custom JavaScript code – and any code execution usually has an effect on performance.

Native lazy-loading largely does away with this pattern. It uses the new loading attribute, which makes lazy-loading a native browser feature. The attribute is currently supported on Google Chrome, and over time, it will gradually be rolled out to other browsers.

Native means no reliance on JavaScript logic. No reliance on JavaScript logic means lightweight. Lightweight means fast!

If your website is built on WordPress, you should grab Google’s native lazy-loading plugin from the WordPress plugin repo.

Even though, the native lazy-loading feature is still only supported by Chrome (as of this writing on November 19, 2019), you have nothing to worry about because the plugin will revert to a JavaScript solution (using IntersectionObserver) in situations where browser support is not available.

And in rare cases where JavaScript may be disabled, but the loading attribute is supported by the browser, a noscript version of the element is added that also includes the loading attribute without any additional changes.

If you want to implement lazy-loading but don’t particularly care about native lazy-loading, check out the a3 Lazy Load plugin. I have used it myself in the past and recognize it to be pretty good at what it does.

To be fair, lazy-loading (be it native or traditional) also has a few disadvantages. I plan to touch on these in a future article.

Found this article valuable? Want to show your appreciation? Here are some options:

  1. Spread the word! Use these buttons to share this link on your favorite social media sites.
  2. Help me share this on . . .

    • Facebook
    • Twitter
    • LinkedIn
    • Reddit
    • Tumblr
    • Pinterest
    • Pocket
    • Telegram
    • WhatsApp
    • Skype
  3. Sign up to join my audience and receive email notifications when I publish new content.
  4. Contribute by adding a comment using the comments section below.
  5. Follow me on Twitter, LinkedIn, and Facebook.

Related

Filed Under: Web Development, WordPress, Zero Code Tech Tagged With: Chrome, Google, LazyLoading, Native, WordPress

About Ehi Kioya

I am a Toronto-based Software Engineer. I run this website as part hobby and part business.

To share your thoughts or get help with any of my posts, please drop a comment at the appropriate link.

You can contact me using the form on this page. I'm also on Twitter, LinkedIn, and Facebook.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

23,734
Followers
Follow
30,000
Connections
Connect
14,568
Page Fans
Like
  • Recently   Popular   Posts   &   Pages
  • Actual Size Online Ruler Actual Size Online Ruler
    I created this page to measure your screen resolution and produce an online ruler of actual size. It's powered with JavaScript and HTML5.
  • WordPress Password Hash Generator WordPress Password Hash Generator
    With this WordPress Password Hash Generator, you can convert a password to its hash, and then set a new password directly in the database.
  • Working With Web Services Without Adding A Reference In C# Working With Web Services Without Adding A Reference In C#
    This article explains and gives you the code needed to work with regular SOAP based web services without adding a reference.
  • About
  • Contact

© 2022   ·   Ehi Kioya   ·   All Rights Reserved
Privacy Policy