Front Matter
Recently, I got a job that required me to debug a Squarespace site to see why it was loading so slow. I figured I'd share what I did to increase the load speed.
Tools
I used Google's built-in tool "Lighthouse". If you don't know where that is, you can find it in the Dev Tools under "Audit".
Disclaimer: All load times are evaluated against a simulated Slow 4G connection.
Why Load Time is a Problem
While you are running the audit, Google will give you a bunch of reasons to keep your site loading quickly. Essentially, the longer it takes, the less likely people are going to stay on your site. Additionally, Google is possibly planning to add a "slow badge" to sites that load slowly. That is really bad for user retention. Check out the article for that here. If you want an even more in-depth article, check this out.
The First Run
If you take a look at the readout below, you can see that the site is loading incredibly slowly (again, this is against a slow 4G).
The Issues and Fixes
The Audit will give you a list of common problems and fixes. Here's what I got.
Render Blocking scripts
Problem
When a page is being loaded, the browser loads things from top to bottom in the HTML file. That means any items in the <head> tag will load before the content in the <body> is even painted on the screen. In this case, there were 3 Mbs of scripts being loaded; both Javascript and CSS.
Fix
I removed all the render-blocking scrips that I could. This included jQuery and power.io.
A Note about Squarespace
There are ~6 seconds of load time we can't get back because of how Squarespace is built. They load the universal javascript in the header. There is no way to change this. Refer to this forum article posted in September for further info.
The total size of the "universal" bundles are nearly 1 Mb of data.
Incorrectly Sized Images
Problem
The site was loading a total of 2.7 Mbs of data for just the images. The key problems were:
- A large logo in the header. It comes in at 1500px wide, despite the max width being 1200px.
- A collection of 4 images in a carousel. Each one is 750px wide.
- A banner image that is being hidden as soon as the page loads.
Fix
There is no fix. The platform handles responsive image resizing automatically. On retina screens, it'll load an image that's 2X the screen size. There isn't much we can do about how the platform is built. We sort of just have to accept that how images are loaded is out of our hands, so to speak.
Enormous Network Payload
The payload size on the first run was 5 Mbs! That's huge! Here are a couple of things I did to reduce it to 2.2 Mbs (which is still pretty big in my book).
Page-Specific Code Injection
Problem
They had a small script on every page to change the logo image. For whatever reason, they were pulling in the jQuery script on every page to accomplish this. Also, this was happening in the <head>.
Fix
I created a function in the footer that injects in every page that looks for specific pages they want to have a different logo - sans jQuery.
Banner Image
Problem
They were loading in a banner image that they were hiding.
Fix
Remove the Banner Image altogether.
Typography
Problem
Typography styles were coming from three sources: Typekit (built into Squarespace), Typography.com and template style sheets. This meant they were downloading a total of 4 separate typeface families:
- Europa
- Promixa Nova
- Gotham
- Gotham Screen Smart
Fix
Upon final render, the only typefaces that were actually being used were the Gotham set. I changed the default styles in the Squarespace dashboard to Arial, because that is a web-font and doesn't have to be downloaded from anywhere.
Summary
Basically, after removing as many render-blocking scripts I could and removing any images that didn't need to be loaded, I managed to squeeze an additional 2s load time off the top. Unfortunately, because of how Squarespace is built, there is no way around the additional load time.
To be fair to Squarespace though, they do a good job of minifying the scripts. Also, considering how advanced their site builder is, I guess it's a fair tradeoff.
Got any other hot tips to reduce load time? Throw them in the comments below!
Top comments (10)
Hi Jared, I'm curious whether you've tried Cloudinary for image hosting? We have lots of ways to optimize images for faster loading without losing visual quality, with very little effort involved. And for smaller sites, chances are you won't end up paying anything for the service.
Here's a good place to start: cloudinary.com/blog/the_holy_grail...
I am a fan of Cloudinary,but not really an option with Squarespace. As i mentioned in the article, they handle how the images are delivered
OK, I think I misunderstood you earlier. I will point out that you can probably squeeze out some better performance on the images using Cloudinary's transformations in the manner described in medium.com/@alon7/how-to-make-an-a... - essentially do an upload,
q_autodown to a smaller size, then download and reupload to Squarespace.Not as simple as it usually is to use Cloudinary unfortunately 😞but still might be worth your time if increasing speed is super valuable.
What Squarespace does for images (support.squarespace.com/hc/en-us/a...) is definitely better than nothing, but they don't seem to do the more advanced stuff - reducing size for the same image without perceptibly degrading visual quality.
I'd recommend trying with an image or two, and seeing if you can drop down that 2.7MB by a few hundred kB at least.
Ah, gotcha. Thanks for the tip!
Awesome, thanks for sharing !
I'm wondering how did you proceed to remove all the render-blocking scripts ?
Thanks
Thank you! In this case, I just removed all the scripts I could from the head section and moved them to the footer. This allows the page to load first, before running scripts. Hope this helps!
It would be great if I could shave 2s off of my current 6.7s site load time. Google also tells me to eliminate render-blocking resources. Could do the same for my site at a fee? or would you be willing to teach me step by step in squarespace? Thanks for your time!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.