This post is a collaboration with BeyondSpace.studio

Squarespace provides robust tools for building and managing websites, offering everything from beautiful templates to built-in caching and backup solutions. However, for those who seek even more control, security, and optimization, integrating Cloudflare can take your Squarespace site to the next level. By connecting your domain to Cloudflare, you place a powerful layer between your visitors and Squarespace's servers, unlocking features that go beyond the platform’s default capabilities.

According to NerdyData, out of 132,720 indexed Squarespace websites, 17,340 use Cloudflare. This post explores why you might want to join them and how to get the most out of this combination.

Setting up Cloudflare with Squarespace

This guide assumes you've already set up Cloudflare as your DNS nameserver manager and connected your Squarespace domain using DNS Records. While Squarespace typically recommends using DNS-only mode (disabling the orange cloud icon) to avoid potential issues, I’m following Cloudflare’s guidance instead. This approach involves proxying all records except for the verify.squarespace.com CNAME, which should remain in DNS-only mode.

If you’re unsure whether your site is connected to Cloudflare, you can verify the connection using this tool. Simply enter your domain name and click "Find DNS Record." If Cloudflare DNS records are returned, your site is successfully protected by Cloudflare.

Benefits of using Cloudflare with Squarespace

Even with Cloudflare’s free plan, you can gain a handful of benefits. Let’s explore what it can bring to your Squarespace website:

Enhanced Caching

Cloudflare provides superior caching options, helping your site load faster by serving content directly from its CDN (Content Delivery Network). This reduces the load on Squarespace’s servers and improves the user experience. Note that images, videos, and other static assets are stored on Squarespace’s CDN, not on the same domain as your website, so there will be no cache benefit for those assets. Learn more about Cloudflare Cache settings.

Crawler Hints

Cloudflare’s Crawler Hints feature can notify search engines about changes on your site. While this includes support for the IndexNow protocol, it lacks transparency in how and when content is sent to search engines. It’s a useful feature, but for better control, consider sticking with your current indexing service. Read more about Crawler Hints.

Bot and AI Blocking

Protect your site from malicious bots and AI scraping by utilizing Cloudflare's bot management tools. This feature is crucial for maintaining site security and performance and is similar to Squarespace’s crawler blocking. Learn more about bot blocking.

Country or IP Blocking

You can block visitors from specific countries or IP ranges, providing an additional layer of security and content control. IP Access rules allow you to allowlist, block, or challenge traffic based on the visitor’s IP address, country, or Autonomous System Number (ASN). This is particularly useful for blocking or challenging suspected malicious traffic and allowing services that regularly access your site, such as APIs, crawlers, and payment providers. More on IP Access rules.

Zaraz – Server-Side Tag Management

Zaraz enhances the performance, security, and privacy of web applications by loading third-party tools in the cloud, separate from browsers. This allows you to integrate analytics tools, advertising pixels, widgets, and various other third-party tools without impacting the speed of your websites. Zaraz functions similarly to Google Tag Manager but operates on the server side.

Cloudflare zaraz explain — Source: Cloudflare blog

Using Zaraz, you can control what kind of data you want to share with third parties, which can help your websites comply with EU regulations. For example, when connecting Google Analytics via Zaraz, you can choose not to share visitor IPs with Google Analytics.

With the free plan, you can manage up to 1 million events per month. Explore supported tools on Zaraz.

Cloudflare Workers: A Game Changer for Squarespace

Cloudflare Workers is a powerful serverless platform that can serve as a backend for your Squarespace site, allowing you to extend its functionality without enabling Developer Mode (which is only available for Squarespace 7.0 templates). With Cloudflare Workers, you can deploy up to 30 scripts and handle up to 100,000 requests per day, all for free.

Worker Routes offer an efficient way to map specific URL patterns to a Worker when your domain is proxied through Cloudflare. For instance, a route pattern like https://*.example.com/blog/* would trigger your Worker for any HTTPS request targeting a subdomain of example.com that starts with /blog/.

