Many people are unaware of the amount of unused CSS that is loaded or injected onto their pages and posts by their themes and plugins. However, a quick test of your site using Google Page Speed Insights (PSI) or any other lab testing tool will reveal that a large amount of CSS is being loaded.
Removing unused CSS in WordPress and Elementor is a tedious process and it can end up breaking your layout and messing up your design if it isn’t done right.
Performance test
According to Google PSI reports, this page can potentially save over 60 KB which is huge, Your’s site may differ. The bigger your site is the better you can save.
Before the optimization (No optimization)
After the optimization (with the Asset CleanUp plugin)
Reduce page weight by 20% after unloading stylesheets with Asset CleanUp
After the optimization ( Chrome Extension with Asset CleanUp Plugin)
This question always comes in Facebook groups.
How do we remove unused CSS from the Elementor website?
Before I discovered this method, I was using Remove unused CSS from the web.dev article to identify unused CSS it was great for smaller stylesheets. But if your website is built with Elementor or any page builders things can be complicated and the size of stylesheets is getting bigger.
Am I right?
I think the answer is true.
That is why I wrote this tutorial to help you solve these problems that are recommended by Google PageSpeed Insights (PSI).
Before you start implementing it on your site, you might be asking yourselves, what are the benefits of removing it?
I want the same answer too so that is why I asked the question a while ago on the WP Speed Matters Facebook Group and this is what I got.
Benefits of Removing Unused CSS
The second point might be incorrect because removing unused CSS wouldn’t fix Rendering Blocking resources, it will surely reduce page weight & HTTP requests.
Answers are still there and If you want to learn and improve your site performance, I highly recommend joining WP Speed Matters Facebook Community. You will be going to love it, just by browsing & you will learn tons of advanced stuff from the archive.
This step-by-step article is complicated and long to read
People are lazy and do not want to follow all the processes listed below and want to do it automatically (convenient), So here are some of the 3rd parties plugins you can test on your website.
If you have another plugin you want me to include. Please don’t hesitate to do it.
Seven plugins will automatically remove your unused CSS from the Website
When you enable the features, make sure you test them carefully even dynamic injected CSS rules because it tends to break style and sometimes missing styles.
Picture credit to Gijo for providing the picture.
- Enable Advanced view; otherwise, it wouldn't show up by default.
- Go to Optimization - Styles - Enable Disable Full CSS
Process of Removing Unused CSS (manually) from the website:
Step 1: Get a baseline Performance score
To optimize our website, first, we need to get a performance score on this page, later, we can compare both the picture.
In this process, we are going to optimize the singer template, that I got from Envato Elements Plugins.
Accordingly, to Google PageSpeed Insights, I can save over 60 KB of CSS, but your unused CSS size may differ from mine.
Step 2: Open Chrome Developer tools & start capturing coverage Tab
For example, if you combine or merge CSS in your performance plugins then it is not easy to identify which CSS is in use or not, there are 2 ways to solve this issue –
- Remove page or post from optimization this is one of the most common and the safest ways. After you optimize the post or the page, your caching/optimization should be enabled.
- By adding ?nocache or any string to the end of your URL to bypass cache (different plugins have ways to bypass the optimization)
These are a few of them –
– /?nocache works with WP Rocket
– /?ao_noptimize=1 works with Autoptimize
– /?LSCWP_CTRL=before_optm to serve the unoptimized version for LiteSpeed Cache
Step 2(A): Right-click anywhere to open Inspect Elements
Watch the video properly, it covers till Step 3: Identify Unused CSS problems from the Coverage tab.
One of the easiest ways to open Developer tools is by right-clicking on any place with your mouse and clicking Inspect to open the Dev tools Inspect Elements panel.
Step 2(B): Click the Customize and Open DevsTools Menu (3 dots) in Chrome Dev Tools
Step 2(C): Coverage Report
You can access the “Coverage Report” by clicking or hovering over the “More Tools” option.
- Click the 3 dots (Customize and Dev tools)
- More tools
- Coverage report to start capturing network activities
Then, click the reload button and start capturing coverage.
UPDATE – 18th September: Improve CSS loading experiments is merged with version 3.24.0 and now it is removed from the features area.
After I click the reload button there are lots of unused CSS that can be removed (see the Red color).
Step 3: Identify Unused CSS problems from the Coverage tab
The red color of the bar indicates unused bytes and the greenish color indicates used bytes.
Keep this in mind this test is done only on Desktop devices, to be 100% sure, make sure you resize your window or change it to mobile view.You will get all the information like shortcuts, tips everything from Chrome Dev tools Coverage.Step 4: Test before you start removing it
Testing is crucial, We figure out which stylesheets are not in use from the usage visualization panel above but we can’t be 100% sure whether the file we’re removing is not going to break our style.To safely remove with confidence, we have to head over to the Chrome Dev tools – Network Panel and then right-click on the stylesheet you want to remove (100% one), then click the Block request URL this will open the request blocking tab (shown on the picture below) which lets you block requests you don’t want to load and then refresh the page and see if it doesn’t break. You do this process over and over.TIPS: The request Blocking feature is also available in the Webpagetest and it is currently in Beta Stage.
Block Request URL features in Chrome Dev tools
Request blocking panel showing which CSS or JS will be blocked when the next page load
Install the Asset CleanUp plugin and start unloading stylesheets
We have already figured out which stylesheets can be removed 100% safely with request blocking and coverage reports in Chrome Dev tools. To start removing the unused CSS and JavaScript code from the entire website or per page/post basis. You can do the same thing with other asset management plugins too.
Now go to the page/post you’re removing and toggle the “Unload on this page button” to unload CSS from loading or “unload site-wide” (be careful though this will remove the stylesheet everywhere).
Removing unused JS
This CSS method can be applied in removing unused JS too but it is tricky and it can break your site functionalities because of dependencies.
For some reason, If you’re removing JS I would suggest you enable the ‘Ignore dependency rule and keep the “children” loaded’ input box (See the screenshot below) whenever needed. Otherwise, all the child files (frontend-modules and elementor-waypoints) will not load. or If you do not want to load any JS at all, unload jQuery. (Do it at your own risk)
After Unloading stylesheets & JavaScript with Asset CleanUp
Results after unloading CSS with Asset clean up plugin ( picture show – Before and after results)
Before
After
We have saved more than 20 KB of transfer size just by unloading stylesheets with the help of the Asset CleanUp plugin. If you’re using lots of 3rd parties plugins or add-ons that add styling to your page, then you may be able to save more.
The drawback of removing unused CSS manually:
- It is a time-consuming process.
- Removing unused CSS is not worth it if you constantly updating your pages. If the style is updated, you must redo everything again from the start unless you use the same CSS class or an ID.
- If JavaScript dynamically injects styles or CSS classes are present, then this Chrome extension will fail to extract the used CSS. (I will explain how to include them later)
- Great for smaller websites like single-page websites and landing pages but not for dynamic websites.
(Advanced Method) How to reduce unused CSS completely
In the next step, we are going to learn how to remove unused CSS completely in WordPress with the help of the Chrome extension.
Step 1: Install the CSS Used Chrome Extension from the Chrome Web Store
After we saved more than 20 KB of file sizes just by unloading stylesheets with the help of the Asset CleanUp plugin, we still have lots of unused CSS remains that can be removed completely.
With the help of the Used CSS Chrome extension, we will remove all the unused CSS, even if there is dynamic CSS injected by JavaScript.
While I was researching how to remove unused CSS from Elementor myself, I stumbled upon StackOverflow channels (If I found the URL I will list it here). The Chrome Extension works 100% on static pages but lacks CSS classes that are dynamically injected by JavaScript like the Laura Brehm Hamburger’s menu pop-up triggering by interacting with it.
Step 2: Extract Used CSS using Used CSS Chrome Extension
After we have installed the Chrome extension. If you’re in Dev tools, make sure you refresh the page. Now open Elements Panel [Follow Step#2(A)] and this will open the DOM tree from there click the HTML tag, this will grab everything, and click the CSS Used tab on the right side of the panel. (see the attachment below for reference)
After you click the CSS used tab, it will go through all the processes and extract the used CSS from the page but the problem with this method is that it misses the Dynamic CSS that is injected by the JavaScript.
To fix these problems, we have to interact with the layout in this example it is by interacting with the Hamburger menu and opening the menu (See it in the next step).
- Open Elements Panel
- Click the HTML tag.
- Click the CSS used Tab next to the Accessibility tag
- Click the Preview button to open in the New tab or click the copy button to copy CSS and upload it to your server.
Step 3: Include Dynamic style, CSS Classes, and IDs to the extracted CSS
To Detect dynamically injected CSS classes or IDs by ‘Used CSS chrome extension“, we need to first interact with the layout itself, in my case, it will be by interacting with the hamburger menu.
Caution: (If you have 1000 posts this method will take you more than a week or more to do which is not a great experience for you who use the Automatic process listed above)
To capture all the CSS, make sure you interact with the page and open it like the opening menu (See the screenshot below) and this is what I did:
- I interact with the Hamburger menu this way Elementor Dialog JS will inject the CSS.
- Click the HTML tag and then click the CSS Used tab to generate used CSS this will include the CSS injected by JS.
- Click the Hamburger Menu (icon)
- On the right side, click the Elements panels
- Click the <html tag in the DOM tree.
- Click the CSS Used, it will scan and generate all the used CSS
- Now, you can copy the code and further optimize it or see the design by clicking the preview button or viewing your website on CodePen.
Step 4: Copy the minified code to your Code editor and save it
By default, the Used CSS Chrome extension will generate the minified code, this will include inline style generated by your theme, plugins, or hardcoded CSS/ author style. These CSS can safely ignore it unless you have the pro version of the Asset CleanUp plugin which has the feature to remove it. You can remove the inline style generated by your theme or plugins from the code editor.
Next, un-minify the code with the online free tools or use the prettier Visual Studio code and then save the minified file as a .css file format. You can upload the file or copy the code to your server with the help of FTP or by accessing the control panel (cPanel).
Tips: If you’re using Visual Studio (VS) code, you can use a prettier extension to minify by entering F1 on your keyboards using Online tools to minify it, or using the Beautify VS Code extension to un-minify the code.
Log in to your cPanel and upload the file
I use Runcloud as my control panel so my process of accessing the control panel will be different. But our goal is the same, upload the stylesheet to the wp-content folder. In this step, we are going to upload a file or create a .css file in the wp_content folder in the file manager or upload it using the FTP client.
Step 1: Log in to your control panel (cPanel)
Step 2: Select your Server
Step 3: Head over to Web Application and choose your root folder
Now head over to the Web Application area and choose your root. i.e., Domain
Step 4: Open File Manager
Step 5: Scroll down and find and open the wp-content folder
After you open File Manager, you need to scroll down to the end and find the wp-content folder. This folder contains everything like your media, Plugins, Themes, cache, etc
Step 6: Create a new folder or use the existing folder
After we open the wp-content folder there will be an existing folder, if you’re using any Performance plugins like Swift or wp-rocket then there is a chance it will create a folder automatically for you called cache. I am just using it for demonstration purposes only (change it to another location and create a folder instead).
Click the Cache folder and inside the cache folder, create your folder (combine-assets), this is the folder where you will add all your stylesheets or JavaScript.
It is up to you to choose the folder path, you can also choose the WP Content ‘assets folder‘ rather than the ‘cache folder‘.
Step 7: Create a .css file inside the combine-assets (change if needed) folder
Unfortunately, Runcloud does not allow us to upload assets directly through their Control Panel but it is possible through FTP clients like FileZilla. Since the size of the CSS is small. So for me, it is to create a file and copy & paste the minified code.
After you have created a folder ( example – combine-assets), you need to create a file-name.css file that will store our extracted CSS from number #9
Give a file name (for example – file.min.css) and save it.
Step 8: Open the file and paste the extracted CSS from your code editor
Open the file and copy all the CSS ( Ctrl + A and Ctrl + C) from your code editor paste it inside the File editor (laura-brehm.css file) and save it.
Or you can install the File Manager plugin from WP Repository or use FileZilla to upload your file.
After you upload your file copy and paste the code as I did. We need to install the Code Snippets plugin available in the WordPress repository or use a child theme.
Install Code Snippets plugins and enqueue the stylesheet
We have uploaded the stylesheets to our wp-content folder, Now we need to load the stylesheet by using the wp_enqueue style function.Step 1: Install the Code Snippets plugin-
Now install the Code Snippet Plugin from the WP Repository and activate the plugin or use the Child Theme function.php file.Step 2: Click the Add new Snippet and enqueue the stylesheet-
Now use the wp_enqueue_style function to enqueue (load) your stylesheet.
/*
* I use Code Snippet plugin so opening php tag and closing is not needed
* Change the post ID with respected post ID
* later if you're updating the code, simply update the version from 1.1 to 1.2
*/
function laura_brehm() {
/* 1978 is the post type referring to the template page like your-domain.com/wp-admin/post.php?post=1978*/
if( is_page ( 1978 )) {
/*Enqueue Stylesheets properly */
wp_enqueue_style('laura-brehm','/wp-content/cache/combine-assets/laurabrehm.min.css', array(), '1.0', 'all');
}
}
add_action('wp_enqueue_scripts', 'laura_brehm');
Unload all the stylesheets using the Asset CleanUp plugin
After you enqueue the stylesheet with the Code Snippet plugin. Make sure you check it using the Asset CleanUp options and then click the “Unload on this page” toggle on all the stylesheets to remove/dequeue/unload it.
If you want to exclude some stylesheets like global stuff make sure you click the Ignore dependency rule and keep the “children” This also applies to stylesheets.
Recommended Links for further improvements-
If you found this tutorial helpful you can support me by buying me a cup of coffee, sending via PayPal, or buying the products from my store-
- Buymecoffee
- PayPal or
- Buy products from my store
Thank you.
15 thoughts on “Remove unused CSS from Elementor website manually”
The best♥️ thanks alot Mate
Best article I´ve found that explain how to unload unused CSS from WordPress websites and, to be honest, I´ve found and read over 40 articles about this topic!
Great job!!
Thank you Roger really appreciate it.
Good video…nice and clear.
I read the kinsta article, any recommendations specifically for elementor?
The reasoning behind moving js to the header was to only move what was used as some of the large elementor js scripts only have 5% coverage.
Use the last one with functions.php. That the PHP, I am currently using on my website https://kinsta.com/blog/defer-parsing-of-javascript/#functions ( Open source-code and see your JQuery file first. If you’re using JQuery.min.js instead of JQuery.js this might cause a problem)
Good article…I’ve been using Dev Tools and Asset Cleanup to remove unwanted CSS/ js but wanted to take it a step further as there are lots of css/ js files which are more than 90% unused. Can you use the same method to move js code into the header?
I also made a big impact by creating my own icon subset file, preloading it in local fonts in Asset Cleanup and then disabling Font Awesome, Google Fonts & Eicons in code snippets – although you need to override the hamburger menu icon.
Moving JS to the head is a bad practice in my opinion. This will create rendered blocking because JS has to load – parse the code and executed (https://www.youtube.com/watch?v=eDd6Y6Z50Mg&list=PLNYkxOF6rcICVl6Vb-AFlw81bQLuv6a_P&index=8).
I would suggest you defer them and exclude JQuery (https://kinsta.com/blog/defer-parsing-of-javascript/)
If you know Vanilla JS use it instead of relying on JQuery.
That is actually my main concern, JQuery. Assuming my only use of JQuery was in a mobile toggle, wont it be faster to use vanilla JS as opposed to loading the whole JQuery library?
I use CSS for Mobile Toggle not JS anymore.
Same with me now. I keep looking for ways to push Oxygen builder to the limit.
Good Luck
As expected from the Elementor Speedstar. How do u optimize JavaScripts using swiftpro?
A great point to Disqus but Elementor frontend.min.js and other JS (free and Pro) are depending on JQuery which make it hard to remove.
If you’re using Asset clean up plugin that I recommended then there are a handful of JavaScript can be removed i.e. font-awesome-4-shim ( FontAwesome 4 backwards compatibility), share-link ( Social share on Lightbox), swiper ( Elementor slider), elementor-sticky ( for the sticky header) etc [To properly disable those JavaScript You need to enable Ignore dependency rule and keep the “children” loaded (recommended)]