WordPress Image Optimization: How to Get Faster Page Load Times

Are your website pages loading slower than molasses in January?

One of the most commonly overlooked aspects of site optimization is the weight and load images bring to your pages. 

WordPress Image Optimization isn't exactly the sexiest thing you can do to your site, but it can have some of the biggest impact on page load times.​ 

Images are great.  They make our sites look good and everyone knows that a few good pictures on a blog post can really bring in a lot of shares and comments.​

The downside is unoptimized images bring a lot of weight to your web pages and posts and can flat out slow your site down to a crawl. 

Images are heavy and they can take up a lot of HTTP Requests.  If you have a lot of images on your site this could mean much slower page download times​.

Image Optimization is Critical for Fast Page Load Times and SEO

Google is increasingly focused on "User Experience".  This means your site needs to load fast and provide the user with what they want fast.

Statistically, if you cannot capture a visitor's attention in the first 1-5 seconds​ of visiting your site, they are going to click away.

Google doesn't like pages that don't load in 1-5 seconds either.  Page load times are an SEO Ranking Factor and a big one when it comes Desktop, but even more importantly on mobile.

In fact, most experts will tell you that your pages should load in 1 second or less if you want to keep all of your traffic from bouncing away to another site.​

Images and Page Load Times have a huge impact on Mobile traffic.  Mobile visitors swipe away in 2-3 seconds.  They are on the go and don't have time to wait for your pages to load.​

What this boils down to is both your site visitors and Google don't like to wait for your pages to load.

Can you afford to make either of them unhappy?

​Testing Your Site for Image Optimization

The first thing you need to do is see what your site's page load times are.

Test them and see if your page load times are hitting the mark or if you need to do some serious work.

There are a few tools I always use to test my site speed and page load times.

GTMetrix and DotCom Tools.

I always test with DotCom Tools first.  

DotCom Tools will show you what your Page Load time is from 20+ locations around the world, utilizing real browsers (just as an end-user experiences your website).

*DotCom Tools will show you both a first visit and second visit (cached speed boost) load time for your blog so you can see how much your current page caching plugins are helping your site's speed

I then test with GTMetrix.  ​GTMetrix will show you how long it takes for every resource and asset on your page to load.  This will always look higher then you might like.  That's why we do the Pingdom test first. 

We want to make sure the user experience is where it needs to be.​

Here is what a recent test looked like for the home page at starteracademy.com:

​If you look at the picture above, you will see that the page load time (fully loaded time) has a green accent pointing upwards just to the right of it.  This signifies that this page load time is rated as an "A" for its speed.

As you scroll down the test results page, you will see different grades for different optimizations.  Each optimization is rated as a high, medium, or low priority optimization.

For the image optimizations identified in the screen shot below you can see the image optimizations are rated at high and medium.  

There are other associated optimizations too, but we'll stick to these to show you how important image optimization can be for your page load times.

GTMetrix and DotCom Tools.

Check your Site Grades and load times.  Then take a look at the impact images and not having them optimized, is having on your website.  Test each page at least 3 times.  

*If you are already using caching on your site, your times and grades should get better with each test.

Did you run the tests?  Still here?  That's OK, I'm going to show you how to get faster page load times with WordPress Image Optimization below.

WordPress Image Optimization

Before we get started, you have to understand there are a few factors which may contribute to slowing your site down and may make your images have a bigger effect then they would otherwise.

By setting up your site correctly from the start, optimize for SEO, and use tools for Caching and Minification on your site, you will be ahead of the game.

Make sure:

• You are using a WordPress Speed Optimized Web Hosting service (see my SiteGround Review Here).
• You have setup your blog correctly with a caching and minification plugin or app (see How to Start a Blog: The Ultimate Step by Step Guide).
• You have configured your site for optimal SEO (see the Beginners WordPress SEO Guide here).

Image Scaling and Image Size Compression

Images are optimized in 2 ways.  You can scale and crop them to make them smaller in size and then you can also compress images with either a Lossless or Lossy image compression. 

Most people look for lossless compression to ensure their images still look great on their site even though its compressed.

Let's face it, just because your camera takes this awesome 4000 x 3000 pixel HD picture, doesn't mean you need to use that on your blog.  In fact, you definitely don't want to or need to. 

Even if you are doing a photo blog, you can link out to the full image on another page.  You don't want the bloat which comes with having unoptimized images.​

There are tools you can use like Photoshop, which will allow you to do both of the above, but if you are time constrained or lack advanced skills there are easier ways to get this done. 

Let's take a look at how I do it.​

Start by Picking the Right Theme

