“55% of visitors spend LESS THAN 15 seconds on your website.” (Source)
Do you want those 15 seconds to be eaten up by page loading times?
And then what about SEO?
Don’t faster loading sites tend to rank better in search results over slower ones?
User retention and SEO are a big deal when it comes to your website.
So how can you speed up your Squarespace site to help improve loading times AND your SEO?
That’s what I’m diving into in this post.
But first, let’s tackle the elephant in the room.
Being a Squarespace user, you might be thinking that your options are limited when it comes to your website speed, because of the fact that Squarespace hosts your website (vs. you having control over a hosting company). And since they host your website, you get limited control over code and templates, and no control regarding servers.
But don’t fret friend, theres still a handful of things that ARE in your control.
Things that you can dive into and fix to help speed up your Squarespace site.
How fast is your Squarespace site right now?
But before we get into the tips and tricks, we have to know where we’re starting at.
To find out your Squarespace site’s loading time, you’ll need to run it through a speed checking tool.
Why? Well, for 2 good reasons.
#1. Benchmark Score: If you don’t know how fast or slow your website is NOW, then how will you know if it’s made any improvement after you follow the tips and tricks I highlight in this post? If you don’t have a starting point, it’s going to be impossible to refer back too. Pickin’ up what I’m puttin’ down here?
#2. Specifics & Details: Speed Checking Tools not only give you specific loading times (down to the milisecond) but they also give you detailed reports on what’s slowing down your site to begin with. This detailed report will help you figure out where you should spend the most time with improvements.
Speed Checking Tools:
There are a bunch of free to use tools online and they only takes a few minutes — depending on how long it takes your site to load 😉
- Pingdom Page Speed explains your page size and load time.
- GTMetrix includes helpful visuals and prioritizes speed concerns.
(Here’s a video tutorial that walks you through GTMetrix how to use it.)
Important Note*** All though I LOVE these tools, they’re still a free benchmarking resource. Some of the suggestions and details can be a little overwhelming/techy and it’ll likely give you suggestions on things to change that will be out of your control. But no worries, I’m going to dive into the things that ARE in your control so you can speed up your Squarespace site without wanting to pull your hair out!
Okay, now that you have your starting point, let’s get to the good stuff.
5 Ways to Speed Up Your Squarespace Site
#1. Reduce & Compress Your Images
One of the best places to start is by optimizing your images for web.
Images take up more space then any other part of a website. Because they’re some of the “heaviest” and most difficult files for a server to work with. So with that being said, if you think about the compunding affect of having a ton of images on your site, the size and quality can make or break your web performance.
There’s quite a few things you can do to images in order to reduce their size and compress them.
Step #1. Save your image in the correct format.
The two most common image formats to use are Portable Network Graphics (PNG) and Joint Photographic Experts Group (JPEG or JPG).
The major difference is that PNGs are better quality and allow for transparency (good for logos and design elements), but their image file sizes are larger. JPGs aren’t as good in the quality department but they’re image sizes are a LOT smaller.
So in short: JPEGs will be your best bet in most cases as they’re a good compromise between image quality and file size. Especially when it comes to background images, galleries, and product images.
Step #2. Resize your image BEFORE uploading to Squarespace
Keep the width of your image as small as possible, without compromising quality.
Squarespace recommends an image width of between 1500 -2000px in width. If you’re uploading and using images that are 3000px – 6000px wide, your pages are going to load slower because you’re asking the browser to do a LOT of extra heavy lifting (and it totally isn’t necessary).
Also take note of how large the other images on your site are. If you’re creating a gallery with 25+ images and non of the images have been resized….your page is going to load slowly. For a good rule of thumb, I usually suggest keeping any images on your site at no larger than 1000px wide (unless it’s a background image).
If you don’t have a photo editor on your computer, you can use a free online one like Pic Resize.
All in all, the smaller the image size, the better….as long as they still look okay.
Don’t compromise quality for image size. We don’t want pixelated images on our site.
Step #3. Compress your images before uploading them.
This is NOT the same as resizing them.
When you compress an image you strip an image of unnecessary information such as camera details, metadata, color profiles, embedded thumbnails, etc which can bulk up the size of the image file, making it larger than necessary.
#2. Enable the SSL certificate
Want a quick speed win? Ensure you’re using Squarespace’s free SSL option. It sounds techy, but I promise it’s the easiest to setup.
Login to your Squarespace Dashboard, click on Settings >> Advanced >> SSL.
Then you’ll want to make sure that Secure (Preferred) is checked, along with HSTS Secure.
How does this help speed up your site? Because the SSL will now allow your site to be delivered through the faster HTTP/2 protocol.
#3. Keep your page size under 5MB
This is actually a recommendation directly from Squarespace.
When a browser first loads a page, it downloads all of that page’s content. If your page has a lot of content, the browser will have more work to do, resulting in a slower loading page.
If a specific page on your website is loading especially slow, follow the Squarespace official tutorial here to check the size of your page.
Need to reduce your page size? Heres a few things you can do for faster loading:
Reduce image size: Refer to the tips about this above.
Reduce embedded content: Embedded content, such as videos, can increase page load times. If you have a lot of embedded media on your website, try spreading it across multiple pages, rather than housing it all on one page.
Reduce gallery size: Keep photo galleries under 50 images each. Even less if possible. Try to think of your website image galleries as display cases rather than a compilation of total inventory. ***Note: More times than not a website visitor won’t spend enough time on your galleries to even flip through all 50 of them, so keep that in mind. If you need larger galleries, simply link to them across different pages.
#4. Be careful with your fonts
As a general best-practice design rule, consider using no more than 2-3 fonts throughout your site. For visual purposes, this helps create a cohesive design atmosphere…and it also helps you improve your website’s loading time. **Honestly, if you can get away with ONE font family and just use different weights & modifcations, that would be ideal, but a lot of times that’s not an option.
When a browser loads any page on your site, it first loads all selected fonts, including custom ones. If you have more than 2-3 different fonts being displayed on your Squarespace site, all of them must load behind the scenes before the page can appear in the browser….aka slowing down the loading time of your pages.
The more fonts, the slower your site is.
IMPORTANT NOTE: Be careful when you’re changing the fonts from the template, to your business/brands fonts. You could be loading more fonts then you think if you forget to change some of the templates default fonts.
You can also try optimizing your websites fonts. This takes a little more tech savvy-ness but it’s still a possibliity. Check out the Squarespace Font Optimizer from cheers-studios.com. All of the how-to directions are right on that page and it has potential to seriously speed up your Squarespace website.
#5. Be smart with custom code
Adding custom code to your website is a great way to customize your Squarespace template and really make it your own, but it’s important to be aware of how it affects your website’s loading time.
Some custom code (such as third-party embed code, code injections and custom CSS) can add valuable functionality to your website, like Addthis or Sumo for social media sharing, or tracking code for online advertising.
But the key to this is to be smart about it.
Keep your priorities in mind when adding extra code to your site. If the extra codes add up and your site ends of loading like a snail, people won’t stick around long enough to read your content, let alone share it on social media. Get what I’m sayin’?
So I’m not saying you need to avoid custom code all together. I’m actually a big fan of customization. But if you notice your site is starting to slow down, I’d suggest doing an audit of the scripts you’re currently using and getting rid of anything that’s not adding value.
The less third-party scripts & custom code on your Squarespace site, the better for website speed.
And, sometimes it’s not your fault!
Very rarely, a site loading problem is actually due to a system-wide issue. You can check the current system status on Squarespace’s status page.