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:

These indicate that your CSS and JavaScript code is slowing your site down. And while it might sound like a job for full-fledged web developers, they're fairly easy to optimize with the help of tools.

Without further ado, here are the steps you need to take to minify your CSS and JavaScript assets.

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.

Perhaps the easiest way to minify your code is to leverage automated tools. When it comes to CSS and JavaScript, some of the best tools for the job are CSS Minifier and JSCompress.

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.

Using Asynchronous Loading on JavaScript

Compared to CSS, JavaScript is slightly trickier to minify correctly. Before you run your code through JSCompress, consider implementing asynchronous code loading first.

Also referred to as "Lazy Loading" — but in the context of JavaScript, asynchronous loading works by dynamically loading functions.

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.

Combining JavaScript Files

Another point worth mentioning when it comes to optimizing JavaScript is to combine files in a single page. Doing so will reduce the number of HTTP requests that the browser makes, which would invariably speed up loading time.

For example, rather than calling multiple .js files in your source code:

Continue reading %How to Optimize CSS and JS for Faster Sites%

by Gary Stevens via SitePoint