Page speed is a confirmed Google ranking factor, and Squarespace sites can be frustratingly slow if you are not careful. The platform loads significant JavaScript and CSS by default. Combined with unoptimized images and excessive third-party scripts, a Squarespace site can easily take five or more seconds to load.
These ten optimizations target the biggest performance bottlenecks. Each one is actionable and measurable. Run Google PageSpeed Insights before and after to track your progress.
1. Optimize Your Images Before Uploading
This is the single biggest impact change. Squarespace serves responsive images at appropriate sizes but does not compress your original uploads. A 5MB DSLR photo will be served at smaller resolution but not optimal compression.
2. Limit Third-Party Scripts
Every external script you add via Code Injection is a performance liability. Chat widgets, analytics suites, retargeting pixels, and pop-up builders can collectively add megabytes of JavaScript to every page load.
Audit your Code Injection and remove anything you are not actively using. For scripts you do need, use per-page Code Injection instead of global injection.
3. Reduce Section Count Per Page
Each section generates additional HTML, CSS, and JavaScript. Pages with 20+ sections load noticeably slower than pages with 8–12. Consolidate by using multi-column layouts within a single section.
4. Use System Fonts When Possible
Each custom font weight is a separate file download. Two font families with three weights each means six HTTP requests and 100–300KB of data. Consider system fonts — they render instantly with zero download:
/* System font stack — looks great, loads instantly */
body {
font-family:
-apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen-Sans,
Ubuntu, Cantarell, 'Helvetica Neue',
sans-serif !important;
}
/* If you must use custom fonts, load minimal weights */
/* BAD: Loading 6 weights */
/* family=Inter:wght@100;200;300;400;500;600 */
/* GOOD: Loading only what you use */
/* family=Inter:wght@400;500;600&display=swap */5. Lazy Load Non-Critical Content
Squarespace lazy loads images by default, but embedded videos, maps, and custom iframes may not benefit. For YouTube videos, use a facade pattern — show a static thumbnail and only load the player when the user clicks. This saves 1–2MB per embedded video.
<!-- YouTube facade pattern — loads player on click -->
<div class="video-facade" onclick="this.innerHTML='<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" frameborder=0 allow=autoplay allowfullscreen style="width:100%;height:100%;position:absolute;inset:0"></iframe>'">
<img src="/s/video-thumbnail.jpg" alt="Watch the demo"
style="width: 100%; cursor: pointer;">
<div style="position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%); background:rgba(0,0,0,0.7);
border-radius:50%; width:64px; height:64px; display:flex;
align-items:center; justify-content:center;">
<svg width="24" height="24" viewBox="0 0 24 24"
fill="white"><polygon points="8,5 19,12 8,19"/></svg>
</div>
</div>6. Minimize Custom CSS
The Custom CSS panel loads on every page. Move page-specific styles into Code Blocks on those pages instead of the global panel.
7. Disable Unused Squarespace Features
Squarespace loads JavaScript for features whether you use them or not. The ecommerce module adds significant JavaScript even with no products. Check site settings and disable anything you are not using.
8. Simplify Your Navigation
A nav menu with 20 links and 3 dropdown levels is not just bad UX — it is bad for performance. Each link generates HTML, and complex dropdowns require additional JavaScript and CSS. Aim for 7 or fewer top-level items.
9. Avoid Background Videos
Background videos can add 3–10MB to your page load. A high-quality static image with a subtle CSS animation looks nearly as good and loads ten times faster:
/* Replace a background video with an animated gradient */
.hero-section {
background: linear-gradient(135deg, #1a1a1a, #2d2d2d, #1a1a1a);
background-size: 200% 200%;
animation: subtle-shift 8s ease infinite;
}
@keyframes subtle-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}10. Monitor Core Web Vitals Regularly
Google measures three things: Largest Contentful Paint (main content load speed), First Input Delay (interaction responsiveness), and Cumulative Layout Shift (visual stability).
Run PageSpeed Insights monthly and after any significant site changes. The improvements in this article directly target LCP by reducing the amount of data that needs to load before main content is visible.
