How I Reduced Load Time by 25% on  Squarespace and Why I Couldn't Get More
Tags: showdev, javascript, webdev, todayilearned
Published: 2019-11-28 16:50:01

# 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".

![https://developers.google.com/web/tools/lighthouse/images/audits.png](https://developers.google.com/web/tools/lighthouse/images/audits.png)

**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](https://www.theverge.com/2019/11/11/20959865/google-chrome-slow-sites-badge-system-chrome-dev-summit-2019). If you want an even more in-depth article, [check this out](https://yoast.com/does-site-speed-influence-seo/).

# 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).

![Analytics of a Google Lighthouse Audit](https://thepracticaldev.s3.amazonaws.com/i/gvltxdua7athcvw054zo.png)

# 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.

![Render blocking warning](https://thepracticaldev.s3.amazonaws.com/i/pysz1cg1e3ui03l5z9y6.png)

### 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](https://forum.squarespace.com/topic/149465-critical-jscss-slows-pages-bad-for-seo-and-google-ranking/?tab=comments#comment-191025) 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](http://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!