Webflow uses a mono CSS approach meaning that it generates one large CSS file for the entire site.
This approach comes with tradeoffs;
- The first visit to a site is generally slower, since a large CSS file must be loaded and processed before rendering can begin
- The second visit to a site is generally faster, since that CSS is already loaded and cached
Performance metrics and SEO
This can have a negative impact on rendering speed, and SEO scores since lighthouse and core web vitals scores such as;
- Largest Contentful Paint ( LCP )
- First Contentful Paint ( FCP )
- Cumulative Layout Shift ( CLS )
- Tome to Interactive ( TTI )
- Speed Index ( SI )
To minimize the impact of the mono CSS approach, one technique is to duplicate the critical CSS into a <style> element on each page.
What is Critical CSS?
Critical CSS is the subset of CSS required to style the content visible above the fold—the part of a webpage users see without scrolling.
It’s extracted and inlined directly into the HTML <head> to allow the browser to render the visible portion of the page faster, while deferring the rest of the CSS for later.
How critical CSS helps-
- Improves Page Load Speed: Ensures key content is styled immediately, reducing perceived load times.
- Enhances User Experience: Prevents unstyled or blank content ( FOUC - Flash of Unstyled Content ) during page load.
- Optimizes for SEO: Faster rendering boosts Core Web Vitals, improving search engine rankings.
Why It Improves Performance
- The critical CSS ensures first meaningful paint (FMP) happens faster, as the browser has everything it needs to style above-the-fold content immediately.
- The rest of the CSS (from the
<link>) is used to style below-the-fold content and override or supplement critical CSS as needed after it finishes loading.
Why this Works
Webflow does not provide a means to modify the Webflow CSS link HTML, however critical CSS should improve the render-speed of your site regardless.
Here's why-
How Browsers Handle Critical CSS and Linked CSS
- Critical CSS in
<style>:- The browser processes the inline
<style>block immediately as it encounters it in the HTML. - This allows the browser to style and render above-the-fold content without waiting for the full CSS file to download.
- The browser processes the inline
- Linked CSS (
<link>):- The browser continues downloading the Webflow-generated CSS file, but this happens in parallel.
- The page rendering for visible content is not blocked, as the browser can style the above-the-fold content using the inline critical CSS.
Generating your Critical CSS
The big challenge here will be generating and updating your critical CSS.
Ideally you want a build pipeline that can generate the critical CSS for your site automatically as it changes.
Unfortunately this will be a manual process unless you use a reverse proxy.
If you do not update your site often, then a manual process should work great.
Online Tools
Critical by Addy Osmani
- A Node.js module that extracts and inlines critical-path CSS.
- Generates the CSS needed for above-the-fold content.
- GitHub: https://github.com/addyosmani/critical
PurgeCSS
- Analyzes your HTML and removes unused CSS.
- Focuses on keeping only the styles needed for rendering content.
- Website: https://purgecss.com/
Penthouse
- Generates critical CSS for a web page by rendering it in a headless browser.
- Ideal for use in automated workflows.
- GitHub: https://github.com/pocketjoso/penthouse
CriticalCSS
- A service that generates critical CSS for any webpage.
- Website: https://criticalcss.com/
Automated Workflows
Critical CSS Extractor Tools
Integrate tools like Critical or Penthouse into your build pipeline using Gulp, Grunt, or custom Node.js scripts. These tools automatically extract and inline critical CSS during the build process.
Example: Using critical with Gulp
const gulp = require('gulp');
const critical = require('critical').stream;
gulp.task('critical', () => {
return gulp.src('index.html')
.pipe(critical({ base: 'dist/', inline: true, css: ['styles.css'] }))
.pipe(gulp.dest('dist'));
});
Important Caveats
Whatever method you use, you'll want to ensure that your critical CSS is current.
If you change your site, add classes to your hero, etc- it will be essential to regenerate your critical CSS.
Out-of-sync critical CSS can cause issues like;
- Duplicate CSS Rules:
- Ensure that critical CSS doesn't include rules unrelated to above-the-fold content, as duplication may increase the total size of your HTML unnecessarily.
- FOUC Risk for Non-Critical Styles:
- If the Webflow CSS modifies above-the-fold styles after loading, you might experience a brief flash of unstyled or mismatched content (FOUC).
- CSS Loading Behavior:
- The browser will not defer rendering for the above-the-fold content, but fully rendering the page still depends on the Webflow CSS file.
Other Tools & Techniques
These may be suitable approaches for identifying the critical CSS for a smaller project.
Chrome Extensions
CSS Used
- A Chrome extension that shows which CSS rules are being used on a webpage.
- Download: CSS Used
Unused CSS
- Helps identify unused CSS, making it easier to pinpoint what’s critical for above-the-fold content.
- Download: Unused CSS
Manual Extraction
- Open the webpage in your browser.
- Use DevTools to inspect the content visible above the fold.
- Copy relevant CSS rules from the loaded stylesheets into a new stylesheet.
Reverse Proxy
In a Webflow-hosted site, the ideal way to do this would be using a reverse proxy to build/adapt a service like WP Rocket to Webflow.
Delaying the load of Webflow.css
Even in a limited case, you could further improve the handling of critical CSS, by delaying the load of Webflow's own CSS slightly, using a technique like this one-
<link rel="stylesheet" href="webflow.css" media="print" onload="this.media='all';">
