I love WordPress. I’ve built sites large and small with it. I’ve spoken about it at conferences like WPCampus. It’s been exciting to watch it grow since I really started using it in 2008.

It’s plugin system allows new and experienced developers to add functionality, features, and tools to their websites in an easy and intuitive way. But with great power comes great responsibility. It’s not uncommon now for websites and pages to be over 3MB in size including images, css files, and javascripts. Last year, Wired ran a story saying that the average webpage is the size of the original shareware DOOM game.

I regularly see results like this from YSlow and GTMetrix all the time when I plug WordPress sites in to see performance data:

That’s crazy, but it’s what happens when you use a ton of plugins in WordPress. Each of those plugins will add their own CSS and Javascript files into the site. Add in the myriad of tracking scripts and beacons and we end up with a website or landing page that has 30 external javascript files. I fear the art of website optimization is slowly being lost or worse, skipped or ignored.

I’m most likely salty about this because I learned how to make websites in the days when the majority of our users were on dial-up connections. We worked to get every kilobyte we could out of our images in order to serve them just a little faster. Photoshop would even tell us how long it would take to download that image on various modem speeds.

Photoshop 5 Save for Web Dialog

Photoshop 5 Save for Web Dialog

 

There’s no reason for sites to be three, four, or even five megabytes in size. That’s especially bad in our current era of mobile usage. But there are easy things site owners can do to improve their site speeds.

A few thoughts on optimization

First, a question to ask. Is the functionality a plugin is adding something that you can accomplish by coding it into your theme?

It’s less taxing to input, for example, your Google Analytics or Tag Manager code in your theme’s header or footer file than use a plugin to do it for you. Not only do you remove the need for a plugin, you also do away with an additional database and PHP calls. The less calls to the server and to your database, the faster your site will be. You will also have less to manage in terms of plugin updates and security.

Can you accomplish things like animations and visual effects directly in your theme’s CSS or Javascript? If so, put it in your existing theme’s structures. Better yet, ask yourself if you really need that animation or effect in your site. It’s fun to see an image pop or fade in on first view, but once I’ve seen it, the thrill is lost. Does that animation meet accessibility guidelines? Save file space, and reduce or remove animation effects.

Second, there are times you need multiple plugins due to your site’s requirements. In that case, it makes sense to minify, combine, and cache as many of your static files as you can. I have used Fast Velocity Minify and Autoptimize to do this heavy lifting for you. These work in the background to combine those 30 CSS files into one or two files. This will allow them to be served much faster. Combined with good caching, your site speeds will improve.

Don’t forget to optimize images too!

Optimization Recommendations from GTMetrix

I’ve spent most of this post talking about JavaScript and CSS files. Another culprit when it comes to increasing site sizes are images. If you are exporting files directly from Photoshop, you may not be getting a fully web-optimized versions. In most cases, your images could benefit from additional optimization.

I’ve blogged about options like ImageOptim and TinyPNG before in this post. If you don’t want to add a step to your workflow, or perhaps you have users who are uploading content to your WordPress site, you can do optimization on the server side.

There are several plugins and services that will optimize your images for you when they’re initially uploaded. Some will also go through your media library to optimize previously uploaded files.

One such tool is EWWW Image Optimizer. They offer a plugin that will do the optimizations right on your server. This is a good choice if you’re on a dedicated server or VPS. This free plugin will optimize your images right on your own hardware.

If you are on shared hosting, or use a hosting service like WPEngine, this type of local image optimization plugin may be blocked. It uses processor and memory power to run, which can impact performance in shared environments. Worry not, EWWW has an option where they will optimize your images in their cloud seamlessly and return the file to your site. This means you can use it at hosts like WPEngine.

Wrap Up

Whether you are an experienced developer, or someone relatively new to WordPress, it’s worth the effort to make your site as fast as possible for your users. There are tools to make this process simple, and more importantly, automatic. Your users will thank you, Google will thank, and I will thank you.

Web sites are getting bigger and bigger, whether is the inclusion of a ton of javascripts, or gigantic images used in parallax style sites. It’s not uncommon for a site to get about 1.5MB when it’s all said and done.

I’m not railing against large sites, I’m against sites that aren’t optimized, use uncompressed and unminified Javascript and CSS, and are slow to use. We’ve all read the stories about when companies like Google and Amazon improve their site speed even incrementally, profits increase.

One easy thing that I notice sites don’t optimize are their images. I often see large images that are uploaded into a CMS or other page and just sized down. Most often though, sites don’t optimize their images.

Here’s an example. I took a screenshot on my Mac of the network load of this website (under 300k, not bad.) Here’s the screenshot:

At full size, the original size of that file was 338k. I ran it through one of the methods I’ll write about in this post, ImageOptim, and it was able to cut the file size by 38%, down to 208k.

Here are five online and offline tools you can use to optimize your images quickly and easily.

JPEGMini

JPEGMini is some sort of black magic, I think. It managed to take JPEGs, and JPEGs only, even those saved using Photoshop’s Save for Web and get considerable size savings out of them, with little to no image degradation. You can do all the optimizing via the web with no login required, but the downside is you can only do 1 image at a time. A free login allows you to upload multiple images at once for processing.

Here’s a photo I took when I was on vacation in England and Wales in February. It’s 2.4MB. JPEGMini was able to get it down to 742k, reducing it by 3.2x. Here’s the reduced, full-size photo for comparison.

ImageOptim

Screenshot 2014-04-21 12.11.24If you’re a Mac user, you should definitely grab ImageOptim. It handles all types of images and gives power users control over which optimization algorithms to try, how many passes and so on. It uses all the best:  PNGOUTZopfliPngcrushAdvPNG, extended OptiPNGJpegOptim, jpegrescan, jpegtran, and Gifsicle. These are the types of options you’d normally see in a command-line based tool.  I like the fact it adds a menu item so you can right click on any image on your Mac and select Services ->Image Optimize and it will launch ImageOptim and start working on the image right away.

TinyPNG

TinyPNG works only on PNG files, hence the name, but it does a great job in reducing file size. It handles transparency just fine, and I’ve given it 24-bit PNG file for better transparency and it’s reduced them to 8-bit, with no bad transparency issues and greatly reduced file size. TinyPNG has also released a plugin for Photoshop to connect to their service.

 

SpriteMe

SpriteMe is a great service that will look at your website and see if any of your images can be made into sprites, and using CSS, pull them in when needed to reduce image size and download times. It will make the sprites for you, along with the CSS needed to implement them. Have lots of little images or social media icons, you should be spriting them. Each one you add removes the need for another http call and a faster site.

Smush.It

Smush.It is built by Yahoo and offers the ability to upload a file or give it a URL for it to optimize. Smush.it can handle many different types of image files, though it has no guarantee of uptime or reliability. I’ve gone to use it a few times and it’s been down or not giving files back. There’s a WordPress plugin, WPSmushIt, that will connect to the service automatically to smush your images down in size. It usually works, but there’s no public API for SmushIt, and Yahoo may decide to block this plugin without warning or notice for using some sort of backdoor code or scraping technique.

At the time of writing this post, Smush.it wasn’t working. YMMV.