One of the ways that Google and other search engines evaluate your website is your page load speed. This is also one of the ways that your visitors will evaluate your website – especially on their first visit. If your pages take too long to load, it is likely that visitors will move along. The Internet has too many distractions to expect visitors to wait.
Minify is a programming term that basically means to remove any unnecessary characters that are not required for the code to execute. Minifying your code speeds up your page loading, making visitors and search engines happy.
You can test the speed of your page loads using online tools like Google PageSpeed Tools.
Simply paste in your URL and get the results. You should try this often. I highly recommend doing a before and after comparison so you know the quantitative value of improvements that your efforts have made.
Every site is different, but as an example, a before score might be around the mid-80s and an after score might be around the mid-90s. It will give you results for desktop and mobile separately and it will highlight the areas that are the slowest (such as server response) and give you tips on how to fix it.
Minifying code is not the same as compressing the data. Compressed data requires an un-compression step before it can be run. The code is smaller than the original for the actual transfer, but the extra decompression step adds to the time before the code can run. Minified code can be run as-is. The same interpreter can understand minified code as easily as it can the original code.
Gzip is currently the most popular and effective compression method. It was developed by the GNU project and standardized by RFC 1952. Gzipping generally reduces the response size by about 70% and is supported by around 90% of today’s web browsers. Gzipping will reduce the page weight and increase load speed. Some of the plugins will use Gzip for their HTML compression.
There are several types of tools that you can use to minify your code manually. You can minify by hand or use one of the many free online tools and copy and paste your code from and to your site. You can minify your code by hand if you want. I don’t recommend it as it’s easy to introduce errors, but I do want to show an example so you can see how minifying works. The first set of code is non-minified CSS.
To minify your code, first remove the comments. The comments is the text between and including /**/. Highlight all of this code and delete it. Next, remove all of the unnecessary spaces. That’s all spaces except for the spaces between (0 0 0 0). Your code still needs this because it’s part of the CSS function. This will make the code appear on a single line.
Unless you know which spaces to remove and which to leave, it is better to do the work through a minifying tool. Here is a quick list of tools that will minify and combine files. Most are online, but there is one here that work offline.
The Closure Stylesheets will concatenate and minify a list of stylesheets. It will even make a vendor-specific stylesheet. Vendors include WEBKIT, MOZILLA, OPERA, MICROSOFT, and KONQUEROR. When the vendor’s flag is present, the vendor-specific properties for other vendors will be removed.
CSS Minifier is a free online tool from Dan’s Tools that will remove the spacing, indentation, new lines, and comments from your CSS code and make your code and website faster. You paste in your code and select Minify. Once your code is minified, you copy and paste it back into your site.
This is another minifying tool from Dan’s Tools. Just like the CSS Minifier, you paste in your code, click to minify, and then copy and paste back into your site. There are no settings or adjustments to deal with, making it extremely simple and easy to use.
This one works as expected – you paste in your code and click to minify. It also does CSS and it even has a JPEG optimizer and image resizer. It’s very easy to use and you can download as a file.
Code can also be minified automatically using plugins. This is the easiest method for WordPress as there are no manual steps for you to perform.
I installed this and gave it a whirl. There are plenty of options and settings, and they do get advanced. The settings that I needed were already set when I installed it, so I just left everything at default. You can choose the enqueued files individually and choose actions for each file. It was easy to use, but it does take some reading through the settings to see what to do.
The example it gives is a total size saved of 11.341%, with the size before compression being 27104 bytes and the size after compression being 24030 bytes. Not bad for a free plugin.
This one is an update to an older plugin. With this free plugin you can enable compression of JS, CSS, and HTML, and you can add files to be minified or not to be minified. There are lots of tweaking and tuning options such as JS placement (header or footer), HTML5 sync tags, and more. It will even use pretty URLs. You can also pass extra arguments to the minify engine.
I like the settings and features this one provides. It’s easy to set up and use. Follow best practices anytime you’re dealing with code. If you’re not careful you can kill your code. Keep backups handy and be careful with copy and paste. Don’t rely on your users boosting their performance by using cache. Many of your visitors will come to your site with an empty cache, so plugins that boost performance through the use of cache will not help them.
Use the tool to combine all the CSS files for a single website into one file. This will reduce the number of HTTP requests that need to be made to get all the elements of a website. Keep your original code with all of the comments and formatting. This will help in troubleshooting if you need to look back at the code.
Use Google’s PageSpeed Tools and test your site (both before and after) to keep track of your site’s page loading for both desktop and mobile devices. The higher the number the better.
Please left comments below if you like the post