包简介

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

README 文档

README

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

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

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

Sign up for an account at criticalcss.com
Get your API key from your account dashboard
In Craft, go to Critter → Settings → General → Generator
Enter your API key in the generator settings

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 🎉

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?

Minimal-Configuration Critical CSS

Critter comes ready to use with the 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

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

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

⚡ Blitz Integration

Critter plays nicely with the Blitz static caching plugin. Automatically clear, expire, and refresh the Blitz cache when a page's critical CSS changes.

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

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

Installation

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

composer require tallowandsons/craft-critter

⚙️ Configuration

🔄 Auto Render Mode

Automatic Rendering (Default)

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

Manual Rendering

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

<head>
    {{ craft.critter.render() }}
    <!-- Your other head content -->
</head>

Generator Setup

Critter comes pre-configured with the 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)

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:

In config/critter.php, set the generatorType to \tallowandsons\critter\generators\CriticalCssCliGenerator::class
In Craft admin, go to Critter → Settings → General → Generator
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

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 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

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

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

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

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

Credits

Made with care and attention by Tallow & Sons

tallowandsons/craft-critter 适用场景与选型建议

tallowandsons/craft-critter 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 25 次下载、GitHub Stars 达 1，最近一次更新时间为 2025 年 08 月 06 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「performance」「css」「cms」「optimization」「frontend」「Craft」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 tallowandsons/craft-critter 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 tallowandsons/craft-critter 我们能提供哪些服务？

定制开发 / 二次开发

基于 tallowandsons/craft-critter 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 tallowandsons/craft-critter 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

g4/profiler 0

g4 application profiler package

sgalinski/scriptmerger 0

CSS/Javascript Minificator, Compressor and Concatenator for TYPO3 - highly configurable frontend asset optimization for CSS/JS merging, minification and compression with optional body parsing, async/defer loading, inline output, data-ignore exclusions, SRI integrity validation/calculation, external

nerds-and-company/css-to-inline-styles-twig-extension 3

A Twig extension to insert css as inline styles with a tag

wearerequired/jquery-light 1

WordPress mu-plugin to remove jQuery Migrate from the list of jQuery dependencies and to allow jQuery to enqueue before </body> instead of in the <head>.

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

jamesedmonston/graphql-authentication 29

GraphQL authentication for your headless Craft CMS applications.

tallowandsons/craft-critter

包简介

关键字：

README 文档

README

Critter for Craft CMS

🔧 Quick Start

1. Install Critter

2. Configure Your Generator

CLI Generator (Local Development Only)

3. Celebrate 🎉

Why Choose Critter?

Minimal-Configuration Critical CSS

Flexible Generation Modes

Robust & Reliable

⚡ Blitz Integration

Advanced Configuration

Requirements

Installation

⚙️ Configuration

🔄 Auto Render Mode

Automatic Rendering (Default)

Manual Rendering

Generator Setup

CLI Generator (Local Development Only)

Cache Configuration

Per-Section Configuration

Extending

Bring Your Own Generator

Bring Your Own Static Cache Driver

License

Credits

tallowandsons/craft-critter 适用场景与选型建议

与 tallowandsons/craft-critter 相关的其它包

统计信息

GitHub 信息

其他信息