PHPackages                             tallowandsons/craft-critter - 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. tallowandsons/craft-critter

ActiveCraft-plugin

tallowandsons/craft-critter
===========================

Automatically generates and inlines Critical CSS for Craft CMS to improve frontend performance.

1.1.0(6mo ago)125[11 issues](https://github.com/tallowandsons/craft-critter/issues)proprietaryPHPPHP >=8.2CI passing

Since Jul 1Pushed 6mo ago1 watchersCompare

[ Source](https://github.com/tallowandsons/craft-critter)[ Packagist](https://packagist.org/packages/tallowandsons/craft-critter)[ Docs](https://github.com/tallowandsons/craft-critter)[ RSS](/packages/tallowandsons-craft-critter/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (6)Dependencies (3)Versions (12)Used By (0)

[![Banner](./docs/img/banner.png)](./docs/img/banner.png)

Critter for Craft CMS
=====================

[](#critter-for-craft-cms)

**Supercharge your site's performance** with automatic critical CSS generation. Critter intelligently inlines the CSS needed for above-the-fold content, delivering improved performance and exceptional user experiences.

🔧 Quick Start
-------------

[](#-quick-start)

### 1. Install Critter

[](#1-install-critter)

You can install Critter by searching for “Critter” in the Craft Plugin Store, or install manually using composer.

```
composer require tallowandsons/craft-critter
```

### 2. Configure Your Generator

[](#2-configure-your-generator)

Critter comes pre-configured with the **criticalcss.com** cloud-based generator. To get started, you'll need to configure your API key:

1. Sign up for an account at [criticalcss.com](https://criticalcss.com)
2. Get your API key from your account dashboard
3. In Craft, go to **Critter → Settings → General → Generator**
4. Enter your API key in the generator settings

#### CLI Generator (Local Development Only)

[](#cli-generator-local-development-only)

Alternatively, Critter also includes a CLI-based generator that uses the `@plone/critical-css-cli` npm package to generate critical CSS locally on your server. There are setup instructions further down this readme.

ℹ️ You can also implement your own custom generator if you have specific requirements.

### 3. Celebrate 🎉

[](#3-celebrate-)

You've successfully set up Critter! Open a web page and keep your eye on the queue as Critter automatically generates and inlines the critical CSS for your entries.

Why Choose Critter?
-------------------

[](#why-choose-critter)

### Minimal-Configuration Critical CSS

[](#minimal-configuration-critical-css)

Critter comes ready to use with the [criticalcss.com](https://criticalcss.com) API pre-configured. Simply add your API key and you're ready to generate critical CSS - no template changes or complicated configuration required.

### Flexible Generation Modes

[](#flexible-generation-modes)

Generate a unique critical CSS file for each individual Entry (Entry Mode) or a shared critical CSS file for all entries in a Section (Section Mode).

### Robust & Reliable

[](#robust--reliable)

Critical CSS generation jobs are queued and processed in the background, and failed jobs are automatically retried.

### ⚡ Blitz Integration

[](#-blitz-integration)

Critter plays nicely with the [Blitz](https://putyourlightson.com/plugins/blitz) static caching plugin. Automatically clear, expire, and refresh the Blitz cache when a page's critical CSS changes.

### Advanced Configuration

[](#advanced-configuration)

Fine-tune every aspect: per-section settings, custom tag attributes, query parameter handling, viewport dimensions, and base URL overrides for staging environments.

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

[](#requirements)

This plugin requires Craft CMS 5.5.0 or later, and PHP 8.2 or later.

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

[](#installation)

To install the plugin, search for “Critter” in the Craft Plugin Store, or install manually using composer.

```
composer require tallowandsons/craft-critter
```

⚙️ Configuration
----------------

[](#️-configuration)

### 🔄 Auto Render Mode

[](#-auto-render-mode)

#### Automatic Rendering (Default)

[](#automatic-rendering-default)

Critter automatically detects when critical CSS is needed and handles generation and rendering seamlessly. Perfect for most use cases.

#### Manual Rendering

[](#manual-rendering)

For advanced control, disable Auto Render and call the render method manually:

```

    {{ craft.critter.render() }}

```

### Generator Setup

[](#generator-setup)

Critter comes pre-configured with the [criticalcss.com](https://criticalcss.com) API for cloud-based critical CSS generation. This service requires no server dependencies and operates on a pay-per-domain model.

To get started, simply configure your API key in the plugin settings under **Critter → Settings → General → Generator**. You can also adjust options for viewport dimensions and other generation parameters.

#### CLI Generator (Local Development Only)

[](#cli-generator-local-development-only-1)

Critter also includes a CLI-based generator that uses the `@plone/critical-css-cli` npm package to generate critical CSS locally on your server.

⚠️ **Development Only** - The CLI Generator is intended for local development and testing and isn't recommended for production use.

**Setup:**

1. In config/critter.php, set the `generatorType` to `\tallowandsons\critter\generators\CriticalCssCliGenerator::class`
2. In Craft admin, go to **Critter → Settings → General → Generator**
3. Follow the instructions to install the required npm packages.

**Important Limitations:**

This is not recommended for production use for the following reasons:

- ⚠️ **Performance impact** - uses your local server resources to generate critical CSS
- ⚠️ **Server dependencies** - requires Node.js and npm packages to be maintained
- ⚠️ **Security considerations** - executes shell commands on your server

For production sites, we recommend using the criticalcss.com API generator instead.

ℹ️ If you have specific requirements, you can implement your own generator by writing a class that extends the `BaseGenerator` and registering it with Critter.

### Cache Configuration

[](#cache-configuration)

Since critical CSS is generated in a queue, pages may have been cached with outdated or no critical CSS.

The cache integrations allow you to configure how Critter interacts with your caching layer.

Critter comes with built-in support for the [Blitz](https://putyourlightson.com/plugins/blitz) static caching plugin, which allows you to automatically clear, expire, or refresh the Blitz cache when critical CSS changes.

You can also implement your own cache driver by writing a class that extends the `BaseCache` and registering it with Critter.

### Per-Section Configuration

[](#per-section-configuration)

Over in Settings → Sections, you can configure how critical CSS is generated for each section of your site.

Each section can be configured to generate either unique critical CSS for each entry (Entry mode) or shared critical CSS for all entries in the section (Section mode).

This allows you to optimise performance based on the layout consistency of your entries, as it might be computationally (and financially) expensive to generate unique critical CSS for every single entry on a large site.

Over in Critter → Sections, you can also configure which entry should be used as the representative entry for each section. If this is left blank, the first entry to be visited by a user will be used as the representative entry for that section.

Extending
---------

[](#extending)

### Bring Your Own Generator

[](#bring-your-own-generator)

You can implement your own critical CSS generator by writing a class that extends the `BaseGenerator` and registering it with Critter.

```
class PinkGenerator extends BaseGenerator
{
    protected function getCriticalCss(UrlModel $urlModel): GeneratorResponse
    {
        $css = '* { color: pink; }';

        return (new GeneratorResponse())
            ->setSuccess(true)
            ->setCss(new CssModel($css));
    }
}
```

Then register your generator using the `RegisterGeneratorsEvent` event

```
Event::on(
    GeneratorHelper::class,
    GeneratorHelper::EVENT_REGISTER_GENERATORS,
    function(RegisterGeneratorsEvent $event) {
        $event->generators[] = PinkGenerator::class;
    }
);
```

### Bring Your Own Static Cache Driver

[](#bring-your-own-static-cache-driver)

You can implement your own static cache driver by writing a class that extends the `BaseCache` and registering it with Critter.

```
class MyCustomStaticCache extends BaseCache
{
    public function resolveCache(UrlModel|array $urlModels): void
    {
        // Custom logic to clear the cache for the provided URLs
        AnotherStaticCachingPlugin::getInstance()->clearCacheForUrls($urlModels);
    }
}
```

Then register your cache driver using the `RegisterCacheEvent` event

```
Event::on(
    CacheHelper::class,
    CacheHelper::EVENT_REGISTER_CACHES,
    function(RegisterCachesEvent $event) {
        $event->caches[] = MyCustomStaticCache::class;
    }
);
```

License
-------

[](#license)

This plugin requires a commercial license purchasable through the Craft Plugin Store.

Credits
-------

[](#credits)

Made with care and attention by [Tallow & Sons](https://github.com/tallowandsons)

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance51

Moderate activity, may be stable

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 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 ~16 days

Total

6

Last Release

193d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/461f20fd602df45fdcd0e1ba528cb93b0ce32cd6ebc09cbda6cb0b77ea8c595b?d=identicon)[mijewe](/maintainers/mijewe)

---

Top Contributors

[![mijewe](https://avatars.githubusercontent.com/u/1457786?v=4)](https://github.com/mijewe "mijewe (203 commits)")

---

Tags

cssperformancecmsoptimizationfrontendCraftcraftcmscraft-plugincritical csstallowandsonsinline-csscritter

### Embed Badge

![Health badge](/badges/tallowandsons-craft-critter/health.svg)

```
[![Health](https://phpackages.com/badges/tallowandsons-craft-critter/health.svg)](https://phpackages.com/packages/tallowandsons-craft-critter)
```

###  Alternatives

[doublesecretagency/craft-cpcss

Add custom CSS to your Control Panel.

117454.0k9](/packages/doublesecretagency-craft-cpcss)[nystudio107/craft-seomatic

SEOmatic facilitates modern SEO best practices & implementation for Craft CMS 5. It is a turnkey SEO system that is comprehensive, powerful, and flexible.

1741.4M46](/packages/nystudio107-craft-seomatic)[verbb/image-resizer

Resize assets when they are uploaded.

127269.1k7](/packages/verbb-image-resizer)[doublesecretagency/craft-cpbodyclasses

Adds special classes to the Control Panel's <body> tag.

2437.3k](/packages/doublesecretagency-craft-cpbodyclasses)[verbb/tablemaker

Create customizable and user-defined table fields.

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

A user-friendly links field for Craft.

24130.9k9](/packages/verbb-hyper)

PHPackages © 2026

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