{"id":19083,"date":"2022-10-28T10:10:27","date_gmt":"2022-10-28T10:10:27","guid":{"rendered":"https:\/\/10web.io\/blog\/?p=19083"},"modified":"2025-04-24T11:20:33","modified_gmt":"2025-04-24T11:20:33","slug":"inline-critical-css-defer-unused-css-wordpress","status":"publish","type":"post","link":"https:\/\/10web.io\/blog\/inline-critical-css-defer-unused-css-wordpress\/","title":{"rendered":"How to Inline Critical CSS & Defer Unused CSS in WordPress?"},"content":{"rendered":"

The \u201c<\/span>Eliminate render-blocking resources” warning can be a frustrating and alarming sight, and it can also signify that your website speed is suffering. To enhance your website speed, we must first identify the cause and the factors behind the “Eliminate render-blocking resources” issue.\u00a0\u00a0<\/span><\/p>\n

One factor may be the myriad of plugins and themes that are installed and used on your WordPress site.\u00a0<\/span><\/p>\n

These plugins and themes come with external files from their source, which can cause issues and slow down your website speed. More specifically, these external files include CSS files and JavaScript files, which can directly cause render-blocking.\u00a0<\/span><\/p>\n

It is a common practice to install plugins that eventually become irrelevant or redundant, unfortunately, if not removed, they can also negatively impact the performance of your WordPress website.<\/span><\/p>\n

Website speed is unmistakably crucial for SEO performance and is directly connected with your website\u2019s SEO ranking. To retain or enhance your search engine ranking, you must resolve any issues that are standing in the way of optimal website performance. The first step to reaching your optimal website performance is to develop your website based on the guidelines provided by<\/span> Page Speed Insights<\/span><\/a> (now powered by Lighthouse). The next step is to develop a website in a precise way, reducing any extra external file requests.\u00a0<\/span><\/p>\n

Let\u2019s closely examine the “Eliminate render-blocking resources”<\/a> list in the Lighthouse Report. It states that \u201cresources are blocking the first paint of your website page\u201d. To resolve this issue, we can inline the critical JS\/CSS, defer the non-critical JS\/CSS and remove any unused JS\/CSS. This will positively impact your website\u2019s FCP (First Contentful Paint), LCP (Largest Contentful Paint), <\/span>FID (First Input Delay), TTI (Time to Interactive), and TBT (Total Blocking Time)<\/span> metrics and will significantly enhance the loading performance of your website. <\/span>On the other hand, correctly implemented critical CSS generation will not make CLS worse.<\/span><\/p>\n

\"\"<\/p>\n

In the above image, the two flagged URLs, Bootstrap and jQuery, are both third-party resources, which host a lot of unused code. If we load these files without deferring, render-blocking will most certainly occur. Therefore, to load these files while avoiding render-blocking, we must follow Lighthouse’s recommended technique of async or defer.<\/span><\/p>\n

If these steps seem painstakingly difficult and too technical, check the last section and see how 10Web Booster solves this problem automatically, without the need to write any code.<\/span><\/p>\n

\"\"<\/p>\n

What is critical CSS?\u00a0<\/span><\/h2>\n

The faster your website displays its content to users, the higher the conversion rate of your website. Critical CSS refers to the essential files needed to load the \u201cAbove the Fold\u201d part of the page. When a visitor enters your website, their browser begins to load all the files on that page, which is a time-consuming process. To avoid this long loading process, Critical CSS generation requests the browser to load only the CSS <\/span>affecting the initially visible content <\/span>and therefore improves the perceived speed of your website.\u00a0<\/span><\/p>\n

Here is the complete picture of \u2018Above the Fold\u2019 and \u2018Below the Fold\u2019. Critical CSS renders the initial display faster.<\/span><\/p>\n

\"\"<\/p>\n

By delaying the loading of CSS files “Below the Fold”, we dramatically improve the website speed and the website’s SEO ranking. This is all quite logical. Why load something that the user cannot yet see?\u00a0 Loading CSS files “Below the Fold” only happens when they are about to be \u201cAbove the Fold\u201d.\u00a0<\/span><\/p>\n

Fast websites just don\u2019t happen out of the blue. They demand hard work. We, web developers, write markup, but the browser displays it in pixels. The code written in HTML, CSS and JavaScript, is displayed by the browser through the perfect sequence of pixels. <\/span>Therefore, it is critical that the browser parses and renders the page resources as quickly as possible. This is where critical rendering comes in. By optimizing the critical rendering path, we can speed up website load time.<\/span>\u00a0<\/span><\/p>\n

We can’t, however, speed up website load time by loading the content without proper styling as it will cause poor UX, cumulative layout shifts, flashes of unstyled text, etc. What we must do is locate the minimum styles required to render the \u201cAbove the Fold\u201d content properly.<\/span><\/p>\n

\"\"<\/p>\n

What is unused CSS?<\/span><\/h2>\n

As the name suggests, unused CSS are entirely useless CSS files and style sheets. Why do we even have them in the first place? <\/span>Well, they might be added to provide styles for other pages or devices, or just because of a mistake and later were overwritten by a web developer. They might be inside a library and are used partially (usually we don\u2019t implement all the features of CSS libraries).<\/span><\/p>\n

Let\u2019s take the example of adding bootstrap or font-awesome to our page. The process requires the loading of all the files of bootstrap and font-awesome. Unfortunately, most of the code will be useless, and unfortunately, it will also create a bottleneck in rendering, negatively affecting the loading time of the page. That\u2019s just how it goes. Luckily, we can do something about these unused and useless files without any impact on the web application media. So please, don\u2019t make the browser download, parse, and load unused CSS with the content and do all this extra work with absolutely no purpose. Your website certainly cannot afford the extra time.<\/span><\/p>\n

For a speedy website with instantaneous loading “Above the Fold”, and to satisfy your moral duty as a web developer or owner, you must remove unused CSS to save users’ time. If this is something that goes beyond your skill, the WordPress plugin, 10Web Booster, the best in the market, is available to humbly serve your needs.\u00a0<\/span><\/p>\n

Why should you remove unused CSS?<\/span><\/h2>\n

Now if you take care of the useless CSS files, your website load time will increase, and your website users will be impressed by the instantaneous display and incredible speed, making their interaction with your site pleasurable. They will be happy. They will visit your website again and again. You will see your website\u2019s bounce rate decrease and search engine rankings increase. All because you removed the persky useless CSS files.\u00a0<\/span><\/p>\n

Don\u2019t wait any longer, there is no time to waste. Remove all the unused plugins, unused CSS files, and unused JavaScript files. We must keep nothing but the essentials.\u00a0<\/span><\/p>\n

Why should you inline critical CSS?<\/span><\/h2>\n

When you inline critical CSS, you \u201csend a message\u201d to the browser that no other CSS files need to be downloaded in order to show the page content \u201cAbove the Fold\u201d.\u00a0 The browser will find the critical CSS available as soon as the DOM is parsed. Since style sheets block content rendering until they are fully downloaded, by removing unused CSS and using critical CSS inline, we can avoid the “eliminate render blocking” or ” reduce unused CSS” flags.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

CSS files are render-blocking resources by default. This dictates that the browser will initially download and parse through all the CSS files in the head tag and execute them before visualizing the \u201cAbove the Fold\u201d page content. The larger the CSS files the greater the slowing down impact of the page speed, which in turn will increase your website’s bounce rate and decrease your website’s conversions.\u00a0<\/span><\/p>\n

Here is a comparison of website speed and bounce rate:<\/span><\/p>\n

\"\"<\/p>\n

When you inline critical CSS, you remove a number of unnecessary steps, for example, the browser no longer needs to render the entire page content to merely visualize the content “Above the Fold”. Furthermore, the browser will easily locate the inline critical CSS in the head tag and will no longer search for critical CSS in other locations. Furthermore, since inline CSS is loaded within the <style><\/style> tag in the <head><\/head> section, HTTPS requests are not required. As long as the user is viewing the content “Above the fold”, non-critical CSS can be displayed asynchronously “Below the Fold”.\u00a0 However, what is important to consider is that if all CSS files were to be loaded asynchronously or deferred without inlining the critical CSS, the broken HTML content would also show, confusing your visitors.<\/span><\/p>\n

Now you see how inlining Critical CSS, if you need to use async or defer, can significantly improve user experience by reducing page load time. Visitors will instantaneously and perfectly see “Above the Fold” content, a critical component of the initial user experience.\u00a0\u00a0<\/span><\/p>\n

How to Defer Unused CSS WordPress Without Plugin?<\/b><\/h2>\n

CSS files are render-blocking assets, which means they must be loaded and processed before the page can be loaded. WordPress themes and plugins host a great number of stylesheets, dragging load time. To resolve the load time issue, we have already explored inlining Critical CSS, now we will instruct how to defer the loading of non-critical “Below the Fold” content.\u00a0<\/span><\/p>\n

The loading of non-critical CSS too soon can slow down the website\u2019s performance. It can affect FCP (First Contentful Paint), LCP (Large Contentful Paint), and TBT (Total Blocking Time) metrics. Deferring non-critical CSS will not necessarily improve website performance. However, styles must still be loaded, therefore we must identify them and load them <\/span>asynchronously.<\/span><\/p>\n

How to use non-critical CSS or unused CSS<\/b><\/h3>\n

Let\u2019s find the non-critical and unused CSS files and load them asynchronously.\u00a0<\/span><\/p>\n

Async and defer are <script> attributes, so we need to add the following pattern below:<\/span><\/p>\n

 \r\n<link rel=\"preload\" href=\"styles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\"><\/span>\r\n\r\n<noscript><link rel=\"stylesheet\" href=\"styles.css\"><\/noscript><\/span>\u00a0\r\n\r\n<\/span><\/pre>\n