{"id":15784,"date":"2020-11-12T15:00:47","date_gmt":"2020-11-12T14:00:47","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=15784"},"modified":"2020-11-12T14:19:34","modified_gmt":"2020-11-12T13:19:34","slug":"how-to-add-lazy-load-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-lazy-load-to-wordpress\/","title":{"rendered":"Everything You Need to Know About WordPress Lazy Load"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]As a WordPress website owner or administrator, you might have gone to a great length to ensure your website performs in the best way possible. No one is forcing you to do it, apart from your competitors, and it\u2019s just implied that we should always look for ways to improve our website\u2019s performance. It\u2019s the state of things \u2014 if you\u2019re not rushing forward, you\u2019re falling behind. There\u2019s simply no standing still.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/\">Optimizing images for the web<\/a> is a considerable part of optimizing websites for peak performance. Images can cause a variety of issues on a website. One of the ways to fix them is what we call WordPress lazy load.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019re still not sure what lazy loading is? Don\u2019t worry. In this article we\u2019ll show you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-lazy-loading\">What Is Lazy Loading<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-its-good\">Why It\u2019s Good<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-lazy-load-to-images-on-your-wordpress-site\">How to Add Lazy Load to Images on Your WordPress Site<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#existing-lazy-load-plugins\">What to Do with Existing Lazy Load Plugins<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-lazy-loading\"><\/a>What Is Lazy Loading?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/What-Is-Lazy-Loading.jpg\" class=\"attachment-full size-full\" alt=\"What Is Lazy Loading?\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/What-Is-Lazy-Loading.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/What-Is-Lazy-Loading-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/What-Is-Lazy-Loading-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Technically speaking, lazy loading is postponing the initialization of an object on your web page up until the time when it\u2019s necessary. In more practical terms and when applied to images, <strong>lazy loading is when your images load when they\u2019re very close to being displayed<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Lazy loading\u2019s opposite is eager loading<\/strong>. In this philosophy, as many elements as possible should be loaded all at once. That way, you might need to wait a bit more while the page loads, but when it does, you can rest assured that you have the whole page loaded.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you\u2019re visiting a WordPress website with lazy loading enabled, the images will load as you scroll down to see them. With an eager loading website, those images will be there all the time. Waiting.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-its-good\"><\/a>Why Is Lazy Loading Good?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"451\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Why-Is-Lazy-Loading-Good.jpg\" class=\"attachment-full size-full\" alt=\"Why Is Lazy Loading Good?\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Why-Is-Lazy-Loading-Good.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Why-Is-Lazy-Loading-Good-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Why-Is-Lazy-Loading-Good-620x399.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Lazy loading is a beneficial strategy that\u2019s found its way on many a website. <strong>The simple answer to why it\u2019s useful and accessible is that it speeds up the loading time of web pages and posts<\/strong>. In a time when a fraction of a second seems like a worthy goal for spending weeks on website optimization, lazy loading yields results.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Lazy loading is not without its detractors. Some would say that it hurts SEO. Others that it might cause a delay in image display, eventually damaging the user experience. <strong>It might even hurt the website revenue, since a below-the-fold ad won\u2019t load until scrolled down to, giving you fewer impressions<\/strong>. The problem has become even more evident on mobile devices.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-lazy-load-to-images-on-your-wordpress-site\"><\/a>How to Add Lazy Load to Images on Your WordPress Site<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"451\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/How-to-Add-Lazy-Load-to-Images-on-Your-WordPress-Site.jpg\" class=\"attachment-full size-full\" alt=\"How to Add Lazy Load to Images on Your WordPress Site\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/How-to-Add-Lazy-Load-to-Images-on-Your-WordPress-Site.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/How-to-Add-Lazy-Load-to-Images-on-Your-WordPress-Site-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/How-to-Add-Lazy-Load-to-Images-on-Your-WordPress-Site-620x399.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But if you weighed the good against the bad and came to the conclusion that lazy loading is worth having for your WordPress website, you might as well find the easiest way to add lazy load to an image on your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Are you ready for it? Here it goes: <strong>update your WordPress core to any update since (and including) the update 5.5<\/strong>. Before that update, you had to install a plugin that allowed you too lazy load images. Now, it\u2019s a regular feature and part of WordPress code. <strong>WordPress just saved you from having to install yet another plugin<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Still, you\u2019ll have that in store for you if you don\u2019t want to update to 5.5.<strong> In that case, downloading and using one of the plugins that haven\u2019t dropped support for lazy load after the WordPress announcement would be the right choice<\/strong>. You\u2019ll find that lots of <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-image-compression-plugins\/\">plugins you\u2019d use to compress images<\/a>, for example, also offer lazy loading as a feature.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"existing-lazy-load-plugins\"><\/a>What to Do with Existing Lazy Load Plugins?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"451\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/What-to-Do-with-Existing-Lazy-Load-Plugins.jpg\" class=\"attachment-full size-full\" alt=\"What to Do with Existing Lazy Load Plugins?\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/What-to-Do-with-Existing-Lazy-Load-Plugins.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/What-to-Do-with-Existing-Lazy-Load-Plugins-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/What-to-Do-with-Existing-Lazy-Load-Plugins-620x399.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you were already using a plugin that added lazy load to WordPress when the update went live, and you\u2019re now afraid that updating to 5.5 might cause redundancies and clashes, you have a couple of options. <strong>The first and most obvious one would be to check whether the plugin you were using is now compatible with WordPress 5.5<\/strong>. You\u2019ll find that a lot of them are.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If it isn\u2019t, however, you can decide to go plugin-free or switch to a plugin such as <a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">a3 Lazy Load<\/a>. This plugin works together with WordPress to ensure lazy loading, not only of the images from the media library, but also images loaded from outside the library. <strong>The good people at a3 Lazy Load took the proactive approach and made their plugin compatible with WordPress\u2019 newly added lazy loading feature.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, you can download and install the <a href=\"https:\/\/wordpress.org\/plugins\/disable-lazy-loading\/\" target=\"_blank\" rel=\"noopener noreferrer\">Disable Lazy Loading plugin<\/a>. <strong>Activating it will disable WordPress\u2019 newly added lazy loading capabilities, leaving it all up to the plugins you already have.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Lazy loading is a useful feature that reduces the time it takes to load your website\u2019s pages and posts. While we had to enable it using plugins in the past, it has become a core feature of WordPress since update 5.5.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But that doesn\u2019t mean that you should uninstall that image optimization plugin you used \u2014 many of them are now compatible with 5.5 and work great alongside WordPress\u2019s features. If everything else fails, however, you can always disable lazy loading on WordPress and rely on a plugin\u2019s functionality instead.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Thanks to lazy loading, your WordPress website can be faster than ever. We&#8217;ll teach you everything you need to know about the newly added WordPress feature.<\/p>\n","protected":false},"author":9295,"featured_media":15791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,4,13],"class_list":["post-15784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/15784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=15784"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/15784\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/15791"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=15784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=15784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=15784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}