{"id":2198,"date":"2024-03-08T17:00:45","date_gmt":"2024-03-08T15:00:45","guid":{"rendered":"https:\/\/fastpixel.io\/?p=2198"},"modified":"2024-03-14T17:45:14","modified_gmt":"2024-03-14T15:45:14","slug":"how-to-defer-offscreen-images-in-wordpress","status":"publish","type":"post","link":"https:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/","title":{"rendered":"How To Defer Offscreen Images In WordPress"},"content":{"rendered":"<p>One common recommendation seen on page speed testers like Google&#8217;s PageSpeed Insights is to defer offscreen images. In this article, we&#8217;ll delve into what this recommendation means and how you can implement it on your WordPress site using FastPixel.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" 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: #000000;color:#000000\" 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><\/span><\/a><\/span><\/div>\n<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:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/#what-do-defer-offscreen-images-mean\" >What do defer offscreen images mean<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/#why-defer-offscreen-images\" >Why defer offscreen images&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/#how-to-identify-the-offscreen-images-to-defer\" >How to identify the offscreen images to defer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/#how-to-defer-offscreen-images-in-wordpress\" >How to defer offscreen images in WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/#how-to-manually-defer-lazy-load-offscreen-images\" >How to manually defer (lazy load) offscreen images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/#how-to-defer-lazy-load-offscreen-images-using-a-plugin\" >How to defer (lazy load) offscreen images using a plugin<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fastpixel.io\/fr\/blog\/how-to-defer-offscreen-images-in-wordpress\/#conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"what-do-defer-offscreen-images-mean\"><\/span>What do defer offscreen images mean<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When a user visits a webpage, all the images on that page are typically loaded at once. This includes images that might not be immediately visible to the user, such as those located below the fold or offscreen. Loading these offscreen images alongside the visible content can significantly increase the initial page load time, leading to a slower user experience.<\/p>\n\n\n\n<p>Deferred offscreen image loading is a <strong>technique that delays the loading <\/strong>of offscreen images until they are about to come into view. This means that images below the fold or offscreen are only loaded when the user scrolls down and approaches them, reducing the initial load time and improving overall page speed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"why-defer-offscreen-images\"><\/span>Why defer offscreen images&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here are the main reasons why deferring offscreen images can be beneficial:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Faster initial page load: <\/strong>You allow the critical content of the webpage to load first, which can improve the perceived loading speed.<\/li>\n\n\n\n<li><strong>Reduced bandwidth usage: <\/strong>Offscreen images aren&#8217;t loaded until they are about to come into view, which means that users don&#8217;t waste bandwidth loading images they may never see if they don&#8217;t scroll down the page.<\/li>\n\n\n\n<li><strong>Improved performance on mobile devices: <\/strong>Mobile devices often have slower internet connections and limited resources compared to desktop computers. Deferring offscreen images helps optimize performance for these devices by reducing unnecessary image loading.<\/li>\n\n\n\n<li><strong>Optimized server resources: <\/strong>With fewer resources required to process image requests, your server can allocate resources more efficiently, leading to improved overall performance and stability.<\/li>\n\n\n\n<li><strong>Better user experience: <\/strong>Help minimize distractions and streamline the browsing experience by ensuring that users can access content quickly and smoothly.<\/li>\n\n\n\n<li><strong>Improved SEO performance:<\/strong> You increase your chances of ranking higher in search engine results and attracting more organic traffic.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-identify-the-offscreen-images-to-defer\"><\/span>How to identify the offscreen images to defer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>One simple way to identify offscreen images is by using tools like Google <a href=\"https:\/\/pagespeed.web.dev\/\" data-type=\"link\" data-id=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a>. This tool analyzes web pages and provides suggestions for improving performance, including identifying offscreen images.<\/p>\n\n\n\n<p>Access Google PageSpeed Insights by visiting the website and entering your website&#8217;s URL into the provided field.<\/p>\n\n\n\n<p>After analyzing your website, you will get a report highlighting various performance metrics and areas for improvement.<\/p>\n\n\n\n<p>Scroll down to the &#8220;Diagnostics&#8221; section of the report, where PageSpeed Insights will list specific recommendations for optimizing your website.<\/p>\n\n\n\n<p>Look for recommendations related to offscreen images. PageSpeed Insights may suggest deferring offscreen images or optimizing their loading to improve overall performance.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1333\" height=\"763\" src=\"https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images.png\" alt=\"\" class=\"wp-image-2206\" srcset=\"https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images.png 1333w, https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-300x172.png 300w, https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-1024x586.png 1024w, https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-360x206.png 360w\" sizes=\"(max-width: 1333px) 100vw, 1333px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-defer-offscreen-images-in-wordpress\"><\/span>How to defer offscreen images in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now that you&#8217;ve pinpointed the images for deferral, it&#8217;s time to roll up your sleeves and make it happen.<\/p>\n\n\n\n<p>Remember, the golden rule here is to<strong> prioritize deferring the images that are below the fold<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-manually-defer-lazy-load-offscreen-images\"><\/span>How to manually defer (lazy load) offscreen images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can manually defer offscreen images through lazy loading by using the attribute <code>&lt;img loading=&quot;&rdquo;lazy&rdquo;&quot;&gt;<\/code>.<\/p>\n\n\n\n<p>Here\u2019s an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=&quot;&rdquo;example.jpg&rdquo;&quot; loading=&quot;&rdquo;lazy&rdquo;&quot;&gt;<\/code><\/pre>\n\n\n\n<p>After adding this attribute, the image will be lazy-loaded at a browser level. The loading attribute is <a href=\"https:\/\/caniuse.com\/loading-lazy-attr\" data-type=\"link\" data-id=\"https:\/\/caniuse.com\/loading-lazy-attr\" target=\"_blank\" rel=\"noreferrer noopener\">supported by various browsers<\/a>, including Chrome, Firefox, Edge, Safari, and so on.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"how-to-defer-lazy-load-offscreen-images-using-a-plugin\"><\/span>How to defer (lazy load) offscreen images using a plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Implementing deferred offscreen image loading in WordPress can seem daunting, especially for those without coding experience. <\/p>\n\n\n\n<p>However, thanks to plugins like FastPixel, the process becomes much simpler.<\/p>\n\n\n\n<p>All you have to do is <a href=\"https:\/\/fastpixel.io\/downloads\/fastpixel-latest.zip\" data-type=\"link\" data-id=\"https:\/\/fastpixel.io\/downloads\/fastpixel-latest.zip\">t\u00e9l\u00e9charger<\/a> and install FastPixel on your WordPress site to have all images lazy-loaded by default, besides all the other features it comes up with to boost the performance of your site.<\/p>\n\n\n\n<p>After adding FastPixel to your toolset, make sure to regularly test your website&#8217;s performance using tools like PageSpeed Insights or GTmetrix. Monitor load times and other metrics to ensure that your site is consistently delivering a fast and smooth user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>One effective technique to enhance speed and performance is by deferring offscreen images. By delaying the loading of images that are not immediately visible on the user&#8217;s screen, you can prioritize the display of critical content, leading to faster page load times and smoother browsing experiences.<\/p>\n\n\n\n<p>With tools like FastPixel, the process becomes straightforward, offering WordPress users a hassle-free solution to optimize their site&#8217;s performance.<\/p>\n\n\n\n<div class=\"wp-block-group has-border-color has-palette-color-4-border-color has-palette-color-6-background-color has-background is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-e21fc307 wp-block-group-is-layout-flex\" style=\"border-width:1px;border-radius:20px;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)\">\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Give FastPixel a try for free<\/h3>\n\n\n\n<p>Take the first step towards a faster website today and give FastPixel a try!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/test.fastpixel.io\/\">Commencer<\/a><\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>One common recommendation seen on page speed testers like Google&#8217;s PageSpeed Insights is to defer offscreen images. In this article, we&#8217;ll delve into what this recommendation means and how you can implement it on your WordPress site using FastPixel. What do defer offscreen images mean When a user visits a webpage, all the images on [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2214,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[10,12],"tags":[],"class_list":["post-2198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-optimization","category-world-of-wordpress"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress.png",1000,612,false],"thumbnail":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress-150x150.png",150,150,true],"medium":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress-300x184.png",300,184,true],"medium_large":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress.png",768,470,false],"large":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress.png",1000,612,false],"1536x1536":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress.png",1000,612,false],"2048x2048":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress.png",1000,612,false],"trp-custom-language-flag":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress.png",18,12,false],"betterdocs-category-thumb":["https:\/\/fastpixel.io\/wp-content\/uploads\/2024\/03\/defer-offscreen-images-in-wordpress-360x220.png",360,220,true]},"uagb_author_info":{"display_name":"Andrei Alba","author_link":"https:\/\/fastpixel.io\/fr\/blog\/author\/andreialba\/"},"uagb_comment_info":0,"uagb_excerpt":"One common recommendation seen on page speed testers like Google&#8217;s PageSpeed Insights is to defer offscreen images. In this article, we&#8217;ll delve into what this recommendation means and how you can implement it on your WordPress site using FastPixel. What do defer offscreen images mean When a user visits a webpage, all the images on\u2026","_links":{"self":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/2198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/comments?post=2198"}],"version-history":[{"count":17,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/2198\/revisions"}],"predecessor-version":[{"id":2217,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/posts\/2198\/revisions\/2217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/media\/2214"}],"wp:attachment":[{"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/media?parent=2198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/categories?post=2198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastpixel.io\/fr\/wp-json\/wp\/v2\/tags?post=2198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}