Skip to Main Content

Remove unused CSS from Elementor website manually

In this step by step tutorials, we are going to learn how to remove unused CSS from Elementor website without breaking website manually.

Remove Unused CSS in WordPress

Table of Contents

People do not realize the amount of CSS is being loaded on their page or post. If you test your site in Google page speed Insights (PSI) or any tools you will see a large amount of CSS loaded by your themes, 3rd parties plugins or page builder or theme builder if you’re using.

Removing unused CSS in WordPress is a tedious process and it can end up breaking your site if it isn’t done right.

Performance test

Accordingly to Google PSI reports, this page can potentially save over 60 KB which is huge, Your’s site may differ.

Before

Before we remove unused CSS
Before we remove unused CSS
Page Speed Insights suggest , we have over 70KB of CSS present in the page

After

After removing unused CSS with the help of Asset clean up plugin and used CSS chrome extension
Final result after removing unused CSS with Used CSS chrome extension
Final result after removing unused CSS with Used CSS chrome extension

This question always comes in Facebook groups.

How to remove unused CSS from the Elementor website (manually)?

Before I discovered this method, I was using Remove unused CSS from the web.dev to identify unused CSS it was good for small 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 and complicated.

Am I right?

That is why I wrote this tutorial to help you solve those problems that are recommended by Google Page Speed 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 WP Speed Matters Facebook Group and this is what I got.

Benefits of Removing Unused CSS

The second point on my process might be incorrect because removing unused CSS wouldn’t fix Rendering Blocking resources, it will surely remove some of the file size and requests though.

The Benefit of removing unused CSS

Answers are still there and If you want to learn and improve your site performance, I highly recommended Joining WP Speed Matters Facebook Community. You will be going to love it and just by browsing in the groups you will learn tons of advanced stuff.

This step-by-step article is complicated and long to read, sometimes, it will be difficult to implement or hard to read.

If you want to remove your unused CSS process automatically, 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 it

Six plugins will automatically remove your unused CSS from the Website

– WP Rocket: Remove Unused CSS (Beta)

Unused CSS removal by WP Rocket plugin
Picture Credit to WP Rocket

Currently, Remove Unused CSS is in the Beta stage and available to 100% of their users.

– Swift Performance

Unused CSS removal by Swift Performance
Swift Performance allow you to remove unused CSS automatically under advanced settings

Right now Swift Performance (free and Pro) has the option to remove unused CSS from the website because last time I activate the feature all my hover effects, pseudo-class are all broken. ( You need to test it thoroughly).

To access this feature. Follow these steps-

  1. Enable Advance view otherwise, it wouldn’t show up.
  2. Go to Optimization – Styles – Enable Disable Full CSS

– FlyingPress

unused CSS removal with FlyingPress
Picture credit to Gijo

FlyingPress plugin has the option to remove unused CSS automatically ( See the screenshot above).

– RapidLoad Power-Up plugin for Autoptimize

Unused CSS removal by RapidLoad Power up with Autoptimize

RapidLoad is a WordPress plugin that extends Autoptimize. It automatically optimizes your site to run as fast as possible by removing unnecessary CSS and compressing relevant files.

No development necessary – optimize everything with one simple step.

RapidLoad

– NitroPack: Reduce Unused CSS

Unused CSS removal by NitroPack

– Perfmatters: Remove Unused CSS (beta)

Unused CSS removal by Perfmatters
Image Credit to Perfmatters

Process of Removing Unused CSS (manually) from website:

Step#1 Get a baseline Performance score

In order to optimize our website, first, we need to get a performance score on this page, later on, we can compare both the picture.

In this process, we are going to optimize the singer template, that I got from Envato Elements Plugins.

Page Speed Insights recommends in our website, we have over 100KB of CSS from there more than 70KB is unused CSS

Accordingly, to Google PageSpeed Insights, I can save over 60 KB of CSS, but your size may differ from mine.

Step#2 Open Chrome Developer tools & start capturing coverage Tab

Tips:

For example, if you combined or merge CSS in your performance plugins then it is not easy to identify which CSS is in used or not, there are 2 ways to solve this issue –

  1. Remove page or post from caching this is one of the most common one and safest way. Re-added again.
  2. By adding ?nocache or any string to the end of your URL to bypass cache. (This might serve uncached version and old data or it might not serve either)

Step#2(A) – Right click to open Inspect Elements

Watch the video properly, it covers tills #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 Inspect Elements panel. 

Right-click on any place and click the Inspect elements to open the elements panel

Step# 2(B) – Click the Customize and Open DevsTools Menu (3 dots) in Chrome Dev Tools

