4 Things Slowing Down Your Squarespace Website (Understanding Your Google Performance & Speed Score)
About this Squarespace video tutorial
In this video I'll share 4 things slowing down your Squarespace website so you can better understand what's going on behind the scenes. By understanding them and working around them, you can mitigate the damage to your own site's Lighthouse performance.
Timestamps
1:17 - Render-Blocking JavaScript
2:38 - Lack of Image File Type Support
3:33 - "No Width/Height Attribute on Images"
4:46 - Font Loading Times
6:05 - Recap
7:00 - DesigningTheRow.com/free
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
If you’ve ever opened up a Lighthouse report and felt frustrated that half of the red flags are things you can’t do anything about… you’re not alone. Squarespace is a great platform, but like all website builders, it comes with baked-in limitations. Today, I’ll walk you through what’s out of your hands — and what you can still do to keep your site running fast.
Redner-Blocking JavaScript
How Squarespace works is by loading large core JS files such as site-bundle.js and modern.js. You can’t defer these or delay them, it’s simply how the platform is built. What you can do, however, is keep it from adding to an existing issue by avoiding the addition of third-party scripts to your homepage. Third-party scripts include things like calendars, social widgets, or Google Maps integrations. Recently, I had a client where their local positioning was a primary focus of the website, and we kept in a Google Map integrated script. It did cause a hit to the site’s Lighthouse score, but it was worth it. Like all of these site performance tips, you need to weigh them against the intention of your website to see what’s best for you.
Lack of Image Support for WebP, AVIF, & SVG
The only file types that Squarespace supports for image blocks are JPG and PNG files. When you run your website through Google Lighthouse, one of the easy tips it will recommend is to use other, faster-to-load file types such as WebP or AVIF. Using these file types would save you over 200 KB of space, sure, but that’s not possible for a Squarespace website. What you can do instead is to manually compress your images before you upload them, trying to keep them below the 200 KB threshold for mobile performance. For a little bit more information on that, you can check out my video on desktop Lighthouse performance where I talk about image sizes.
“No Width/Height Attributes on Images”
This is a specific note you can get when checking your performance score on a Squarespace site, and what it means is that when logos and other images load into your site, they do so without specifically declared dimensions, which can cause CLS (cumulative layout shift) issues, which calculate how elements on a page shift around while they are loading into a site. The best way to combat this for at least your logo image is to set the width directly in the ‘Site Styles’ section or you can use some custom CSS to define the size of the logo. It’s only one of a potential few images docking your score, but it is a step worth taking.
No Support for Preloaded Fonts
Even if you’re using system fonts, which I do often recommend, they load later on Squarespace than on some other web hosting platforms. You’re unable to set your fonts to preload on a Squarespace site, so this is simply a hit your website is going to take. What you can do is make it so when the fonts do load in, they can load in as fast as possible.
Use fewer font weights (boldness) across your site
Use system fonts whenever possible
If you’re using a custom font, use only one custom font family at the absolute maximum
Things You Can Focus On Instead
It’s not all doom and gloom, you are able to do a lot of tricks to keep your Google Lighthouse score high, even with these drawbacks to Squarespace. But now that you’re aware of these issues, you can better plan around them to get the best performance and site speed of your new Squarespace website. Here are a few easy tricks we’ve covered over this series that can help:
Optimize what’s above the fold: hero text, background image, headline size
Turn off animations
Remove heavy blocks or third-party embeds
Keep your images compressed and right-sized
You won’t be able to fix everything in Squarespace — but you can still get a fast, clean, and Google-friendly site by focusing on what you can control. If you missed how I boosted a real client’s desktop performance from 71 to 90, go watch that first video. And if you want help with the mobile side of things, I’ve got a full breakdown of that too.
And don’t forget to sign up at DesigningTheRow.com/free for access to my new AI-powered copy creation tool that with only a few simple questions can give you the homepage copy start your site needs to get moving. I look forward to seeing you there!
The latest Designing the Row tutorials…
