Docschevron_rightCritical CSSchevron_rightCSS Presets — Viewport & Extraction Settings
styleCritical CSS

CSS Presets — Viewport & Extraction Settings

CSS Presets in PerfBee allow you to save and reuse your preferred Critical CSS extraction configurations. Choose from four system presets optimized for different website types, or create your own custom settings.

schedule2 min readupdateUpdated Mar 9, 2026

CSS Presets — Viewport & Extraction Settings

PerfBee's Critical CSS feature allows you to automatically extract and inline above-the-fold CSS for improved web performance. CSS Presets simplify this process by saving your preferred extraction configurations, including viewport dimensions and optimization settings. This article explains the available presets and how to create your own.

What are CSS Presets?

CSS Presets are pre-defined or custom configurations for extracting Critical CSS. They bundle together specific viewport sizes (mobile and desktop) and optimization settings to tailor the extraction process for different website types and content.

System Presets

PerfBee offers four built-in system presets designed to suit common website architectures:

  • Default: Best for general websites. Mobile: 375x667, Desktop: 1920x1080. Settings: Extract inline styles.
  • E-Commerce: Optimized for online stores. Mobile: 375x812, Desktop: 1440x900. Settings: Minify, Ignore imports.
  • Blog/Content: Tailored for blogs and content-rich sites. Mobile: 390x844, Desktop: 1280x800. Settings: Minify, Ignore keyframes.
  • Landing Page: Ideal for landing pages and marketing sites. Mobile: 375x667, Desktop: 1920x1080. Settings: Minify, Ignore keyframes, Ignore imports.

Preset Settings Explained

Each preset utilizes different settings to optimize the Critical CSS extraction:

  • Minify: Compresses the CSS output, reducing file size.
  • Extract Inline Styles: Includes inline style attributes in the extracted CSS.
  • Ignore Keyframes: Skips @keyframes rules, potentially reducing file size.
  • Ignore Imports: Skips @import rules.

Creating and Saving Custom Presets

You can customize the CSS extraction process by creating your own presets:

  1. Navigate to the PerfBee Dashboard and select the Critical CSS tab.
  2. Configure your desired viewport sizes (mobile and desktop) and optimization settings.
  3. Click the "Save" or similar button to create and save the new preset.
  4. Your custom preset will then be available for future Critical CSS extractions.

System presets cannot be deleted.

For more information on PerfBee's features, visit our documentation.

arrow_backBack to DocsmailWas this helpful? Contact support