A quick guide on minifying Javascript and CSS

A great way to help speed up your website is minifying Javascript and CSS. If you’re using a 3rd party theme or have coded your website from scratch, we’ll show you how to minify your scripts using plugins or online code cleaners.

Speeding up your website will give you a host of benefits. Minifying scripts means website browsers will have less to sort through and load. Within just a short time, optimising your website leads to a better user experience (because nobody likes a slow website), and search engines reward faster loading websites.

You will no doubt hear about Search Engine Optimisation (SEO), and a proportion of good SEO is fast-loading pages. By the end of this article, you’ll be well on your way to optimising your website and start to see improvements for your visitors.

Using LiteSpeed to minify and cache your website

LiteSpeed is a server-level piece of software that will automatically minify your content and create a cache of your website.

With LSCache, you can:

• dramatically reduce page load times
• provide an exceptional user experience
• handle traffic spikes with ease
• manage cache with minimal fuss and powerful Smart Purge technology

For the most popular web applications like WordPress, Drupal, Joomla and Magento, there are plugins to manage LSCache.

Your website hosting server will need to have LiteSpeed already installed, and set up using cPanel.

We’ll now run through setting up LSCache using WordPress:

• Download LiteSpeed Cache from the plugins section of your WordPress dashboard.
• Once downloaded, install and activate the plugin.
• Within the sidebar, you will now see a LiteSpeed Cache Menu.
• Select Cache to open the settings page.
• Toggle the Enable Cache to ON.
• Your website will now be cached on the server and will start to show performance improvements.
• Next, we’ll set LSCache to automatically minify your files.
• In the LSCache sidebar menu, select Page Optimisation
• In tab 1 [1] CSS Settings toggle CSS Minify to ON
• In tab 2 [2] JS Settings toggle JS Minify to ON
• In tab 3 [3] HTML Settings toggle HTML Minify to ON
• LiteSpeed will now minify and cache your website.

Our website hosting packages all come with LiteSpeed pre-installed, and our clients are astonished at how much faster it can make their websites.

Using plugins

If you don’t have LiteSpeed cache available on your hosting server, some plugins will help you minify your website. Here is a list of them:

WordPress:

• W3 Total Cache (1+ Miillion Active Installations)
• Hummingbird (100,000+ Active Installations)
• WP-Optimize (1+ Miillion Active Installations)
• Autoptimize (1+ Miillion Active Installations)

Minifying the files yourself

The most technical way to minify your files is to amend the files directly. Editing files can either be done through cPanel File Manager or locally on your device and then uploaded to the server. It’s always important to create backups before you amend any of your files in case it causes errors.

Minifying your files involves selecting all the code and copying it to your clipboard. Then from your clipboard, you’ll paste it into an online code minifying program.

Here is an example of an online minifying tool:
https://www.minifier.org/

Once the tool has minified your code, you’ll reselect it all and post it back into your file. The code will have all spaces removed and looks like one continuous line. It will make it almost impossible to understand, so it’s best to minify the completed working code.

Summary

minifying Javascript and CSS is a common practice and is a great way to speed up your website. Performance improvements to your website will greatly benefit user experience and search engine ranking.