.critical-css { }
@media screen
performance++
{ optimize: true }

Frequently Asked Questions

Find answers to common questions about our service

How does the generator work under the hood?

Technical

We use a cluster of headless Chromium browsers controlled by Puppeteer. When you submit a URL, we render the page, execute JavaScript, and capture the computed styles for all visible elements.

0 views 0 helpful

Do you support JavaScript-rendered content?

Technical

Yes. Because we use a real browser engine, we execute your JavaScript before extracting CSS. This means we can capture styles for elements that are dynamically added to the DOM.

0 views 0 helpful

How are external fonts handled?

Technical

We recommend preloading critical fonts. Our tool focuses on the CSS rules. You should ensure your `@font-face` definitions are included in the critical CSS or loaded efficiently to avoid FOUT/FOIT.

0 views 0 helpful

Does it support CSS variables (Custom Properties)?

Technical

Yes, we preserve CSS variables that are used in the critical path. This ensures your theming and dynamic colors remain consistent.

0 views 0 helpful

What about media queries?

Technical

We extract all media queries that apply to the critical viewport. This ensures your site remains responsive even with just the critical CSS loaded.

0 views 0 helpful

Can I customize the viewport size?

Technical

Our API allows you to specify custom viewport dimensions if you have specific requirements. By default, we test standard mobile and desktop resolutions.

0 views 0 helpful

How do you handle cookie banners?

Technical

Cookie banners often appear above the fold. Our generator usually captures their styles so they render correctly. If they are blocking the view, you might want to exclude them via custom CSS.

0 views 0 helpful

Does it work with Shadow DOM?

Technical

Shadow DOM styles are encapsulated. We do our best to extract styles, but deep Shadow DOM implementations might require manual tuning depending on your architecture.

0 views 0 helpful

What user agent does the crawler use?

Technical

We use a standard Chrome user agent. If your firewall blocks bots, you may need to whitelist our service IP or User Agent string.

0 views 0 helpful

How do I handle the "Flash of Unstyled Content" (FOUC)?

Technical

By inlining the Critical CSS in the `<head>`, the browser can paint the content immediately. This eliminates FOUC for the critical area.

0 views 0 helpful

How does the generator work?

Technical

Our generator analyzes your URL using a headless browser to determine exactly which styles are applied to the visible elements within the viewport. It then extracts these styles and generates a minified CSS block for you to use.

0 views 1 helpful

Still need help?

Can't find what you're looking for? Our support team is here to help.

Create Support Ticket