How to Optimize CSS and JS for Faster Sites
This article was sponsored by Aussie Hosting. Thank you for supporting the partners who make SitePoint possible.
User experience is the most important factor when it comes to the success of your online venture.
It doesn't matter if you run a niche blog, SaaS site, or an online store. If you somehow manage to botch up your audience's experience, don't expect to convert any of them into paying customers.
The good news is, any brand can methodically improve user experience by narrowing down on specific on-page factors.
Loading speed, for instance, is something that most website owners easily overlook.
According to conversion rate data, increasing your Internet site speed from eight seconds to two seconds may lead to a 74 percent increase in conversion rate.
That means that a slow site could cost you nearly half of your potential customers.
Seeing the Full Picture with PageSpeed Insights
To determine issues on your website that affect loading speed, you can use Google PageSpeed Insights. It's a free tool that automatically scans both the desktop and mobile versions of your site.
In addition to the issues detected, PageSpeed Insights will also show you a handful of actionable recommendations.
For site owners who never gave any thought to page loading speed, you may encounter the following issues:
Determine the Code to be Minified
Code minification is the practice of deleting characters that don't serve any function other than improving readability.
For example, inline comments may help developers comprehend what a particular section of code does. While it's useful for reviewing or debugging, they may also bloat the size of the code.
Minification removes these excess characters — therefore reduces bandwidth usage and boosts page loading speed.
Using PageSpeed Insights, you can easily identify which code requires minification. Simply click "Show how to fix" and follow the path in your CMS (Content Management System) or FTP (File Transfer Protocol) client.
For example, if your website runs on WordPress, then all of your code should be consolidated in the "Editor" section. This can be found by under the "Appearance" tab from the primary dashboard.
Optimizing Your Codes
Now that you've found the code in question, it's time to learn how to minify them.
Using CSS Minifier
CSS Minifier is a free and simple tool that automatically compresses CSS assets. All you need to do is paste the code into the input field, set a compression level, and click "Minify."
Depending on the size of your code, it may take a few seconds to a minute to minify your code. Your new code can then be copied back into your CMS or FTP client interface.
Important: As a precaution, don't forget to create backups before making any changes in your site's code. Creating offline or cloud-based copies is a straightforward way to do this.
To test if your minification worked, go ahead and run another analysis on PageSpeed Insights. The CSS file you recently compressed should no longer appear under the "Minify CSS" details.
To use asynchronous loading, just add the "async" tag when calling the .js file. This can be done in your website's HTML source code.
Here's an example on how to do this:
<script src=”yourscript.js” async> </script>
You can refer to this post for more information on how this works and its usage. If you're completely new to HTML, read this beginner's guide until you're comfortable with the basics.
For example, rather than calling multiple .js files in your source code:
<script src=”http://www.yoursite.com/menu.js”> </script> <script src=”http://www.yoursite.com/tools.js”> </script> <script src=”http://www.yoursite.com/footer.js”> </script>
<script src=”http://www.yoursite.com/all.js”> </script>
To further improve the processing time of your scripts, also practice omitting the "http" and "type" tags. For example, rather than using:
You can simply use:
<script src="//www.yoursite.com/all.js"> </script>
Removing Redundant Code
Another performance issue that your site may have is the presence of redundant or duplicate code. These are usually caused by page elements that were deleted, causing the code to remain unused.
A great way to find redundant code is to use the built-in developer tools in Google Chrome. This can be enabled by opening the main menu, selecting "More Tools," and then clicking "Developer Tools."
Make sure you are on the page you want to optimize when you do this.
After activating developer tools, look for "Coverage" in the "More Tools" subsection from the settings menu.
This will open the "Coverage" tab under the developer console. From there, click the "Instrument Coverage" button to start the test.
Once the test finishes, you should see a list of code assets along with their unused bytes. This is represented by the red and green bar to the right.
Removing all the excess code assets one by one may be tedious. But if you want to offer a flawless user experience, then it's a necessity.
Also, remember that unused code may build up over time, so schedule another time to revisit and clean up your repository.