Click the 3 dots (Customize and Control settings) to open its settings

We need to use the Run Command to select coverage reports.

When you click the 3 dots, select run command option

Step# 2(C) – Click the Coverage tab

There will be lots of items in the list when you use the “Run Command” but we have to select Coverage or simply type “Show Coverage or Coverage” to open the Coverage report.

Picture showing how to use Chrome Developer Tools show coverage report

Click the reload button and start capturing coverage.

After you, open Coverage reports you need to click the Reload button to Capture any unused CSS ship by your theme or plugins

I have tested this page without enabling Improved CSS Loading Elementor’s experiments features in the settings tab. That is why the CSS size is huge.

Disabled:

After you run the test and capture
Improved CSS loading is disabled

Enabled: After I enabled the experiments. Page Size does reduce a lot but still, there are lots of unused CSS that can be removed.

Picture showing difference between after enabling and disabling Elementor's experiments
Improved CSS loading is enabled

if you’re thinking Why Elementor is loading 2 versions of frontend.min.css, you can see the answer from Official Elementor’s forum.

Here are the settings to enable “Improved CSS Loading” in Elementor. Keep in mind that Improved Asset & CSS loading are in an Alpha stage which means there will be bugs and potentially it can mess up your design.

Do it at your own risk.

Settings to enable Elementor's Experiments

Step#3- Identify Unused CSS problems from Coverage tab

Click the reload button to start capturing coverage. Next to the URL Filter on the right side, there is an option to choose, from there choose filter coverage by type to CSS.

So it will show only CSS files.

Choose CSS as filter type from dropdown lists
Identify resources from usage Visualization with Red and green colors.


The red color of the bar indicates unused bytes and the green color indicates used bytes

The red border with 100% unused bytes are safe to remove which means CSS is not used anywhere
The red border on your screen represents or 100% in usage visualization are completely safe to remove and it wouldn’t cause any issue

You will get all the information like shortcuts, tips everything from Chrome Dev tools Coverage.

Step#4- Test before you start removing it

We figure out which stylesheets are not in use from the usage visualization panel but how should we so sure, whether the file we’re removing is not going to break our style.

To safely remove, we have to head over to the 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: Request Blocking can be done with Webpagetest too and it is currently in Beta Stage.

Block Request URL features in Chrome Dev tools
Block Request URL features in Chrome Dev tools
Request blocking panel showing which CSS or JS will be block when next page load
Request blocking panel showing which CSS or JS will be blocked when next page load

Install Asset clean plugin and start unloading style you don’t need

We have already figured out which stylesheets can be removed 100% safely and we also have tested with the Request Blocking feature in Chrome Dev tools. Now we need to install this plugin so we can remove 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.

Before we remove

Picture showing Before we remove unused CSS
It is combined CSS generated by Swift Performance pro

Removing unused CSS

Now go to the page/post, you’re removing and toggle the “Unload on this page button” to unload CSS from loading. 

Asset clean up removal process
Click the Unload on this page button to remove the stylesheet

Removing unused JS

This method can be applied to removing unused JS too but just make sure you enabled the ‘Ignore dependency rule and keep the “children” loaded’ input box (See the screenshot below). Otherwise, all the child files will not load.

Watch out for Dependencies

Results after unloading CSS with Asset clean up plugin ( picture show – Before and after removal)

After unloading with Asset clean up

Picture showing after removing unused CSS Problem with Asset clean up and saw 20% reduction in page weight
Reduce page weight by 20% after unloading stylesheets with asset clean up

We have saved more than 20 KB of transfer size just by unloading stylesheets with the help of the asset clean up plugin. If you’re using lots of 3rd parties plugins or addons that add styling to your page, then you may be able to reduce page weight even better than mine.

How to reduce unused CSS completely (Advanced Method)

In the next step, we are going to learn how to remove unused CSS manually in WordPress with the help of the Chrome extension.

The drawback of manually removing unused CSS:

  1. It is a time-consuming process.
  2. Removing unused CSS is not worth it if you constantly updating your pages.
  3. If JavaScript dynamically injects styles or CSS classes are present, then this chrome extension will fail to extract used CSS. (I will explained how to include them)
  4. Great for the smaller website like single page website, Landing pages but not for a large website such as News website.
  5. If there is style being updated, you will have to redo everything again from start unless you use same CSS class or an id.

Step#1- Install CSS Used Chrome Extension from Chrome Web Store

To remove unused CSS problems completely, we have to install CSS Used Chrome Extension from the Chrome extension Store.

After we saved more than 20 KB of file sizes just by unloading stylesheets with the Asset clean up plugin, we still have lots of unused CSS problems that can be removed but it was not possible.

