{"id":57392,"date":"2020-09-22T19:40:49","date_gmt":"2020-09-22T23:40:49","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/blog\/?p=57392"},"modified":"2024-01-23T14:18:48","modified_gmt":"2024-01-23T19:18:48","slug":"lazy-loading-vs-eager-loading","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/","title":{"rendered":"Lazy Loading vs. Eager Loading"},"content":{"rendered":"\n
\"Lazy<\/figure>\n\n\n\n

Lazy loading: What is it and why should you care?<\/h2>\n\n\n\n

A beautiful website is great, but not if no one sees it. <\/p>\n\n\n\n

You may have designed a stunning website, but if it doesn\u2019t load quickly, you may be losing traffic. <\/p>\n\n\n\n

Various different studies have shown that about 50 percent of internet users expect a webpage to load in two seconds or less, meaning if it takes three seconds to spin up your site<\/a>, there\u2019s a decent chance you\u2019ve lost your visitor. <\/p>\n\n\n\n

On the flip side, it\u2019s actually possible to increase conversions by decreasing page load time<\/a>. <\/p>\n\n\n\n

When performing research into how to make your website quicker, there\u2019s a chance you\u2019ve come across the term lazy loading.<\/p>\n\n\n\n

If you aren\u2019t sure what this term is, no worries. You\u2019re not alone.<\/p>\n\n\n

\r\n

Say goodbye to slow loading times and hello to high-performance websites with our new WordPress VPS Hosting<\/a> plans. Experience 40x faster WordPress page load speeds on purpose-built servers that guarantee 99.99% uptime.<\/p>\r\n

\"checkHigh-Performance VPS \"checkFully-Managed Support \"checkFree SSL & Dedicated IP \"checkAdvanced Server Caching<\/p>\r\n

Managed WordPress<\/a><\/p>\r\n<\/div>\n\n\n\n

What is Lazy Loading?<\/h2>\n\n\n\n

Lazy loading<\/strong> (also known as deferred loading) is the action of only loading necessary page assets as they are needed with the purpose of conserving system resources and improving overall speed and performance. <\/p>\n\n\n\n

In terms of images, lazy loading means that any image not immediately needed will not load until it is called for. <\/p>\n\n\n\n

It works by adding attributes to the original content.<\/p>\n\n\n\n

By deferring image loading until needed, web pages are able to load quicker with just the immediately-needed images. <\/p>\n\n\n\n

Images on the page that aren\u2019t in the users\u2019 window of view will be filled with a placeholder image until needed.<\/p>\n\n\n\n

If you\u2019re an instagram user, you\u2019ve probably seen this feature several times before. Next time you use Instagram, visit a popular page and notice that photos do not load until a user scrolls down to where those photos are. <\/p>\n\n\n\n

What is Eager Loading?<\/h2>\n\n\n\n

Whereas lazy loading takes its time loading images, eager doesn\u2019t have the same patience.<\/p>\n\n\n\n

Eager loading<\/strong> is the action of force-loading all the assets on a page at once. It loads related entities, even if the visitor never scrolls down to it. <\/p>\n\n\n\n

You may have seen eager loading in action before as well. If you have ever visited a page with a lot of photos or videos that displayed a loading screen, that\u2019s eager loading. <\/p>\n\n\n\n

Eager loading allows you to load all of your resources at once, but it can lead to much slower speeds and increased bandwidth and resource usage. <\/p>\n\n\n\n

Lazy Loading vs. Eager Loading<\/h2>\n\n\n\n

In the terms of which type of loading works best, it all depends on your individual needs. <\/p>\n\n\n\n

Lazy loading offers a range of perks such as reduced requests, quicker load time, less resources, and bandwidth conservation.<\/p>\n\n\n\n

This is especially helpful if you have a lot of photos on a page or an article that contains several photos.<\/p>\n\n\n\n

And with mobile sites, where users tend to be even more impatient<\/p>\n\n\n\n

Eager loading ensures that your site and all its related assets load at once. <\/p>\n\n\n\n

If you have lightweight assets or fast queries, eager loading can be a good option because it can save time by not having to execute additional SQL queries.<\/p>\n\n\n\n

Lazy Loading in WordPress<\/h2>\n\n\n\n

WordPress introduced lazy loading for images by default in WordPress 5.5.<\/p>\n\n\n\n

Until 5.5, users would have to install a third party plugin to lazy load images. <\/p>\n\n\n\n

This should offer a big improvement in site speed for millions of WordPress users.<\/p>\n\n\n\n

\u201cWith WordPress enabling native lazy loading by default, it would significantly impact performance and user experience for millions of sites, without requiring any technical knowledge or even awareness of lazy loading as a concept,\u201d said WordPress core committer Felix Arntz in the 5.5 announcement post. \u201cAdopting the new loading attribute is a great chance for WordPress to lead the way for a faster web overall.\u201d<\/p>\n\n\n\n

Lazy loading can now be added to any page by adding the \u201cloading\u201d attribute to any \u201cimg\u201d tag.<\/p>\n","protected":false},"excerpt":{"rendered":"

Lazy loading: What is it and why should you care? A beautiful website is great, but not if no one sees it.  You may have designed a stunning website, but if it doesn\u2019t load quickly, you may be losing traffic.  Various different studies have shown that about 50 percent of internet users expect a webpage Read More ><\/a><\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[211],"tags":[],"class_list":["post-57392","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"yoast_head":"\nLazy Loading vs. Eager Loading<\/title>\n<meta name=\"description\" content=\"Lazy loading is a way of deffering the loading of assests to improve page speed. Learn the difference between lazy and eager loading.\" \/>\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.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy Loading vs. Eager Loading\" \/>\n<meta property=\"og:description\" content=\"Lazy loading is a way of deffering the loading of assests to improve page speed. Learn the difference between lazy and eager loading.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-22T23:40:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-23T19:18:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2020\/09\/Lazy-Loading-vs-Eager-Loading-1024x538.png\" \/>\n<meta name=\"author\" content=\"Guest Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@inmotionhosting\" \/>\n<meta name=\"twitter:site\" content=\"@inmotionhosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Guest Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lazy Loading vs. Eager Loading","description":"Lazy loading is a way of deffering the loading of assests to improve page speed. Learn the difference between lazy and eager loading.","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.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/","og_locale":"en_US","og_type":"article","og_title":"Lazy Loading vs. Eager Loading","og_description":"Lazy loading is a way of deffering the loading of assests to improve page speed. Learn the difference between lazy and eager loading.","og_url":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/","og_site_name":"InMotion Hosting Blog","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting","article_published_time":"2020-09-22T23:40:49+00:00","article_modified_time":"2024-01-23T19:18:48+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2020\/09\/Lazy-Loading-vs-Eager-Loading-1024x538.png","type":"","width":"","height":""}],"author":"Guest Contributor","twitter_card":"summary_large_image","twitter_creator":"@inmotionhosting","twitter_site":"@inmotionhosting","twitter_misc":{"Written by":"Guest Contributor","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/"},"author":{"name":"Guest Contributor","@id":"https:\/\/www.inmotionhosting.com\/blog\/#\/schema\/person\/e64b89f590f2a38be647c81bc001b4a9"},"headline":"Lazy Loading vs. Eager Loading","datePublished":"2020-09-22T23:40:49+00:00","dateModified":"2024-01-23T19:18:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/"},"wordCount":653,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2020\/09\/Lazy-Loading-vs-Eager-Loading-1024x538.png","articleSection":["WordPress Articles"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/","url":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/","name":"Lazy Loading vs. Eager Loading","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2020\/09\/Lazy-Loading-vs-Eager-Loading-1024x538.png","datePublished":"2020-09-22T23:40:49+00:00","dateModified":"2024-01-23T19:18:48+00:00","description":"Lazy loading is a way of deffering the loading of assests to improve page speed. Learn the difference between lazy and eager loading.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2020\/09\/Lazy-Loading-vs-Eager-Loading.png","contentUrl":"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2020\/09\/Lazy-Loading-vs-Eager-Loading.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/blog\/lazy-loading-vs-eager-loading\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress Articles","item":"https:\/\/www.inmotionhosting.com\/blog\/wordpress\/"},{"@type":"ListItem","position":3,"name":"Lazy Loading vs. Eager Loading"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/blog\/#website","url":"https:\/\/www.inmotionhosting.com\/blog\/","name":"InMotion Hosting Blog","description":"Web Hosting Strategy, Trends and Security","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/blog\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2019\/11\/imh-logo-all-colors-big.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/blog\/wp-content\/uploads\/2019\/11\/imh-logo-all-colors-big.jpg","width":1630,"height":430,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting","https:\/\/x.com\/inmotionhosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/blog\/#\/schema\/person\/e64b89f590f2a38be647c81bc001b4a9","name":"Guest Contributor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8fb69e5fd33ee38ba32e6d7a4b30a1e8f6c908ba99da0b96b4afabe53f4dc8ae?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8fb69e5fd33ee38ba32e6d7a4b30a1e8f6c908ba99da0b96b4afabe53f4dc8ae?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8fb69e5fd33ee38ba32e6d7a4b30a1e8f6c908ba99da0b96b4afabe53f4dc8ae?s=96&r=g","caption":"Guest Contributor"},"url":"https:\/\/www.inmotionhosting.com\/blog\/author\/guest-contributor\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":211,"name":"WordPress Articles","slug":"wordpress","link":"https:\/\/www.inmotionhosting.com\/blog\/wordpress\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/posts\/57392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/comments?post=57392"}],"version-history":[{"count":9,"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/posts\/57392\/revisions"}],"predecessor-version":[{"id":72951,"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/posts\/57392\/revisions\/72951"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/media?parent=57392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/categories?post=57392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/blog\/wp-json\/wp\/v2\/tags?post=57392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}