PHPackages                             adigital/critical-css - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. adigital/critical-css

ActiveCraft-plugin[Utility & Helpers](/categories/utility)

adigital/critical-css
=====================

Generate critical css without the need for ssh access

1.0.6(5y ago)73.2k1[1 issues](https://github.com/a-digital/critical-css/issues)MITPHP

Since Aug 2Pushed 3y ago2 watchersCompare

[ Source](https://github.com/a-digital/critical-css)[ Packagist](https://packagist.org/packages/adigital/critical-css)[ RSS](/packages/adigital-critical-css/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (7)Dependencies (1)Versions (9)Used By (0)

Critical CSS plugin for Craft CMS 3.x
=====================================

[](#critical-css-plugin-for-craft-cms-3x)

Generates Critical CSS without the need for SSH access.

[![Logo](src/icon.svg "Logo")](src/icon.svg)

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 3.0.0-beta.23 or later.

Installation
------------

[](#installation)

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    ```
     cd /path/to/project

    ```
2. Then tell Composer to load the plugin:

    ```
     composer require adigital/critical-css

    ```
3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Critical CSS.

Critical CSS Overview
---------------------

[](#critical-css-overview)

This plugin is designed for Craft 3 users who don't have SSH access, or those who can't install Gulp onto their server. We would still recommend using Gulp to generate Critical CSS if you can but this tool has been made so that nobody gets left out of the party.

Configuring Critical CSS
------------------------

[](#configuring-critical-css)

Use the plugin settings page to enter your urls and templates.

Using Critical CSS
------------------

[](#using-critical-css)

Go to the CP section and generate your Critical CSS. You will then need to add the following to your templates:

### This goes into the template

[](#this-goes-into-the-template)

```
{% block criticalCss %}

		{{ source('folder/template_critical.min.css', ignore_missing = true) }}

{% endblock %}

```

Please make you that you exchange folder/template for your template path used in the plugin settings. e.g. blog/entry would be: blog/entry\_critical.min.css

### This goes into your layout

[](#this-goes-into-your-layout)

```
{% set critical = block('criticalCss') %}
{% if critical is defined and critical is not empty %}
	{{ critical|raw }}
{% endif %}

```

This code sits within the head before your stylesheets are called. You can then also add `{% if critical is not empty %}rel="preload" as="style"{% else %}rel="stylesheet"{% endif %}` to your stylesheet tags and within your JS you will need to do the following:

```
$("link[rel='preload']").each(function(){
	$(this).clone().attr("rel", "stylesheet").appendTo("head");
});

```

Please note: this is just one example of how you can get critical css up and running. There are other ways of implementing this also which can be found in various blog posts. We are just providing you with the generation of the file, how you implement it is completely up to you!

Critical CSS Roadmap
--------------------

[](#critical-css-roadmap)

Some things to do, and ideas for potential features:

- Fix generate all functionality and uncomment the button for this.

Brought to you by [A Digital](https://adigital.agency)

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance17

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~137 days

Recently: every ~206 days

Total

7

Last Release

2018d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/12661198?v=4)[A Digital](/maintainers/a-digital)[@a-digital](https://github.com/a-digital)

---

Top Contributors

[![matt-adigital](https://avatars.githubusercontent.com/u/15085874?v=4)](https://github.com/matt-adigital "matt-adigital (13 commits)")

---

Tags

cmsCraftcraftcmscraft-plugincritical css

### Embed Badge

![Health badge](/badges/adigital-critical-css/health.svg)

```
[![Health](https://phpackages.com/badges/adigital-critical-css/health.svg)](https://phpackages.com/packages/adigital-critical-css)
```

###  Alternatives

[verbb/navigation

Create navigation menus for your site.

90683.7k17](/packages/verbb-navigation)[verbb/formie

The most user-friendly forms plugin for Craft.

101372.9k40](/packages/verbb-formie)[verbb/comments

Add comments to your site.

13753.1k](/packages/verbb-comments)[verbb/tablemaker

Create customizable and user-defined table fields.

40168.8k1](/packages/verbb-tablemaker)[supercool/tablemaker

Create customizable and user-defined table fields.

40141.7k](/packages/supercool-tablemaker)[pennebaker/craft-architect

CraftCMS plugin to generate content models from JSON/YAML data.

72148.5k5](/packages/pennebaker-craft-architect)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)