How to Improve Website Performance | Image optimization

improve website performance optimize images
Optimizing your images is a great way to improve website performance.

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

How do I know if I need to improve my website's performance?

Sometimes realizing you need to improve your website’s performance is obvious. For example, you go to your url and your main hero image is loading like the good old days of dial-up. One painfully slow strip at a time.

Other times its not so obvious to you because the browser you’ve been working on has the site cached. As a result, you wouldn’t notice any issues until you accessed your site from a different browser or device. A good rule is to test your site in a private browsing session or Incognito window in Chrome. 

A great way to tell if your site needs to be optimized is to use an online tool that scans your site, testing it’s performance.

There are many different options available to accomplish this. However, they are not all created equal. The tool I personally use is GTMetrix.

GTMetrix is great because it breaks down your website’s performance issues and tells you if your site needs improving. Not only that, but it tells you how to improve your site.

Get started with GTMetrix

Check your website’s performance by going to GTMetrix.com. Once there, simply enter your site’s domain name in the input field. There’s no need to use http: or https:.

GTMetrix analyzes your website and spits out a nice report with your Performance Scores and Page Details. Pretty cool!

Your site does not need be the coveted double 100’s to be a solid performing website. I focus on the data under the Page Details section. Fix this section and your overall scores will improve.

GTMetrix tells you the average Fully Loaded Time, Total Page Size, and Requests, as well as how your site compares. The green up arrow indicates your site is above average while the red down arrow is an indication your site is below average and needs work.

Most likely, the site you’re testing is like many I see, the Optimize images and/or Serve scaled images is close to the top of the RECOMMENDATION column. That’s completely fine because both of those issues are easy to fix. 

Optimize Images

By clicking on the Optimize images section it will expand and show you which images are the culprits.

Not only does it show you which image(s) need to be optimized. It shows you the already optimized image(s). Click on the See optimized version link. This will open the optimized version in a new browser tab. Save that image anywhere on your computer. 

Go through your website wherever that image is being shown and replace it with the new image you just saved. 

Reminder: make sure you add your alt text to the newly uploaded image.

The process is the same for every image listed in the Recommendation section in GTMetrix. Save the optimized image and upload it to your site, replacing the non-optimized version. 

By performing this task you’ll see a drastic improvement on the Optimize images score and most likely the overall PageSpeed Score. Optimizing your images will also reduce the Total Page Size.

Tip: from here on out whenever you’re uploading new images to your website be sure they are optimized before initiating the upload. Take whatever images you’re about to upload and run them through tinypng.com or imagecompressor.com. Drag and drop your images in the labeled section (on either site) and watch the magic happen. Then download the new compressed versions and upload those to your website.

serve scaled Images

Much like the Optimize images section we talked about above. The Serve scaled images can be fixed in a similar fashion. 

Click on Serve scaled images and you will notice GTMetrix shows you the recommended image size. 

In the image above you can see that the image is 2560×1440 and is being scaled down to 199×112.

By downloading the image and sizing it to the scaled number, 199×112 in this case, this image will no longer show up when you re-scan the site.

Simply do this for every image listed in the Serve scaled images section. Once completed, you can run GTMetrix on your site again and should have a 100 on the Serve scaled images section. 

Conclusion

Tackling these two pesky issues to improve your website’s performance is easier than it appears. 

GTMetrix gives you the optimized version of whatever image(s) is slowing down your site, as well as, gives you the correct size the image(s) should be for your site to run smoother.

I will continue this little series by going through the top GTMetrix Recommendations in future posts. 

Feel free to subscribe to be notified when new posts are released!

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Sign up for our newsletter