5 ways to speed up your Squarespace website

Squarespace

11 Mar

As life gets busier and the competition is fiercer online, the first aspect of your website that gets judged is how quickly your web pages load. You spend time and money on web design, copyright, and photography, and that’s not even touching on how long it took you to nurse and build your small business. But if your stunning website does not load, your user will bounce out of there before you even have a chance to tell them what you do and why you’re good at it.

Faster websites have shown to increase conversion considerably… makes sense right? We’re all so busy, and there are plenty of other options out there; why should I hang around?

When you employ a web developer, every step of what we do keeps in mind the best practises to ensure a fast-loading website. Especially if they are coding your website from scratch, there is complete control and flexibility. You make the choices and toe the line between speed, performance, and design and loading libraries.

What if you are using a web builder like Squarespace or Wordpress? One thing you can rely on is that these platforms already have your website's speed and SEO in mind. Usually, it’s the creation of the website itself (your input) that will slow your website right down.

So let’s keep it simple..

Here are 5 things you can do to increase your website’s loading speed if you are using any web building platform:

1 - Images!

Did you know that it’s quicker to load thousands of lines of code than a simple background image?

Images need a fair amount of formatting before uploading to your website, but the most important aspect of image formatting for page loading is size.

Make sure the width and height is no bigger than actually needed for the website.

For example any background or banner image probably doesn’t need to be any larger than 1500px.
Most stock images or professional imagery will be around 3000px so it’s very important you resize before uploading. I usually use Photoshop for this process and once I have resized the width, I would check out it’s weight and make sure it’s below 500KB. If not, I will reduce the quality slightly until I have reached the desired weight.

Graphics and logos will most likely need to be smaller, and you may want to export more than one variation of their size. Also, the file type of the image is important. Where possible, keep images as jpgs; they are lower quality and therefore load quicker. Of course, if you need a transparent background or crisp, clear images like graphics and logos, you will need to use PNGs. Not to worry; just don’t overload your website and choose carefully.

We could deep dive quite a lot further here, so I will be following up with a blog post about which files types to use and when.

2 - Consider enabling AMP (Accelerated Mobile Pages) on Squarespace for your blog posts.

AMP is when Squarespace creates even smaller versions of your page so it loads a lot quicker on a mobile. This is especially useful for text-heavy pages.

WHERE DO I ENABLE AMP?

Go to Settings —> Blogging —> Enable AMP

3 - Do you have videos on your website? Are they embedded on Squarespace?

Look into an external video hosting option. I use Vimeo and have a paid account that works out to £6 a month.

It’s super simple and easy to integrate with Squarespace.

You can embed videos on a free account, but expect to have controls on each video.

Video content is becoming more popular and has actually been shown to increase the time spent on your website and even conversions, so either way you go about it, don’t compromise on your video content and therefore where it is hosted. Don’t forget!! Make sure you add a custom thumbnail image for all embedded videos. A much smaller piece of media is being loaded for your user to view your embedded video.

4 - How many fonts are you using? Are they all necessary? Are they formatted correctly?

Fonts can be overlooked when it comes to page loading, but they play a big part.

1 - Usually there isn’t a need for more than 3 fonts. Make sure in your Squarespace settings you aren’t loading unnecessary fonts.

2 - When you are uploading custom fonts, make sure they are in the correct format. In the case of page loading, I would recommend the web-ready format for custom fonts; woff or woff2. (Web Open Font Format). This font will load faster as the data is compressed. Not all browsers support woff yet so you will need to provide a fallback font, which brings us onto our next point.

3 - Make sure you have provided a fallback font. What this means is that if your browser cannot find your custom font, it will fallback to a different font until the custom font is found. Browsers will sit there forever trying to find your font and won’t display your text until done so. This wreaks havoc on your first impressions and most likely results in your user going elsewhere.

Sans serif is your fallback font here!

4 - Tell the browser to preload all custom fonts added. This can be done with a simple line of code added to the header of all pages.

5 - Reduce redirects!

Redirects are an important part of making sure your users are sent to the correct place. Imagine you have changed the url for a page, replaced the page with a new page, or even just deleted a page. Where are people being sent when they still manage to follow that old url? Squarespace makes it super easy to redirect an old URL to a new one.

Learn more from Squarespace

But what actually happens during this process? You’re sending more requests to your server whilst your user is waiting for the correct page to load.

So a wise move is just to make sure you have no outdated or unnecessary redirects. It can easily get out of control when you have years of growth in your business.

WHERE DO I ADD MY REDIRECTS ON SQUARESPACE?

Settings —> Advanced —> URL Mappings

Conclusion

All media added to a website has a huge impact on page loading times. Be mindful when adding to your Squarespace website and spend time now to save time later.

Studio Soph https://www.studiosoph.co.uk