11ty Logo

Eleventy Edge: Critical CSS

← Return to the Full list of Eleventy Edge Demos

Critical CSS rendered on the edge for empty-cache visits and further optimized for repeat views with a full cache.

Are you new here??

You are a empty-cache first-time visitor.

For testing: Reload this page.

Check the network tab on your browser’s devtools (make sure the Disable cache preference is not checked). You received a <style> block and a lowest priority <link rel="stylesheet" media="print" href="/static/style.css"> request for repeat views. Add onload="this.media='all'" if you want to apply your asynchronous stylesheet immediately (e.g. it contains CSS for below-the-fold components).


Learn more on 11ty.dev: Eleventy Edge Plugin documentation

Source Code

Loader code in _includes/layout.liquid

<head>
<!-- … -->
{%- capture criticalCss %}
{% include "css/style.css" %}
{% include "css/theme.css" %}
{% include "css/form-autosubmit.css" %}
{% endcapture %}

{% edge "liquid" criticalCss %}
{% if eleventy.edge.cookies.repeat %}
<link rel="stylesheet" href="/static/style.css">
{% else %}
<style>{{ _ }}</style>
<link rel="stylesheet" href="/static/style.css" media="print" onload="this.media='all'">
{% endif %}
{% endedge %}
<!-- … -->
</head>

Improvements:

Edge Function

Sets the cookie to track repeat views and the ?repeat-reset query param to delete the cookie.

./netlify/edge-functions/repeat.js