Put Your Website on a Diet with Minifiers

Did you know that every second delay on page loading results in a 7% reduction of conversion rate?
Actually you lose 7% (maybe even more!) of sales without even noticing… Sounds bad, huh?
I mean, you work carefully to put things in the right place, good call-to-actions, nice design, spend a few bucks with ads.. And then you lose 7% of sales just because you forgot to minify your CSS. We’ll, this is not going to happen again.
We’ll put every future project that you work on a diet. And this one, won’t wait for next monday, or next january :)
Here we’ll see amazing tips to reduce your files size and increase your site performance without affecting important things like image quality or a files readability for future edits.
Grab your meter and let’s rock!

Every Second Counts

---

Before the practical stuff, I would like to share with you a few numbers about page loading X users satisfaction.
I saw this infographic several months ago, but it’s still amazing. Click on it to see all the data, here’s what I liked most:

• If you hit 4 seconds of page loading you have 25% abandonment increase
• About 80% of users expect mobile pages to take almost the same amount of time as the desktop version

Credits: Kissmetrics

Image Optimizing – File formats & Tools

---

So, the best way to optimize images starts with using the right file format. Basically we have 3 common formats for web (no, I won’t talk about .bmp, .svg, .tiff or anything else):

• JPEG – Really good for photos and bigger images
• GIF – Good for icons and images with fewer colors
• PNG – Good for small images with a lot of colors or when alpha channel is needed

This is really just the basics, there is a lot of particularities for each image type that we won’t be talking about (right now). But you should be good with this, when you are exporting a psd to code a layout you should use .jpg for photos or bigger backgrounds, use .gif for smaller elements or elements with a restricted color palette (like simple icons or replacements for common inputs) and png where you can’t lose any data or small colorful images.
I know many people say that png are bad and too big, but actually if you know how to use them they can give you a better effect (exactly what you designed) AND smaller or similar file size as gif or jpg.
Let’s see some tips for each image type:

JPG Minimizing

JPG does “lossy compression”. That means that its algorithm stores data using much less disk space but will also save less info about your original file. Once compressed it’s impossible to decompress .jpg files. Your best choice in this case is to always keep the original file safe and just save copies.
Ideal quality for jpg is pretty tricky, but most times you’ll be good with 60-80.

When you take photos your camera stores metadata about the photo that you may not use in future. Also image size is often bigger than your entire screen. So get rid of useless data and reduce your image to what you really need.
Irfranview is a small tool that can do this for you even as batch conversion for lots of files.

Recently I heard about an amazing tool, called JPEGmini. They have an amazing compression algorithm that works pretty much like our eyes do, so it makes what gets our attention higher quality and what doesn’t, lower. You should give it a try!

GIF Minimizing

GIF files have a really small color table, ranging between 2 and 256. 256 may sound a good figure, but when you realize that jpg has up to 16 million colors, 256 isn’t that good, huh?
What you can do to cut files size is to reduce their color palette. Above is an example where reducing a file from 128 to 64 colors we saved almost 30% of file size.

PNG Minimizing

PNG compression is similar to gif compression. You reduce the color palette and gain a few kbytes. In above example, png-24  instead of png-8, would be a huge file since it’s completely lossless, so you would have a perfect image, but pretty big.
The best part of png-24 is full alpha channel, but we can handle that. Image Alpha gives us full alpha channel over PNG-8, so we have much smaller files but pretty good-looking for overlays and advanced effects.

Code Compressors – HTML, CSS, JS

---

Actually I’m not too much a code-compresser type. But images aren’t the only thing we should care about in our websites, HTML, CSS, JS files should be compressed too since they can eat precious bytes from your diet.
Let’s take a look at a few options:

minify – PHP solution

HTML Compressor

YUI compressor

HTML Minifier

Server caching

---

Another good way to improve site loading is server-side caching. If you don’t use cache your page needs to be processed by the server every time it’s accessed, even if you don’t change your site for ages.
So, here are the best WordPress Caching plugins:

WP Super Cache

W3 Total Cache

DB Cache Reloaded Fix

GZip, a.k.a. Compression Like a Boss

---

I’m pretty sure you’ve heard about zip files. Or maybe .rar files or .7z files. Well, GZip is an implementation of GNU Zip, which does pretty much the same thing as ZIP files, but gives you a really good compression rate.
The crazy idea here is to drastically reduce download time by sending users compressed files, instead of the uncompressed original ones, and their browser will handle the decompressing in much less time than if it had to download original files.
Your hard work here is to paste this code into you .htaccess file:

1

#Gzip

2	<ifmodule mod_deflate.c>

3	AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

4	</ifmodule>

5

#End Gzip

Then you’re done! Well, hope it doesn’t take you more than 5 minutes :)