The Lost Art of WordPress Optimization

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.

1 thought on “The Lost Art of WordPress Optimization”

  1. Thanks for the enable editor for gravity forms code snippet, it works great. Also thanks for the WP optimization post, I installed events calendar from tribe which is a beautiful calendar, but, it’s huge. Hopefully one of the plugins you suggested will help speed up the load time.

Comments are closed.