How to speed up your Squarespace website and optimize images

How to speed up your Squarespace website and optimize images

  1. Website Testing

  2. Image Optimizing

Whenever I am faced with the need to speed up a client's website, in most cases the problem lay in not optimized images.

It's especially important for E-Сommerce projects, where a website could have hundreds or even thousands of pictures. As a result, we get a higher bounce rate, a potential customer leaves your site, and you lose your money. So now we will try to solve this issue.

 

Website testing

Before anything else, if you're not sure how many seconds your website takes to load, then I recommend running a quick test. I recommend this service: https://tools.pingdom.com

The normal range is between 1-3 seconds. Seeing as 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load, it’s essential that your images are small enough to ensure a speedy site. For example, here is the loading speed of my homepage (mgogol.com).

website-testing-results.png
 

Image optimizing

As I said, in most cases, the problem is that you're using not optimized (or poorly optimized) images for the web. Generally, there are two ways how we can optimize images.


Using Photoshop

This way is my favorite. To achieve the best results each image needs to be optimized before we upload it on the website.

So, firstly, open your image through Photoshop and then go to File → Export → Save for Web or use key combination Option (⌥) + Shift + Command (⌘) + S.

Then you'll see this panel.

photoshop-1.png

There are many buttons and inputs but don't be afraid. We only need a few of them :)

Firstly, select Preset called "JPEG High" in the top right corner, the screenshot below.

photoshop-2.jpg

Then pay attention to the "Percent" input in the bottom right corner.

photoshop-3.jpg

If you plan to use your image as a full-screen banner or something like that, then the width/height range around 1000px is ideal, but if you see in your settings the size of the 2000px-3000px, then you should reduce "Percent" value until it is approximately 1000px.


Using Online Compress Tools

This way is much more accessible, but you won't get such good results as compressing images in Photoshop. If you don't have Photoshop and want to improve website speed then compressing images using Online Tools will be better than anything.

Here is the list of the most popular apps for optimizing images:

PRO TIP

Images on your product pages shouldn't be bigger than 150KB. And big banner images, that are usually placed on home pages shouldn't be more significant than 300KB. Following this simple formula, your website will be well-optimized.

 

Conclusion

Images optimization is a crucial step for making your website speedy. Even if you compress each image by 20% that will lead to a much more pleasant experience overall for your visitors, customers, and Google.