Squarespace Speed Optimization

70% of Squarespace sites have good CWV scores, versus 50% overall.

Squarespace is a fully managed cloud platform with a modern technology stack and a global content delivery network that serves your site’s assets from servers close to each visitor. The core software is optimized by default, including automatic image resizing, delivery in modern formats like WebP when supported, built-in caching, and asset compression.

This baseline optimization means performance issues are rarely caused by hosting itself.

When you start a blank trial site with a standard template (like the 7.1 version templates), the performance is generally good. In fact, most built-out Squarespace sites perform well. A tech report indicates that ~70% of Squarespace websites have good Core Web Vitals scores, compared with ~50% across all technologies.

In short, if you’re hesitant about choosing Squarespace due to speed concerns, don’t be! Go ahead with Squarespace (and use our code ‘SBR10’ for an extra 10% off).

Performance issues typically arise from the accumulation of user assets. As you add high-resolution photos, embed social feeds, and install tracking pixels, the request count and page weight both increase.

• Oversized Images: This is the most common offender. Uploading raw 5MB image files forces the browser to download large amounts of data, even when the image is displayed as a small thumbnail. Although Squarespace does a great job of compressing files as needed, it still takes a load.
• Complex Layouts: Pages with dozens of Fluid Engine sections, stacked on top of one another, create a heavy DOM (Document Object Model). The browser has to work harder to render the structure before it can paint the content.
• Font Loading: Using multiple custom font families with various weights (bold, italic, light, heavy) requires the browser to fetch several font files before text becomes visible.
• Third-Party Code: External scripts are significant performance drains. This includes marketing pop-ups, chat widgets, and social media feeds that pull data from external servers.
• Animations: While visually appealing, site-wide fade-ins and complex motion effects delay the moment the user perceives the page as “ready.”

Effective optimization starts with focus. Because Squarespace is a closed platform, you get the best results by accepting what you can’t change and improving what you can.

Things You Can Control:

• Total Page Weight: The combined size of all images, fonts, and scripts.
• Visual Complexity: The number of blocks and sections per page.
• Asset Quality: The compression and dimensions of the media you upload.
• Third-Party Integrations: External tools you choose to install or embed.
• Navigation Structure: The number of pages and links loaded in headers/footers.

Things You Can’t Control:

• Server Response Time (TTFB): You cannot move your site to a “faster server” or change hosting providers while staying on Squarespace.
• CDN Configuration: You cannot manually clear the server cache or change CDN rules.
• Core Platform Code: You cannot minify the main CSS or JavaScript files that run the Squarespace editor and engine.

I created two blank pages: one with an uncompressed 16 MB image and the other with a 350 KB compressed version. Although Squarespace compressed the images on both pages to roughly equal weight, the pre-compressed image page loaded faster.

Images are the single biggest lever for speed improvement on visual platforms like Squarespace.

How Squarespace Handles Images: When you upload an image, Squarespace automatically creates seven different versions of that image, ranging from 100 pixels wide to 2500 pixels wide. The system attempts to serve the appropriate size based on the user’s screen. However, this is not a magic fix. If you upload a massive 10MB file, the processing takes longer, and there are scenarios where the larger version is still loaded unnecessarily.

Recommended Dimensions: Do not upload raw 20MP camera files. Resize images on your computer before uploading.

• Full-Width / Banner Images: 2000px to 2500px wide.
• Standard Content Images: 1000px to 1500px wide.
• Blog Thumbnails / Small Columns: 500px to 800px wide.
• Product Images: 1000px square is usually sufficient for zoom capabilities.

Compression is Critical: Dimensions are only half the battle. You must compress the file data. You can use a Squarespace Extension like TinyIMG or external tools like TinyJPG or ImageOptim, which can often reduce file size by 50% or more (many times over 90%) with no visible loss in quality. Aim for page banner images to be under 300KB and standard images to be under 150KB.

File Formats

• JPG: Use this for photographs and complex imagery. It offers the best balance of quality and file size.
• PNG: Use this only for logos, icons, or graphics that require a transparent background. PNGs are much heavier than JPGs for photographs.
• WebP: Squarespace serves WebP versions automatically to browsers that support them, so you generally do not need to convert files to WebP before uploading. Stick to optimized JPGs.

