up

Zoompf's Web Performance Blog

Note: Archived Content

This is the archived version of the Zoompf blog. Since our acquisition by Rigor, all our new research and posts on web performance are being published on The Rigor Blog

Ridiculously Easy: Use WP-Smush.it to Speed Up Your WordPress Web Performance

 Mark Isham on February 18, 2015. Category: Guide, Optimization

For quite some time here at Zoompf we’ve been trumpeting the benefits of image optimization for speeding up your website. It stands to reason that the majority of content on a typical website is images, and the data proves it: as of Feb 2015 the HTTP Archive reported the average web page is 64% images:

HttpArchive

While we have discussed image optimization a lot, a common misconception persists that reducing the size of your images will also reduce the quality of those images. While this may be true for lossy optimization techniques (if you aren’t being careful), lossless optimizations don’t alter you pixel data at all. The optimized image is both identical and smaller.

How can this be so? Well it turns out many (most) image tools embed quite a bit of metadata in the image file to help the tool do its work. This can be useful information such as comments, unused palette entries, color profiles, thumbnails and more. This is all useful information for the designer using the tool, but is completely unnecessary for visitors of your website. All your visitors need is the image data itself, which can sometimes be a great deal smaller in size.

For example, here’s what a typical PNG file may look like:

Fortunately there are many great free tools that can help you strip out this information, including our personal favorite: PNGCrush. The problem, though, is some of these tools (including pngcrush) can be a bit tedious for day to day usage, especially when using a CMS-driven site like WordPress: you have remember to optimize your images before you upload them. Enter smush.it

Smush.it

Some time ago Yahoo created a super easy online tool to use called smush.it. While smush.it does not expose the same level of options (and power) of pngcrush (see our earlier post for an example), it does excel in simplicity: you visit a page, upload a bunch of images, and download the optimized versions. For many people, this is “good enough”.

If you’re a WordPress user, there’s an even easier way: wp-smush.it. WP-Smush.it is a plugin for wordpress that uses smush.it’s API to perform image optimization automatically for you whenever you upload images to your site. It couldn’t be easier.

As an example, the following image is an original 301 KB version of a PNG image with embedded metadata:

Without WP-Smush.it: 301 KB

With wp-smush.it installed on our wordpress blog, I then uploaded this same image and embedded here:

After WP-Smush.it: 81 KB

With WP-Smush.it: 81 KB

The new file is only 81 KB! And I defy you to find any visual differences – you can’t, because it’s a pixel perfect copy. Only the unused metadata was removed.

Now this reduction is a bit extreme to prove a point, in typical cases you’ll see about 5-10% improvement, but still this is basically “free money”. All the magic happens automatically on upload, and there is no visual difference in quality.

It’s a great tool we recommend you checking out. (Note: Zoompf has no relationship or financial interest in wp-smush.it, we just really like this tool and wanted to recommend to our readers).

Zoompf also offers a number of free tools that help you detect and correct unoptimized images on your website: check out our free report to analyze your website for common performance problems, and if you like the results consider signing up for our free alerts to get notified when changes to your site slow down your performance.

Comments

Have some thoughts, a comment, or some feedback? Talk to us on Twitter @zoompf or use our contact us form.