In Web Performant WordPress, Dave Rupert talks about the steps he took to dramatically increase the performance of his WordPress site.
Inspired by Dave’s work, I decided to make some updates the optimize the performance of Go Make Things. Total time investment: 30 minutes, and the site is noticeably snappier.
Here’s what I did…
Getting Started #
First, there’s a few things you’ll need to do:
- Download and install Google Chrome, if you don’t already have it.
- Install the Page Speed add-on.
- Backup all of your WordPress files, just in case something goes wrong.
20 40 percent or more.
Unfortunately, it also leaves your code unreadable to humans, but that’s ok. I write and modify my code in human readable format, and then use an app to minify it for me.
Minify your CSS #
In Google Chrome, run the Developer Tools and click on the “Page Speed” tab. Then click “Analyze.”
You’ll be given an overall score, and a list of things you can do to improve your score.
One of the items on the list will be “Minify CSS.” Click it. Under “Suggestions for this page” is a link to “see optimized content.” Follow that to get a minified version of your CSS provided by Google.
I created a copy of my stylesheet, removed the header information, and renamed it “style-unmin.css.” This is the human readable file I’ll now edit when I need to update my site. Without the header info, it just sits on the server.
Then I went to my active stylesheet, and pasted in the minified CSS provided by Google. When you do this, make sure you leave the header information (theme name, etc.) intact or WordPress won’t be able to access your theme.
Click “Update” and you’re done. Easy, right?
And again, you’re done.
Minify your HTML #
Because your HTML is server up dynamically using PHP, minifying your HTML requires you to add a few lines of code to your functions file in WordPress.
One issue I have discovered: If you use inline AJAX, this code may prevent it from working properly. If you find this to be the case, set
And you’re done.
With a simple modification to your .htaccess file, you can tell the server your WordPress site sits on to send your files compressed as gzip files. This reduces file size by about 70 percent, which can make a huge difference, especially for people browsing on low bandwidth devices.
Underneath your WordPress stuff, add this bit of code courtesy of Dave Rupert:
For browsers that will support it, your files should now get gzipped by the server prior to being sent. If not supported, the server will just ignore it and send the regular files.
And you’re done.
(You may read some posts that tell you that shared hosting on GoDaddy does not support gzipping. That’s no longer true. I’m on GoDaddy shared hosting, and this works fine for me.)
Setting cache headers tells browsers to keep static assets stored locally so that a visitor’s browser doesn’t have to re-download them every time they visit your site.
Again in the .htaccess file, drop the following code underneath the gzipping code (again courtesy of Dave):
And you’re done!
Smush Your Images #
Images in their raw form often have a lot of extra but unneeded data in them. This makes the file sizes up to
30 60 percent bigger than they need to be.
“Smushing” images is the process of removing that unneeded data and optimizing them for web viewing.
Dave recommends going back and smushing all of the old images on your site. I was far too lazy for that. Instead, I simply optimized the photo on my Info page, and will be smushing all photos I post on the site going forward.
Smushing Apps #
So how exactly do you smush an image? There’s an app for that!
I downloaded ImageOptim, which is unfortunately Mac only. It’s a simple drag-and-drop application, and actually shows you how much smaller the file is after smushing.
If you’re on a PC, you can also use Smush.it, a web-based app from Yahoo.
Better file types #
It’s worth noting that I’m not just smushing my images, but also making smarter decisions about file types.
Historically, I would save all of my images as PNGs files. PNG is a lossless image format, so it keeps graphics sharp and crisp (as opposed to the lossy JPG format). However, PNGs are also substantially larger than JPGs.
For icons, PNGs make a lot of sense (or used to – more on that in a minute). But for something like a photo of people or places, which already have a lot of noise in them, a JPG is actually a better format because it’s much smaller in size.
Fonts, not images #
I had already done this a while ago, but rather than using PNGs for my icons, I actually use an embedded web font.
Using the IcoMoon app, I was able to create a custom font set with just the icons I need. It weighs in at just 8 kb for most file types and results in just a single HTTP request, which drastically improves performance.
What I didn’t do #
Dave recommends one additional thing that I haven’t done: Install WP Super Cache.
In simple terms, when a user visits your site, WordPress compiles your content from the database with the content from your theme and serves up a webpage. WP Super Cache converts your pages into cached static HTML pages ahead of time, reducing load time by cutting the database out of the process.
I’ll probably get around to adding this at some point down the road.
Referenced & Useful Resources #
- Web Performant WordPress by Dave Rupert.
- The Page Speed add-on for Google Chrome and Firefox.
- YSlow, another website performance tester from Yahoo.
- Pre-minified jQuery and other code from Google
- Easy Trick to Minify HTML by DVS.
- ImageOptim, a Mac app for smushing images.
- Smush.it, a web-based app for smushing images from Yahoo.
- IcoMoon, an amazing icon font app.
- My tutorial on using icon fonts.
- Image Sprites: What They Are, Why They’re Cool, and How to Use Them by Chris Coyier.
Get the Spare Parts Newsletter
Each week, I send out a short email on how to have a kick-ass career as a web developer. Enter your email address below to get on the list.