Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive affiliate commission.
This is more for WordPress theme developers than it is for, plugin developers but the concept is the same. Themes and plugins in WordPress suck at loading their assets. This is for both; the frontend and the backend (wp-admin). There are many reasons for this. Either to maintain compatibility with strange implementations for plugins and new features. Or it could be out of pure laziness. However, I want to start by addressing an example.
This site was built using Avada and that is not a secret by any stretch of the imagination. This is because the fusion builder has the ability for you activate or deactivate it for posts & pages. This is great because I have no reason to have a page builder on my posts in the admin panel. It clutters the editing experience. However, when I open up “View Source” on a page, the associated JavaScript and CSS files are still loaded.
You may be quick to point out that if it is already cached then it won’t impact your load time. This is also the time where I start to get annoyed. It is a very poor argument to suggest that we should load everything on every page because it can be cached. In fact, Google’s Lighthouse has expanded it’s recommendation in a recent update to “remove unused CSS rules.” Albeit, this has a minor impact on performance. However, it begins to hit home on the issue with modern website design and optimization.
Modern Design & Optimization Focuses On Number’s Not What’s Being Served
When it comes to modern website design and optimization, many theme and plugin developers think that as long as the page-weight is small then it does not matter how much data the data is uncompressed. For example, if the JavaScript file is 1MB in size and GZIP compression reduced the file by 200KB, then this is okay. I tend to notice this issue on websites that use plugins such as bbPress, BuddyPress, and WooCommerce. In these plugins, the assets are loaded on every page. While, this does not make the download size larger, you run into the issue with rendering time.
When aggregating your CSS files and the media type of the file that matches your current device, the browser will download and evaluate all of the CSS used or unused. This is done to determine what needs to be used to pain the website and what doesn’t. Therefore, adding all of these plugins might add 50kb to the size of your total compressed CSS, but when you look at the uncompressed versions, you will realize that the browser still has to evaluate all of that CSS. The issue is also glaringly apparent when optimizing for mobile devices.
As A Website Owner, What Can You Do?
There are a number of plugins such as WP Asset Cleanup that allow you to load plugins only on pages when they are needed. These plugins are great because they reduce the amount of JavaScript, CSS, and Ajax calls being made to the server when they aren’t needed.
We have written tutorials for removing assets for various plugins, including BuddyPress which can be found here. By removing these assets, you’ll see a major improvement in your website’s performance. It will reduce the amount of time it takes for a browser to render and display your website.
More importantly, you can tell your theme and plugins about the issue and have them fix it. For example, there is a popular theme called Newspaper on ThemeForest. This theme was loading their CSS for bbPress and WooCommerce in their own files, but not BuddPress. I reached out to the theme developers and pointed out that adding it to the main theme styles would lead to several issues. The developer’s agreed and are rectifying the issue in another release.
As A Developer What Can You Do?
I’m not asking every developer to set strict rules and break thousands of websites that use their plugins. That being said, there should be a setting in your options panel that will load the assets more intelligently. By using this method, the end user will become more aware of the issue and theme developers will likely conform to more standard use cases of your plugin.
Obviously, not all plugins can do this. However, it would be a step in the right direction. Let’s contribute to making the web a faster and less bloated place.