Cloudflare worker explain — Source: Cloudflare blog

One of the standout features of Cloudflare Workers is Cloudflare’s HTMLRewriter. This JavaScript API lets you parse and modify HTML content in real-time. When your Worker fetches content from the Squarespace server via Worker Routes, HTMLRewriter can dynamically adjust the page content at the CDN edge before delivering it to the user.

For example, you can seamlessly inject additional HTML elements, like a script tag, into the page content using Cloudflare Workers.

Cloudflare's HTML Rewriter example — Cloudflare's HTML Rewriter. Source: able-test.com

Here are some practical uses of Cloudflare Workers:

Create an alternate Sitemap.xml

Squarespace automatically generates a sitemap, but with Cloudflare Workers, you can create custom sitemaps tailored to specific use case. For example, you might want a sitemap that only includes content from specific collection. This is particularly useful for SEO and for better organizing your site’s content.

For instance, on Beyondspace, the default sitemap is accessible at beyondspace.studio/sitemap.xml. However, a specialized sitemap for case-studies blog can be accessed at beyondspace.studio/case-study-sitemap.xml.

What makes this approach powerful is that the case-study-specific sitemap is generated on the fly and is accessible at the root level of the domain. This means as soon as new case studies are published, they are automatically included in the alternate sitemap, keeping your SEO efforts up-to-date without manual intervention. The alternate sitemap has been tested against Google Search Console and Bing webmaster tool and is accepted with no issue

Add Nofollow and Noreferrer Tags

Since Squarespace's link editor doesn’t allow adding these tags, you can use Cloudflare Workers to modify the DOM and insert the necessary attributes, enhancing SEO and privacy.

A/B Testing with Cloudflare Workers

Cloudflare Workers allows you to perform server-side A/B testing by modifying the HTML of your pages directly at the edge, enabling you to test different versions of your content seamlessly. This server-side approach gives your development team greater control and precision when determining which version of the content performs better, ultimately leading to more informed decisions and optimized user experiences.

Cloudflare AB testing animation — Source: able-test.com

Secure API calls with Cloudflare Workers

Many third-party services require API keys, which can be vulnerable to misuse if exposed in client-side code. Squarespace's custom code injection places API keys directly in your website's source code, which is not recommended for security reasons. Cloudflare Workers addresses this issue by allowing you to handle API calls server-side, keeping your API keys secure.

This approach is crucial for integrating third-party services where sensitive data is involved. For example:

Tapfiliate REST API: Securely manage affiliate data without exposing your API keys. Tapfiliate REST API Documentation
Algolia Search API: Protect your search API keys to prevent unauthorized access. Algolia API Keys Security
Acuity Scheduling: Create a custom user interface for scheduling without exposing sensitive integration keys. Acuity API documentation

By using Cloudflare Workers to handle these API calls, you ensure that your sensitive data remains secure while enabling advanced integrations and functionalities on your Squarespace site.

Integrate image pipeline

Cloudflare Workers can efficiently handle image optimization for Squarespace sites by delivering images in WebP format and applying smart cropping. Since image optimization involves replacing all image sources when the page loads, doing this with a JavaScript solution on the frontend can be quite challenging. However, with Cloudflare Workers, you can efficiently change all image sources before they reach your visitors' browsers.

Using Cloudflare Workers, you can optimize images before they are served to users, ensuring faster load times without impacting performance. You can also use third-party image CDNs or Cloudflare's own Image Transformed service. Cloudflare Images Transformed is a post-paid service costing $0.50 per 1,000 unique transformations per month, making it a cost-effective solution for advanced image optimization.

Additional details on the Cloudflare & Squarespace connection

While there may be a slight delay when Cloudflare connects to Squarespace, this time is incredibly quick and hardly noticeable, with the entire document parsing taking roughly 5ms using Cloudflare Workers.

You can use Cloudflare Workers for free for up to 100,000 requests daily. Beyond that, it operates on a pay-as-you-go model, starting at $5 per month.

