WordPress, by default, is optimized for performance and speed. Its modular approach to themes and plugins helps site owners easily add functionality as per need. There are few performance problems for small sites running just a few plugins. But for larger sites with more plugins installed, the performance hit quickly adds up to significant levels.
While Elementor may seem easy to use, it can get resource-heavy as well. Asides from its default stylesheets, some of the rules generated by drag and drop page builders (and their extensions) could cause an unnecessary slowdown of site traffic. In this article, I’ll go over how to remove unused CSS from Elementor, and save your site precious seconds of load time.
What Is Unused CSS?
CSS is responsible for all your site styling, from font sizes to button-click animations. For WordPress sites, unused CSS commonly originates from themes and plugins. Each includes a set of rules and declarations in your site’s CSS on installation. Some themes and plugins are more optimized than others, but there will be sections and modules that may be irrelevant to your entire site.
Elementor is no exception. For optimal functionality, there are some default, global rules included in its stylesheets. Any page built with Elementor loads these, regardless of its content. To its credit, Elementor does its best to include only the relevant stylesheets on a page. But a quick Google’s Page Speed test often indicates there remain unused CSS on page load.
How unused CSS affects your site
It may not seem like a big deal, but unused CSS could significantly slow down your site and negatively affect your User Experience. Browsers, by default, have to load all external stylesheets before rendering a page to your visitors. Asides from your users, site speed is an essential consideration for Search Engine crawlers and could seriously impact your SEO ranking.
Although it’s essential to website design, most Elementor users never have to edit a single line of CSS code. That is because Elementor uses a WYSIWYG (What You See Is What You Get) editor, which translates visual changes into several lines of code as you make them. For this reason, most WordPress sites are bloated — filled with lots of unused code that consume precious server resources — and WordPress site owners usually have no idea of this.
Is it safe to remove unused CSS?
Yes, it is, and even recommended by Google Page Speed Insights. Removing or deferring unused CSS is a plus to your site, as it will positively impact your User Experience and Search Engine rankings. However, it can be tricky to properly identify what CSS is unused.
Most people turn to the Google Chrome DevTools coverage tab to try to get an idea of unused CSS. But in reality, the coverage tab doesn’t paint a complete picture. Not all CSS rules apply on load, as some various states and triggers may, later on, refer to a styling declaration. You can see an instance during hover effects, lazyload, or other dynamic effects. Since all possible states cannot be active at once, the “unused CSS” marked up in Chrome DevTool may just not have applied yet. If you just deleted all the rules marked up in the coverage tab, you would end up with a lot of problems and possibly a broken site.
Allow me to point out that removing unused CSS is not the same as optimizing CSS delivery — a process known as minification I’ll explain later in this article.
The best way to remove unused CSS from Elementor
This is my #1 recommendation because it is an automatic process, by Elementor itself. Elementor has recently introduced a new batch of experimental features focusing on Improved Asset Loading, with changes focused on DOM output and Improved CSS loading! Before trying any other means to remove unused CSS from Elementor (even as an experienced WordPress user), do this first as it might save you hours of time and possible frustration.
Take note, however, that these features are experimental and may cause conflict with plugins on your site, so be on the lookout. Nonetheless, even if you don’t enable these experimental features, simply updating your Elementor version will provide significant improvements. Across the board, they are constantly improving on asset delivery and optimization to address the very problem this article was written for. See the comparison below between 3 Elementor versions.
In most cases, Elementor’s improved asset loading and is a reliable way to remove unused CSS from Elementor (at least without causing unknown issues or spending a ton of time). But if for some reason you aren’t satisfied with this, or it has caused a conflict on your site, or you’re simply curious, don’t fret. Read on for more ways you can remove unused CSS from Elementor.
How to remove unused CSS with WP Rocket
WP Rocket is the #1 caching plugin I would recommend. It’s perfect for beginners and still allows professionals who intend to “get their hands dirty” to tweak in-depth settings. WP Rocket provides a wide range of options, from assets minification to lazy loading. Removing unused CSS is currently a beta feature in WP Rocket, but in my experience, it hasn’t created any issues, and it did help — reducing a page load time by a whole second in one situation. When it comes to page load times, that (2 seconds) is a big deal.
The plugin automatically figures out what CSS (Elementor’s and any others) is unused for a particular page and defers it, saving you server resources and your users, bandwidth, and wait times.
When you select Remove Unused CSS, used CSS will be generated in the background for your website and appended inline to the HTML of each processed page.
WP Rocket will gather all of the stylesheets and scripts on a page and send them to our external tool for processing. Anything that can be detected as a CSS selector will be picked by the tool. It will then compare the HTML of the page to the selected data to determine which CSS selectors are really used on the page. Only the CSS selectors that match will be kept as Used CSS. CSS entries that have been used will be preserved in the database. Here’s a full article on their process
Note that WP Rocket is a premium WordPress plugin starting at $49. It’s definitely worth its pricing, but the free plugin below can reduce unused CSS as well.
How to reduce unused CSS with Nitropack
Nitropack is another really useful site optimization tool I can vouch for. Their Reduce Unused CSS (RUCCS) is a feature they’ve been working on for quite some time. They have a full detailed guide on how to set this up. But in summary, enable safe mode first, then turn on the “Reduce Unused CSS” toggle from the Advanced tab.
How to manually identify unused CSS
If you want a more fine-tuned control and insight into unused Elementor’s CSS, PurifyCSS provides an automatic site scan, with reports on how many percent of your CSS is being used. Remember to take these results with a pinch of salt, and thoroughly test after every edit. More importantly, ONLY do this if you’re well-versed with CSS. PurifyCSS presents a list of all the stylesheets on your site and scans each one individually for used or unused CSS.
If you’re looking to narrow down on just Elementor’s unused CSS, you may want to scroll down the list and look for the sheets with /elementor/… in their file paths. Another thing you have to consider is Elementor extensions like Ultimate Addons and Crocoblocks. Those also add in Elementor-related stylesheets so you want to also check out their stylesheets for any possible optimization opportunities.
PurifyCSS allows you to download the sheets individually, combined, minified, or “purified”. Like I’ve mentioned, minification is a different process than removing unused CSS (referred to as Purified CSS in this case). One thing’s for sure, it’s not a simple or rapid process. Once you download the purified CSS, you still need to upload it to your site. This can be done in one of two ways.
How to update Elementor stylesheets from the backend
Having narrowed down on the stylesheets you want to make changes to, Make sure your site is under maintenance mode first, to make sure your visitors don’t get errors. It is possible to make changes to the theme and plugin from Appearance settings in the WordPress dashboard, but this method is NOT recommended. Any changes you make directly in the theme or plugin editor will be overwritten once you update the plugin.
Thus, safely updating stylesheets may be done in one of both ways. First, you can use the FileManager plugin to navigate your site’s folders and locate all the stylesheets you have shortlisted by searching or going to each relevant plugin’s asset folder. Remember not to rush this process, or you could break your site. Once you upload the changes, head back to your site and inspect it as thoroughly as possible.
Compare the changes between your old stylesheet and the purified stylesheet, so you know what areas of your site to test rigorously. You especially want to look out for states and triggers, and make sure to test events if you have JavaScript on your page. Do this for every sheet you update, and if you notice any inconsistency, revert to the old sheet or try to find what line of code you can narrow down on
If you have FTP access or are more versed with cPanel, you may also use that, to access your site’s backend. Again, head to the file manager section on cPanel, or navigate to your WP COntent folder on FTP. Simply search for the stylesheets and update each accordingly (remember to take backups first!). Return to your site to test at intervals.
What other ways can you speed up your site?
A good deal of CSS can be compressed in a process known as CSS minification. And almost all caching plugins offer this functionality. I’ve referred to this several times earlier in this article. The concept is pretty simple; Indentations and line breaks may be helpful for humans but is just a waste of space when crawled by bots or read by machines. CSS minification involves removing all the white space from a CSS stylesheet, making it significantly lighter, and saving server demand, and increasing site speed.
In general, you want to keep your site as light as possible. Only install plugins or insert code you absolutely need. And consider site-wide caching, especially if your site content doesn’t change too often. Elementor is an amazing page builder. But be sure to optimize your design and avoid inserting too much custom code into individual sections of your Elementor pages. Instead, combine these individual snippets and add them all in the custom CSS area of the WordPress appearance menu.
And lastly, as much as performance is important, don’t be obsessed with your site speed either. Once you’ve done the basic asset optimization of JS and CSS, compress, and turned on lazy load, you really don’t have to go any further. Elementor and WordPress are continually improving content delivery, and you should only focus on curtailing excesses and creating a quality experience for your visitors.
