How To Add Lazy Load To Squarespace

How I Reduced Load Fourth dimension by 25% on Squarespace and Why I Couldn't Get More

Front Matter

Recently, I got a job that required me to debug a Squarespace site to meet why it was loading so wearisome. I figured I'd share what I did to increase the load speed.

Tools

I used Google's congenital-in tool "Lighthouse". If y'all don't know where that is, you tin can find it in the Dev Tools nether "Audit".

Disclaimer: All load times are evaluated confronting a faux Irksome 4G connection.

Why Load Fourth dimension is a Problem

While you are running the audit, Google will give you a agglomeration 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 "dull badge" to sites that load slowly. That is really bad for user retentiveness. Check out the article for that here. If y'all want an fifty-fifty more in-depth commodity, bank check this out.

The Kickoff Run

If you take a expect at the readout below, y'all tin see that the site is loading incredibly slowly (again, this is against a slow 4G).

The Problems and Fixes

The Audit volition give you a list of common issues and fixes. Here'south what I got.

Render Blocking scripts

Trouble

When a page is existence loaded, the browser loads things from top to bottom in the HTML file. That ways any items in the <head> tag will load before the content in the <torso> is even painted on the screen. In this case, there were iii Mbs of scripts being loaded; both Javascript and CSS.

Fix

I removed all the render-blocking scrips that I could. This included jQuery and ability.io.

A Note nigh Squarespace

There are ~half dozen seconds of load time we tin can't get back considering of how Squarespace is built. They load the universal javascript in the header. At that place is no way to modify 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.seven Mbs of data for just the images. The cardinal problems were:

A big logo in the header. It comes in at 1500px wide, despite the max width being 1200px.
A collection of iv images in a carousel. Each i is 750px wide.
A banner image that is being subconscious as soon as the page loads.

Prepare

In that location is no fix. The platform handles responsive paradigm resizing automatically. On retina screens, it'll load an image that'southward 2X the screen size. There isn't much we tin practise about how the platform is built. We sort of merely take to accept that how images are loaded is out of our easily, so to speak.

Enormous Network Payload

The payload size on the first run was five Mbs! That'south huge! Hither are a couple of things I did to reduce information technology to two.2 Mbs (which is still pretty big in my book).

Page-Specific Code Injection

Trouble

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 folio to accomplish this. Also, this was happening in the <head>.

Fix

I created a part in the footer that injects in every page that looks for specific pages they want to have a different logo — sans jQuery.

Banner Prototype

Problem

They were loading in a banner image that they were hiding.

Fix

Remove the Imprint Image birthday.

Typography

Problem

Typography styles were coming from 3 sources: Typekit (built into Squarespace), Typography.com and template mode sheets. This meant they were downloading a total of iv separate typeface families:

Europa
Promixa Nova
Gotham
Gotham Screen Smart

Gear up

Upon final return, the merely typefaces that were actually existence used were the Gotham set. I changed the default styles in the Squarespace dashboard to Arial, considering that is a spider web-font and doesn't accept to be downloaded from anywhere.

Summary

Basically, later on removing as many render-blocking scripts I could and removing any images that didn't demand to be loaded, I managed to squeeze an additional 2s load time off the height. Unfortunately, because of how Squarespace is built, there is no way around the boosted load fourth dimension.

To be fair to Squarespace though, they do a skillful job of minifying the scripts. Also, because how avant-garde their site builder is, I gauge it's a off-white tradeoff.

Got whatsoever other hot tips to reduce load fourth dimension? Throw them in the comments below!