When you connect your primary domain to Cloudflare and enable proxying, you can leverage all optimization features and Workers routes for this domain, such as your-site.com. However, your built-in Squarespace domain (e.g., your-site.squarespace.com) will remain unaffected by Cloudflare.

This discrepancy can cause confusion for visitors if they land on the built-in Squarespace domain instead of the primary domain, especially if significant modifications are made to the page. To address this, a JavaScript redirection can send users to your primary domain.

Copy and paste the below script to your Code injection panel

<!-- sqs:redirect-authentic -->
<script>
(() => {
    // Define the new hostname
    const primaryHostname = Static.SQUARESPACE_CONTEXT.website.authenticUrl;
    
    // Get the current path and query
    const path = window.location.pathname;
    const query = window.location.search;

    // Check if the path is not /config and the current hostname is the old one
    if (location.pathname.indexOf("/config") !== 0 && location.host.includes("squarespace.com")
&& window.self === window.top) {
        // Construct the new URL
        const newUrl = `${primaryHostname}${path}${query}`;

        // Redirect to the new URL
        window.location.replace(newUrl);
    }
})();
</script>
<!-- sqs:redirect-authentic -->

For Zaraz users, the same issue applies, as the built-in domain is not Zaraz-enabled. You can install Zaraz on your built-in domain by following this tutorial.

Comparing Cloudflare integration across CMS platforms:

Shopify: Shopify uses Cloudflare by default, but its settings are limited unless you're on a Cloudflare Enterprise plan. For merchants seeking advanced customization and traffic control, the Enterprise plan is essential as part of the O2O (Orange-to-Orange) setup. According to NerdyData, 99.5% of Shopify sites use Cloudflare, with 420,930 websites on Shopify and 419,184 of them utilizing Cloudflare.
Wix: Wix currently does not support proxied DNS records for domains connected through Cloudflare. This limitation is noted in their official support documentation.
Webflow: Integrating Cloudflare with Webflow is tricky. You may need to use a Page Rule to disable SSL on specific URL patterns, as explained here. Alternatively, you might have to forego certain features like ecommerce or user accounts, as mentioned in this tutorial.

Recommended Cloudflare Proxy Settings for Squarespace

With numerous settings available on Cloudflare, it can be overwhelming to configure everything correctly. Here are the recommended settings we use for the Squarespace websites to optimize performance and security.

Update Your Encryption Mode:

Use this to manages encryptions on two connections: one between your visitors and Cloudflare, and the other between Cloudflare and Squarespace server.

Log in to the Cloudflare dashboard, select your account and domain.
Go to SSL/TLS.
Choose an encryption mode: Full or Full (Strict) for end-to-end encryption between Cloudflare and your Squarespace server.

Caching Configuration:

Navigate to Caching > Configuration.
Activate Crawler Hints to help web crawlers index your site more effectively.

Bot Protection:

Go to Security > Bots.
Enable Bot Fight Mode to challenge requests from known bots before they access your site.
Enable Block AI Scrapers and Crawlers to prevent bots from scraping your content for AI applications.

Speed Optimization:

Go to Speed > Optimization.
For the Free Plan, enable all available settings on Recommendations.
Under Content Optimization:
- Rocket Loader: Keep off unless you know what you are doing.
- Auto Minify: This feature is deprecated; it’s best to leave it off.

Conclusion

Integrating Cloudflare with your Squarespace site offers numerous benefits, from enhanced caching and bot protection to advanced tag management with Zaraz. However, the standout feature is Cloudflare Workers, which unlocks a realm of possibilities that extend Squarespace's native functionality. With Workers, you can create custom sitemaps, implement server-side A/B testing, optimize images dynamically, and secure API calls—all without altering Squarespace’s core settings.

By leveraging Cloudflare Workers, you can significantly enhance your site’s performance, SEO, and security, making it a powerful tool to complement Squarespace’s capabilities.

Cloudflare + Squarespace = a Faster, Smarter Website

Setting up Cloudflare with Squarespace