Image Compression: A Quick Win in Page Speed Optimization

Sometimes, companies think page speed optimization as a pain in the neck. Actually, it is like that because page speed optimization includes many confusing terms. And when we explain them in really long and fancy presentations it may get even more confusing, since decision-makers have limited time to read and understand them due to their heavy daily work schedules. 

When we can’t summarize the importance of these tasks, they keep postponing any page speed-related tasks. This is a normal process because a website needs many improvements to provide better products and services and the software teams may have a really full agenda. 

However, postponing these kinds of tasks will not solve the problem and it may return as organic visibility and traffic loss, and higher bounce rates. According to Google, the bounce rate increases up to 123% depending on the page load time. 

Traffic loss and higher bounce rates give the signal to Google that users aren’t happy with your page and it will eventually affect your rankings, too. In fact, page speed will be one of the cornerstones of the Page Experience that will roll out in mid-June. 

Don’t worry! Actually, you start with small steps and improve your page speed in 10 minutes with the help of image compression and resizing aka image optimization. After these optimizations, one page’s bounce rate was improved by 19.64% and the average session duration was increased by 1045.66%. Let me show you how I did it.

Why is image compression important for page speed? 

Before going into details let’s talk about the effect of image compression on page load speed. 

When we check websites for slow page speed, too big image files become the main culprits along with unused JavaScript and CSS files or font files. 

Sometimes we come across image files higher than 1 MB on a specific page like the example above. A specific web page shouldn’t include 1 MB or higher image files and all images should be optimized for a better page speed performance and user experience. Don’t forget Googlebots love the pages they can crawl and index faster, while users love accessing a page without having to wait a lot. 

Of course, when designing a website, we want to show our product or services with the best images we have because visuality is important to persuade visitors to buy something from your website. 

Unfortunately, there is a more important factor for your possible visitors: page load speed. According to Pingdom, pages loading within 2 seconds have an average bounce rate of 9%, while pages that take five seconds to load have a bounce rate of 38%, which means the visitors leave your page if they have to wait. 

That’s why compressing or resizing your images is an important task to think about even before uploading them to your website. 

If you wonder which size or dimension you should choose for a specific image, you can check out Allen Mark’s guide on best image sizes and saving images for the web.

How can you compress your images for SEO?

For the image compression, there are different methods you can follow:

• If you edit your photos in Photoshop, you can properly size your images via saving them for the web with smaller dimensions. 
• If your CMS is WordPress, you can use several plugins to easily compress your images. 
• If you are not a WordPress user, you can use Squoosh for free. 
• If you are a Shopify user, you can find a suitable tool for your website via Shopify App Store.
• If you have an e-commerce website, you can use Kraken to upload your images as a bulk and compress them at once. 

For bigger websites, you can always choose to use a CDN service for better page speed performance. 

Real-Time Effect of Image Compression on Page Speed

Since we’ve talked about the importance of image compression and the tools that can help you, we can go into the details of how you can improve your page speed in 10 minutes.

What Did We Use for Page Performance Analysis? 

For the page speed analysis of the pages we optimized, we used GTMetrix. The platform helps users to analyze the performance of a web page and provides a list of actionable recommendations to improve page speed. The only thing you need to do is to visit its website, paste your URL and start the analysis. 

Image Resize Optimization’s Effect on Core Web Vitals

This client had a 1.3 MB-sized gif file on this specific page.

With the effect of the GIF file, the total page size was 2.21 MB and it took 7.7 seconds to be fully loaded. When we detected it, we suggested changing it with a smaller-sized picture.

Thankfully, the client didn’t object to this suggestion and changed the GIF file with an image. 10 minutes after the image optimization, we saw these results:

With a smaller-sized image file, the LCP score of the page was improved by 1.6 seconds, while the total blocking time was decreased by 98 ms. 

The page size was decreased by 1264 kilobytes and the page started to be fully loaded in 6.8 seconds. 

One week after the optimization, the page’s bounce rate improved by 19.64% and the average session duration increased by 1045.66%. 

Image Compression’s Effect on Core Web Vitals

We just launched a blog space for this client. Unfortunately, the size of blog hero images along with JS files affected the LCP score negatively. 

Due to the total page size, the page took 7.7 seconds to be fully loaded. 

Since optimizing the JS files would take a lot of time, we decided to take a small step and suggested compressing the image file on each blog post since there were just 10 blog posts. 

Together with image compression the client made a surprise and optimized the JS files a little bit and we happily saw these results: 

With the help of single image compression, the LCP score of the page was improved by 2.8 seconds, while the TBT score was decreased by 84 ms. 

The page size was decreased by 870 KB and the page started to be fully loaded in 3.2 seconds. 

One week after the optimization, the page’s bounce rate improved by 20% and average session duration increased by 100% and the sessions increased by 233%.

In summary

As I mentioned before, page speed optimization tasks may seem a bit horrifying due to the heavy schedule of your software team. 

You don’t need to feel discouraged because of this. You can always start with optimizing your image files so that they take up less space and help to improve your page speed performance. 

Don’t forget that taking small steps is better than taking none.