{"id":17589,"date":"2021-11-14T21:35:18","date_gmt":"2021-11-15T03:35:18","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17589"},"modified":"2021-11-14T21:35:18","modified_gmt":"2021-11-15T03:35:18","slug":"eliminate-render-blocking-resources","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/","title":{"rendered":"Lighthouse Optimizations – Eliminate Render-blocking Resources"},"content":{"rendered":"

[vc_row full_width=”stretch_row” gap=”25″ equal_height=”yes” content_placement=”middle” css=”.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column css=”.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}”][vc_custom_heading text=”Eliminate Render-blocking Resources<\/b>” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1636947226785{padding-top: 30px !important;padding-bottom: 30px !important;}”][\/vc_column][\/vc_row][vc_row margin_top=”40″ margin_bottom=”30px” css=”.vc_custom_1636409410012{margin-bottom: 30px !important;}”][vc_column][vc_custom_heading text=”What are Render-blocking Resources?” font_container=”tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

We touched on render-blocking resources earlier in this guide when we discussed how to avoid the document.write() method. Render-blocking resources are anything that delays the web page from rendering content, such as CSS files, HTML, and JavaScript. Again, if a user lands on your page and it takes a few seconds to start loading content, they will become frustrated and find somewhere else to find what they were initially looking for. This also can affect the First Contentful Paint metric, which is the time it takes for the browser to render the first piece of content from the DOM. <\/p>\n

Lighthouse will identify render-blocking resources, like JavaScript and style sheets, that are causing performance issues. Scripts that are detected in the of the page document will cause a notification to appear, as will any scripts that do not have a or attribute. Again, the sooner the users can see content being painted on the page, the more likely they will stay on the page and not abandon what they were doing. In terms of flagging style sheets, any style sheet that is not tagged with the disabled attribute will get flagged, as does any style sheet that does not include the media attribute for a specific device.[\/vc_column_text][vc_custom_heading text=”How to Eliminate Render-blocking Resources” font_container=”tag:h3|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

There are various methods web developers can take to reduce, or eliminate, render-blocking resources. Ideally, you want to be able to reduce the number of render-blocking activities taking place at the same time. One way is to inline only critical CSS into the of HTML. The rest of the code can then be loaded asynchronously, or deferred, after the critical elements have been downloaded and rendered. Another method is to split up style sheets into multiple files based on specific devices. Again, if the style sheet is not tagged with a media attribute, it will always be render-blocking if the tag is missing. Applying the tag allows the browser to start retrieving the style sheet as soon as possible. Lastly, and we will talk more about this later in this guide, is to minify your CSS. Minifying removes any unnecessary characters or spaces in the CSS code that causes CSS files to become larger, in terms of file size, without affecting how the browser processes the styles. Minification can also be applied to JavaScript. We will discuss some methods to minify JavaScript later in this guide as well. <\/p>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row margin_top=”60″ margin_bottom=”0″ css=”.vc_custom_1636595147911{margin-bottom: 15px !important;}”][vc_column width=”1\/3″ css=”.vc_custom_1636595227743{padding-top: 60px !important;padding-bottom: 60px !important;padding-left: 10px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17233″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”Lighthouse<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.<\/p>\n

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Flighthouse%2F”][\/vc_column][vc_column width=”1\/3″ css=”.vc_custom_1636595173585{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17284″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”PageSpeed Terms<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.<\/p>\n

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fpagespeed%2F”][\/vc_column][vc_column width=”1\/3″ css=”.vc_custom_1636595196399{padding-top: 60px !important;padding-right: 10px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}”][vc_single_image image=”17281″ alignment=”center” style=”vc_box_rounded”][vc_custom_heading text=”YSlow<\/b>” font_container=”tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1″ use_theme_fonts=”yes”][vc_column_text]<\/p>\n

YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.<\/p>\n

[\/vc_column_text][vc_btn title=”Learn More” style=”flat” color=”primary” align=”center” i_icon_fontawesome=”fas fa-location-arrow” add_icon=”true” link=”url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fyslow%2F”][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row full_width=”stretch_row” gap=”25″ equal_height=”yes” content_placement=”middle” css=”.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column css=”.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}”][vc_custom_heading text=”Eliminate Render-blocking Resources” font_container=”tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes” css=”.vc_custom_1636947226785{padding-top: 30px !important;padding-bottom: 30px !important;}”][\/vc_column][\/vc_row][vc_row margin_top=”40″ margin_bottom=”30px” css=”.vc_custom_1636409410012{margin-bottom: 30px !important;}”][vc_column][vc_custom_heading text=”What are Render-blocking Resources?” font_container=”tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5″ use_theme_fonts=”yes”][vc_column_text] We touched on render-blocking resources earlier in this guide…<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":17260,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"\r\nLighthouse Optimizations - Eliminate Render-blocking Resources | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"Lighthouse will identify render-blocking resources, like JavaScript and style sheets, that are causing performance issues. Learn how to fix this with Dotcom-Tools!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Lighthouse Optimizations - Eliminate Render-blocking Resources\" \/>\r\n<meta property=\"og:description\" content=\"Lighthouse will identify render-blocking resources, like JavaScript and style sheets, that are causing performance issues. Learn how to fix this with Dotcom-Tools!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dotcom-Monitor Tools Blog\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dotcommonitor\" \/>\r\n<meta name=\"twitter:card\" content=\"summary\" \/>\r\n<meta name=\"twitter:site\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\",\"name\":\"Dotcom-Monitor Tools Blog\",\"description\":\"Let's Make the Web a Faster Place.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/\",\"name\":\"Lighthouse Optimizations - Eliminate Render-blocking Resources | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-15T03:35:18+00:00\",\"dateModified\":\"2021-11-15T03:35:18+00:00\",\"description\":\"Lighthouse will identify render-blocking resources, like JavaScript and style sheets, that are causing performance issues. Learn how to fix this with Dotcom-Tools!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lighthouse Optimizations\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lighthouse Optimizations – Eliminate Render-blocking Resources\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lighthouse Optimizations - Eliminate Render-blocking Resources | Dotcom-Monitor Tools Blog","description":"Lighthouse will identify render-blocking resources, like JavaScript and style sheets, that are causing performance issues. Learn how to fix this with Dotcom-Tools!","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.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/","og_locale":"en_US","og_type":"article","og_title":"Lighthouse Optimizations - Eliminate Render-blocking Resources","og_description":"Lighthouse will identify render-blocking resources, like JavaScript and style sheets, that are causing performance issues. Learn how to fix this with Dotcom-Tools!","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","twitter_card":"summary","twitter_site":"@dotcom_monitor","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website","url":"https:\/\/www.dotcom-tools.com\/web-performance\/","name":"Dotcom-Monitor Tools Blog","description":"Let's Make the Web a Faster Place.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/","name":"Lighthouse Optimizations - Eliminate Render-blocking Resources | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-15T03:35:18+00:00","dateModified":"2021-11-15T03:35:18+00:00","description":"Lighthouse will identify render-blocking resources, like JavaScript and style sheets, that are causing performance issues. Learn how to fix this with Dotcom-Tools!","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/eliminate-render-blocking-resources\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"Lighthouse Optimizations","item":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/"},{"@type":"ListItem","position":3,"name":"Lighthouse Optimizations – Eliminate Render-blocking Resources"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17589"}],"collection":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/comments?post=17589"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17589\/revisions"}],"predecessor-version":[{"id":17591,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17589\/revisions\/17591"}],"up":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17260"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=17589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}