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.
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.
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.
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 Audit will give you a list of common problems and fixes. Here's what I got.
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
I removed all the render-blocking scrips that I could. This included jQuery and power.io.
The total size of the "universal" bundles are nearly 1 Mb of data.
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.
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.
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).
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
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.
They were loading in a banner image that they were hiding.
Remove the Banner Image altogether.
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:
- Promixa Nova
- Gotham Screen Smart
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.
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!