Speeding up Word Press Part 1 Optimizing Images

The First optimization I want to tackle is images. According to the http://www.webpagetest.org results I can save  26.3KiB by optimizing http://www.nathanboyce.com/wp-content/themes/tweaker4/images/arrow.png.

My favorat tool to optimze PNG files is pngcrush. I like to install pngcrush on all my workstations.  If your using Fedora or Centos installing its as easy as “sudo yum install pngcrush” if you have the rpmforge repo set up.

Once you have pngcrush install its a simple as typing “pngcrush -brute image_name.png new_image_name.png” The -brute stands for brute-force and tries most the methods picking the best. Pngcrush help says brute is “Very time-consuming and generally not worthwhile.” But I find that to be fairly fast.

Before I can  put the crush on arrow.png I need to fist get the image to my workstation. I can do this a couple differnt ways. The easyest is to use “wget http://www.nathanboyce.com/wp-content/themes/tweaker4/images/arrow.png” That saves arrow.png to the curent working directory. To simplify things later Im going to rename the image to arrow.png.org “mv arrow.png arrow.png.org”

Now its time for some crushing

$ pngcrush -brute arrow.png.org arrow.png

| pngcrush 1.7.36
| Copyright (C) 1998-2002,2006-2012 Glenn Randers-Pehrson
| Portions copyright (C) 2005 Greg Roelofs
| This is a free, open-source program. Permission is irrevocably
| granted to everyone to use this version of pngcrush without
| payment of any fee.
| Executable name is pngcrush
| It was built with libpng version 1.5.12, and is
| running with libpng version 1.5.12 – July 11, 2012

| Copyright (C) 1998-2004, 2006-2012 Glenn Randers-Pehrson,
| Copyright (C) 1996, 1997 Andreas Dilger,
| Copyright (C) 1995, Guy Eric Schalnat, Group 42 Inc.,
| and zlib version 1.2.7, Copyright (C) 1995-2012,
| Jean-loup Gailly and Mark Adler.
| It was compiled with gcc version 4.4.5 20110214 (Red Hat 4.4.5-6).

