Speeding up your WordPress blog is super important and almost a no-brainer in today’s SEO world.
One of the biggest culprits weighing us down are the featured images we use to showcase our content. It’s important to pick a great photo that lures the reader in. Great photos sometimes come with a cost in bytes or Megabytes in today’s example.
Normally I reserve Friday Edition lessons (great for us weekend WordPress warriors) to the Pro members, but it’s on the house today.
How to optimize your blog images
Tools and steps to decrease the page load
Before the elite Gods of speed optimization tell me differently — I don’t do this every day.
I can tell you that I’ve worked with WordPress clients that don’t know any better than to upload a raw image directly from their corporate camera.
If you have clients like this or you’re starting out yourself, this is a great tutorial for streamlining your photos for the web.
In this example I take a 4MB+ photo, optimize the file locally, and then serve it up using the WordPress JetPack Photon CDN. There are other great examples of CDN’s which you can find from Jean’s article comparing them.
So while we can tune and tweak the server for Google’s desire — it’s equally important to use the right photo from the start.
Image editing tools
Pixelmator – A great Photoshop alternative for resizing and degrading the quality of the photo.
ImageOptim – For optimizing the image further.
I was able to shrink the size of this file, from it’s original size to 4.9MB to ~55KB with the process shown in the video. Good news for you, it’s very simple.
- Load up the image in Pixelmator (or your photo editing software)
- REsize to the desired size. I try and pick the exact size of my WordPress theme’s featured image. In my case, it’s 732px.
- When exporting, I’ll degrade the quality of the jpg to what I can tolerate. In this case 50% of the original quality.
- Save and serve with a side of speedy goodness!
WordPress plugins I use
JetPack Photon as a CDN – Photon does a great job of serving up the images as a CDN. You can see from my examples in the video or below.
WP Smush.it – Though I don’t specifically use it in this video, I mention it because it is useful for running through your media gallery.
Performance testing tools
WebPagetest.org – one of the first tools I’ve started using for measuring performance.
GTmetrix – another useful tool for measuring the performance and comparing your site to others.
Putting it all together
Please note: there are a lot of variables to speed tests, load times, images etc. I realize this, but I’m solving probably 90% of the bloat that clients and beginners struggle with.
In today’s lesson I upload the full size 3500px wide image first.Then spend some time running through the tools and uploading to a new blog post. From there, I install JetPack and enable photon and run the tests against a non-optimized image and then to the optimized images. Your results may vary.
Full-size image speeds – 8.869 seconds
Full-size image w/ JetPack Photon – 1.367 seconds
Optimized image w/ JetPack Photon – 1.166 seconds
Should you be using a CDN? Absolutely.
Since Photon is so accessible and it just works — give it a go. One thing TO notice is the fact that enabling JetPack + Photon added 10 more requests to our speed tests. (note: from 13 to 23)
Might not be a big deal on smaller sites, but could certainly have some scaling effects on larger, more competitive sites. A majority of the work can and should be done locally before uploading the image.
The best thing you can do is to use exact size featured photos if your theme uses the featured images feature. Make sense? Start making your pages fly today!
What are your tips for optimizing page load? Want more lessons like this delivered every Friday? Join Matt Report Pro!