But with the help of this used CSS Chrome extension, we will be able to remove unused CSS completely, even the CSS was injected by JavaScripts.

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 pop-up trigger by interacting with the hamburger menu.

Step:2- Extract Used CSS using Used CSS Chrome Extension

After we have installed the Chrome extension. Now open Elements Panel [Follow Step#2(A)] and this will open the DOM tree from there click the HTML tag and click the CSS Used tab on the right side of the panel. (see the screenshot below)

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 Elementor’s Plugin or any 3rd parties plugin. To fix these problems we have to interact with the layout.

  1. Open Elements Panel
  2. Click the HTML tag.
  3. Click the CSS used Tab next to Accessibility tag
  4. Click the Preview button to open in New tab.
  5. Click the Copy button to copy CSS and upload it to your server.
Extracting CSS with used CSS chrome extension

Step#3- Include Dynamic style, CSS Classes and IDs to the extracted CSS

To Detect dynamically injected CSS classes or id 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.

(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)

To capture all the CSS, make sure you interact with the page and open it like the opening menu (See the screenshot below).

First what I did is interact with the Hamburger menu this way Elementor Dialog JS will inject the CSS and click the HTML tag and then click the CSS Used tab to generate unused CSS.

Detect-dynamically-injected-CSS-classes

Step#4- Copy the minified/unminified code to your Code editor and save it

By Default used CSS chrome extension will generate minified code but if you want to remove like inline style, global style, etc. You can un-minify the code and paste it to your editor and after that minified again and save it in .css file format. So you can upload the file or copy the code to our server with the help of FTP or accessing the control panel.

Choose your preferred Code editor and past the code and save it as .css file

If you have Visual Studio (VS) code, you can use a prettier – code formatter VS Code extension to minify by entering F1 on your keyboards or using Online tools to minify it.

Login to your control panel and upload the file

I use Runcloud as my control panel so the process may be different but you can still follow these steps.

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- Login to your control panel (cPanel)

Runcloud Login

Step#2- Select your Server

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

Choose Domain as root folder

Step#4- Open File Manger

Click the File Manager to access website folders and later we can upload stylesheets

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

Click the File Manager to access website folders and choose wp-content folder

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

Click the Cache folder and inside the cache folder, create your folder (combine-assets), this is the folder 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 ‘cache folder‘.

Click the Cache folder to create a new folder inside the folder
Inside wp-content folder
Inside the Cache folder, there are many existing folders and we have to create another folder of our own.
inside cache folder

Step#7- Create .css file inside 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. So for me, it is to create a file and copy all 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

Create new file, we can later add our CSS
Select the file from the Dropdown menu

Give a file name (example – Laura-Brehm) and save it in .css format.

Give a file name to your .css file
Name your Stylesheets and create a .css file

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 and paste it inside the File editor (laura-brehm.css file) and save it.

Paste your CSS (preferably minified) from your Code editor and save it

Or you can install the File manager plugin from WP Repository or use FileZilla to upload your file.

Install Code Snippets plugins and enqueue the stylesheet

Step#1 – Install the Code snippet plugin-

Now install Code Snippet Plugin from WP Repository and activate the plugin.

Download The Code snippets plugin from WP Repository

Step#2 – Click the Add new Snippet and add enqueue the stylesheet-

Now use the wp_enqueue_style to enqueue(load) your stylesheet and it will automatically add the stylesheet to the head tag of your page.

picture showing how to load or enqueue the stylesheets to the specific post using PHP
// With the help of PHP, I use Code Snippet plugin opening php tag and closing is not there
// Change the post number with respected post number
// You arenot required to add opening and closing PHP tag, if you're using Code snippet plugin

function laura_brehm() {
// 1978 is the post type referring to laura-brehm 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.1', 'all');

	
    } 
}

add_action('wp_enqueue_scripts', 'laura_brehm');

Unload all the stylesheet using the Asset clean up plugin

After you enqueue Laura-Brehm stylesheet with the Code Snippet plugin. We have to click the “Unload on this page” toggle on all the stylesheets to remove/dequeue it. If you want to exclude some stylesheets like global stuff make sure you don’t unload it.

To completely remove all the stylesheets, we have to go to post or page and click the unload on this page button except the stylesheets we enqueue
  1. WP Speed Matters
  2. web.dev – Fast Load Times
Thangjam Kishorchand

Thangjam Kishorchand

Hi there, this is my place where I write about my Elementor tips and tricks that I learned for the last 2 years. I am mostly active on Quora and Facebook. I love messing around with design trends like Variable Fonts, Dark Mode

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.