Find answers to common questions about our service
Critical CSS is the CSS required to render the "above-the-fold" content of your page. By inlining this CSS, you eliminate render-blocking resources and significantly improve First Contentful Paint (FCP).
A low score is often caused by render-blocking CSS and JavaScript. Our generator extracts the critical styles needed for the initial view, allowing you to defer the rest, which boosts your Core Web Vitals.
Yes, our generator works with any public URL. Whether you use WordPress, Shopify, Magento, or a custom stack (React, Vue, Laravel), we can extract the Critical CSS.
Above the fold refers to the portion of a webpage that is visible without scrolling. Optimizing this area is crucial for perceived performance and user retention.
Ideally, yes. Different pages (Homepage, Product Page, Blog Post) have different layouts and styles. For the best results, you should generate specific Critical CSS for each template type.
You should regenerate it whenever you make significant design changes to your site. If you change colors, fonts, or layout structures, your Critical CSS needs to be updated.
No. Critical CSS is just a subset of your existing styles. The full stylesheet is still loaded asynchronously to style the rest of the page as the user scrolls.
Critical CSS is what is *needed* immediately. Unused CSS is code that is never used on a page. Our tool focuses on extracting what is needed, which implicitly helps you identify what is critical versus non-critical.
Yes! Our generator analyzes your site on both desktop and mobile viewports to ensure the generated CSS works perfectly across all devices.
Dedicated generators often provide more accurate results than generic plugins because we use a full headless browser engine to render your page exactly as a user sees it.
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.
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.
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.
Yes, we preserve CSS variables that are used in the critical path. This ensures your theming and dynamic colors remain consistent.
We extract all media queries that apply to the critical viewport. This ensures your site remains responsive even with just the critical CSS loaded.
Our API allows you to specify custom viewport dimensions if you have specific requirements. By default, we test standard mobile and desktop resolutions.
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.
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.
We use a standard Chrome user agent. If your firewall blocks bots, you may need to whitelist our service IP or User Agent string.
By inlining the Critical CSS in the `<head>`, the browser can paint the content immediately. This eliminates FOUC for the critical area.
Paste the generated CSS into a `<style>` tag in the `<head>` section of your HTML. Then, load your main stylesheet asynchronously using `rel="preload"` or a script.
We provide a PHP library and API documentation that can be easily integrated into WordPress themes or custom plugins. Many caching plugins also accept custom Critical CSS.
Yes. You can manually add the Critical CSS to your `theme.liquid` file. We are also working on a dedicated Shopify app for easier integration.
You can use our API in your build process. Create a script that calls our API after your build finishes and saves the response to your critical CSS files.
Yes. If you use Cloudflare, you can still use our Critical CSS. In fact, combining Critical CSS with Cloudflare's caching delivers the ultimate performance.
Your main stylesheet (style.css) should be loaded with `<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">` to prevent it from blocking rendering.
Yes. For SPAs (Single Page Applications), you can inline the Critical CSS in your `index.html`. This helps show a shell/loading state instantly while your JS bundle loads.
Use Google PageSpeed Insights or Lighthouse. You should see the "Eliminate render-blocking resources" warning disappear and your FCP time decrease.
Our generator combines styles from all your linked CSS files into one optimized critical block. You don't need to worry about merging them beforehand.
Absolutely. Our API is designed for automation. You can set up a cron job or a webhook to regenerate Critical CSS whenever you deploy new code.
Yes, we offer a robust REST API for Pro and Enterprise users. You can generate Critical CSS programmatically for thousands of pages.
Yes, our dashboard provides a preview feature where you can see exactly how your page looks with only the Critical CSS applied, before you deploy it.
Our infrastructure is fully HTTP/2 compliant, ensuring fast delivery of API responses and assets.
Enterprise plans include bulk generation tools that allow you to submit a sitemap and generate Critical CSS for your entire site at once.
Yes, we keep a history of your recent jobs in the dashboard. You can view, copy, or regenerate CSS from previous jobs.
For Enterprise customers, we offer IP whitelisting to ensure secure access to your internal staging environments.
If your site uses media queries for dark mode (`prefers-color-scheme`), our generator will preserve those rules so your dark mode works instantly.
Critical CSS focuses on screen media. Print styles are typically non-critical and should remain in your main stylesheet.
Our advanced options allow you to manually exclude or force-include specific CSS selectors if the automatic detection misses something.
Yes, all generated Critical CSS is automatically minified to ensure the smallest possible payload size for your HTML.
The Free plan allows for 5 generations per month. It is perfect for testing or for small personal websites with infrequent updates.
You can upgrade anytime from your Dashboard. Changes are instant, and you will immediately get access to higher limits and API features.
We offer a 14-day money-back guarantee if you are not satisfied with the service. Contact support for assistance.
Yes, there are no long-term contracts. You can cancel your subscription at any time from your account settings.
If you reach your limit, API requests will return a 429 status code. You can upgrade your plan or wait for the next billing cycle.
Yes! If you need to generate CSS for millions of pages or have high-concurrency needs, contact us for a custom Enterprise quote.
We use Stripe for all payment processing. We do not store your credit card information on our servers.
Yes, invoices are automatically generated and sent to your email. You can also download them from the Billing section in your dashboard.
Yes, we offer a 20% discount if you choose annual billing instead of monthly billing.
You can request account deletion from the Settings page. Please note that this action is irreversible and will remove all your data.
Critical CSS is the minimum set of CSS required to render the above-the-fold content of a web page. By inlining this CSS, you can significantly improve the First Contentful Paint (FCP) and perceived performance of your website.
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.
Yes! You can use the generated CSS in WordPress by adding it to your theme's header or using a caching plugin that supports Critical CSS insertion.
Absolutely. Our generator checks both desktop and mobile viewports to ensure your site looks great and loads fast on all devices.
API limits depend on your subscription plan. Free users get 5 requests per month, while Pro and Enterprise plans offer significantly higher limits. Check the Pricing page for details.
Can't find what you're looking for? Our support team is here to help.
Create Support Ticket