Put Your Website on a Diet with Minifiers

Posted in Tips, Tools, Web Design • Posted on 12 Comments

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:

#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
#End Gzip

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

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

12 Comments Best Comments First
  • Roman

    Saturday, February 4th, 2012 13:27

    11

    There is one more thing, I think it’s important for web designers who uses @font-face. Don’t import a lot of fonts and compress them! Compressed font can be 2 or even 3 times lighter than origin. For example http://www.fontsquirrel.com/fontface/generator provides 3 variant of convertation of fonts into web fonts. I’m using ‘optimal’ option, and as a result I’m getting nice light web font kit.

    +1
    • Rochester Oliveira

      Sunday, February 5th, 2012 03:50

      12

      Hi Roman,

      Really good point, I’ve never thought about it!

      Thanks for sharing :)

      []’s

      0
  • William Martin

    Thursday, February 2nd, 2012 07:32

    1

    This is Fantastic n useful share. i have Very nice view n reading of this article. i do like the way you explain,
    btw thanks for explaining this tutorial here. Which will be useful for the designers. thanks for the share.

    0
    • Rochester Oliveira

      Thursday, February 2nd, 2012 15:41

      6

      Hi Logo Blog!

      I’m glad you liked, I’ll try to write more posts like this, then :)

      []’s

      0
  • Martin

    Thursday, February 2nd, 2012 15:13

    3

    As far as jpg images is concearned there is nothing better out there than Advanced JPEG Compressor and for PNG’s I always use http://tools.dynamicdrive.com/imageoptimizer/ Advantage of that site is that you can see different optimzed versions of your PNG file and choose which one suits you best.

    0
    • Rochester Oliveira

      Thursday, February 2nd, 2012 15:42

      7

      Hi Martin,

      THanks for sharing, I’ll take a look at it!

      []’s

      0
  • Ben

    Thursday, February 2nd, 2012 07:45

    2

    Useful and informative sharing. specially imageoptim is great for optimize png.
    Thanks for share.

    0
    • Rochester Oliveira

      Thursday, February 2nd, 2012 15:40

      5

      Hi Best Kreative,

      Thanks a lot! I didn’t know that there is a tool called imageoptim for mac :) Don’t know if you were talking about it or the image optimizing process described!

      []’s

      0
  • Ahmad Alfy

    Friday, February 3rd, 2012 05:43

    9

    +1 for the “F*** YEAH” meme on this post :D

    0
    • Rochester Oliveira

      Saturday, February 4th, 2012 03:14

      10

      hahahahah

      Thanks Ahmad! I thought no one would laugh on it! :)

      []’s

      0
  • A.C.

    Thursday, February 2nd, 2012 10:33

    8

    Thanks for this great collection. I’m stocked how much KBs you can squeeze out of an already compressed image (without visible quality loss).

    0
    • Rochester Oliveira

      Thursday, February 2nd, 2012 15:38

      4

      Hi A.C.

      I’m glad you liked! And keep coming we’lll have much more like this soon! :)

      []’s

      0
  • Roman

    Saturday, February 4th, 2012 13:27

    11

    There is one more thing, I think it’s important for web designers who uses @font-face. Don’t import a lot of fonts and compress them! Compressed font can be 2 or even 3 times lighter than origin. For example http://www.fontsquirrel.com/fontface/generator provides 3 variant of convertation of fonts into web fonts. I’m using ‘optimal’ option, and as a result I’m getting nice light web font kit.

    +1
    • Rochester Oliveira

      Sunday, February 5th, 2012 03:50

      12

      Hi Roman,

      Really good point, I’ve never thought about it!

      Thanks for sharing :)

      []’s

      0
  • Ahmad Alfy

    Friday, February 3rd, 2012 05:43

    9

    +1 for the “F*** YEAH” meme on this post :D

    0
    • Rochester Oliveira

      Saturday, February 4th, 2012 03:14

      10

      hahahahah

      Thanks Ahmad! I thought no one would laugh on it! :)

      []’s

      0
  • A.C.

    Thursday, February 2nd, 2012 10:33

    8

    Thanks for this great collection. I’m stocked how much KBs you can squeeze out of an already compressed image (without visible quality loss).

    0
    • Rochester Oliveira

      Thursday, February 2nd, 2012 15:38

      4

      Hi A.C.

      I’m glad you liked! And keep coming we’lll have much more like this soon! :)

      []’s

      0
  • Martin

    Thursday, February 2nd, 2012 15:13

    3

    As far as jpg images is concearned there is nothing better out there than Advanced JPEG Compressor and for PNG’s I always use http://tools.dynamicdrive.com/imageoptimizer/ Advantage of that site is that you can see different optimzed versions of your PNG file and choose which one suits you best.

    0
    • Rochester Oliveira

      Thursday, February 2nd, 2012 15:42

      7

      Hi Martin,

      THanks for sharing, I’ll take a look at it!

      []’s

      0
  • Ben

    Thursday, February 2nd, 2012 07:45

    2

    Useful and informative sharing. specially imageoptim is great for optimize png.
    Thanks for share.

    0
    • Rochester Oliveira

      Thursday, February 2nd, 2012 15:40

      5

      Hi Best Kreative,

      Thanks a lot! I didn’t know that there is a tool called imageoptim for mac :) Don’t know if you were talking about it or the image optimizing process described!

      []’s

      0
  • William Martin

    Thursday, February 2nd, 2012 07:32

    1

    This is Fantastic n useful share. i have Very nice view n reading of this article. i do like the way you explain,
    btw thanks for explaining this tutorial here. Which will be useful for the designers. thanks for the share.

    0
    • Rochester Oliveira

      Thursday, February 2nd, 2012 15:41

      6

      Hi Logo Blog!

      I’m glad you liked, I’ll try to write more posts like this, then :)

      []’s

      0

Comments are closed.

54.87.47.251 - unknown - unknown - US