The Best Configuration for Cloudflare to Get Top Scores in LCP, TBT, and Web Vital For Your Shop

Web performance is a critical factor in creating a seamless shopping experience for your customers. In this article, I’ll show you how to achieve top scores in Web Vitals like Largest Contentful Paint [LCP] and Total Blocking Time [TBT] with Cloudflare. These configurations range from simple tweaks to advanced optimizations.

Before diving in, take a moment to evaluate your website’s current performance using a tool like Google PageSpeed Insights. This will help you track the improvements after applying these settings.

Why Web Vitals Matter

Web Vitals measure key aspects of user experience. Here’s a quick overview of the most critical metrics we’ll focus on:

By optimizing your Cloudflare settings, you can significantly boost these scores, leading to a faster and more engaging experience for your visitors.

Step 1: Set Up Your Domain on Cloudflare and Enable CDN

To start optimizing your website’s performance with Cloudflare, you’ll first need to ensure your domain is properly set up on their platform and that the CDN (Content Delivery Network) feature is enabled.

How to Enable Cloudflare CDN

1. Log in to your Cloudflare account and select your domain.
2. Navigate to the DNS section.
3. Under the DNS Records, locate your domain’s A or CNAME record.
4. Click the orange cloud icon next to the record to enable the Proxy Cloud feature. When enabled, the icon will turn bright orange, signaling that your domain is now routed through Cloudflare’s CDN.

Special Note for Selldone Users

If you’re using Selldone, you’ll need to configure your domain correctly to integrate with Cloudflare’s CDN. This ensures that Selldone’s external CDN works seamlessly with your site, delivering cached content efficiently while maintaining compatibility with Selldone’s platform.

1. Set up your custom domain in Selldone’s dashboard.
2. Ensure the external CDN is pointed to Cloudflare by correctly configuring your DNS records.
3. Confirm that Cloudflare's settings are fully activated, including the Proxy Cloud status.These steps will ensure that your Selldone-powered website takes full advantage of Cloudflare’s performance-boosting features.

Step 2: Cloudflare's Speed Test Feature

Cloudflare offers a built-in Speed Test tool that provides valuable insights into your website’s performance. This feature measures key metrics like loading time, responsiveness, and overall speed improvements after implementing Cloudflare’s services.

Step 3: Enable Real-Time User Insights in Cloudflare

Understanding your users' behavior in real-time is crucial for optimizing their experience on your website. Cloudflare’s Real-Time User Insights (RUN) feature allows you to track live data on how visitors interact with your site, providing actionable metrics to improve performance and usability.

Step 4: Enable All Optimization Features in Cloudflare

To maximize the performance of your website, enable the optimization features available in Cloudflare under the Speed tab. These features are designed to improve load times, reduce bandwidth usage, and enhance the overall user experience effortlessly.

Some of the most important features to speed up the site need PRO license.

Make sure to enable “Cloudflare Fonts” and “Rocket Loader”

Step 5: Immediate Results with Cloudflare Free Plan

Even on the Cloudflare Free Plan, you can see significant performance improvements by enabling the right features. I applied these optimizations to marketplace.hanscristy.com, and the results were immediate. The changes not only improved Web Vitals metrics like LCP and TBT but also enhanced the overall user experience.

Step 6: How Cloudflare and Selldone Optimizations Affect Real-Life Performance

Let me walk you through how Cloudflare’s optimizations and Selldone’s dedicated technologies combine to create unparalleled performance, even in challenging testing scenarios.

Understanding the Challenges with Performance Tests

Tools like Lighthouse, GTmetrix, and similar platforms are primarily designed for static pages or websites that render content on the server side. However, Selldone operates differently:

• 100% PWA: Every aspect of Selldone’s platform—its main website, dashboard, storefront, and more—is built as a Progressive Web App (PWA). This means that all rendering happens on the client side, offering users immense flexibility to design custom dashboards and storefronts.
• Dynamic Domain Loading: Users can load Selldone on any domain without worrying about implementing a complex backend. The system handles everything dynamically, delivered as a single JavaScript file.

This unique approach offers flexibility and speed but creates unique challenges when tested with tools designed for server-rendered pages.

Why Selldone Is 10–100x Faster in Real Life

While static pages rely on the server to render HTML for each user request, Selldone’s PWA approach is fundamentally different:

Efficient Data Fetching:

• Instead of rendering entire pages on the server, Selldone sends a lightweight JSON structure containing the required data.
• For example, when a user clicks on a product, the platform fetches only the necessary data (like product details) instead of reloading or rendering the entire page.

No Server-Side Rendering Delays:

• Unlike platforms like WooCommerce, where each click can trigger server-side rendering, Selldone eliminates this bottleneck entirely. Everything is handled client-side, drastically reducing latency.

Real-Time Speed Advantage:

• Users experience near-instant page transitions. This real-life speed makes the platform feel significantly faster compared to server-rendered websites, even if traditional test scores don’t fully reflect the advantage.

Breaking Through the Tech Bottleneck

Achieving high test scores for client-side-rendered PWAs has historically been a challenge due to:

• JS Execution Delays: Client-side rendering depends heavily on JavaScript, which testing tools often penalize.
• Dynamic Content: Unlike static HTML, dynamic content loading can appear slower in synthetic tests.

But Selldone has overcome these limitations for the first time on the internet by combining:

• Cloudflare’s optimizations (like Rocket Loader™ and Brotli Compression) to streamline asset delivery.
• Advanced PWA architecture for real-time data fetching and rendering.

Real-World Performance vs. Synthetic Scores

While synthetic tests might show lower scores for client-rendered platforms like Selldone, real-world performance tells a different story. Selldone’s dashboard and storefront offer a 10–100x faster experience compared to server-rendered platforms, making it the ideal solution for modern ecommerce needs.

If you'd like to mirror the Cloudflare settings we use for optimal performance, here’s a list of the enabled features:

Web Performance Terms

Here’s a friendly and easy-to-understand explanation of web performance terms in Web Vitals:

LCP (Largest Contentful Paint)

LCP measures how long it takes for the largest visible part of a webpage (like a big image or headline) to load and be seen by users. Think of it as the time it takes for your page to feel “ready” to start reading or interacting with.

CLS (Cumulative Layout Shift)

CLS tracks how much things move around unexpectedly on a webpage while it’s loading. For example, if a button shifts position right when you’re about to click it—that’s a layout shift. A low CLS score means your site feels stable and smooth.

INP (Interaction to Next Paint)

INP measures how quickly your webpage reacts to user interactions, like clicking a button or typing in a search bar. A faster INP means your site feels responsive and users won’t feel frustrated waiting for actions to happen.

TBT (Total Blocking Time)

TBT calculates the time your page is unresponsive while loading, like when a user tries to scroll or click but nothing happens. Lower TBT means your page is better at multitasking, letting users interact smoothly while it loads.