Extracting Critical CSS for a Single URL

This guide explains how to extract critical CSS for a single URL using PerfBee. This feature helps you optimize your website's performance by identifying and inlining the CSS needed to render the above-the-fold content, improving your Core Web Vitals (especially LCP).

How to Extract Critical CSS

Follow these steps to extract critical CSS for a single URL:

Navigate to the Critical CSS tab in your PerfBee dashboard.
Enter the URL of the page you want to analyze in the designated field.
Select a Preset. Choose the viewport sizes you want to use for the extraction. PerfBee supports mobile (375×667) and desktop (1920×1080) viewports.
Click "Extract". PerfBee will then render the page in a headless Chromium browser using the selected viewport.
Review the Results. Once the extraction is complete, you'll see the following:
- Extracted CSS String: The critical CSS code itself.
- Size in Bytes: The size of the extracted CSS, which helps you understand its impact.
- Visual Similarity Score: A score from 0-100% indicating how closely the page with only the critical CSS inlined resembles the fully rendered page. A score of 85% or higher generally means the page looks correct with only the critical CSS.
Copy the CSS: Use the provided copy button to copy the extracted CSS to your clipboard.
Implement the CSS: Add the extracted CSS to your website's `` section, ideally above the fold, to improve rendering performance.

Understanding the Results

PerfBee uses a headless browser to render the page, extract the necessary CSS, and calculate the visual similarity. The extracted CSS is the minimum CSS required to render the visible content above the fold. The visual similarity score helps you assess the quality of the extraction. A higher score means a more accurate extraction.

Credit Cost

Extracting critical CSS for a single URL costs 1 credit per URL. Your current credit balance is always visible in the top-right corner of your PerfBee dashboard. Remember that credits reset monthly on your billing date.

For more information, visit our documentation.