“Enhancing Image Loading Speed on Google using Smush: A Detailed Tutorial”

|

Smush has everything you need to optimize your images, as well as a handy repertoire of tools ready to help you smash PageSpeed Insights image-related recommendations.

This method allows you to increase your website’s loading speed without compromising the quality of your images.

Using Smush, you have the ability to:

  • Compress images in bulk and with one click
  • Automatically resize and rescale your images
  • Enable lazy loading so your server can concentrate on displaying content above the fold
  • Transform your picture files into formats that are significantly smaller in size and faster to load.
Smush image optimisation and compression plugin for WordPress.
Smush is the most popular image optimisation and compression plugin for WordPress with over a million installs and more than 50 billion images smushed.

There are four main recommendations when it comes to images, and Smush can answer all of them.

  • Defer offscreen images
  • Efficiently encode images
  • Serve images in next-gen formats
  • Properly size images

“I was unaware that the images on my website were causing slower page loading times. The plugin significantly reduced the duration by almost 50%.” – karlcw

This guide will show you how Smush can help you get your PageSpeed Insights score into the green.

Defer Offscreen Images

It is not advisable to use up server resources and slow down page load times by loading images that are not immediately visible on the page. Therefore, it is logical for many websites to delay the loading of offscreen images.

When you install Smush, Lazy Load is one of the first features you should check out. Simply enabling it can fix the ‘defer offscreen images’ PageSpeed recommendation.

Smush’s Lazy Load feature comes with more than just an on and off button.

You have the option to select the image formats that you would like to incorporate.

Screenshot of the media types, whocing jpeg, png, gif, svg and iframe which can all be excluded.
Maybe you want your JPEGs to Lazy Load, but not your PNGs?

As well as any post types you want to exclude.

Screenshot of the different pages you can exclude from lazy load including the front page, blog and posts.
You can also include the URL of specific pages if you wish.

Lazy Loading is something that can easily be undone so turn it on, check your new PageSpeed Insights score, and most importantly, check the impact it has on your site.

Efficiently Encode Images

If you want a full and comprehensive guide to optimizing your images, I would recommend checking out this blog, as here, we’re purely focusing on how Smush can help you meet PageSpeed Insights audit requirements. In this section, specifically the ‘efficiently encode images’ recommendation.

Compressing your images helps to avoid overloading your server with unnecessary megabytes.

You can Smush in a variety of ways, with virtually no difference in quality.

Smush on Upload

Automatic compression is on by default and is used to efficiently encode images. It’s a high impact, low-risk feature, which should be used on most sites.

Screenshot of automatic compression showing it enabled and ready to automatically compress images on upload.
You have the option to choose if you would like this setting to apply to all images or if you want to exclude specific sizes.

If you don’t want Smush to automatically compress your photos, there are a few other ways you can manage this:

Bulk Smush

You can use the Bulk Smush feature to scan your site for photos which are in need of attention and smush them all at once.

 

Screenshot of bulk smush showing that there are three images in need of smushing.
Press the button and allow the plugin to handle everything for you.

Smush Through the Media Library

You can also head to the media library to check whether you have images available for smushing.

Screenshot of an image of a moon in the media library ready to be smushed.
You have the option to compress each image separately in the media library or choose specific images to exclude from automatic compression.

Smush Other Directories

You’re not confined to just your media uploads – you can also smush non-WordPress images outside of your uploads directory.

Screenshot of the directory smush option showing the navigati9on to the wp-content folder to search for more images.
You can easily navigate through your folders to find the images you want to Smush.

Super Smush & Ultra Smush

If you’re looking to further reduce your file sizes, Super Smush and Ultra Smush are the options to consider.

It offers 2X (Super Smush) or 5x (Ultra Smush) the smushing power compared to the standard method, so it’s handy if you have a lot of images that are soaking up valuable resources.

Choose the level of compression for bulk smushing images that best suits your needs.

Even if PageSpeed Insights audit opportunities didn’t include making sure your images were correctly encoded, it’s still a good idea to eliminate any unnecessary bloat as long as it doesn’t visibly affect the quality of your images.

Utilize the CDN

Smush also offers a blazing-fast 121 point CDN  (Pro version only) which allows you to serve your images in next-gen formats as well as ensuring they’re delivered to your browser at breakneck speed.

Make your Images Next Gen

The latest image formats, including WebP and JPEG 2000/XR, have the ability to significantly reduce the size of your files.

Serving your images in one of these formats will save you server resources, as well as meet one of PageSpeed Insights requirements.

With Smush’s CDN enabled, you can serve your images in the next-gen WebP format.

If a browser is capable of displaying WebP images, Smush will quickly verify this and provide the visitor with the WebP image. If the browser does not support WebP, Smush will deliver a PNG or JPEG image instead, ensuring that all visitors have access to the content.

Properly-sized Images

Forcing the browser to resize an image before it can be displayed to the user slows down your site and lowers your PageSpeed Insight score. Part of the recommendation is to refrain from serving images that are larger than the version that will be displayed on the visitor’s screen.

Screenshot of the automatic resizing feature showing it currently turned on.
With Smush’s CDN, this is one of the easiest PageSpeed Insight recommendations to solve.

To guarantee that you are accurately sizing your images with complete precision, check out this blog for some additional tips and techniques.

Smash PageSpeed Insights with Smush

While many users struggle to improve their web site optimization, Smush lets you boost your page loading speeds by making images easier and faster to load…and it does this all in just a few clicks!

Implement the suggestions provided and start using Smush for your website immediately. Additionally, stay updated with our roadmap to see all the new and exciting updates that will be added to Smush in the near future.

This article was initially published in June 2020 and has been revised in December 2023 to ensure its precision.

Improving Image PageSpeed on Google with Smush: A Step-by-Step Guide

In the digital age, website speed is crucial for user experience and search engine ranking. One of the most common culprits of slow website speed is large, unoptimized images. Fortunately, there is a solution to this problem: Smush. Smush is a popular image optimization plugin that can help improve your website’s PageSpeed on Google. In this article, we will provide a step-by-step guide on how to use Smush to optimize your images and improve your website’s performance.

Step 1: Install and Activate Smush
The first step is to install and activate the Smush plugin on your WordPress website. To do this, go to your WordPress dashboard, click on “Plugins” and then “Add New.” Search for “Smush” in the search bar, and then click “Install Now” and “Activate.”

Step 2: Configure Smush Settings
Once Smush is activated, you will need to configure the settings to optimize your images. Go to the Smush dashboard and click on “Settings.” Here, you can choose to automatically compress new images as they are uploaded, enable lazy loading for images, and choose the level of compression you want for your images.

Step 3: Bulk Smush Your Images
After configuring your settings, it’s time to bulk smush your existing images. Go to the Smush dashboard and click on “Bulk Smush.” This will compress all the images on your website in one go. Depending on the number of images you have, this process may take some time.

Step 4: Check Your PageSpeed Score
Once you have smushed all your images, it’s time to check your PageSpeed score on Google. Go to Google’s PageSpeed Insights tool and enter your website’s URL. You should see an improvement in your score, as well as a decrease in the load time of your website.

Step 5: Monitor Your Website’s Performance
After optimizing your images with Smush, it’s important to monitor your website’s performance regularly. Keep an eye on your PageSpeed score and make sure to smush any new images that are uploaded to your website.

In conclusion, optimizing your images with Smush is an easy and effective way to improve your website’s PageSpeed on Google. By following these simple steps, you can ensure that your website is fast, user-friendly, and ranks well in search engine results.

Read More