The structure of your page dictates how much work the browser has to do to build the layout.

Section Stacking: Long “infinite scroll” homepages are popular but heavy. A homepage with 20 distinct sections requires significantly more processing power than one with 5 sections. If a page feels slow, consider breaking it into multiple pages (e.g., distinct “Services” and “About” pages rather than one long scroll).

Fluid Engine Complexity: The Fluid Engine editor allows for overlapping blocks and complex grids. While flexible, this adds code density. Avoid creating empty rows or dragging simple text blocks across massive grids if simpler formatting will suffice. Reduce the number of blocks per section where possible.

Spacer Blocks: In older editors, spacer blocks were used for padding. Excessive use of empty blocks adds unnecessary HTML elements. Use the section padding settings (S, M, L) to create whitespace instead of adding physical spacer blocks.

Typography and motion contribute to a site’s “feel” and to its load time.

Font Discipline: Limit your site to two font families: one for headings and one for body text. Furthermore, be mindful of weights. If you load a font in Light, Regular, Italic, Bold, and Extra Bold, the browser must download five separate files. Stick to the weights you actually use in your design system.

System Fonts: For maximum speed, consider using System Fonts (like Helvetica, Arial, or San Francisco). These do not need to be downloaded; they already exist on the user’s device. This is a stylistic trade-off, but the fastest option available.

Animations: Squarespace offers site-wide animations (fade, slide, scale). These require JavaScript to calculate element positions as the user scrolls. If your Core Web Vitals show poor interaction metrics, try setting the site-wide animation setting to “None” (found under Miscellaneous under site styles on the right-hand side of the editor). This often makes the site feel snappier on older mobile devices.

Non-animated web page performance score vs Animated

This is often the silent killer of performance. Every time you add a code block or injection for a marketing tool, you are asking the user’s browser to pause and fetch data from another company’s server.

High-Impact Scripts:

• Chat Widgets: These are very heavy. If you don’t receive daily inquiries through chat, consider removing it in favor of a contact form.
• Social Feeds: Embedding a live Instagram feed requires connecting to Instagram’s API on every page load. Consider using a static image link to your profile instead.
• Tracking Pixels: Only install the analytics tools you actually use. Running Google Analytics, Facebook Pixel, Hotjar, and Pinterest tags simultaneously will degrade performance.

Google’s Core Web Vitals (CWV) are a set of metrics that measure user experience. It includes:

Largest Contentful Paint (LCP): This measures how long it takes for the main content (usually the hero image or H1 headline) to appear.

• Fix: Ensure your top banner image is compressed and not hidden behind a fade-in animation. Avoid using sliders or carousels at the very top of the page, as they require scripts to load before the images appear.

Cumulative Layout Shift (CLS): This measures how much the page layout “jumps” while loading.

• Fix: This often happens when a custom font loads late and is swapped for a system font, changing the text size. To minimize this, avoid custom fonts for the main navigation or ensure your custom font file sizes are small.

Interaction to Next Paint (INP): This measures click responsiveness.

• Fix: Reducing third-party scripts and disabling complex site-wide animations are the best ways to improve INP on Squarespace.

If you have 30 minutes to improve your site speed, follow this checklist:

• Audit Images: Run your homepage through a tool like GTmetrix to identify image file sizes.
• Compress & Replace: locate any image over 500KB. Resize to a max width of 2500px, compress with TinyJPG, and re-upload.
• Review Fonts: Go to Design > Site Styles > Fonts and ensure you aren’t loading unnecessary weights.
• Simplify Animations: Go to Design > Site Styles > Animations and set to “None” or “Fade” (avoid complex scales/slides).
• Script Hygiene: Go to Settings > Developer Tools > Code Injection and remove any scripts for tools you no longer use.
• Social Feeds: Remove live social feed blocks from the homepage/footer.
• Home Page Length: If your homepage has more than 10 sections, consider moving content to interior pages.

A fast Squarespace site is the result of discipline, not coding hacks. By keeping your media assets light and your external integrations minimal, you can achieve a professional, performant site that ranks well and keeps visitors engaged.