Speeding Up WordPress: Image Optimization

In the first two parts of this series, we reviewed caching, database optimization, compression, minification, and using a CDN with our WordPress websites. In this last part, we're going to talk about image optimization and using WordPress with common sense.

Let's begin!

Optimization of Images in WordPress

It's very likely that images on your pages are the largest assets on your website that are downloaded by visitors. Come to think of it, it's obvious that we should be smart about uploading and using images in our pages. That means two things: 

  1. We need to use images sparingly.
  2. We need to keep image sizes small. 

This is where image optimization techniques come into play.

In this chapter, we're going to review some manual and some automatic methods for image optimization.

Manual Image Optimization

If you're like me and want to have as much control as possible over your images, you should optimize your images manually. There are literally hundreds of image optimization techniques and applications for various image formats (mostly JPEGs and PNGs). I recommend two:

  1. JPEGmini is an excellent application that optimizes your JPEGs with an intelligent and "lossy" optimization algorithm. It doesn't have any settings (which is a bummer) but it does a really good job reducing file sizes (at least 30%). It comes in Windows and Mac apps, along with a web service.
  2. RIOT (Radical Image Optimization Tool) is an old but very effective optimization tool for Windows. It can process JPEGs, PNGs and GIFs with various algorithms. I use it to optimize my PNG files. While its PNG optimization tools are kind of slow (especially on large PNG files), it does the job perfectly.

Personally, I like to work manually rather than automatically. I prepare and edit my images in Adobe Photoshop, save my images "for the web" in 100% quality, then open JPEGmini for JPEGs and RIOT for PNGs to reduce the file sizes.

Automatic Image Optimization With WordPress Plugins

If you don't want to deal with all the manual labor, there are automatic solutions you can use. There are server-side options like Kraken PRO and JPEGmini Server, but we'll focus on two very useful plugins for everyday use (or even some heavy lifting):

  • WP Smush.it: Being the most popular image optimization plugin for WordPress, WP Smush.it automatically runs every image you upload through Smush.it's API and compresses your images with a lossy algorithm. You can also bulk-optimize your existing images, which is a huge plus.
  • EWWW Image Optimizer: Although it certainly has an eccentric choice for a title, EWWW Image Optimizer is the one I like the most in terms of image optimization. It works fine out of the box, but you can fine-tune some advanced settings to make the most of it. All of the algorithms it uses (jpegtran, optipng, pngout and gifsicle) are lossless algorithms, meaning that it won't change any pixels but will reduce the sizes of your images by re-coding and cleaning up the files. It might not optimize images like WP Smush.it does, but if you can't stand lossy optimizations, EWWW Image Optimizer's your guy.

Using WordPress With Common Sense

Update: It seems that Yahoo! stopped maintained Smush.it, so the plugin won't compress your images as of version 1.7.1.1. The plugin won't be abandoned, though—the developers of the plugin announced that they're fixing the plugin:

According to unofficial but pretty reliable reports Yahoo has stopped maintaining Smush.it :( However, all is not lost! We are working like maniacs here at WPMU DEV to bring you a free, more reliable and better free smushing experience built off of our pro version of the plugin and wrapped up in the next update. We hope to have it available to you very, very soon... in the meantime please stay with us, it'll be worth it, promise.

Even if you take all the advice in this series, apply each piece of code, and use every plugin mentioned, you can still fail to speed up your website. That's why this section is the most important piece of all: common sense.

What do I mean by "common sense"? Mostly "being careful and prudent", but let me elaborate.

Choosing a Decent Hosting Provider

Optimize your website all you want; but if your server's performance is poor, your website's performance will be poor. That's why you need to choose wisely.

  • Don't just check how many gigabytes of space and bandwidth they promise—check out the server's hardware specifications, too.
  • Choose a hosting package that suits your website. If you have a popular eCommerce website, don't use a shared hosting package.
  • And most importantly, search for the web and read some reviews of the company: How are their uptimes? How's the customer support service?

Choosing (Or Making) a Quality WordPress Theme

I've seen many WordPress themes—both free and paid—that looked beautiful, but were awfully coded. Good looking but poorly coded WordPress themes may be one of the main culprits of a slow WordPress website. You should either choose among themes with performance in mind or make your own WordPress theme (or have it made).

You might ask, "How am I supposed to know how optimized a theme is?" but it's not hard, actually. Select a theme, then scan the demo pages (not just the homepage!) in GTmetrix to see their Google PageSpeed and Yahoo! YSlow scores, and how efficiently the assets load with the "Timeline" view. As for server load, you don't have much to check if you can't test it yourself and you have to rely on caching plugins.

Cutting Back on Plugins

This one is a no-brainer: If a plugin loads assets or performs database operations in the front-end, question its necessity. If you don't really need it, get rid of it. 

You can also run a performance test on plugins with the P3 (Plugin Performance Profiler) plugin and see which plugins require a lot of resources.

Keep WordPress, Plugins, and Themes Secure and Up to Date

This one is a bit cliché—that's why it's the last piece of information in this series—but that doesn't mean it's wrong: You have to keep everything updated and secure.

  • As for keeping up to date, there's not much to say: Just update. Staying updated may speed up your website because core, plugin, and theme developers work constantly to make their code more efficient.
  • As for security, you can find various security plugins in WordPress.org. Be sure to check them out, compare their reviews, and use the one that suits you best. Keeping your website secure won't speed up your website, but it can maintain your website's speed if (or when) your website is under attack.

Series Finale

In the age of information, serving information fast is essential. We can't stand anything that doesn't quickly respond—we feel our time is being wasted. And we're talking about seconds and milliseconds here. It's not necessarily a good thing, but in a world like this, we have to play it by the book.

There are loads of articles about improving speed in WordPress, but I wanted to create something different. While preparing this three-part series, I had one thing on my mind: writing evergreen content on speeding up WordPress. Of course, there will be better plugins or smarter techniques, but the aspects of making WordPress faster should stay the same—at least until we enter the quantum age. I hope you enjoyed reading it as much as I enjoyed making it.

Do you have anything to add? Share your thoughts with us by commenting below. And if you liked this series, don't forget to share the articles with your friends!

Tags:

Comments

Related Articles