Remove unused CSS from Elementor website manually

  • kishorchand
  • Performance
  • August 5, 2020
  • Join the Conversation
  • Modified 1:32 pm

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.

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 we remove unused CSS
Before we remove unused CSS
Keep Request Counts Low
Fixed Unused CSS problem with Asset clean up plugin and Extension
Fixed Unused CSS problem with Asset clean up plugin and Extension
After removing unused CSS with CSS used chrome extension
After removing unused CSS with CSS used chrome extension

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

The benefit of removing unused CSS
The benefit of removing unused CSS

Answers are still there and If you want to learn and improve your site performance and 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 automatically from Website

Swift Performance

Swift unused CSS tab

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

Flying Press

Flying-press Unused CSS tab
Flying-press plugin

Gijo Varghese’s Flying-Press plugin has the option to remove unused CSS by default ( See the screenshot below).

RapidLoad Power-Up for Autoptimize

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

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 singer template, that I got it from Envato Elements Plugins.

Problems given by Google page speed insights
Problems given by Google page speed insights

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 end of your URL to bypass cache. (This might serve uncached version and old data)

Step# 1 – Right click to open Inspect Elements

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. 

Open Inspect Elements by right-clicking on the mouse on any page
Open Inspect Elements by right-clicking on the mouse on any page

Step# 2 – Customize and Open DevsTools

Click the Customize and Open DevsTools three-dot icon on the top right corner next to the cog icon

To open Coverage panel you have to go to customize settings (3dots) on Chrome Developer tool follow then you need to go to more tools this will open side window and select coverage.
Chrome Developer tools coverage report

Step# 3 – Click the Coverage tab

After you open Coverage reports you need to click the Reload button to Capture any dead code (unused CSS) ship by your theme or plugins
After you open Coverage reports you need to click the Reload button to Capture any dead code (unused CSS) ship by your theme or plugins
A code coverage report.
A code coverage report.

03

#3 Identify Unused CSS problems from Coverage tab

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

The red border around stylesheets are safe to remove
The red border around stylesheets are safe to remove

Now you can identified resources from usage Visualization with Red and green color.

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

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

04

#4 Test before you start removing it

We figure it out which style sheets are not in use from 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 network tab then right-click on the style sheet you want to remove, then click the Block request URL this will open request blocking tab 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

You can't simply remove stylesheets because we have no idea whether CSS is in used or not so we need to test properly with the help of Chrome Dev tools Request blocking tab
You can’t simply remove stylesheets because we have no idea whether CSS is in used or not so we need to test properly with the help of Chrome Developer tools Request blocking tab

05

#5 Install Asset clean plugin

On our 4th steps, 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 by per page/post.

You can do the same thing with other asset management plugins too.

Installing Asset clean up plugin to remove unused CSS from website
Installing Asset clean up plugin to remove unused CSS from website

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
Asset clean up removal process

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

Before removing unused CSS with Asset clean up
Before
After Removing Unused CSS using Asset clean up
After

We have saved more than 20 KB of transfer size just by unloading with the help of asset clean up 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.

Can we even strip down more unused CSS or dead code from the page?

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

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 there are styles or CSS classes that are dynamically injected by JavaScript then this chrome extension failed to extract CSS.
  4. Great for the smaller website but not for a large website.

06

#6 Install CSS Used Chrome Extension

Installing CSS Used chrome extension from Google Chrome web store
Installing CSS Used chrome extension from Google Chrome web store

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

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

I found used CSS Chrome extension that works 100% on normal pages but lack on CSS classes that are dynamically injected by JavaScript like the Laura Brehm hamburger menu.

07

#7 Extract Used CSS using Used CSS Chrome Extension

After we have installed the Chrome extension. Now open Chrome Developer tools then from there head over to Elements panel and you will see the DOM tree from there select <html

Extracting use CSS with the help of used CSS chrome extension
Extracting use CSS with the help of used CSS chrome extension

08

#8 Include Dynamic style, CSS Classes and IDs to the extracted CSS

To Detect dynamically injected CSS classes by Used CSS chrome extension, we need to first interact the page, in this case, it will be hamburger menu and then repeat number 7 process.

Detect dynamically injected CSS classes with Used CSS chrome extension. Firest click the Elements panel then select HTML from DOM  CSS used will automatically generate CSS
Detect dynamically injected CSS classes with Used CSS chrome extension follow the screens

09

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

Now copy the minified/un-minified code to your code editor ( Visual Studio Code) and save it as .css file format. So you can upload it or copy the code.

Open code editor (here Visual Studio) and paste the code you generate from CSS used
Open code editor (here Visual Studio) and paste the code you generate from CSS used

10

#10 Login to your control panel and upload the file

In this step, we are going to upload a file through the control panel or cPanel or FTP manage. I am currently using Runcloud as my control panel (cPanel) and Vultr (High Frequency) as my storage so the process is simple. 

Step#1- Login to your control panel

Runcloud Login panel

Step#2- Select your Server

Select your Server
Select your server

Step#3- Head over to Web Application

Now head over to Web Application area and choose your root.

After you select the server, you need to select web Application and then select your Domain
After you select the server, you need to select web Application and then select your Domain

Step#3- Open File Manger

After you select your domain, you will access the root of your domain. From their select File manager to upload file
After you select your domain, you will access the root of your domain. From their select File manager to upload file

Step#4- Scroll down and open 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

Scroll down and open the wp-content folder
Scroll down and open the wp-content folder

Step#5- Create a new folder or use 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.

Create a folder inside the file manager or use existing if you already created one
Create a folder inside the file manager or use existing if you already created one

Step#6- Create .css file inside combine-assets ( change if needed) folder

After you have created folder ( combine-assets), you need to create a .css file that stores our extracted CSS from number #8

create a file inside the cache folder
create a file inside the cache folder

Give a file name (Laura-brehm) and save it as .css format

Give a file name to the .css file format and hit create to save the file.
Give a file name to the .css file format and hit create to save the file.

Step#7- Open the file and paste 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 code inside the file editor
Paste your CSS code inside the file editor

Or you can install File manager plugin from Wp Repository to upload your file, later on, you can remove the plugin. If you want the guide please let me know I will add it here.

11

#11 Install Header and Footer Scripts plugins

This plugin is very useful, it allows you to add scripts or style on head tag without touching your theme php. You can add it as globally or page or post basis.

Install Header and Footer Scripts plugin from WP Repository
Install Header and Footer Scripts plugin from WP Repository

If you know PHP well, you don’t need to install the plugin that I have mentioned above because it is easily achievable with Code snippet plugin or child theme and you can easily enqueue your CSS, JavaScript and PHP -elementorcodes. But I found out this method is much simpler and easy to use for a non-coder.

12

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

You need to go 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.

<link rel="stylesheet" id="name-your-css" href="https://yourdomain.com/wp-content/cache/combine-assets/laura-brehm.css" >
Header and Footer Scripts insert meta box
Header and Footer Scripts insert meta box

13

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

Now we have linked the extracted used style sheet using header & footer scripts or Code Snippet plugins. Now you can safely unload all the CSS using Asset clean up without even breaking or exclude global stylesheets.

If you don’t want to go through all this process you can get Flying-press plugin because plugins I recommended above and here will remove your Unused CSS automatically which make super easy and faster.

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

Advice: If you removed unused CSS from post and page completely, you will not gain a major boost on your Performance score. Here the post web.dev lighthouse report that has unused CSS problems if you are interested to see.

Web.dev measure report
Web.dev measure report