Recompressing arrow.png.org
Total length of data found in critical chunks = 99
Critical chunk length with method 11 (fm 0 zl 2 zs 2) = 92
Critical chunk length with method 12 (fm 1 zl 2 zs 2) = 97
Critical chunk length with method 13 (fm 2 zl 2 zs 2) = 97
Critical chunk length with method 14 (fm 3 zl 2 zs 2) = 115
Critical chunk length with method 15 (fm 4 zl 2 zs 2) = 99
Critical chunk length with method 16 (fm 5 zl 2 zs 2) = 97
Critical chunk length with method 17 (fm 0 zl 1 zs 0) = 88
Critical chunk length with method 18 (fm 1 zl 1 zs 0) = 89
Critical chunk length with method 19 (fm 2 zl 1 zs 0) = 98
Critical chunk length with method 20 (fm 3 zl 1 zs 0) = 109
Critical chunk length with method 21 (fm 4 zl 1 zs 0) = 95
Critical chunk length with method 22 (fm 5 zl 1 zs 0) = 100
Critical chunk length with method 23 (fm 0 zl 1 zs 1) = 88
Critical chunk length with method 24 (fm 1 zl 1 zs 1) = 89
Critical chunk length with method 25 (fm 2 zl 1 zs 1) = 98
Critical chunk length with method 26 (fm 3 zl 1 zs 1) = 109
Critical chunk length with method 27 (fm 4 zl 1 zs 1) = 95
Critical chunk length with method 28 (fm 5 zl 1 zs 1) = 100
Critical chunk length with method 29 (fm 0 zl 2 zs 0) = 86
Critical chunk length with method 30 (fm 1 zl 2 zs 0) = 89
Critical chunk length with method 31 (fm 2 zl 2 zs 0) = 98
Critical chunk length with method 32 (fm 3 zl 2 zs 0) = 109
Critical chunk length with method 33 (fm 4 zl 2 zs 0) = 93
Critical chunk length with method 34 (fm 5 zl 2 zs 0) = 99
Critical chunk length with method 35 (fm 0 zl 2 zs 1) = 86
Critical chunk length with method 36 (fm 1 zl 2 zs 1) = 89
Critical chunk length with method 37 (fm 2 zl 2 zs 1) = 98
Critical chunk length with method 38 (fm 3 zl 2 zs 1) = 109
Critical chunk length with method 39 (fm 4 zl 2 zs 1) = 93
Critical chunk length with method 40 (fm 5 zl 2 zs 1) = 99
Critical chunk length with method 41 (fm 0 zl 3 zs 0) = 86
Critical chunk length with method 42 (fm 1 zl 3 zs 0) = 89
Critical chunk length with method 43 (fm 2 zl 3 zs 0) = 98
Critical chunk length with method 44 (fm 3 zl 3 zs 0) = 109
Critical chunk length with method 45 (fm 4 zl 3 zs 0) = 93
Critical chunk length with method 46 (fm 5 zl 3 zs 0) = 99
Critical chunk length with method 47 (fm 0 zl 3 zs 1) = 86
Critical chunk length with method 48 (fm 1 zl 3 zs 1) = 89
Critical chunk length with method 49 (fm 2 zl 3 zs 1) = 98
Critical chunk length with method 50 (fm 3 zl 3 zs 1) = 109
Critical chunk length with method 51 (fm 4 zl 3 zs 1) = 93
Critical chunk length with method 52 (fm 5 zl 3 zs 1) = 99
Critical chunk length with method 53 (fm 0 zl 4 zs 0) = 86
Critical chunk length with method 54 (fm 1 zl 4 zs 0) = 89
Critical chunk length with method 55 (fm 2 zl 4 zs 0) = 98
Critical chunk length with method 56 (fm 3 zl 4 zs 0) = 109
Critical chunk length with method 57 (fm 4 zl 4 zs 0) = 93
Critical chunk length with method 58 (fm 5 zl 4 zs 0) = 99
Critical chunk length with method 59 (fm 0 zl 4 zs 1) = 91
Critical chunk length with method 60 (fm 1 zl 4 zs 1) = 96
Critical chunk length with method 61 (fm 2 zl 4 zs 1) = 99
Critical chunk length with method 62 (fm 3 zl 4 zs 1) = 115
Critical chunk length with method 63 (fm 4 zl 4 zs 1) = 100
Critical chunk length with method 64 (fm 5 zl 4 zs 1) = 99
Critical chunk length with method 65 (fm 0 zl 5 zs 0) = 86
Critical chunk length with method 66 (fm 1 zl 5 zs 0) = 89
Critical chunk length with method 67 (fm 2 zl 5 zs 0) = 97
Critical chunk length with method 68 (fm 3 zl 5 zs 0) = 109
Critical chunk length with method 69 (fm 4 zl 5 zs 0) = 93
Critical chunk length with method 70 (fm 5 zl 5 zs 0) = 99
Critical chunk length with method 71 (fm 0 zl 5 zs 1) = 91
Critical chunk length with method 72 (fm 1 zl 5 zs 1) = 96
Critical chunk length with method 73 (fm 2 zl 5 zs 1) = 99
Critical chunk length with method 74 (fm 3 zl 5 zs 1) = 115
Critical chunk length with method 75 (fm 4 zl 5 zs 1) = 100
Critical chunk length with method 76 (fm 5 zl 5 zs 1) = 99
Critical chunk length with method 77 (fm 0 zl 6 zs 0) = 86
Critical chunk length with method 78 (fm 1 zl 6 zs 0) = 89
Critical chunk length with method 79 (fm 2 zl 6 zs 0) = 97
Critical chunk length with method 80 (fm 3 zl 6 zs 0) = 109
Critical chunk length with method 81 (fm 4 zl 6 zs 0) = 93
Critical chunk length with method 82 (fm 5 zl 6 zs 0) = 99
Critical chunk length with method 83 (fm 0 zl 6 zs 1) = 91
Critical chunk length with method 84 (fm 1 zl 6 zs 1) = 96
Critical chunk length with method 85 (fm 2 zl 6 zs 1) = 99
Critical chunk length with method 86 (fm 3 zl 6 zs 1) = 115
Critical chunk length with method 87 (fm 4 zl 6 zs 1) = 100
Critical chunk length with method 88 (fm 5 zl 6 zs 1) = 99
Critical chunk length with method 89 (fm 0 zl 7 zs 0) = 86
Critical chunk length with method 90 (fm 1 zl 7 zs 0) = 89
Critical chunk length with method 91 (fm 2 zl 7 zs 0) = 97
Critical chunk length with method 92 (fm 3 zl 7 zs 0) = 109
Critical chunk length with method 93 (fm 4 zl 7 zs 0) = 93
Critical chunk length with method 94 (fm 5 zl 7 zs 0) = 99
Critical chunk length with method 95 (fm 0 zl 7 zs 1) = 91
Critical chunk length with method 96 (fm 1 zl 7 zs 1) = 96
Critical chunk length with method 97 (fm 2 zl 7 zs 1) = 99
Critical chunk length with method 98 (fm 3 zl 7 zs 1) = 115
Critical chunk length with method 99 (fm 4 zl 7 zs 1) = 100
Critical chunk length with method 100 (fm 5 zl 7 zs 1) = 99
Critical chunk length with method 101 (fm 0 zl 8 zs 0) = 86
Critical chunk length with method 102 (fm 1 zl 8 zs 0) = 89
Critical chunk length with method 103 (fm 2 zl 8 zs 0) = 97
Critical chunk length with method 104 (fm 3 zl 8 zs 0) = 109
Critical chunk length with method 105 (fm 4 zl 8 zs 0) = 93
Critical chunk length with method 106 (fm 5 zl 8 zs 0) = 99
Critical chunk length with method 107 (fm 0 zl 8 zs 1) = 91
Critical chunk length with method 108 (fm 1 zl 8 zs 1) = 96
Critical chunk length with method 109 (fm 2 zl 8 zs 1) = 99
Critical chunk length with method 110 (fm 3 zl 8 zs 1) = 115
Critical chunk length with method 111 (fm 4 zl 8 zs 1) = 100
Critical chunk length with method 112 (fm 5 zl 8 zs 1) = 99
Critical chunk length with method 113 (fm 0 zl 9 zs 0) = 86
Critical chunk length with method 114 (fm 1 zl 9 zs 0) = 89
Critical chunk length with method 115 (fm 2 zl 9 zs 0) = 97
Critical chunk length with method 116 (fm 3 zl 9 zs 0) = 109
Critical chunk length with method 117 (fm 4 zl 9 zs 0) = 93
Critical chunk length with method 118 (fm 5 zl 9 zs 0) = 99
Critical chunk length with method 119 (fm 0 zl 9 zs 1) = 91
Critical chunk length with method 120 (fm 1 zl 9 zs 1) = 96
Critical chunk length with method 121 (fm 2 zl 9 zs 1) = 99
Critical chunk length with method 122 (fm 3 zl 9 zs 1) = 115
Critical chunk length with method 123 (fm 4 zl 9 zs 1) = 100
Critical chunk length with method 124 (fm 5 zl 9 zs 1) = 99
Critical chunk length with method 125 (fm 0 zl 1 zs 3) = 92
Critical chunk length with method 126 (fm 1 zl 1 zs 3) = 98
Critical chunk length with method 127 (fm 2 zl 1 zs 3) = 98
Critical chunk length with method 128 (fm 3 zl 1 zs 3) = 115
Critical chunk length with method 129 (fm 4 zl 1 zs 3) = 100
Critical chunk length with method 130 (fm 5 zl 1 zs 3) = 99
Critical chunk length with method 131 (fm 0 zl 4 zs 3) = 92
Critical chunk length with method 132 (fm 1 zl 4 zs 3) = 98
Critical chunk length with method 133 (fm 2 zl 4 zs 3) = 98
Critical chunk length with method 134 (fm 3 zl 4 zs 3) = 115
Critical chunk length with method 135 (fm 4 zl 4 zs 3) = 100
Critical chunk length with method 136 (fm 5 zl 4 zs 3) = 99
Best pngcrush method = 29 (fm 0 zl 2 zs 0)
for arrow.png
(13.13% critical chunk reduction)
(99.26% filesize reduction)

CPU time decoding 0.000, encoding 0.010, other 0.000, total 0.010 seconds

 

You can see even using the brute option it ran very fast on this small file. Now let look at the results.

$ du -sh arrow*
4.0K arrow.png
28K arrow.png.org

Thats a 24K savings according to du. Not bad for a couple commands. Now we need to get the crushed version of the image live on the site. To do that I just upload the file to wp-content/themes/tweaker4/images overwriting the original.

Lets take a look at the result from  http://www.webpagetest.org results to see what difference if any it made.

 

Page Speed 1.12 Score: 88/100*

 

In summery this quick change increased the score from 79 to 88. I’m not sure why it still shows that the size could still be reduced by 96B.  The performance gain will very by the visitors connection speed. A 24K reduction might be noticeable to a visitor using dial up but probably not to a visitor with high speed DSL or Cable internet.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*