How To Crush Your Unminified JavaScript And CSS Issues In Site Audits
You’ve probably heard about the benefits of having a fast loading website from more digital marketing professionals than you want to admit. One of the most efficient ways you can speed up your site across each page occurs when you take the time to address issues with unminified JavaScript and CSS files.
If you are a regular user of site auditing tools included in SEO platforms like SEMrush, Ahrefs, or Moz, then you probably have also come across the following warning in your to-do list of warnings to fix: issues with unminified Javascript and CSS.
Based on who you are within the company you work for, we also have a pretty good feeling we know your first thought after seeing that alert in your site audit:
- Executive: “What does that even mean?!”
- Marketer: “Crap! Now I’ve got to get my developer involved to fix this.”
- Developer: “I KNOW what it means, but it’s just a warning. How important is fixing that?”
At DOM, JavaScript and CSS minification warnings show up in almost every site audit we conduct. It doesn’t matter if the site is old or new, built with WordPress or Magento, targeting clients and consumers in the US or on an international scale. If you operate a website, chances are good you have issues with JavaScript and CSS minification that are causing your site to load slow.
While most SEO site auditing tools do not classify minifying JavaScript and CSS as one of the highest priority items to address, that doesn’t mean taking care of these warnings is something you should put off, either.
Because in the always-on, always-now game of digital marketing, time is money. And by time, we really mean page load speed.
The time has come to demystify the following warning you have received so many times in your site audit:
“issues with unminified JavaScript and CSS.”
You should know what it is. You should know how it works. You should know what impact fixing this is going to have on your site performance.
You can figure all of this out below.
What Is ‘Unminified JavaScript And CSS’? How Does It Work? What Does It Mean To Have ‘Minified JavaScript and CSS’?
Before getting specifically into what unminified JavaScript and CSS are, let’s make sure we’re all on the same page with what JavaScript and CSS do on your website.
- JavaScript, in its core state, is a programming language. Its sole purpose is for creating dynamic and interactive elements on webpages, and then telling your browser where to find those dynamic/interactive elements and what to do with them.
- CSS is short for Cascading Style Sheet. This file helps your web developers create the uniform look and feel of your site without having to copy and paste the same content on each individual page.
So, what is unminified JavaScript and CSS files?
To put it simply: scripts and files in their evolved state of being.
Web developers do have to follow a standard set of coding language rules to produce web pages and sites, but almost all of them have unique ways to create something from nothing. Over time, companies also tend to change developers, too. Then new developers bring their own approach to modifying JavaScript and CSS to perform new tasks or overhaul page layouts.
Over time, as these files evolve they also can become weighed down with things like:
- Unnecessary lines
- White space
- Comments in the source code
- Hosting on external servers
As a result, you are left with unminified JavaScript and CSS files performing core processes on your site. For a great visual, think of unminified files as the Arnold Schwarzenneger character from Twins hanging around on your server.
If that explains unminified JavaScript and CSS files, what is minified JavaScript and CSS?
Essentially the same files… just in a condensed format.
- Extra lines and white space removed
- Unnecessary comments scrubbed out
- Hosted on your local server
If your unminified JS and CSS files are the Arnold character from Twins, then obviously your minified JavaScript and CSS files are comparable to the Danny DeVito character hanging out on your server.
How To Fix Unminified JavaScript And CSS On Your Website
The amount of time you are going to need to spend in the following section will vary greatly based on the job title you have.
- Executive: You can probably delegate fixing this issue to your site manager or web development lead and task them with troubleshooting to find a solution. Want to share this post with those people via email or Slack? Right-click here and select ‘Copy Link Address’ for a bit.ly link to share with them.
- Marketer: Based on your expertise and comfort level inside your website platform, you can either see the executive suggestion above or read below to find the best solution for your site.
- Developer: Unless your marketing team has a dedicated “web guy” you can transfer these issues to for troubleshooting and resolving, completing a minification of JavaScript and CSS probably falls on you. Read more below.
There are several approaches you can take to fixing unminified JavaScript and CSS files. The way you go about reaching that end destination of minified JavaScript and CSS depends on the platform your website has been built upon. Below we have detailed three ways to complete the fix.
- How to fix in WordPress
- How to fix in non-WordPress Content Management Systems (CMS)
- How to fix them old school with no CMS
How To Minify JavaScript and CSS in WordPress
Our favorite answer to any WordPress related issue is “there’s a plugin for that.”
Completing minification related improvements to your JavaScript and CSS in WordPress results in the same two-step answer…
- Choose a plugin to fix these issues
- Install/activate/configure your plugin of choice to minify the files
Referral links from the Google PageSpeed Insights tool to WordPress.org will present you with 11 pages of plugins to help minify JavaScript and 15 pages of plugins to help minify CSS.
Below are two of some of our frequently recommended solutions – one free to use, one premium.
- Free to use options: W3 Total Cache, Autoptimize, Hummingbird
- Premium option: WP Rocket
Depending on your budget and level of technical expertise, both of our recommended plugins can be configured to produce great results for your site. You just need to confirm compatibility with your hosting environment and set them up for success.
Ready to do a deep dive into other WordPress plugin solutions to improve your site? Check out our list of the 12 best WordPress plugins for SEO.
How To Minify JavaScript and CSS Using Apps In Other Popular CMS Solutions
According to trend monitoring from BuiltWith, WordPress is the content management system used by about 50% of the top 1 million sites on the web. If you don’t use WordPress for your own reasons but still use a popular CMS with comparable third-party applications, check out any of the links included below. You may find yourself on the way to uncovering your next favorite module for Drupal or extension for Joomla and Magento.
- Drupal: AdvAgg
- Joomla!: JCH Optimize
- Magento: Aptrian
Note that we are not necessarily endorsing the above tools, just providing them as the most common ones per CMS as of the time of this writing.
Have you tried any of the above-listed apps? How’d they work out for you? Let us know in a chat so we can share your experience with other readers!
How To Minify JavaScript And CSS The Old School Way
Don’t use WordPress or any of the other platforms listed below to operate your website? Well then, you may have some more work ahead of you to complete the minification of your JavaScript and CSS.
At the same time, there may be nothing you can do.
For example, if you use Kentico as your web content management system, you can actually configure minification for these files directly in your administration area.
It’s okay, I was surprised to learn this, too. But check out the documentation.
If your site is built on Squarespace or Wix, there may be nothing you can do.
- Squarespace claims minification is included in their platform.
- Wix, on the other hand, does not appear to offer its users the flexibility to change this OR include it as an included solution.
Short of manually going through your code line by line to remove extra lines, white space, and comments, the most efficient old school approach to fixing minification issues with JavaScript and CSS is with these two tools from Uglify – UglifyJS.net and UglifyCSS.com. Leveraging these two open-source tools will remove all of the unnecessary stuff without compromising your core functionality.
Once again, note that we are not necessarily endorsing the Uglify suite of tools; just providing this as the most common “old school” solution at the time of this writing. Feel free to proceed, but do so with caution.
And if you have successfully used the Uglify apps, let us know in a chat how they worked out for you so we can share your experience with others.
What Impact Is Minified JavaScript And CSS Going To Have On Your Website?
Minified JavaScript and CSS files are smaller, so they load more efficiently. In addition to that, minification can positively impact your website in the following ways:
- Decreasing the load time of your pages
- Increasing engagement rates with site visitors around the world
- Improving your search engine rankings
- Creating more leads and sales for your business
According to a post from our own Adam Roth last year on slow loading websites, one study found that more than 25% of participants would abandon a webpage that takes over 4 seconds to load.
On top of that, a one-second delay in page response can result in a 7% reduction in conversions.
We can’t calculate the actual financial impact that one second can have on your business. You’ll have to figure that out yourself.
But the results are clear: the faster your site loads, the more confidence you can have in your ability to grow leads, sales, and traffic online.
Next Steps After Minifying JavaScript And CSS
If you’ve made it to this stage of this post, you should have a pretty good handle on:
- What JavaScript and CSS are
- How these file types can become unminified
- What the difference is between unminified and minified JavaScript and CSS
- How to minify JavaScript and CSS in WordPress, with potential solutions for other popular CMS platforms
- Why minification can improve your page load times, and
- How page load times can positively and negatively impact your revenue online.
Whether you are an executive, a marketer, or a developer, taking a little bit of time now to make sure these two important filetypes get minified will have a positive impact long term on the future success of your digital campaigns.
Not only will taking the time to minify JavaScript and CSS reduce the number of warnings you see in your weekly site audit. It will also reduce the amount of friction your site visitors experience when they engage with your company.
Eliminating these warnings, and that friction, are site improvements your entire organization can take to the bank.
For another in-depth walkthrough on an issue we commonly find in SEO site audits, please check out this guide to alt text for images and learn how maximizing your opportunities there can help improve your SEO performance. You can also check out any of these helpful resources written by our team below:
