Web Vitals: Fix ‘Eliminate render-blocking resources’ & ‘Reduce unused CSS’

<aside> 💡 This page contains the documentation for eliminating two Web Vitals issues related to Webflow, and that is ‘Eliminate render-blocking resources’ & ‘Reduce unused CSS’. In order to fix these 2 issues, we’ll be using Cloudflare CDN. PLEASE WATCH THE ENTIRE TUTORIAL. 📹 Video Tutorial: https://youtu.be/-0QmiBRJTec

</aside>

Step 1: Get a Cloudflare Account

The first step is to sign-up with Cloudflare and add your domain. This is a straightforward process, but in case you never used Cloudflare in the past, here’s an official tutorial on how to add your domain.

Step 2: Enable DNS Proxy

For this solution to work, you’ll have to redirect your site through Cloudflare’s servers. Once you added your domain, head over to the DNS section, and add/change the following DNS records. These are the Webflow DNS records for sites that are not using an SSL certificate. The main reason why we’re using Webflow’s non-SSL records is because Webflow’s proxy does NOT work with Cloudflare CDN.

Record Type	Record Name	Record Value
A	@ (this means the root of your domain)	23.235.33.229
A	@	104.156.81.229
CNAME	www	proxy.webflow.com

You can leave ‘Enable SSL’ on under your Webflow project Settings → Publishing. We still want Webflow to re-issue a new SSL and serve all sitemap.xml links using the HTTPS version.

Step 3: Purify CSS

Next, we need to purify the CSS file of each page on your Webflow site. Purifying a CSS means we remove any styles that won’t be used on a particular page.

<aside> ⚠️ Create a new R2 bucket under your Cloudflare & connect it to a subdomain on your site. This R2 bucket will be the drive where you’ll upload the purified versions of your CSS files.

</aside>

<aside> 💬 Here’s the tool to purify your CSS: PurifyCSS Online - Remove unused CSS Please watch the video tutorial on the top of this page.

</aside>

Copy the following <link> tag, replace the href target URL with your purified version, and paste the <link> inside your Webflow’s page settings <head> tag.

<link rel="stylesheet" href="<https://r2-bucket.domain.com/home-purified.css>">

Step 4: Create & Setup a New Worker

The next step is to enable a Cloudflare Worker which is basically a piece of code that runs every time your site loads through Cloudflare CDN. The following Worker code disables the website CSS file that Webflow generates.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Fetch the original HTML response
  const response = await fetch(request);
  const contentType = response.headers.get("Content-Type") || "";

  // Ensure we only process HTML documents
  if (!contentType.includes("text/html")) {
    return response;
  }

  let body = await response.text();

  // Isolate the <head> section from the rest of the HTML
  const headStart = body.indexOf("<head>");
  const headEnd = body.indexOf("</head>") + 7; // Include the length of </head>
  const headContent = body.substring(headStart, headEnd);

  // Remove the original Webflow CSS link from the <head> content
  const purifiedHeadContent = headContent.replace(/<link.*?href="https:\\/\\/assets-global.website-files.com\\/[^"]*\\/css\\/[^"]*\\.css".*?>/g, '');

  // Replace the original <head> with the purified <head> in the HTML
  body = body.substring(0, headStart) + purifiedHeadContent + body.substring(headEnd);

  // Return the modified response
  return new Response(body, {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers
  });
}

Once you added the code, just Deploy your Worker on your main domain. If you don’t know how to deploy a worker on your site, please watch the video tutorial at the top of this Notion page.

Step 5: Cache Your Site

Final step is to enable the Cloudflare caching. Basically, this will create a version of your web page on Cloudflare servers. Every time someone access your page, it will be served from Cloudflare. The Worker you added in ‘Step 4’ will already compile into the cached page. We recommend you set a new Page Rule inside your Cloudflare & ‘Cache Everything’ if possible. But keep in mind that every time you apply a change to your site, you’ll have to purge the cached version of that page.