Fast & Performance Sites on Squarespace platform? Sure!
We are grateful Squarespace for all great stuff they give to comfort building site. But all that functionality need more styles and scripts to load - and this is bad at least on first page view on mobile connections. Is there any way to improve page load time? Let's see!
The main problem for developers is that you can't actually control the SQS-scripts load flow. We have only varible { squarespace-headers} . And this is string JSON-T-variable render server-side, which contain all meta-tags, template styles and Squarespace scripts.
So as we do not have any server access, we can deal nothing with that. We can't put this variable bottom to page because we want search engines "see" our site. And we can't affect on scripts load order and so on.
Nevertheless, if you want leave all Squarespace functionality but also improve pageload time, you need:
Generate meta-tags using {website}, {websiteSettings}, {collection} and {item} variables in your site template.
Put Squarespace-scripts before your template scripts if you use YUI. You may fetch scripts with ajax requests, then you need to copy squarespace scripts to /assets folder in you template or use another CDN with CORS enabled. Take a note you'll need to copy inlined script with Static.SQUARESPACE_CONTEXT variable (need for squarespace common.js script work). This variable have website, collection, item settings, js-enabled Tweaks and paths to load additional scripts(audio, comments, etc). Main problem is that I don't know a way to make js-tweaks dynamic changeable depends on Style Editor settings, this variables as the whole Static.SQUARESPACE_CONTEXT variable generated server-side.
Create critical-path styles, you may use gulp-plugins or free-generator for this. Inline critical styles before <BODY>.
Optimize images, delay their load time and use original {assetUrl?format=original} in critical place. This is because Squarespace may generate different resolutions (1500w, 1000w, 750w, 500w, 300w, 100w) of your images even bigger than your optimized original.
Use custom Font-Loader or inline woff2 fonts with base64.
Insert full css-styles link before </BODY>. Here you may use CDN link, or just /site.css - last one also have combined styles and sync compile with css-tweaks in Style Editor.
If you want to add some speed to your squarespace site - contact us to hire.
