Kigo Studio
Critical CSSGenerator to SpeedUp Your Site
Extract the minimal CSS needed to render above-the-fold content. Improve page speed, Core Web Vitals, and search rankings with properly optimized Critical CSS.
Generated CSS
How to Use Your Critical CSS
Step 1: Inline Critical CSS
Paste the generated CSS inside a <style> tag within the <head> of your HTML document. Place it high up, before any other stylesheets or blocking scripts.
Remember you might need to change references to images or other assets
<style>
/* Critical CSS for your page */
/* ... Critical CSS will appear here ... */
</style>Step 2: Load Non-Critical CSS (Simple)
Place your original non-critical CSS <link> tags just before the closing </body> tag. This allows the browser to render the initial content styled by the critical CSS first. Remember to remove these same links from your <head>!
<html>
...
<body>
...
<link rel="stylesheet" href="/css/vendors.min.css"> // Example
<link rel="stylesheet" href="/css/style.min.css"> // Example
</body>
</html>Step 3 (Optional): Defer with JavaScript
Alternatively, for potentially more optimized loading (especially on slow connections), use JavaScript in the <head> to load non-critical styles after the page content loads. Use this instead of Step 2. Update the stylesheets array and ensure the original links are removed from <head>.
window.addEventListener("DOMContentLoaded", function () {
console.log("Page loaded, now loading non-critical stylesheets...");
// --- Define your non-critical stylesheets here ---
let stylesheets = [
// "/css/vendors.min.css", // Example
// "/css/style.min.css", // Example
// Add all stylesheets that are NOT critical css
];
// ----------------------------------------------
let loadedCount = 0;
function checkAllStylesLoaded() {
loadedCount++;
if (loadedCount === stylesheets.length) {
console.log("All non-critical stylesheets loaded...");
}
}
stylesheets.forEach(function (href) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = href;
link.onload = checkAllStylesLoaded;
link.onerror = () => console.warn("Failed to load stylesheet: " + href);
document.head.appendChild(link);
});
});Frequently Asked Questions
What is Critical CSS?
Critical CSS refers to the minimal set of CSS rules required to render the visible portion of a webpage (above the fold). By extracting and inlining this CSS into your HTML, the browser can render content faster without waiting to load all stylesheets, improving performance and Core Web Vitals like First Contentful Paint (FCP).
How does the Critical CSS Generator work?
Our tool uses a headless browser to load your page, analyze which elements are visible in the specified viewport, extract their styles from all CSS resources, and compile a minimal set of CSS rules needed to display the above-the-fold content. You can customize viewport dimensions, rendering wait time, and JavaScript handling.
Why should I use Critical CSS?
Critical CSS significantly improves page load performance by eliminating render-blocking CSS and allowing the browser to display content faster. Benefits include faster perceived load times, better Core Web Vitals scores (especially FCP and LCP), improved SEO rankings, and better user experience, particularly on mobile or slow connections.
How do I implement Critical CSS on my website?
To implement Critical CSS, add the generated CSS inside a
<style>tag in the<head>of your HTML documents. Then, load your regular stylesheets either at the end of the body (simple approach) or with JavaScript that loads them after the page content is rendered (advanced approach). Our tool provides code snippets for both methods.