Optimize Images – Improve Google PageSpeed and Reduce Server Load [Case-Study]

PageSpeed test results show the benefits of Image Optimization. Using an image optimizer plugin we can remove all the errors. Case-Study.

To get faster page load times, image optimization is a key feature. Simple things like compressing the images can save a lot of CPU, RAM and bandwidth. Consider the round trip time for each image to be loaded.

Automatic Image compress is one of the advantages of image optimization tools. No need of doing it manually. Select the directories and bulk smush of all your image are done .

Search Engines play a major role in getting traffic to your site. Google is one of the big giants in this market. Core Web Vitals and Mobile-first indexing are of key metrics in 2021 for better ranking and page speed.

Lighthouse tool is used by PageSpeed Insight and GTMetrix to measure the speed of your website. They will also show the area where the page lacks in speed. Image optimization is one common area.

Source : unsplash.com

No image should be MB in size. This is only for travel sites or photography blogs where images are of significance. Content blogs mostly use images for readability.

How Image Optimizer Plugins Improve Speed ?

Simple things like using a CDN can make image loads faster on your WordPress site. To improve performance you can also convert them to NextGen format like JPEG 2000, JPEG XR, and WebP. The score will improve when you do the right optimization.

Image Compression can only be done using tools. Either when you upload the picture or using bulk tools. Online tools are available. But they take lot of time for each image. It is better to upload the original size image and compress them later.

Lossy compression is required for the quality of the image. User Experience is based on what the user sees finally. If the visitor is not able to see the intricate details of the image, then quality loss is a huge impact on your traffic.

What happens in the background?

Things are a little complex. If you have uploaded thousands of images like JPG, GIF, PNG and would like to compress them in bulk, then a suitable image optimizer plugin is required. WP Smush Pro from WPMUDEV does this job nicely.

Optimize images to the right size based on your requirement. If you did not specify any particular size when you uploaded to the “WordPress Media Library”, then you can do it in WP Smush Pro. Image Format also plays a major role in the size of the image. PNG images take bigger size.

Lazy Loading is supported by default in WordPress, latest version. Otherwise, you can use that feature in this image optimizer plugin settings. Only the images above the view will load when the page is fetched from the server.

As user scrolls through the page, remaining images come into load. This will give a better score and only necessary images are loaded. Javascript is not necessary to optimize these images. But it takes lot of resources. So if you have too many scripts associated with the images, reduce them.

WP Smush – Image Optimization Features

Better cache policy also makes sure that local caches images are served to different visitors around the globe. A 180 day cache is thought to be a good setting. Original image will remain on the server. Responsive images are also compressed and served to mobile on request.

Image Compression takes place on the WPMUDEV and then the image is transferred to your  storage. Around 13 kind of image sizes are created when you upload a particular image. WP Smush has to smush all these images and then re-uploade them.

Benefits of lazy load images can be seen on our site. The other content loads quickly. The same CPU time can be shared for techniques like minification of CSS, JS and HTML.

In this case-study we are going to see how google pagespeed image optimizer plugin was able to remove most of the image related errors.

Introduction

  • The web page we are going to test has 22 images.
  • AMP pages are not used for mobile.
  • Both desktop and mobile have the same theme.
  • Tests are conducted to know the average load time.
  • Lossless compression can be seen by checking before and after compress.

Google PageSpeed – Score

I got a score of 40 on mobile and 77 on desktop. Though these are low scores, image optimizing issues were mostly resolved.

Since my host does not support WebP conversion, that error remained as it is. There was potential saving of 2.36s for that particular error. There was 1 image which was 420KB size and 377KB could be saved.

On the desktop front, this was not much of an issue. The “Serve images in next-gen formats” displays a saving of 0.4s. The same image was 150KB in size with potential saving of 130KB.

Another page with 14 images was tested. The PageSpeed score remained more or less equal. But the next-gen issue was not displayed in both mobile and desktop.

WebPageTest – PageSpeed Optimization Test

The same two urls were tested using the above website performance and optimization test tool. I’m also using Cloudflare and its Edge servers to serve my pages. When you click the “Content Breakdown” tab of the test result, the following results.

As you can see the first url contains 22 images and the total size of these images comes to around 170KB. This is a lot of saving compared to the the uncompressed images. But still they take 25% of the requests and 13% of the size. If we can convert to WebP using the local server, much more improvement can be seen.

As you can see above, compress images scores a perfect 100 using this test. The size of the images is only 20KB.  There are no potential saving as all the images have been compressed already. The Google PageSpeed tool also tells that there is only 1 image that is not optimized. In the below screenshot you can see the Waterfall View.

Conclusion

So if you are having an issue with large image sizes, then smushing the images does well. The bulk smush feature is useful to compress all the images and save bandwidth.

Image Quality is not disturbed after compress of pictures. PNG images can also be converted to JPG if required. Metadata of the images can be removed for better image resizing. The original file still exists. In-case you remove the plugin also, the old images are served alongwith the smushed images.

Loading time and lossless image compression are some of the important features you see in an image optimization plugin. If the file size limits are too big, then it can hit the PHP or CPU limits of your server. Single image should be enough to upload. Other things are done by bulk smush optimizaitno tool.

WebP images are the new norm. If your server supports, you can do them locally with the new version of WP Smush Pro. This is supported by most of the new browsers. Fallback to other image formats is done for old browser compatibility.

Quality level of the image was also good when used with other features. Compress Image on big size. This will produce lot of savings in time and resources.

Leave a Comment