Remove unused CSS from Elementor website manually

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.

Before and After the performance test

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

Before

After

This question always comes in Facebook groups.

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

Before I discovered this method, I was using Remove unused CSS from the web.dev.Identifying and extracting used CSS from a small style sheet are way easy to detect. But if your website is built with Elementor things can be really complicated and not easy to remove unused CSS.

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 on your site, you might be asking yourselves, what are the benefits of removing?

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.

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.

 

Plugins will remove unused CSS automatically from the Website

Swift Performance

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

RapidLoad Power-Up plugin for 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

WP Rocket: Unused CSS Removal

Currently, Unused CSS removal from WP Rocket is in the Beta stage and only available for a random sample of 45% of their users.

Get WP Rocket

NitroPack: Reduce Unused CSS

Process of Removing unused CSS manually from website

01

#1 Get a baseline Performance score

First of all, 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.

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

02

#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# 1 – 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 click Inspect to open Inspect Elements panel. 

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

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

Step# 3 – 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.

#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.

Now you can identify resources from usage Visualization with Red and green colors.

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

You will get all the information like shortcuts, tips everything https://developers.google.com/web/tools/chrome-devtools/coverage

04

#4 Test before you start removing it

We figure out which style sheets 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

Now head over to the network tab then right-click on the style sheet you want to remove, then click the Block request URL this will open the request blocking tab (shown on the picture below) which lets you blocked 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.

05

#5 Install Asset clean plugin

In our 4th step, we need to install Asset clean-up plugins. This plugin will allow you to remove unused or dead CSS and JavaScript code from the entire website or per page/post.

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. 

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

We have saved more than 20 KB of transfer size just by unloading with the help of the asset clean up the plugin. If you’re using lots of 3rd parties plugins or addons that add styling to your page, then you will save lots of resources and gain site performance boosts.

How to Reduce More unused CSS

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

Drawback of removing unused CSS (manually)

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.
4. Great for the smaller website like for Landing pages but not for a large website.
5. If there is style being updated, you will have to redo everything again from start.

06

#6 Install CSS Used from Chrome Extension

After we have saved more than 20 KB of transfer size just by unloading CSS with the Asset clean up plugin, we still have tons of unused CSS problems that can be removed but are not possible.

With the help of this Chrome extension, we will be able to remove unused CSS completely.

I used CSS Chrome extension from StackOverflow while I was researching how to remove unused CSS from Elementor. 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.

07

#7 Extract Used CSS using Used CSS Chrome Extension

After we have installed the Chrome extension. Now right-click on any area and click the inspect elements, this will open Chrome Dev tools – Elements panel and you will see the structure of the page from there click the <HTML tag and click the CSS Used tab on the right side of the panel (see a number: 3).

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 that is only triggered by interacting with the hamburger menu.

08

#8 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 page or post you’re currently optimizing, in this case, it will be by interacting with the hamburger menu.

All the processes in step 7 are the same but in this step, you will need to first interact with the hamburger menu, this will trigger the CSS that is not loaded before. To capture all the CSS make sure you trigger it (see step 1) and follow the step 7 process.

09

#9 Copy the minified/unminified code to your Code editor and save it

After we extracted the used CSS from our page, we need to copy the minified/un-minified code to your code editor ( Visual Studio Code) and save it in .css file format. So you can upload it or copy the code to our server with the help of FTP or accessing the control panel.

If you have a prettier – code formatter VS Code install on your PC, you can minify by entering F1 on your keyboards or use Online tools to minify it.

10

#10 Login to your control panel and upload the file

I use Runcloud as my control panel so the process I’m going to show you will be different from yours.

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. I am currently using Runcloud as my control panel (cPanel) and Vultr -High Frequency) as my storage server so the process is simple. 

Step#1- Login to your control panel

Step#2- Select your Server

Step#3- Head over to Web Application

Now head over to the Web Application area and choose your root. i.e., Domain

Step#4- Open File Manger

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. 

Click the Cache folder and inside the cache folder, create your own 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‘.

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

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

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.

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

11

#11 Install Header and Footer Scripts plugins (optional method)

This plugin is very useful; it allows us to add scripts or stylesheets to our head or the footer tag without touching theme PHP and we can enqueue it globally or page or post basis.

12

#12 Head over to header & footer scripts plugins textbox area (meta-box) of your page and link your stylesheet

You need to go to the page or post you’re editing then above Asset clean up plugin meta box there is a textbox added by Header and Footer Scripts plugins. Inside that, you need to link your style sheet or simply inline all the CSS.

<!-- Your's file location and name will be different from mine -->

<link rel="stylesheet" id="laura-brehm" href="/wp-content/cache/combine-assets/laura-brehm.css" >

<!-- Keep in mind that above stylesheets will cause Rendering Blockingto fix the problem you have to preloading it with <link rel="preload"> -->

<link rel="preload" as="style" href="/wp-content/cache/combine-assets/laura-brehm.css">

Something like this

If you know how to write PHP, you don’t need to install the plugin that I have mentioned above because it is easily achievable with the help of a Code snippet plugin or using a child theme.

// With PHP
function laura_brehm() {
// 1978 is the post type referring to laura-brehm template page
    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');

13

#13 Unload all the stylesheet using the Asset clean up plugin except Global styles or dynamic styles

After you enqueue Laura-Brehm stylesheet with the Code Snippet plugin or link with Header and Footer Scripts. We have to click the “Unload on this page” toggle on all the stylesheets to dequeue it.

Recommended Links –

1. WP Speed Matters ( Focus more on Performance than anything)
2. WP Johnny – The Ultimate WordPress Speed Optimization Guide
3. web.dev – Fast Load Times
4. Easily Add CSS, JS and PHP to Code Snippets plugin