{"id":96147,"date":"2021-01-12T10:25:26","date_gmt":"2021-01-12T16:25:26","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&#038;p=96147"},"modified":"2025-07-17T11:06:36","modified_gmt":"2025-07-17T16:06:36","slug":"wordpress-lazy-load","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-lazy-load\/","title":{"rendered":"Benefits of Lazy Load for WordPress"},"content":{"rendered":"\n<p>You\u2019re likely aware of <a href=\"https:\/\/wpengine.com\/blog\/importance-page-speed-performance-ebook\/\" target=\"_blank\" rel=\"noreferrer noopener\">how important page loading speed is<\/a>. Suffice it to say that every second counts when you\u2019re competing for the top spot in search results. You might be wondering, however, what you can do to improve your site\u2019s performance.<\/p>\n\n\n\n<p>Fortunately, there are a couple of options when it comes to improving how your pages load. Through a process called \u201clazy loading,\u201d for example, you can speed things up by controlling when the more burdensome elements of your pages (such as images) appear.&nbsp;<\/p>\n\n\n\n<p>In this article, we\u2019ll take a look at what exactly lazy loading images is and how it works. We\u2019ll also walk through how to implement this technique, both manually and with a plugin. Let\u2019s get started!<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is lazy loading in WordPress? Lazy load pros and cons<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/web.dev\/lazy-loading\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lazy loading<\/a> images is a way to reduce the number of calls a visitor\u2019s browser has to make to your website\u2019s server. Essentially, the loading of your website can get bogged down when lots of calls to your server are made at once. If all of your images are attempting to load at the same time, for example, this can cause issues.&nbsp;<\/p>\n\n\n\n<p>When you use the lazy loading approach, you can create placeholders for images, and then have the real images only load fully when they are needed. As a visitor scrolls down a page, for example, images might load as and when they need to appear.<\/p>\n\n\n\n<p>This approach has several pros and cons, which you\u2019ll want to consider before implementing it on your website. The benefits include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Site visitors won\u2019t need to use as much bandwidth to view your pages.<\/li>\n\n\n\n<li>You can boost your search rankings.<\/li>\n\n\n\n<li>You\u2019ll be able to provide a better mobile experience.<\/li>\n<\/ul>\n\n\n\n<p>As for the downsides, some type of lazy loading can cause search engine indexing issues. In addition, for people who scroll through content quickly, lazy loaded images can create a poorer experience. However, it can be a technique worth considering if your site is slow to load.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Adding lazy load to your WordPress site<\/strong><\/h2>\n\n\n\n<p>Now that we\u2019ve answered the question \u201cWhat is lazy loading in WordPress?\u201d it\u2019s time to learn how to add it to your site. If you\u2019re concerned about performance, the first step is to find out how fast or slow your site\u2019s pages are. <\/p>\n\n\n\n<p>This tool will let you know how your site is performing. Plus, it will offer tips for making improvements, so you\u2019ll know exactly where to focus your efforts.<\/p>\n\n\n\n<p>If one of the steps you decide to take is adding lazy loading to your WordPress website, you have a few lazy load options. You can rely on the default WordPress functionality, or use a plugin to customize the way lazy loading works on your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Adding lazy load with a plugin: LazyLoad by WP Rocket<\/strong><\/h2>\n\n\n\n<p>Fortunately, there are many lazy loading plugins available. For example, <a href=\"https:\/\/wordpress.org\/plugins\/rocket-lazy-load\/\" target=\"_blank\" rel=\"noreferrer noopener\">LazyLoad by WP Rocket<\/a> is an excellent solution. This plugin is straightforward, but can significantly reduce the weight of your pages (thus speeding them up). In the following two steps, we\u2019ll show you how to use it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Download the plugin<\/strong><\/h3>\n\n\n\n<p>To get started, you\u2019ll need to <a href=\"https:\/\/wordpress.org\/plugins\/rocket-lazy-load\/#installation\" target=\"_blank\" rel=\"noreferrer noopener\">download and activate<\/a> the Lazy Load plugin.<\/p>\n\n\n\n<p>It\u2019s a free tool, so you can pick it up right from the WordPress Plugin Directory. Once you\u2019ve done that, you\u2019ll just have a few quick settings to configure.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Configure the plugin\u2019s settings<\/strong><\/h3>\n\n\n\n<p>Next, you can navigate to <em>Settings<\/em> &gt; <em>Lazy Load<\/em> in your WordPress dashboard to configure the plugin\u2019s options.<\/p>\n\n\n\n<p>Here, you\u2019ll choose what aspects of your site\u2019s pages you want lazy loading to handle.<\/p>\n\n\n\n<p>Simply check the boxes for the items you\u2019d like to include. You can have the plugin handle images, iframes, and videos. Lazy Load by <a href=\"https:\/\/wpengine.com\/blog\/supercharge-site-speed-wp-rocket\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Rocket<\/a> can also replace YouTube videos with thumbnails until your site\u2019s users have that piece of content in view.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Adding lazy load manually<\/strong><\/h2>\n\n\n\n<p>For a long time, if you wanted to implement lazy loading manually on your site, you needed to edit core files manually and add custom scripts to them. However, with the <a href=\"https:\/\/make.wordpress.org\/core\/2020\/07\/14\/lazy-loading-images-in-5-5\/\" target=\"_blank\" rel=\"noreferrer noopener\">release of WordPress 5.5<\/a>, lazy loading is now a part of the core software.<\/p>\n\n\n\n<p>WordPress now implements lazy loading by default for any images on your site that have <em>width <\/em>and <em>height <\/em>attributes. To do that, WordPress uses the following attribute pair:<\/p>\n\n\n\n<p><em>loading=\u201clazy\u201d<\/em><\/p>\n\n\n\n<p>If you\u2019re using the latest version of WordPress, you should see this attribute within the <em>img <\/em>tags for any image you\u2019ve uploaded to your site. In practice, that should look something like this:<\/p>\n\n\n\n<p><em>&lt;img src=\u201cyour-image-file.png\u201d loading=\u201clazy\u201d alt=\u201cThis is a lazy loaded image!\u201d \/&gt;<\/em><\/p>\n\n\n\n<p>Although native lazy loading implementation makes things a lot easier in WordPress, not all browsers support the <em>loading <\/em>attribute that it uses. Using a plugin such as LazyLoad by WP Rocket ensures better support across most browsers, and it also enables you to use lazy loading for other types of elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Lazy loading videos in WordPress<\/strong><\/h2>\n\n\n\n<p>Unlike images, your browser doesn\u2019t load videos on a page in their entirety when you visit, at least by default. Instead, it checks an attribute called <em>preload<\/em>, which tells your browser whether to pre-load a video or just load its metadata. If you pre-load videos, they should start playing immediately once users click on them.<\/p>\n\n\n\n<p>The downside of preloading videos is that it often impacts your loading times. By implementing lazy load options for videos, you tell visitors\u2019 browsers not to pre-load any video until it\u2019s needed. In most cases, that shouldn\u2019t impact the user experience, and it can even increase performance if you include multiple videos on your pages.<\/p>\n\n\n\n<p>As we mentioned before, the LazyLoad plugin supports lazy loading for various media types. That makes it one of the best lazy load plugins for WordPress users who embed videos. If you\u2019ve uploaded videos that you want to share to WordPress, we recommend enabling the <em>IFrames and Videos<\/em> setting pictured earlier.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Lazy loading in WordPress: SEO<\/strong> impacts<\/h2>\n\n\n\n<p>As you may know, search engines crawl your website to index its pages and other elements, including images. Although lazy loading can drastically increase site performance, in certain cases it can also prevent search engines from indexing images. That means those files won\u2019t appear in image search results, which can reduce your overall organic traffic.<\/p>\n\n\n\n<p>To avoid that issue, you\u2019ll want to use a lazy loading plugin that\u2019s SEO friendly (such as LazyLoad). If you use WordPress\u2019 built-in lazy load options, you\u2019ll want to ensure that your site properly loads images <a href=\"https:\/\/developers.google.com\/search\/docs\/guides\/lazy-loading\" target=\"_blank\" rel=\"noreferrer noopener\">when they\u2019re visible in the viewport<\/a>.<\/p>\n\n\n\n<p>Additionally, you shouldn\u2019t forget to <a href=\"https:\/\/wpengine.com\/resources\/wordpress-image-alt-text\/\" target=\"_blank\" rel=\"noreferrer noopener\">use alt tags<\/a> for all of the images on your website. Even if you\u2019re using lazy load in WordPress, alt tags provide context that search engines can use to determine the contents of your images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Create with agility on WP Engine<\/strong><\/h2>\n\n\n\n<p>Adding elements such as a lazy loading feature can help take your website to the next level. Not only can this improve your search rankings, but it can also give your site\u2019s users a better experience.<\/p>\n\n\n\n<p>Here at WP Engine, we know what a difference the right <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress hosting<\/a> and <a href=\"https:\/\/developer.wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">developer resources can<\/a> make to your website. Additionally, we offer helpful solutions to help you improve your <a href=\"https:\/\/wpengine.com\/speed-tool\/\" target=\"_blank\" rel=\"noreferrer noopener\">site\u2019s speed<\/a>, along with <a href=\"https:\/\/wpengine.com\/plans\/\" target=\"_blank\" rel=\"noreferrer noopener\">plans for all your website<\/a> needs!&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019re likely aware of how important page loading speed is. Suffice it to say that every second counts when you\u2019re competing for the top spot in search results. You might be wondering, however, what you can do to improve your site\u2019s performance. Fortunately, there are a couple of options when it comes to improving how<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":297,"featured_media":114023,"template":"","resource-topic":[912],"resource-role":[895,896,897,903,1296],"resource-type":[916],"class_list":["post-96147","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Lazy Load for WordPress | WP Engine\u00ae<\/title>\n<meta name=\"description\" content=\"Lazy loading elements of your WordPress site can be a great way to speed up your page! Check out the comprehensive WP Engine guide to lazy loading!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazy Load for WordPress | WP Engine\u00ae\" \/>\n<meta property=\"og:description\" content=\"Lazy loading elements of your WordPress site can be a great way to speed up your page! Check out the comprehensive WP Engine guide to lazy loading!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-17T16:06:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/11\/shutterstock_46726669.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-lazy-load\/\",\"url\":\"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/\",\"name\":\"Lazy Load for WordPress | WP Engine\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2021-01-12T16:25:26+00:00\",\"dateModified\":\"2025-07-17T16:06:36+00:00\",\"description\":\"Lazy loading elements of your WordPress site can be a great way to speed up your page! Check out the comprehensive WP Engine guide to lazy loading!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Benefits of Lazy Load for WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521\",\"name\":\"Erin Myers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"caption\":\"Erin Myers\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lazy Load for WordPress | WP Engine\u00ae","description":"Lazy loading elements of your WordPress site can be a great way to speed up your page! Check out the comprehensive WP Engine guide to lazy loading!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Lazy Load for WordPress | WP Engine\u00ae","og_description":"Lazy loading elements of your WordPress site can be a great way to speed up your page! Check out the comprehensive WP Engine guide to lazy loading!","og_url":"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2025-07-17T16:06:36+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/11\/shutterstock_46726669.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-lazy-load\/","url":"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/","name":"Lazy Load for WordPress | WP Engine\u00ae","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2021-01-12T16:25:26+00:00","dateModified":"2025-07-17T16:06:36+00:00","description":"Lazy loading elements of your WordPress site can be a great way to speed up your page! Check out the comprehensive WP Engine guide to lazy loading!","breadcrumb":{"@id":"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/resources\/wordpress-lazy-load\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Benefits of Lazy Load for WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521","name":"Erin Myers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","caption":"Erin Myers"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2019\/11\/shutterstock_46726669-1.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Developer, Freelancer, Marketer, Publisher","topic":"<strong>Topics:<\/strong> Performance","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/96147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/114023"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=96147"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=96147"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=96147"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=96147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}