Skip to content
50% OFF $299 $599
Lock in
§ 2.4.4 ARTICLE

Site speed · lazy-load

Lazy-load images on Squarespace

Squarespace 7.1 ships browser-native lazy-loading on Image Block images by default2 — confirmed by inspecting the rendered HTML, which shows loading="lazy" on below-the-fold images and either no attribute or loading="eager" on the LCP candidate. The gap: iframes, Code Block embeds, and CSS background images do not auto-lazy-load. This page covers what Squarespace already does, the LCP exception, and the Code Injection patch for the gap.

Most Squarespace owners do not need to do anything to enable lazy-loading on regular images. The work is auditing what falls outside the auto-behaviour and patching it.

What Squarespace does automatically

On Squarespace 7.1, images uploaded through the Image Block are served with browser-native lazy-loading enabled by default. The rendered HTML includes loading='lazy' on the img tag, which tells the browser to defer loading the image until it approaches the viewport. The behaviour is browser-native — meaning no JavaScript, no extra script tag, no plugin. Every modern browser supports it as of 2020, and Squarespace ships it on every new template. The exception is the above-the-fold LCP candidate, which is eager-loaded to protect the LCP score.

The implementation lives at the HTML attribute level1. You do not need to enable it — it is already on. The way to verify: right-click any below-the-fold image, choose Inspect, and look at the <img> tag. If you see loading="lazy" in the attributes, the image is lazy-loaded.

What ships by default

Auto

Image Block images get loading='lazy' on the rendered HTML by default. No setting required.

Squarespace Help · 2026-Q1
Eager

above-the-fold LCP candidate is eager-loaded to protect the Largest Contentful Paint score.

web.dev · 2026-Q1
Not auto

iframes, Code Block embeds, and CSS background images. These need manual patching.

Squarespace Help · 2026-Q1

The LCP exception — don't lazy-load the hero

The hero image — the one Squarespace identifies as the LCP candidate above the fold — should not be lazy-loaded. Lazy-loading defers the fetch, which directly hurts LCP because the browser waits to start downloading the largest visible element. Squarespace handles this automatically by serving the hero with eager loading (or no loading attribute at all, which defaults to eager). If you have applied custom code that forces lazy-loading on everything, the hero is the one image you should explicitly opt out.

Iframes and embeds — the gap to patch

Squarespace's auto-lazy-load applies to Image Block images, not to iframes (YouTube, Vimeo, social embeds), Code Block HTML, or CSS background images. PageSpeed Insights' 'Defer offscreen images' audit flags any of these that are below the fold but still eager-loading. The fix for iframes is the loading='lazy' attribute, which is browser-native for iframes as well. For Code Block embeds, add the attribute to the iframe in the HTML directly. For CSS backgrounds, there is no native lazy-load equivalent — the workaround is to move the image into an Image Block.

HTML Code Block — add loading='lazy' to embedded iframes
 <!-- YouTube embed — add loading='lazy' --> <iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" width="100%" height="315" frameborder="0"></iframe> 

The loading="lazy" attribute on iframes is supported in Chrome, Edge, Firefox, and Safari as of late 2022. It defers the iframe's loading until the iframe approaches the viewport, just like the equivalent on images. Adding it to every embed below the fold is a safe improvement — no script, no plugin, just the attribute.

Verify lazy-loading is actually working

Three verification methods. (1) Inspect the rendered HTML — right-click an image below the fold, Inspect, look for loading='lazy' on the img tag. (2) Run PageSpeed Insights and check the 'Defer offscreen images' Lighthouse audit. Pass means the lazy-load is doing its job; fail means an image is missing the attribute. (3) Open Chrome DevTools, Network tab, throttle to Slow 3G, scroll the page and watch which images load only as they enter the viewport. The third method is the most visual confirmation.

PSI's 'Defer offscreen images' audit3 is the fastest single-check. If it passes, every below-the-fold image is correctly deferred. If it fails, the diagnostic names the specific images that need the attribute. For Squarespace sites, the failures are almost always Code Block embeds or CSS backgrounds — Image Block images pass automatically.