Use critical CSS in Statamic 3

veröffentlicht am 29.6.2021

In this post we show you, how you use critical CSS in your Statamic 3 website

15193888_s-1623922191.jpg

This is part two of our series. In part one we explained what critical CSS is and how to Generate critical CSS for your website with node. In this part we show you

How to inline critical CSS in Statamic 3?

First download and install the Add-On Inline Assets from developer octoper.

Create a new tag file App/Tags/Templatename.php:

<?php

namespace App\Tags;

use Statamic\Tags\Tags;

class Templatename extends Tags
{
    /**
     * The  tag.
     *
     * @return string|array
     */
    public function index()
    {
      $url = $this->params->get('name');
      return basename($url);
    }
}

Insert this code in the <HEAD> section of your main.antlers.html:

<style>

{{ inlineassets:css src="pathToCriticalCss/{ templatename name='{currenttemplate}' }_critical.min.css" ignore-missing="true" }}

</style>

<link rel="stylesheet" href="pathTo/normal.css" media="print" onload="this.media='all'">

Thats it. Now you got fast loading not render-blocking critical CSS.

If you are missing something or have questions please write us.

Statamic CSS