Hurry up your Website Page Load Speed by Compressing Images

In 2021, over 58% of all pages loaded on the internet are loaded on mobile devices. So across the world, more people are looking for things and opening things up on their cell phones than they are their tablets or their desktops.

But it usually takes longer for things to load on mobile devices than it does to load on desktops: the average time that a page takes to load on a desktop is about 10 seconds. And the average time for mobile devices is between 17 and 22 seconds — almost double! Even though you’re loading the same information, often people who are on mobile are on 3g networks instead of Wi Fi, they don’t have as great of access to internet. So things can just take that much longer to load on mobile devices.

And people who are looking at things on their cell phones have shorter patience, they’re often out doing something and looking it up, and they’re not going to just sit around and wait 22 seconds for a page to load. In fact, bounce rates are higher on mobile devices (a bounce rate is when people come to your website, and then they leave without doing anything).

In general, if a website loads in under two seconds, it’s got a pretty low bounce rate like about 9%. But if it takes five seconds, then the bounce rate jumps to about 38%. In fact, for every additional second that a page takes to load, you see about a 10% increase in bounce rates, you see about an 11% decrease in pageviews. And you see a 7% decrease in conversions.

I’m not throwing these numbers at you as a scare tactic. I’m just trying to give some context to why what I’m talking about is important. You can have the best content in the world. But if it doesn’t load quickly, then people aren’t going to sit around and wait to read it. And if people come to the website from Google and don’t stick around, and it makes Google look bad. So one of the key factors that Google takes into consideration when figuring out what your position should be in the search engine results is how quickly your page loads, Google would actually like to see your entire page load in three seconds or less, which is very different from that 22 second average mobile load speed, right. Today, I’m going to be talking all about how to make your website load faster.

5 Key Factors to Website Load Time

There are five key factors that play into how long it takes your website to load. They are

  1. your web hosting
  2. your plugins
  3. your cache
  4. what browser the person is on, and
  5. the size of your images & files

I’ve already broken down the web hosting, plugins & cache’s impact on your site performance, in this post I’m digging into how to compress your images & files to increase your pagespeed.

Your website doesn’t actually need to load in under three seconds, it just needs to load faster than other websites in your industry to get the competitive advantage. You don’t have to have the fastest website on the planet, you just need to be faster than those other people who might be showing up in the search engine results next to you!

5 Step Process to Compress & Optimize Images

I timed myself going through this process on my own website. And it took me about 15 minutes to go through this process for the 5 images on my homepage, and I was able to cut my page load speed in half!

Now, why is image optimization important images are often the largest file that is on a page. And if you upload them without thinking about how long they’ll take to load, then they can really slow down that page load time, especially on mobile devices! Those screens are tiny, you don’t need a huge file that could be printed 3 feet wide to load on a 3″ screen.

What about image compression plugins?

“Meg, I already have SO MANY images on my website. Can’t I use an image compression plugin that will go through my media files and optimize them after I’ve uploaded them?” I WISH. But it just doesn’t work as well. Trust me I’ve tried! I’ve tried Smush and Robin and TinyPNG, and EWW and Imagify … while they help by decreasing image sizes by 10-20%, they don’t have the same outcomes as downloading the files, decreasing them by 80-90% and re uploading them. And that’s basically what we’re going to do here. So let me walk you through this process that I used.

1. Check PageSpeed Insights to find the biggest offenders

Head over to Google PageSpeed Insights and type in the page you want to evaluate. In the YouTube video, we used my homepage, so for this blog post as an example we’ll use my about page:

Make sure that you have this set to mobile, the updates that you make on your mobile site will kind of trickle up to your desktop site. But Google looks at the mobile version first. So that’s the one that we want to work on fixing. (My Desktop score is 79, so I’m not worried about that!) My About page has a Mobile score of 19 out of 100. Eek! Let’s take a closer look at the metrics:

The PageSpeed insights show 6 core web vital metrics; there are 2 that are related to image file size so that’s where we focusing today:

  • First Contentful Paint: The first text or image appears, usually this counts for above the fold (before you have to scroll)
  • Largest Contentful Paint: The largest or final text or image loads

So these numbers say that the top part of my website (above the fold, basically just the “about love at first search” header) takes just under 2 seconds to load, and the entire page takes about 9 seconds.

Scroll down on the page to the section labeled “Opportunities,” and you’ll see a list of ways you can speed up your website and how much time you can expect those changes to make:

These “opportunities” tell me that I can save 3.5 seconds by changing image file types, 2.5s by seconding images, and .15 seconds by property sizing images. That’s ~6 seconds difference, which would get my total page load time from 9 seconds to 3. Huge change! If we make the images smaller, they won’t take as long to load.

2. Download the problematic image files

And the cool part about this is I don’t even have to go onto my website to get these images. They’re all right here in Google PageSpeed Insights — I can click on the URL and it will open the images for me in a new window, then I can right click to save them:

3. Compress the giant images into smaller file sizes so they load faster

And then I’m going to open up this compression site, Squoosh, and upload the image. On the left is the full-size image, on the right is the compressed image:

I can barely tell a difference! And given that this image is behind text, even if it’s a little fuzzy, it won’t matter that much for the user experience.

So I’m going to change my settings so that this file is a Browser JPEG instead of PNG, and I’m going to compress it by 50%. The original file is 573kB (which is about the size we want the whole page to be, by Google’s best practice standards!), and the new compressed version of the file is 66kB — a decrease of 89%!

4. Replace the existing file with the smaller version & update the image meta tags

Time to upload this new, smaller version of the image and that should make everything take less time. And as long as I’m re-uploading these old files, I’ll make sure to add alt text to describe what’s in the image & update the image file to make sure it has relevant keywords.

5. Check your work!

I just replaced all 3 of the images that had been suggested that I replaced, so I’ll re-run the PageSpeed insights … and ta-da!

We’re all the way up to a 38. I was really hoping that this would be higher. But the fact is that the metrics do actually look better:

My FCP (above the fold) sliced off 0.2s, and my LCP (whole page) cut off a whole second to drop from 9 to 8 seconds.

These are small changes that change one or two seconds of how long it takes to load … but that could be the difference between showing up number 4 in search results and showing up number 1 in search results. So these little changes that you’re making can actually make a huge difference for your SEO.