Welcome! Chances are you are here because you ran your WordPress website through Google PageSpeed Insights and was flagged for having unused CSS. If you’re in a rush to solve it, jump to the short setup guide below.
If you want to learn more about unused CSS and why Google is asking to reduce unused CSS in WordPress, read on.
What is Unused CSS and who put them there?
Unused CSS is any CSS rule that is downloaded by the browser but is not used in the web page.
It may seem strange that a developer would take the time to type out unnecessary CSS code. But it has to do with how WordPress, plugin and theme developers do things.
It is an accepted practice to put all CSS code in one CSS file when coding. It is easier to manage many CSS rules in one CSS file than many CSS files containing a few rules.
To the developer, there really is no need to remove unused CSS code. Those are all used CSS in their theme or plugin. And for those who put all the CSS into a file or split it into a few other CSS files.
There is just no real incentive for them to remove unnecessary CSS files.
This leads to an interesting problem for website users. Unlike developers, who focus on the entire website as a whole, users only access one web page at a time.
This means the browser loads the CSS code for the entire website in one file when it only needs a portion of it for the web page the user is requesting.
For example, CSS rules for the comment section aren’t necessary for a page or blog post that has comments disabled. But since it is in the CSS file that contains the necessary CSS code, it gets sent anyway.
More CSS – plugins, themes, child theme, web fonts, icon fonts
This is compounded by richly featured themes and page builders that look great but do not have clean CSS code.
Themes and page builders often end up sending a huge CSS file that contains all available types of page elements that are not used in a particular page to the browser.
Even if your page only has some text and an image, all the rules in the CSS file including CSS rules for carousel, maps and so on will be downloaded.
And don’t forget WordPress plugins. Plugins like WooCommerce or a contact form plugin have their own CSS files too. And most plugin developers set their WordPress plugins to load on all pages just to be safe.
Now, you not only have unused CSS in WordPress, but you also have unused CSS files.
If this is boring you, why not get an expert to solve it all? Check out our WordPress Speed Optimization Service. We love WordPress speed optimization so much that we have worked on more than 800 websites!
Is Unused CSS in WordPress Such a Big Deal?
Yes. It negatively impacts the performance of your WordPress website and is noticeable to users. And it affects your search engine ranking.
Evidently, it is significant enough for Google PageSpeed Insights and various other speed testing tools to include as a factor in evaluating site speed.
Google PageSpeed goes as far as to list it as a factor that affects Largest Contentful Paint (LCP), one of three metrics defined in Core Web Vitals.
LCP plays an important part in determining the page rank of your WordPress site in search engines.
The reason is that more unused CSS means larger CSS files to be downloaded. That increases the time needed to load CSS. And unused CSS files mean unnecessary HTTP requests which increase load time.
Your WordPress speed would be slower as your server has to process those extra requests. And because external CSS files are considered render-blocking, the browser cannot render your WordPress site until it has downloaded all the files.
All these delays add up to give users a poor experience and lower your PageSpeed score.
Largest Contentful Paint (LCP) – A Narrower Definition of Unused CSS
So far we have defined unused CSS code as code that was downloaded but not used to render the web page. This means we are measuring the duration it takes for the whole page to finish rendering. But Core Web Vitals takes it a step further by narrowing the definition to just the above the fold content.
Above the fold
Above the fold is the immediate area of the website that the user can see (the area of the browser window) before any scrolling.
The above-the-fold area isn’t fixed. It will change according to the browser’s window size. Resizing the browser will change the above-the-fold area. If you are viewing your website on a higher resolution screen then more of the website will be visible and the above-the-fold area would be larger.
If you are using a mobile phone to view this website, then the above-the-fold area would be much smaller.
Since the above-the-fold area is only a portion of the entire website, rendering it first instead of the entire website will reduce the perceived load time of the web page. After all, rendering a small but visible area of the website first is better than rendering the whole page that is largely unseen until the user scrolls.
This is the principle behind the Largest Contentful Paint metric: reducing the time required to render the above the fold area makes for a better user experience.
Simply put, the sooner a user sees the browser display something the faster your WordPress site seems to the user.
For example, two web pages take the same amount of time to completely render. However, the first website can display the above the fold content to the user a second earlier than the other website.
Regardless of the render progress of the rest of the website which cannot be seen by the user, the first will be perceived as faster as the user saw content displayed earlier.
With LCP in mind, we now have to prioritise code that is used for the above-the-fold and defer unused code that is needed for the rest of the page.
This explains PageSpeed’s recommendation to not only reduce unused CSS in WordPress but to defer CSS not used for the above the fold area.
Now that you have a clear understanding of the issue. How exactly do you find unused CSS in WordPress and go about removing unused CSS? You may have noticed early on in your efforts to remove unused CSS, WordPress is quite limited. So what do you do?
The Solution: CSS Optimizer
Solve your CSS issues effortlessly with CSS Optimizer, a WordPress plugin by ZippiSite.
This is what happens when you enable CSS Optimizer on your WordPress website:
Your entire site is analysed page by page
The HTML code of each web page is compared with the CSS files and unused CSS code for that unique page is identified.
A copy of the original CSS files is made before removing unused CSS
A copy of the original CSS files is copied into a separate folder created by CSS Optimizer before proceeding to remove unused code from all CSS files linked to the web page.
This allows you to safely revert to the state before removing unused CSS when you disable the plugin.
Critical CSS is identified and inlined
Critical CSS (also known as Critical path CSS) is the CSS required to render just the above-the-fold area.
This is an effective solution used to solve the challenge set by the Largest Contentful Paint (LCP) metric.
As the LCP metric focuses on getting the above-the-fold area rendered as quickly as possible to the user. We can achieve that by making the CSS rules that apply to the critical above-the-fold area(Critical CSS) readily available to the browser without having to process external CSS files.
External CSS files are render-blocking elements. Meaning the browser will block a web page from rendering until the required CSS files are processed.
When a browser receives HTML, JavaScript, CSS and other resources from the server, it will begin to render them into an interactive user interface.
This process of turning code into something the user can see and interact with is not instantaneous. It takes time.
While rendering a page, if the browser encounters an element that requires CSS rules from an external file, it has no choice but to stop rendering the page and leave it blank.
The browser then has to process the external CSS files to look for those CSS rules. This means the browser has to process multiple CSS files containing anywhere between hundreds to thousands of lines of CSS code.
To solve this issue, Google’s recommendation is to optimize CSS delivery by inlining Critical CSS. This way the above-the-fold area will not contain any render-blocking CSS and can be rendered and shown to the user faster.
Critical CSS reduces the time required to render the above-the-fold area and makes your website perform faster.
CSS Optimizer generates Critical CSS automatically for you
CSS Optimizer goes a step further after removing unused CSS. It inlines Critical CSS for you. Here is how it does it:
CSS Optimizer first analyses the HTML code to identify Critical CSS.
As an example, let’s say one of your web pages has a number of externally linked CSS files that altogether contain 1,000 lines of CSS rules.
After analysing that web page’s HTML source code, CSS Optimizer has identified that 20 out of the 1,000 CSS rules are required to render the above-the-fold area. Those 20 lines of code are considered Critical CSS.
CSS Optimizer will proceed to look through the externally linked CSS files to find the Critical CSS and inline them into the HTML file.
The browser can now render the above-the-fold of the web page without any obstacles as all the CSS required has already been included in the HTML file.
This effectively prioritises the above the fold area and defers the other CSS. And makes your website load much faster.
No Holding Back
You get all the features in the free version. Even if you exceed the monthly limit of 150 API hits, the optimization progress remains.
You can either choose to upgrade to a paid plan to get more API hits or wait until the quota refreshes next month.
We recommend you start with the free plan first and see if you’re happy with the results before upgrading. Register now!
Fast Way to Remove Unused CSS
You can do it in just a few minutes for free! Let’s get started.
Setup Guide – CSS Optimizer
Search for our “CSS Optimizer” plugin and install it on your WordPress site.
After it is installed, click on Activate and disable all CSS-related optimizations (such as CSS Minification, Combine CSS and etc) by other plugins like W3 Total Cache, WP Rocket, WP Super Cache, WP Fastest Cache, SiteGround Optimizer, etc. You can leave JS and HTML optimizations on.
Register an account at ZippiSite and choose the free plan.
Add your website by clicking on Add New. Enter your website domain and click Save.
Now go to Customer sites, scroll down and click on the website domain you have just added.
Copy your authentication token.
Back on your website, go to CSS Optimizer Options page and paste your authentication token into the Token field.
Tick the Enable checkbox.
Click Save Changes.
Your CSS Optimizer WordPress plugin is now removing unused CSS in WordPress and generating Critical CSS. This process will take a few minutes to complete.
Verify the Improvement
CSS Optimizer has finished removing unused CSS on your website when all the pages in the Job Queue tab are completed.
Open your WordPress website and check if everything looks as it should. If everything looks fine, go ahead and run a test on Google PageSpeed Insights (or any other speed testing tools you might be using).
If your Google PageSpeed Insights performance score does not improve much and your website is still running slow then your WordPress website has bigger issues than unused CSS. It could be problems related to Javascript files and may require some asset cleanup. Get this free WordPress speed audit to find out what the real issue is.
Flexibility to Fit Your Unique WordPress Site
Every website is different. Some are more static, some are incredibly dynamic and most have different sections that require flexibility.
CSS removal in these conditions can be tricky even if the plugin is only removing unused CSS.
That is why CSS Optimizer comes ready to meet the challenge with features to adapt to your needs.
Exclude pages / posts
This convenient feature lets you specify individual pages or groups of pages to exclude from being optimised by CSS Optimizer.
Limit to pages / posts
Have an incredibly dynamic WordPress site and only want a small portion of it to be optimised? With this feature, you can set exactly which pages you want CSS Optimizer to work on.
CSS Optimizer will leave the rest of your website untouched.
Safelist
The Safelist is a powerful feature that allows you to select a list of CSS classes that CSS Optimizer will not remove as unused CSS.
This gives you the precision to select the exact CSS class you want to keep.
Use this to protect specific CSS classes that are used by an element that is common to the entire site.
FAQ
Is this really free?
Yes! CSS Optimizer, a premium plugin developed by ZippiSite is free. On the free plan, you get 15o API hits per month. And if you run out of hits, just wait until the next month for the quota to reset.
What is an API “hit”?
It’s the number of calls to our API. Note that the number of API hits is different from the number of page visits (sometimes also called page hits).
Theoretically, every page request will trigger one hit to our API. However, this is not necessary (a waste of API quota) if you install a server caching plugin such as WP Rocket, WP Fastest Cache, WP Super Cache or similar cache plugins.
Here’s how it works:
Assuming the server cache is cleared, and your home page receives a new visit which will result in the page being cached.
As part of the first page visit mentioned above, an API call will also be made to our server. At this time, 1 hit will be deducted from your account.
Since the page is now cached, subsequent visits will not trigger a call to our API. The next time our API is called to clean up unused CSS is when you update a particular page which causes the cache rebuild.
As you can see, the rate at which your site makes calls to our API varies depending on how often you update your page. If your page is not updated often, which means the cache is not cleared for days, it means our API will not be called by your site for those periods.
Note – do not confuse “server cache” with “browser cache”. Your visitors clearing their browser cache won’t trigger your website to call our API.
How is the number of page views approximated?
The number of API calls can vary between sites. We have estimated a real-world hit rate of 15% after testing on more than 50 websites we worked on. That means, if your website receives 1,000 page visits a month, you’ll likely see 15% of the visits require a call to our API, making it 150 API hits.
Since there is no guarantee that this value applies to your site as well, we suggest you start with the “Free Plan” or “Small Site Plan” first.
Once you have an idea of the amount of quota you need and you can upgrade accordingly.
