How to Make Your Squarespace Sites Load Faster

This mini guide will focus on reducing image sizes and a neat trick I just learned about removing fonts you don't use. You will reduce your page sizes by many megabytes! Shave seconds off your load times!

Here's andrewgirardin.com before and after applying these methods.

Before:

 
 

After:

 
 

I cut 0.7 MB in page size, and 0.7 seconds of loading time. Niiiice.

Diagnose Your Site's Problems

Start by plugging your website's URL into Pingdom. That's a site that tells you how fast your pages are loading, and also breaks down every component of the site so you can see which bits are causing the worst delays.

The breakdown looks like this:

The 5th entry there is my site's logo, which may well be an abomination I made myself on MS Paint, but it's quite tiny (7.6kB). That's because I ruthlessly resize and compress the shit out of all my image before uploading them. You probably have room for improvement there.

If you look around your site's result, you will likely find loads of 'requests' are coming from 'typekit'. Here's what I was getting:

Nearly 40% of the requests were to load FONTS. Jesus, there were only two fonts used on the whole site. What the very eff.

Right, let's get into how to fix these issues.

Solution 1 - Slash Image Sizes

If you're new to building websites, you will probably find that your images are horribly big. Find the ones that are too big (as a rule of thumb, anything over 50kB) and resize them. Use this free tool. Drag your image there and select a new size. For in-article images I choose 'custom size' and choose 400 or 500 pixels in width. Depends on the site and the image. For banners I do 800 or 1024 pixels (with a max of 120kB, ideally).

That's already going to massively reduce the number of kB, but you can also run them through Compress Jpeg or TinyJPG with no noticeable loss of qual. You can get a 1MB file down to 70kB.

Solution 2 - Use Adobe Typekit

This is a neat little hack that takes a tiny bit of setting up but is totally worth it. You need to set up an Adobe Typekit account. It's free and doesn't take long.

Then 'create a kit' and add a font you like to it. Here's one I made using the 'droid sans' font.

You want the kit size to be as small as possible so experiment with turning off the features. When you 'publish' that, you get a script. The 7-figure bit (numbers and letters) just before .js is all you need - that's your new Typekit code - no need to do anything with the rest of the script.

On Squarespace, go to Design, then advanced. Plop your Typekit code into the Typekit field. Now it didn't work for me right away, so I suggest at this point you walk the dog or make a tea or whatnot.

After all the bits of the internet have talked to each other, go back to your site and open Design>Style Editor. Click on a font choice and you should see a new bit at the top called 'Typekit Kit'.

(I just realised that's a different font from the one I mentioned before. I HAVE TWO TYPEKITS LEAVE ME ALONE.)

Change all your fonts to that one. Tweak the font sizes so your site looks the way you want it.

The result? Now when someone visits your site, it won't load loads of fonts - just one.

Here's my new 'requests by domain' thingy:

You can see the 'use.typekit' thing has gone - now it just loads the font I chose in the typekit and nothing else.

Much faster.

The Downside

Here's how my site looked before. It used two fonts, Future and something else. I forget which and I didn't write it down because I am literally incompetent.

And this is with just one font, droid sans.

I much prefer the look of the first one. But with the free Adobe Typekit plan you only get one typekit and I have to use the same font across several sites.

At some point in the future I might revisit the font on this site, but for now I'm happy for it to load quicker.