{"id":1830,"date":"2021-08-05T11:35:45","date_gmt":"2021-08-05T11:35:45","guid":{"rendered":"https:\/\/www.wpstaq.com\/?post_type=pagespeedinsights&amp;p=1830"},"modified":"2021-08-05T11:35:45","modified_gmt":"2021-08-05T11:35:45","slug":"eliminate-render-blocking-resources","status":"publish","type":"pagespeedinsights","link":"https:\/\/www.wpstaq.com\/nz\/pagespeedinsights\/eliminate-render-blocking-resources\/","title":{"rendered":"Eliminate render-blocking resources"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Render-blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen.<\/p>\n\n\n\n<p>These resources delay the&nbsp;<a href=\"https:\/\/gtmetrix.com\/blog\/browser-timings\/#first-paint\">First Paint<\/a>&nbsp;&#8211; the time at which your browser renders something (i.e., background colours, borders, text or images) for the first time.<\/p>\n\n\n\n<p>Eliminating render-blocking resources can help your page load significantly faster and improve the website experience for your visitors.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How does eliminating render-blocking resources affect page performance?<\/h2>\n\n\n\n<p>Every time a browser loads a page, it parses through the page&#8217;s HTML code line-by-line.<br><br>In doing so, it may come across various scripts and tags that, unless specified otherwise, will be downloaded, parsed, and executed before moving onto the rest of the HTML code.<br><\/p>\n\n\n\n<p>Render-blocking resources delay the browser from starting the render process, extending your page&#8217;s First Paint.<\/p>\n\n\n\n<p>Multiple render-blocking resources could mean that your visitor waits for a long time before seeing anything meaningful on your page (like a blank or sparsely populated page).<\/p>\n\n\n\n<p>This gives visitors the impression that the page is taking too long to load, causing them to&nbsp;<em>refresh<\/em>,&nbsp;<em>hit the back button<\/em>, or&nbsp;<em>exit entirely<\/em>.<br><\/p>\n\n\n\n<p>Scripts and tags placed at the beginning of the page need to be deferred\/asynchronously loaded or eliminated altogether as the&nbsp;<em>quicker<\/em>&nbsp;your visitors see something load on your page, the&nbsp;<em>better<\/em>&nbsp;the performance (or in many cases, perception of performance).<\/p>\n\n\n\n<p>Minimizing render-blocking resources, as much as possible, can facilitate&nbsp;<strong>progressive loading<\/strong>, allowing First Paints to occur sooner, and enabling your visitors to perceive that your site is doing something.<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to eliminate render-blocking resources with Staq<\/h2>\n\n\n\n<p>Both .CSS and .JS files can cause render-blocking issues, however, you may find that Google identifies purely .CSS files only.<\/p>\n\n\n\n<p>The Staq tool may either eliminate render-blocking resources or improve them.<\/p>\n\n\n\n<p>To optimize, go to Site Optimizer &gt; CSS. Then turn on:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Load CSS deferred<\/li><li>Extract Critical CSS.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png\" alt=\"\" class=\"wp-image-5963\"\/><\/figure><\/div>\n\n\n\n<p>What this will do is find all the critical CSS that loads the website above the fold and add it as an inline CSS at the top of the HTML file. Then, it defers the rest of the CSS files that aren\u2019t required at the initial load.<\/p>\n","protected":false},"template":"","class_list":["post-1830","pagespeedinsights","type-pagespeedinsights","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Eliminate render-blocking resources - 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\/eliminate-render-blocking-resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eliminate render-blocking resources - How to fix really quickly with Staq\" \/>\n<meta property=\"og:description\" content=\"Overview Render-blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen. These resources delay the&nbsp;First Paint&nbsp;&#8211; the time at which your browser renders something (i.e., background colours, borders, text or images) for the first time. Eliminating render-blocking resources can help your page load significantly&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/\" \/>\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.36.00-pm-1024x710.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\\\/eliminate-render-blocking-resources\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/eliminate-render-blocking-resources\\\/\",\"name\":\"Eliminate render-blocking resources - How to fix really quickly with Staq\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/eliminate-render-blocking-resources\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/eliminate-render-blocking-resources\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png\",\"datePublished\":\"2021-08-05T11:35:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/eliminate-render-blocking-resources\\\/#breadcrumb\"},\"inLanguage\":\"en-nz\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/eliminate-render-blocking-resources\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-nz\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/eliminate-render-blocking-resources\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/pagespeedinsights\\\/eliminate-render-blocking-resources\\\/#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\":\"Eliminate render-blocking resources\"}]},{\"@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-nz\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\",\"name\":\"Staq\",\"alternateName\":\"WPStaq\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-nz\",\"@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":"Eliminate render-blocking resources - 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\/eliminate-render-blocking-resources\/","og_locale":"en_US","og_type":"article","og_title":"Eliminate render-blocking resources - How to fix really quickly with Staq","og_description":"Overview Render-blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen. These resources delay the&nbsp;First Paint&nbsp;&#8211; the time at which your browser renders something (i.e., background colours, borders, text or images) for the first time. Eliminating render-blocking resources can help your page load significantly&hellip;","og_url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/","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.36.00-pm-1024x710.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\/eliminate-render-blocking-resources\/","url":"https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/","name":"Eliminate render-blocking resources - How to fix really quickly with Staq","isPartOf":{"@id":"https:\/\/www.wpstaq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/#primaryimage"},"image":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png","datePublished":"2021-08-05T11:35:45+00:00","breadcrumb":{"@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/#breadcrumb"},"inLanguage":"en-nz","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/"]}]},{"@type":"ImageObject","inLanguage":"en-nz","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/#primaryimage","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-01-at-2.36.00-pm-1024x710.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.wpstaq.com\/pagespeedinsights\/eliminate-render-blocking-resources\/#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":"Eliminate render-blocking resources"}]},{"@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-nz"},{"@type":"Organization","@id":"https:\/\/www.wpstaq.com\/#organization","name":"Staq","alternateName":"WPStaq","url":"https:\/\/www.wpstaq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-nz","@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\/nz\/wp-json\/wp\/v2\/pagespeedinsights\/1830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/pagespeedinsights"}],"about":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/types\/pagespeedinsights"}],"wp:attachment":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/media?parent=1830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}