{"id":43026,"date":"2015-03-23T11:56:38","date_gmt":"2015-03-23T06:26:38","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=43026"},"modified":"2026-10-08T19:01:54","modified_gmt":"2026-10-08T13:31:54","slug":"delay-loading-non-critical-css","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/","title":{"rendered":"How to Delay Loading Non-Critical CSS to Speed Up Your Mobile Site"},"content":{"rendered":"<p>Every stylesheet in your page&#8217;s <code>&lt;head&gt;<\/code> is render-blocking: the browser won&#8217;t show anything until it has downloaded and processed all of them. On a slow mobile connection, that can add seconds before visitors see your content. The fix is to delay loading non-critical CSS, the styles that aren&#8217;t needed for the first screen, while keeping the critical styles inline. Here&#8217;s how to do it in 2026 with one line of HTML, and with WordPress caching plugins.<\/p>\n<p><strong>Quick answer:<\/strong> Inline the small amount of <strong>critical CSS<\/strong> needed for the top of the page in a <code>&lt;style&gt;<\/code> tag. Load the rest asynchronously with <code>&lt;link rel=\"stylesheet\" href=\"style.css\" media=\"print\" onload=\"this.media='all'\"&gt;<\/code>, plus a <code>&lt;noscript&gt;<\/code> fallback. On WordPress, plugins like LiteSpeed Cache or WP Rocket can generate critical CSS and load the rest asynchronously for you.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6af260f2b9d56\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" 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: #1a202c;color:#1a202c\" 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><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6af260f2b9d56\" checked aria-label=\"Toggle\" \/><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:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#What_is_non-critical_CSS\" >What is non-critical CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#How_to_delay_loading_non-critical_CSS_the_modern_way\" >How to delay loading non-critical CSS (the modern way)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#Step_1_Inline_the_critical_CSS\" >Step 1: Inline the critical CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#Step_2_Load_the_rest_asynchronously\" >Step 2: Load the rest asynchronously<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#What_we_moved_out_of_the_critical_path\" >What we moved out of the critical path<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#Delay_non-critical_CSS_in_WordPress\" >Delay non-critical CSS in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#Is_it_OK_to_load_all_CSS_asynchronously\" >Is it OK to load all CSS asynchronously?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#Does_deferring_CSS_help_SEO\" >Does deferring CSS help SEO?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/#What_about_rel%E2%80%9Dpreload%E2%80%9D\" >What about rel=&#8221;preload&#8221;?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_non-critical_CSS\"><\/span>What is non-critical CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Critical CSS<\/strong> is the minimum CSS needed to display the part of the page visitors see first, above the fold: the header, layout, fonts and the start of the article. <strong>Non-critical CSS<\/strong> is everything else: styles for comments, footers, icons, widgets, pop-ups and pages the visitor hasn&#8217;t opened.<\/p>\n<p>If you load all of it in the head, the browser has to fetch every file before rendering. PageSpeed Insights flags this as <strong>&#8220;Eliminate render-blocking resources&#8221;<\/strong>:<\/p>\n<p><img decoding=\"async\" class=\"border alignnone wp-image-43029 size-full\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/non-critical-css.png\" alt=\"Delay loading non-critical CSS PageSpeed warning\" width=\"360\" height=\"241\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/non-critical-css.png 360w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/non-critical-css-150x100.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/non-critical-css-300x201.png 300w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/p>\n<p>Fixing it improves First Contentful Paint and Largest Contentful Paint, two metrics behind <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/05\/core-web-vitals\/\">Core Web Vitals<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_delay_loading_non-critical_CSS_the_modern_way\"><\/span>How to delay loading non-critical CSS (the modern way)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Inline_the_critical_CSS\"><\/span>Step 1: Inline the critical CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Put the styles needed for the first screen directly in the head:<\/p>\n<pre><code>&lt;style&gt;\r\n  \/* critical CSS: layout, header, fonts, first content *\/\r\n  body { margin: 0; font-family: system-ui, sans-serif; }\r\n  .site-header { ... }\r\n&lt;\/style&gt;<\/code><\/pre>\n<p>Keep it small, ideally under about 14 KB, so it arrives with the first network round trip. Tools such as the <a href=\"https:\/\/github.com\/addyosmani\/critical\" target=\"_blank\" rel=\"noopener\">Critical<\/a> npm package can extract critical CSS automatically.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Load_the_rest_asynchronously\"><\/span>Step 2: Load the rest asynchronously<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Change your normal stylesheet link to this:<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"\/css\/style.css\" media=\"print\" onload=\"this.media='all'\"&gt;\r\n&lt;noscript&gt;&lt;link rel=\"stylesheet\" href=\"\/css\/style.css\"&gt;&lt;\/noscript&gt;<\/code><\/pre>\n<p>How it works: browsers download stylesheets for <code>media=\"print\"<\/code> at low priority without blocking rendering. When the file has loaded, the <code>onload<\/code> handler switches it to <code>all<\/code>, and the styles apply. The <code>&lt;noscript&gt;<\/code> line keeps the page styled if JavaScript is off. Google&#8217;s web.dev guide to <a href=\"https:\/\/web.dev\/articles\/defer-non-critical-css\" target=\"_blank\" rel=\"noopener\">deferring non-critical CSS<\/a> explains the technique in detail.<\/p>\n<p>When we first wrote this post in 2015, we used a longer JavaScript snippet from Google that injected the stylesheet with <code>requestAnimationFrame<\/code>. The one-line <code>media=\"print\"<\/code> method does the same job and is now the standard approach.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_we_moved_out_of_the_critical_path\"><\/span>What we moved out of the critical path<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We kept our core layout CSS in the head, because columns and the sidebar must render correctly straight away. Back then that was <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/twitter-bootstrap\/\">Bootstrap<\/a>; today it&#8217;s the tiny <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2021\/11\/chota-micro-css-framework\/\">Chota CSS framework<\/a>, which is small enough to inline completely. But we load <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/\">Font Awesome<\/a> icons asynchronously, because icons can appear a moment later without affecting the layout.<\/p>\n<p>Good candidates to load asynchronously:<\/p>\n<ul>\n<li>Icon fonts and icon stylesheets<\/li>\n<li>Comment, share-button and widget styles<\/li>\n<li>Styles for sliders, lightboxes and pop-ups<\/li>\n<li>Web fonts (see how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/10\/load-google-web-fonts-faster\/\">load Google Fonts faster<\/a>)<\/li>\n<\/ul>\n<p>Watch out for layout shifts. If a late stylesheet changes the size or position of visible elements, the page will jump, which hurts your Cumulative Layout Shift score. Make sure anything visible on the first screen is styled by the critical CSS.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Delay_non-critical_CSS_in_WordPress\"><\/span>Delay non-critical CSS in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You don&#8217;t need to edit theme files. Popular caching plugins do it for you:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/\" target=\"_blank\" rel=\"noopener\">LiteSpeed Cache<\/a>: under <strong>Page Optimization &gt; CSS Settings<\/strong>, turn on <strong>Load CSS Asynchronously<\/strong> and <strong>Generate Critical CSS<\/strong>. This is what we use.<\/li>\n<li><a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noopener\">WP Rocket<\/a>: turn on <strong>Remove Unused CSS<\/strong> or <strong>Load CSS asynchronously<\/strong> in File Optimization.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener\">Autoptimize<\/a>: has an <strong>Inline and Defer CSS<\/strong> option.<\/li>\n<\/ul>\n<p>Test your pages after enabling these settings, as aggressive CSS optimization can occasionally break layouts. For more ideas, see these ways to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/css-files-load-faster\/\">load CSS faster<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Is_it_OK_to_load_all_CSS_asynchronously\"><\/span>Is it OK to load all CSS asynchronously?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Not without critical CSS. If no styles load in the head, visitors briefly see an unstyled page (a &#8220;flash of unstyled content&#8221;). Always inline critical CSS first.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_deferring_CSS_help_SEO\"><\/span>Does deferring CSS help SEO?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Indirectly. Faster rendering improves page experience metrics like LCP, which are part of Google&#8217;s ranking signals, and keeps mobile visitors from leaving.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_about_rel%E2%80%9Dpreload%E2%80%9D\"><\/span>What about rel=&#8221;preload&#8221;?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>&lt;link rel=\"preload\" as=\"style\" onload=\"this.rel='stylesheet'\"&gt;<\/code> also works, but it downloads at high priority and can compete with more important files. The <code>media=\"print\"<\/code> method is simpler and safer for non-critical CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every stylesheet in your page&#8217;s &lt;head&gt; is render-blocking: the browser won&#8217;t show anything until it has downloaded and processed all&#8230;<\/p>\n","protected":false},"author":4,"featured_media":43029,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-43026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/43026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=43026"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/43026\/revisions"}],"predecessor-version":[{"id":63652,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/43026\/revisions\/63652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/43029"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=43026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=43026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=43026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}