{"id":1831,"date":"2021-08-05T11:36:06","date_gmt":"2021-08-05T11:36:06","guid":{"rendered":"https:\/\/www.wpstaq.com\/?post_type=pagespeedinsights&amp;p=1831"},"modified":"2021-08-05T11:36:06","modified_gmt":"2021-08-05T11:36:06","slug":"defer-offscreen-images","status":"publish","type":"pagespeedinsights","link":"https:\/\/www.wpstaq.com\/sg\/pagespeedinsights\/defer-offscreen-images\/","title":{"rendered":"Defer offscreen images"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"overview\">Overview<\/h2>\n\n\n\n<p>Deferring offscreen images (or lazy-loading) refers to the practice of delaying the loading of images that aren&#8217;t in your visitors&#8217; viewport until they are needed.<\/p>\n\n\n\n<p>When the browser loads a page, it downloads all the images requested, including ones that aren&#8217;t immediately visible to your visitors.<\/p>\n\n\n\n<p>Lazy-loading offscreen images is considered an industry best-practice as it ensures that the browser only downloads the images that are actually needed for display in the viewport.<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-does-deferring-offscreen-images-affect-page-performance\">How does deferring offscreen images affect page performance?<\/h2>\n\n\n\n<p>Images are often the largest resources on your page and require more time to download compared to text-based resources.<br><br>Lazy-loading offscreen images ensures that they only load when they are needed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-fix-audit\">How to defer offscreen images?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"using-staq-cache\">Using Staq Cache<\/h3>\n\n\n\n<p>No need for risky WordPress plugins or Javascript coding experience, Lazy Load images using Staq Cache plugin.<br><\/p>\n\n\n\n<p>Staq allows you to optimize and compress images automatically.<\/p>\n\n\n\n<p>You can compress the following images:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>png<\/li><li>jpg<\/li><li>WebP<\/li><\/ul>\n\n\n\n<p>Inside Staq Hosting, click Media in the horizontal tab. Then, click WEBP Image and Standard Image. From there, you can play with the settings:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png\" alt=\"\" class=\"wp-image-5943\"\/><\/figure>\n\n\n\n<p>You can then specify images that you don&#8217;t want to lazy load &#8211; this is usually images above the fold that you will see as soon as you load the page, such as site logos, banners etc.<br><br><\/p>\n\n\n\n<p><em>Please note that when an image is uploaded via Media Library in WordPress whilst hosted on Staq, we transfer the original image into an AWS S3 bucket for safekeeping and via AWS Lambda, compress and optimize the duplicate image.<\/em><\/p>\n\n\n\n<p><em>Staq will always have the original image you&#8217;ve uploaded just in case you wish to change the compression settings in the future.<\/em><\/p>\n","protected":false},"template":"","class_list":["post-1831","pagespeedinsights","type-pagespeedinsights","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Defer offscreen images - How to fix really quickly with Staq<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Defer offscreen images - How to fix really quickly with Staq\" \/>\n<meta property=\"og:description\" content=\"Overview Deferring offscreen images (or lazy-loading) refers to the practice of delaying the loading of images that aren&#8217;t in your visitors&#8217; viewport until they are needed. When the browser loads a page, it downloads all the images requested, including ones that aren&#8217;t immediately visible to your visitors. Lazy-loading offscreen images is considered an industry best-practice&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/\" \/>\n<meta property=\"og:site_name\" content=\"Managed Hosting Platform for WordPress\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/staqhosting\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/defer-offscreen-images\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/defer-offscreen-images\\\/\",\"name\":\"Defer offscreen images - How to fix really quickly with Staq\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/defer-offscreen-images\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/defer-offscreen-images\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png\",\"datePublished\":\"2021-08-05T11:36:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/defer-offscreen-images\\\/#breadcrumb\"},\"inLanguage\":\"en-sg\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/defer-offscreen-images\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-sg\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/defer-offscreen-images\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/defer-offscreen-images\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.wpstaq.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PageSpeedInsights\",\"item\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Defer offscreen images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"name\":\"Managed Hosting Platform for WordPress\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wpstaq.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-sg\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\",\"name\":\"Staq\",\"alternateName\":\"WPStaq\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-sg\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"width\":512,\"height\":512,\"caption\":\"Staq\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/staqhosting\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wpstaq\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Defer offscreen images - How to fix really quickly with Staq","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:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/","og_locale":"en_US","og_type":"article","og_title":"Defer offscreen images - How to fix really quickly with Staq","og_description":"Overview Deferring offscreen images (or lazy-loading) refers to the practice of delaying the loading of images that aren&#8217;t in your visitors&#8217; viewport until they are needed. When the browser loads a page, it downloads all the images requested, including ones that aren&#8217;t immediately visible to your visitors. Lazy-loading offscreen images is considered an industry best-practice&hellip;","og_url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/","og_site_name":"Managed Hosting Platform for WordPress","article_publisher":"https:\/\/www.facebook.com\/staqhosting\/","og_image":[{"url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/","url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/","name":"Defer offscreen images - How to fix really quickly with Staq","isPartOf":{"@id":"https:\/\/www.wpstaq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/#primaryimage"},"image":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png","datePublished":"2021-08-05T11:36:06+00:00","breadcrumb":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/#breadcrumb"},"inLanguage":"en-sg","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/"]}]},{"@type":"ImageObject","inLanguage":"en-sg","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/#primaryimage","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.13.07-pm-1024x475.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/defer-offscreen-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.wpstaq.com\/"},{"@type":"ListItem","position":2,"name":"PageSpeedInsights","item":"https:\/\/www.wpstaq.com\/pagespeedinsights\/"},{"@type":"ListItem","position":3,"name":"Defer offscreen images"}]},{"@type":"WebSite","@id":"https:\/\/www.wpstaq.com\/#website","url":"https:\/\/www.wpstaq.com\/","name":"Managed Hosting Platform for WordPress","description":"","publisher":{"@id":"https:\/\/www.wpstaq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wpstaq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-sg"},{"@type":"Organization","@id":"https:\/\/www.wpstaq.com\/#organization","name":"Staq","alternateName":"WPStaq","url":"https:\/\/www.wpstaq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-sg","@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","width":512,"height":512,"caption":"Staq"},"image":{"@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/staqhosting\/","https:\/\/www.linkedin.com\/company\/wpstaq"]}]}},"_links":{"self":[{"href":"https:\/\/www.wpstaq.com\/sg\/wp-json\/wp\/v2\/pagespeedinsights\/1831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpstaq.com\/sg\/wp-json\/wp\/v2\/pagespeedinsights"}],"about":[{"href":"https:\/\/www.wpstaq.com\/sg\/wp-json\/wp\/v2\/types\/pagespeedinsights"}],"wp:attachment":[{"href":"https:\/\/www.wpstaq.com\/sg\/wp-json\/wp\/v2\/media?parent=1831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}