With WordPress, the theme you choose to use for your site can either make image optimization easy or it can make it exceedingly hard.

Most high end themes these days are "Mobile Responsive Ready" which means they have either a built in image scaler or an image resizer which will create different thumbnail versions of your image uploads for different devices and screen sizes.​

This theme for instance automatically scales and creates different size pictures and also have responsive attributes built into the code which allow images to be resized on the fly.

Another theme I use for my magazine blogs, resizes images 15 different ways for every image.  You don't always need this, but it can definitely help.​

​If your theme isn't scaling, cropping, or resizing your images for you, then you might want to start looking for another theme.  In 2017 and beyond, this is a deal breaker.

As bloggers and business owners, we don't have time​ to worry about scaling and resizing our images for every post and page we create.  We need to focus on making money, not stuff like this which can be automated for us.

Right?​

Automatically Scale and Compress Images

I've now tested 5 different image optimization plugins and services over the last year.  I have had constant problems getting my page load times down.  Especially with mobile.

I finally found the plugin and service which takes care of everything for me.

Here are a few of the ones I tested and decided NOT to use.

• ​EWWW Image Optimzation Plugin (Free tool, but really slowed down my site every time I posted a new blog post).
• WP Smushit (now with a Free and Premium Plugin option, but not worth the price).
• Kraken.io (I used Kraken through Thrive Themes integration with my current theme and found it wasn't optimizing my images effectively).
• ShortPixel (Great product, but didn't work with the scaled images my theme created effectively on image upload).

All of the above products have their benefits, but I needed a tool which not just compressed my images and made them load faster.  I also needed a tool which would optimize the scaled, cropped, and resized images my theme created for me.

This is a pretty critical element, right?

So what works the best?

Eventually, after conducting extensive research, I came across a plugin which did everything I needed.  

It's a very powerful plugin called Imagify from the creators of WP Rocket.  These guys know site speed optimization better than almost anyone. 

The Imagify plugin for WordPress connects to the Imagify API service for image scaling and optimization. 

The keys here being scaling AND compression optimization.​

What's even better?  For most ​blogs you can use Imagify for absolutely Free.

They let you use the service for up to 25 MB of images each and every month at no cost.

I was able to add over 50 sites to my Imagify account​ and I still only pay $4.95 per month and I don't even come close to using all of my allotted optimization.  In fact, if you have a lot of images on your site you can use the $4.95 service and then downgrade to the Free Plan if you don't need the bandwidth of the Paid plan anymore.

More importantly, it optimizes images extremely well.  I can't even tell my images have been compressed.  I simply use the Aggressive Compression settings and click go and get great looking images in a much smaller file size.

Imagify allows you to do Bulk Optimization of your entire site and then individual optimizations as you load new images.  It optimizes every image, even the ones your theme creates for you.

You can see how much size you can save by compressing your images with Imagify.  It makes a huge difference and can have an instant impact on your page load times.

Want to make your pages load even faster?  Check out what I do next...

Use a Content Delivery Network for Faster Image Serving

While scaling and compressing your images will make a huge difference in your page load times, there is a factor which might require additional help if you use a lot of images like I have on this post.

The number of HTTP requests made each time your pages load is limited and each image you have can add up to more and more HTTP requests.​

The more HTTP requests you have on your page, the slower your page will load.  ​

An advanced method for optimizing this is to use CSS Sprites to combine your images.  An even better method is to combine and load your images using a Content Delivery Network or CDN as its normally called.​

A CDN is basically a hosting service which not only can host and serve your image files for you automatically.  A CDN can also host an​d serve your theme files, your CSS, and your JavaScript files too.

A CDN can speed up the loading of these​ items on your site by creating parallel downloads of your images while your site is simultaneously downloading from your hosting account.

​This can make your site appear to load almost instantly. 

Plus, when you use a CDN Service like MAXCDN like I do, the images are loaded on different servers around the world.  Then, when a visitor from anywhere in the world visits your site, the page still loads just as fast as it would if you were opening it at home.

​Implementing a CDN for serving your site's images can cut your page load times in half instantly! 

Any real questions on why you should be using one?

Conclusion

The question is: Can you afford NOT to use WordPress Image Optimization?

The reason I use this setup is because it is a very simple solution to what can be a big problem.  By simply loading a plugin up on my site, connecting the API, and then adding a CDN I was able to solve my dilemma easily.

Now my site is humming along a lot faster and my visitors are hanging around my sites a lot longer.

Not only has this solution saved me a ton of time, it is making me even more money.

Implement these changes on your site and you'll be able to do the same thing.

Good Luck!