How to get a good score on Google Page Speed on Squarespace

Site speed is an important part of your SEO strategy. Google wants to display websites with good user experience. If your website is slow, it will not provide a good user experience, and therefore will not rank as high on Google. If you are using Google Page Speed to test your Squarespace website, or your clients websites, you might be looking for some tips on how to get a good score on Google Page Speed on Squarespace.

Page speed on Squarespace is usually related to image size, but there are some more factors to consider. We will break down how this tool works and some tools to help you get a better score!

Table of Contents

Why you want a good score on Google Page Speed Insights on your Squarespace website?

Getting a good score on Google Page Speed on your Squarespace website can help you acheive a better website ranking on Google. It will also help you improve accessibility. This will make your website more accessible to everyone on the internet and improve your overall conversions because a healthy accessibility score will also make your website easier to use!

Google PageSpeed is a free tool by Google that analyzes your website based on four categories: Performance, Accessibility, Best Practices, and SEO.

The areas you have the most control over on your Squarespace website are Performance, Accessibility, and SEO.

➡︎ See how your website is performing by using this link: https://pagespeed.web.dev/

How to improve your score on Google Page Insights

Image Alt Tags

Improves accessibility score and SEO search rankings

Google doesn’t have eyeballs, so it needs image “alt tags” to know what your image is about. These descriptions are also used in audio readers. Adding alt tags to all your images will make your website more accessible, raise your accessibility score, and improve your visibility on search engines. Alt tags are an extra place you can put some keywords too! Just choose a few descriptive words when you add an image to your website.

Link Descriptions

Improves accessibility score

Accessibility readers like to know where a link is going to direct a person before they get there. Instead of using text such as “read more” or “learn more”, use descriptive words such as “learn more about me”, “work with me”, or “read blog”. This will improve your accessibility score significantly.

Image Size

Improves performance score, site speed, SEO rankings, and conversions

Large images will drop your “performance” score down immediately, and they make your website load slower. This directly affects user experience, and therefore will affect your search engine optimization rankings and your conversion rate.

At the time of writing this article, Squarespace doesn’t support next-gen formats such as Webp. A Webp format is a transparent file that is 80% less than a png! Next-gen formats retain quality as an extremely lightweight file. This makes them perfect for artists, photographers, creatives, e-commerce stores, and more.

Until these formats are supported, I recommend finding a sweet spot for your website. If you have a portfolio website and need high quality images, compress your images down, but keep their dimensions around 2500 pixels. These images will be much smaller, but will retain quality.

However, if you are using images in a banner area that has an “overlay”, or images inside the page that are sized down (aka not full width of the screen), compress your images, and then size the dimensions down to around 800-1200 pixels. This will help get you under the 100k limit on some photos!

[For more tips how how to size your images down, read this blog]

How to compress your images:

Photoshop: Use the “Save for Web” feature and set your image compression to “low” jpg. If you need a transparent background choose “PNG”, but size the dimensions down if you can because these images will be bigger.

For banner images I recommend using a JPG compressed to low and around 1920 pixels. If you are going to do an overlay and don’t need a super crisp image, you can size your image down to 1200 pixels wide or less.

Free online compressor: If you don’t have access to Photoshop, you can size your image dimensions down in Canva or using a native app on your computer. Then run them through compressor.io.

If that doesn’t lower the size enough, run them through tinypng.com first and then compressor.io. I find that helps get the size down by about 50% more.

Note: There has been rumor about Squarespace increasing the size of compressed images. I did a test and didn’t find an issue when compressing with Photoshop. I compressed the image and reduced the dimensions to get the image down to 25 kb. When I uploaded it, it was at 27 kb (not enough of an increase to worry about it!).

Example of an image compressed and then uploaded to Squarespace.

High Contrast Color Pallet

Improves accessibility score and conversions

A year ago I rebranded my marketing agency. I loved the color pallet, until I tried to apply it to my website. It bothered me for a year. Finally, Google Page Speed started yelling at me for low contrast colors and I made some changes.

A high-contrast color pallet is going to score better on pagespeed insights, which will not only help your SEO rankings, but improve conversions on your website. If text and links are hard to read, people won’t be as likely to click.

What is a high-contrast color pallet?

Here is an example of the color pallet that didn’t perform well on my old website. The dark blue is almost the same color as the black. The three neutral colors are all similar in contrast. This makes them difficult to see against a white background and they don’t work well when combined together.

Low Contrast Example:

Here is an example of a high-contrast pallet (as used on this website). The colors on the left are light while the colors on the right are dark. The accent color is dark enough to show up on a white background. I can combine some of the light and dark colors together and have high-contrast sections with light backgrounds/dark text or dark backgrounds/light text.

High Contrast Example:

Your Performance Score and Custom Code

So far I’ve found that websites with plugins, or code added to the code injector, doesn’t perform as well in the “performance” category. I believe this is because of how the Squarespace platform currently renders/delivers this extra code. I still recommend using plugins when needed, but I try to use as little code as possible.. If you optimize your images and follow the other guidelines, a Squarespace website without any extra code can score A+ across the board.

Did your website fail the test?

Get some work with a Squarespace SEO expert to identify and correct issues.