{"id":58856,"date":"2020-06-07T12:14:56","date_gmt":"2020-06-07T06:44:56","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=58856"},"modified":"2026-10-07T06:50:57","modified_gmt":"2026-10-07T01:20:57","slug":"lazy-load-images","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/","title":{"rendered":"How to Lazy Load Images (Native, WordPress and Lazysizes) 2026"},"content":{"rendered":"<p>Want to lazy load images to speed up your site? Lazy loading means images further down the page load only when a visitor scrolls near them, so the first screen appears faster and you save bandwidth. In 2026 you don&#8217;t need a script for this anymore: every modern browser supports native lazy loading with one HTML attribute, and WordPress adds it for you. Here&#8217;s how to lazy load images the right way, without hurting your Core Web Vitals.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-58881\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/slow-speed.jpg\" alt=\"lazy load images to improve page speed\" width=\"589\" height=\"276\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/slow-speed.jpg 589w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/slow-speed-300x141.jpg 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/slow-speed-150x70.jpg 150w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> Add <code>loading=\"lazy\"<\/code> to images below the fold, set their <code>width<\/code> and <code>height<\/code>, and <strong>never lazy load your main (LCP) image<\/strong>. Give that hero image <code>fetchpriority=\"high\"<\/code> instead.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae3241dc2704\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae3241dc2704\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#1_Lazy_load_images_with_the_native_loading_attribute\" >1. Lazy load images with the native loading attribute<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#2_Dont_lazy_load_the_LCP_image\" >2. Don&#8217;t lazy load the LCP image<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#3_Lazy_loading_in_WordPress\" >3. Lazy loading in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#4_Lazy_load_images_with_Lazysizes_JavaScript_option\" >4. Lazy load images with Lazysizes (JavaScript option)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#5_Test_your_lazy_loading\" >5. Test your lazy loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#Is_lazy_loading_good_for_SEO\" >Is lazy loading good for SEO?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#Should_I_lazy_load_all_images\" >Should I lazy load all images?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/06\/lazy-load-images\/#Does_lazy_loading_work_on_mobile\" >Does lazy loading work on mobile?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_Lazy_load_images_with_the_native_loading_attribute\"><\/span>1. Lazy load images with the native loading attribute<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Native lazy loading works in Chrome, Edge, Firefox and Safari. Just add the attribute to your image tag:<\/p>\n<p><code>&lt;img src=\"photo.jpg\" alt=\"Photo\" width=\"800\" height=\"450\" loading=\"lazy\"&gt;<\/code><\/p>\n<p>It also works for iframes, such as embedded YouTube videos and maps:<\/p>\n<p><code>&lt;iframe src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID\" loading=\"lazy\"&gt;&lt;\/iframe&gt;<\/code><\/p>\n<p>Always include <code>width<\/code> and <code>height<\/code> (or a CSS aspect ratio) so the page doesn&#8217;t jump as images load. That shifting is measured as Cumulative Layout Shift (CLS). See the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/Guides\/Lazy_loading\" target=\"_blank\" rel=\"noopener\">MDN guide to lazy loading<\/a> for the full browser details.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Dont_lazy_load_the_LCP_image\"><\/span>2. Don&#8217;t lazy load the LCP image<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This is the most common mistake. Your largest above-the-fold image, usually the featured or hero image, is the Largest Contentful Paint (LCP) element in <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/05\/core-web-vitals\/\">Core Web Vitals<\/a>. If it&#8217;s lazy loaded, the browser waits before fetching it and your LCP gets worse. Load it normally and tell the browser it&#8217;s important:<\/p>\n<p><code>&lt;img src=\"hero.jpg\" alt=\"Hero\" width=\"1200\" height=\"630\" fetchpriority=\"high\"&gt;<\/code><\/p>\n<p>Google&#8217;s <a href=\"https:\/\/web.dev\/articles\/browser-level-image-lazy-loading\" target=\"_blank\" rel=\"noopener\">web.dev guide<\/a> recommends lazy loading only images outside the first viewport.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Lazy_loading_in_WordPress\"><\/span>3. Lazy loading in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WordPress has added <code>loading=\"lazy\"<\/code> to images automatically since version 5.5. Since <a href=\"https:\/\/make.wordpress.org\/core\/2023\/07\/13\/image-performance-enhancements-in-wordpress-6-3\/\" target=\"_blank\" rel=\"noopener\">WordPress 6.3<\/a>, it also skips lazy loading for the first images on a page and adds <code>fetchpriority=\"high\"<\/code> to the image most likely to be the LCP. So on a standard WordPress site, you often don&#8217;t need to do anything.<\/p>\n<p>Caching and speed plugins can go further, lazy loading background images, iframes and video thumbnails:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/\" target=\"_blank\" rel=\"noopener\">LiteSpeed Cache<\/a> (which we use on this site): <strong>Page Optimization \u2192 Media Settings \u2192 Lazy Load Images<\/strong>. Add your logo and hero image classes to the exclude list.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener\">W3 Total Cache<\/a>, <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noopener\">WP Rocket<\/a> and <a href=\"https:\/\/perfmatters.io\/\" target=\"_blank\" rel=\"noopener\">Perfmatters<\/a> have similar lazy load options.<\/li>\n<\/ul>\n<p>Don&#8217;t enable lazy loading in two plugins at once, as they can conflict and break images.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Lazy_load_images_with_Lazysizes_JavaScript_option\"><\/span>4. Lazy load images with Lazysizes (JavaScript option)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before native support, we used the <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\" target=\"_blank\" rel=\"noopener\">lazysizes<\/a> script, and it&#8217;s still useful for background images, responsive images with complex <code>srcset<\/code>, or extra effects. It&#8217;s SEO-friendly because Googlebot can still see the images.<\/p>\n<ol>\n<li>Add the script, for example from <a href=\"https:\/\/cdnjs.com\/libraries\/lazysizes\" target=\"_blank\" rel=\"noopener\">cdnjs<\/a>:<br \/>\n<code>&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lazysizes\/5.3.2\/lazysizes.min.js\" async&gt;&lt;\/script&gt;<\/code><\/li>\n<li>Change <code>src<\/code> to <code>data-src<\/code> (and <code>srcset<\/code> to <code>data-srcset<\/code>) on images you want to defer.<\/li>\n<li>Add the <code>lazyload<\/code> class:<br \/>\n<code>&lt;img data-src=\"image.jpg\" data-srcset=\"image2x.jpg 2x\" class=\"lazyload\" alt=\"Image\"&gt;<\/code><\/li>\n<\/ol>\n<p>Lazysizes also supports native lazy loading through its <code>nativeLoading<\/code> plugin, so you get both. For most sites, though, the native attribute alone is simpler and faster.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Test_your_lazy_loading\"><\/span>5. Test your lazy loading<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Run your page through <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a> or other <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/02\/best-web-page-speed-tests-online\/\">site speed tests<\/a>. Check for warnings like &#8220;Largest Contentful Paint image was lazily loaded&#8221; and &#8220;Defer offscreen images&#8221;. In Chrome DevTools, open the Network tab, filter by Img and scroll: images should appear only as you reach them.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Is_lazy_loading_good_for_SEO\"><\/span>Is lazy loading good for SEO?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, when done properly. Native lazy loading and lazysizes both let Googlebot find images. Just don&#8217;t lazy load the main image, and make sure images have proper <code>src<\/code> or <code>data-src<\/code> URLs and alt text.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Should_I_lazy_load_all_images\"><\/span>Should I lazy load all images?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. Lazy load images below the fold only. Images in the first screen, especially the LCP image and logo, should load immediately.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_lazy_loading_work_on_mobile\"><\/span>Does lazy loading work on mobile?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. All modern mobile browsers support the <code>loading<\/code> attribute, and it saves the most data on mobile connections.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to lazy load images to speed up your site? Lazy loading means images further down the page load only&#8230;<\/p>\n","protected":false},"author":4,"featured_media":58881,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6,41],"tags":[49],"class_list":["post-58856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","category-search-engine-optimization","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/58856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=58856"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/58856\/revisions"}],"predecessor-version":[{"id":63360,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/58856\/revisions\/63360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/58881"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=58856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=58856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=58856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}