{"id":3350174,"date":"2021-05-10T15:56:45","date_gmt":"2021-05-10T13:56:45","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&#038;p=3350174"},"modified":"2024-09-12T15:25:54","modified_gmt":"2024-09-12T13:25:54","slug":"defer-offscreen-images","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/","title":{"rendered":"How to Defer Offscreen Images (With and Without Plugins)"},"content":{"rendered":"<p>\u201cDefer offscreen images\u201d is one of the PageSpeed Insights recommendations included under the Opportunities section of the performance audit.&nbsp;<\/p><p>Google recommends to \u201cConsider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-time-to-interactive\/\">time to interactive<\/a>\u201d.<\/p><p>If you\u2019re not sure about what it means and \u2014 more importantly \u2014 if you\u2019re wondering how to fix the issue on your WordPress site, keep reading!<\/p><p>You\u2019ll learn what the PSI recommendation means and how to defer offscreen images and improve your site\u2019s performance.<\/p><p>Watch our video and read the article!<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Defer Offscreen Images on WordPress\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/_Z_3ogupDoU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure><p><\/p><h2 class=\"wp-block-heading\">What Defer Offscreen Images Means<\/h2><p>Let\u2019s start with explaining what the fold is. The fold is the part of the screen that you see as soon as you land on a page. You don\u2019t have to scroll down or do anything else \u2014 it\u2019s simply the first content you see. Since this part is right on the top of the page, it\u2019s named <strong>above the fold<\/strong>. It\u2019s the most important part of the page and the first one that the browser has to render to start interacting with the content.<\/p><p>On the other hand, all the content visible only after scrolling down is named <strong>below the fold<\/strong>. As you can imagine, it\u2019s less relevant when it comes to loading a page.&nbsp;<\/p><p>That\u2019s why a web performance best practice is to load the content below the fold only when the page\u2019s rendering is over. Before that moment, the browser will only load the content above the fold. As a result, the loading time will be faster, and the page\u2019s interactivity will be good.<\/p><p>Now it\u2019s easier to understand what this PageSpeed Insights audit is about. Defer offscreen images means loading the images below the fold (offscreen) only after the critical resources above the fold have been fully loaded.<\/p><h2 class=\"wp-block-heading\">Why You Should Defer Offscreen Images&nbsp;<\/h2><p>When the browser has to download and render non-critical resources such as the images below the fold, the page takes longer to load, and users can\u2019t interact with the page as quickly as expected.<\/p><p>Deferring offscreen images can improve your WordPress site\u2019s performance and crucial performance metrics, such as Interaction to Next Paint, First Input Delay, and the overall loading time.<\/p><p><a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-interaction-to-next-paint\/\">Interaction to Next Paint (INP)<\/a> is a new Core Web Vital and measures page responsiveness. The First Input Delay (FID) is a former <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\">Core Web Vitals metrics<\/a>, and it measures the first page\u2019s  interaction. Starting from mid-June 2021, Core Web Vitals are part of a new ranking factor, the <a href=\"https:\/\/wp-rocket.me\/blog\/google-page-experience-update-2021\/\">Google Page Experience Update 2021<\/a>.<\/p><p>In addition to <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-first-input-delay\/\">improving the Interaction to Next Paint and the First Input Delay<\/a> to provide a better user experience, you should also consider the potential SEO impact of FID.<\/p><p>Since FID can only be measured as Field data \u2014 with real user interaction \u2014 there is another metric you should consider: <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/reduce-total-blocking-time\/\">Total Blocking Time<\/a>. TBT is closely tied to FID, and it measures the user input based on Lab Data. It\u2019s one of the most relevant Lighthouse metrics as its weight is 30% out of the overall <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/\">Lighthouse performance score<\/a>. It\u2019s then crucial that you defer offscreen images to improve the overall PageSpeed grade, too.<\/p><p>Last but not least, don\u2019t forget about the <strong>loading time<\/strong>! Even though it\u2019s not closely related to SEO performance or a specific score, loading time can make a significant difference when it comes to providing an excellent user experience and letting your users convert.<\/p><div id=\"om-nyrydv5iync8zrrulm5i-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'nyrydv5iync8zrrulm5i')<\/script><h2 class=\"wp-block-heading\">How to Find the Offscreen Images to Defer<\/h2><p>Finding the offscreen images to defer is pretty straightforward. After running a test with PageSpeed Insights, go to the Diagnostics section and look for the Defer Offscreen Images audit.<\/p><p>PSI will flag the images that are not being deferred \u2014 which is good for troubleshooting when not all the images are lazy-loaded (you&#8217;ll read more on lazy loading in the next section).<\/p><p>When testing your URL\u2019s performance, you can come across two scenarios.<\/p><p>If there is an issue going on, you\u2019ll likely get something similar to the example below. You\u2019ll see a red warning and a list of images that you should defer.<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1061\" height=\"845\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png\" alt=\"Defer offscreen images - PSI\" class=\"wp-image-3350176\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png 1061w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-245x195.png 245w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-768x612.png 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><figcaption class=\"wp-element-caption\">Defer offscreen images &#8211; PSI<\/figcaption><\/figure><p><br>On the other hand, if Lighthouse doesn\u2019t detect any issues about offscreen images, you\u2019ll see the audit under the \u201cPassed audits\u201d section:<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"442\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-passed-audit.png\" alt=\"Defer offscreen images - Passed audits - PSI\" class=\"wp-image-3350194\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-passed-audit.png 1067w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-passed-audit-310x128.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-passed-audit-768x318.png 768w\" sizes=\"(max-width: 1067px) 100vw, 1067px\" \/><figcaption class=\"wp-element-caption\">Defer offscreen images &#8211; Passed audits &#8211; PSI<\/figcaption><\/figure><h2 class=\"wp-block-heading\">How to Defer Offscreen Images on WordPress <\/h2><p>Once you\u2019ve identified the images to defer, you\u2019re ready to move forward and get the job done.<\/p><p>The first thing to keep in mind is that <strong>it\u2019s best to defer all the images that are below the fold.<\/strong><\/p><h3 class=\"wp-block-heading\">The Lazy Loading Option<\/h3><p>The main way to go to defer images is <a href=\"https:\/\/wp-rocket.me\/blog\/lazy-loading-wordpress-5-5\/\">lazy loading<\/a>. Thanks to lazy loading, all the images above the fold won\u2019t be loaded until the user scrolls down the page.&nbsp;<\/p><p>Since the browser won\u2019t consider any of these images during the rendering, the page will load pretty fast, and metrics such as First Input Delay will get a good score. What\u2019s more, you\u2019ll tackle the PageSpeed Insights recommendation.<\/p><h4 class=\"wp-block-heading\">Should You Lazy Load All the Images?&nbsp;<\/h4><p>While you should lazy load all the images below the fold, <strong>you should always exclude the above-the-fold images from lazy loading.&nbsp;<\/strong><\/p><p>The risk is to increase the Largest Contentful Paint grade, which measures how long it takes for the largest element to become visible in the viewport. If the LCP element is an image \u2014&nbsp; as it\u2019s often the case \u2014&nbsp; it will take longer to load because of lazy loading. As a result, the LCP score will get worse.<\/p><h3 class=\"wp-block-heading\">Other Options to Defer Offscreen Images<\/h3><p>For mobile, you could also defer offscreen images through AMP. The AMP markup &lt;amp-img&gt; will lazy load images automatically.<\/p><p>If some images are added dynamically with JavaScript, delaying or deferring JavaScript would also delay the images. Similarly, if some images below the fold are added with the CSS stylesheet, you could optimize CSS delivery and defer them.<\/p><p>However, lazy loading is the easiest way to go. <\/p><div id=\"om-xwmxyufhhr3rxywiohez-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'xwmxyufhhr3rxywiohez')<\/script><h2 class=\"wp-block-heading\">How to Manually Defer (Lazy Load) Offscreen Images Without Plugins<\/h2><p>You can manually defer offscreen images through lazy loading by using the attribute &lt;img loading=&#8221;lazy&#8221;&gt;.&nbsp;Here&#8217;s an example:<\/p><p>&lt;img src=&#8221;example.png&#8221; loading=&#8221;lazy&#8221; alt=&#8221;example&#8221;&gt;<\/p><p>When the loading attribute is added, it will trigger a browser-level lazy load. The loading attribute is supported in<a href=\"https:\/\/caniuse.com\/loading-lazy-attr\"> Chrome-based browsers and Firefox<\/a>.<\/p><p>Keep in mind that <a href=\"https:\/\/web.dev\/browser-level-image-lazy-loading\/#improved-data-savings-and-distance-from-viewport-thresholds\">the threshold to trigger loading images<\/a> is 1250px (fast connections like 4g) and 2500px (for slower connections like 3g).&nbsp;<\/p><div id=\"om-nyrydv5iync8zrrulm5i-holder\"><\/div>\n\t<script>(function (d, u, ac) {\n\t\t\tvar s = d.createElement('script')\n\t\t\ts.type = 'text\/javascript'\n\t\t\ts.src = 'https:\/\/a.omappapi.com\/app\/js\/api.min.js'\n\t\t\ts.async = true\n\t\t\ts.dataset.user = u\n\t\t\ts.dataset.campaign = ac\n\t\t\td.getElementsByTagName('head')[0].appendChild(s)\n\t\t})(document, 20440, 'nyrydv5iync8zrrulm5i')<\/script><h2 class=\"wp-block-heading\">How to Defer (Lazy Load) Offscreen Images With Plugins<\/h2><p>As a WordPress user, you should know that <a href=\"https:\/\/make.wordpress.org\/core\/2020\/07\/14\/lazy-loading-images-in-5-5\/\">WordPress uses native LazyLoad by default<\/a>.<\/p><p>WordPress will add the attribute loading=&#8221;lazy&#8221; to all images with the width and height attributes. However, this feature doesn\u2019t apply to background images and iframes on all browsers.&nbsp;<\/p><p>Browsers can&#8217;t lazy load background images because of how they process them while analyzing and rendering the page.<\/p><p>So, if you need to lazy load such images, you should use one of the <a href=\"https:\/\/wp-rocket.me\/blog\/best-lazy-load-plugins-wordpress\/\">best lazy loading plugins for WordPress<\/a>. <\/p><p>The easiest option is to take advantage of WP Rocket, which will help you speed up your site even beyond lazy loading!<\/p><p>In the Media tab, you\u2019ll find the option to lazy load your images and exclude any of them, if needed (remember what we wrote above about the LCP grade). It\u2019s as simple as it seems!<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"768\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/lazy-load.png\" alt=\"LazyLoad feature - WP Rocket\n\" class=\"wp-image-3350206\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/lazy-load.png 1600w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/lazy-load-310x149.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/lazy-load-768x369.png 768w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">LazyLoad feature &#8211; WP Rocket<br><\/figcaption><\/figure><h2 class=\"wp-block-heading\">Defer Offscreen Images with WP Rocket: Before &amp; After Results<\/h2><p>What\u2019s the impact on the Defer offscreen images audit with and without WP Rocket?<\/p><p>We ran a test using by installing the Astra theme and importing an eCommerce site with Beaver Builder.<\/p><p>By running a test on a page without WP Rocket, we got an orange flag regarding this specific audit:<\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"911\" height=\"799\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-PSI.png\" alt=\"Defer offscreen images - Orange flag\n\" class=\"wp-image-3350183\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-PSI.png 911w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-PSI-222x195.png 222w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images-PSI-768x674.png 768w\" sizes=\"(max-width: 911px) 100vw, 911px\" \/><figcaption class=\"wp-element-caption\">Defer offscreen images &#8211; Orange flag<br><\/figcaption><\/figure><p><br><strong>We then activated WP Rocket and the lazy loading feature<\/strong>. This time, the opportunities section didn\u2019t show any flag related to deferring offscreen images:<br><\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"719\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/Opportunities-section-PSI.png\" alt=\"\" class=\"wp-image-3350214\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/Opportunities-section-PSI.png 900w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/Opportunities-section-PSI-244x195.png 244w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/Opportunities-section-PSI-768x614.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption class=\"wp-element-caption\">Opportunities section &#8211; PSI<br><\/figcaption><\/figure><p><br>Scrolling down, <strong>we found the audit under the green flag<\/strong>. It took us one click to solve a performance issue. Pretty good, right?<br><\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"719\" height=\"809\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/07\/Passed-audits-PSI-offscreen-images.png\" alt=\"\" class=\"wp-image-3536849\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/07\/Passed-audits-PSI-offscreen-images.png 719w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/07\/Passed-audits-PSI-offscreen-images-173x195.png 173w\" sizes=\"(max-width: 719px) 100vw, 719px\" \/><figcaption class=\"wp-element-caption\">Passed audits &#8211; PSI<br><\/figcaption><\/figure><h2 class=\"wp-block-heading\">Start Deferring Offscreen Images Right Now<\/h2><p>Deferring offscreen images will help you manage below-the-fold images and help with the specific PageSpeed Insights recommendation.<\/p><p>You can use WP Rocket to speed up your site and fix any performance issues with no effort at all.<\/p><p>Not a WP Rocket customer yet? Save yourself time and let WP Rocket do the job for you. <a href=\"https:\/\/wp-rocket.me\/features\/\"><strong>WP Rocket is the easiest way to improve your PageSpeed Insights score<\/strong><\/a>.&nbsp;<\/p><p><strong>You can always count on our 100% money-back guarantee. <\/strong>Although we don\u2019t think you\u2019ll ever want one, we\u2019ll gladly provide a refund if you request it within 14 days of purchase.<\/p><p>\ud83d\ude80 <strong>The only risk you\u2019ll be taking with our plugin is speeding up your website. <\/strong>WP Rocket automatically applies 80% of web performance best practices, instantly boosting your Core Web Vitals scores.&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Are you looking for a straightforward and easy way to defer offscreen images on your site? Keep reading! You\u2019ll learn everything you should know to address the PageSpeed Insights recommendation.<\/p>\n","protected":false},"template":"","core_web_vitals":[159],"class_list":["post-3350174","core_web_vitals_hub","type-core_web_vitals_hub","status-publish","hentry","core_web_vitals-improve-interaction-to-next-paint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Defer (Lazy Load) Offscreen Images With and Without Plugins<\/title>\n<meta name=\"description\" content=\"Looking for a way to defer offscreen images on WordPress? Keep reading! You\u2019ll find everything you need to know to tackle the PageSpeed Insights recommendation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Defer (Lazy Load) Offscreen Images With and Without Plugins\" \/>\n<meta property=\"og:description\" content=\"Looking for a way to defer offscreen images on WordPress? Keep reading! You\u2019ll find everything you need to know to tackle the PageSpeed Insights recommendation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-12T13:25:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/\",\"url\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/\",\"name\":\"How to Defer (Lazy Load) Offscreen Images With and Without Plugins\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png\",\"datePublished\":\"2021-05-10T13:56:45+00:00\",\"dateModified\":\"2024-09-12T13:25:54+00:00\",\"description\":\"Looking for a way to defer offscreen images on WordPress? Keep reading! You\u2019ll find everything you need to know to tackle the PageSpeed Insights recommendation.\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png\",\"width\":1061,\"height\":845},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wp-rocket.me\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Core Web Vitals\",\"item\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Interaction to Next Paint\",\"item\":\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-interaction-to-next-paint\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Defer Offscreen Images (With and Without Plugins)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Defer (Lazy Load) Offscreen Images With and Without Plugins","description":"Looking for a way to defer offscreen images on WordPress? Keep reading! You\u2019ll find everything you need to know to tackle the PageSpeed Insights recommendation.","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:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/","og_locale":"en_US","og_type":"article","og_title":"How to Defer (Lazy Load) Offscreen Images With and Without Plugins","og_description":"Looking for a way to defer offscreen images on WordPress? Keep reading! You\u2019ll find everything you need to know to tackle the PageSpeed Insights recommendation.","og_url":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_modified_time":"2024-09-12T13:25:54+00:00","og_image":[{"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png"}],"twitter_card":"summary_large_image","twitter_site":"@wp_rocket","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/","url":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/","name":"How to Defer (Lazy Load) Offscreen Images With and Without Plugins","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png","datePublished":"2021-05-10T13:56:45+00:00","dateModified":"2024-09-12T13:25:54+00:00","description":"Looking for a way to defer offscreen images on WordPress? Keep reading! You\u2019ll find everything you need to know to tackle the PageSpeed Insights recommendation.","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2021\/05\/defer-offscreen-images.png","width":1061,"height":845},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/defer-offscreen-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-rocket.me"},{"@type":"ListItem","position":2,"name":"Core Web Vitals","item":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/"},{"@type":"ListItem","position":3,"name":"Interaction to Next Paint","item":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-interaction-to-next-paint\/"},{"@type":"ListItem","position":4,"name":"How to Defer Offscreen Images (With and Without Plugins)"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals_hub\/3350174"}],"collection":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals_hub"}],"about":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/types\/core_web_vitals_hub"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media?parent=3350174"}],"wp:term":[{"taxonomy":"core_web_vitals","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/core_web_vitals?post=3350174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}