PHPackages                             zeroseven/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. zeroseven/critical-css

ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility)

zeroseven/critical-css
======================

v1.0.1(1y ago)012GPL-2.0-onlyPHP

Since May 6Pushed 1y ago3 watchersCompare

[ Source](https://github.com/zeroseven/critical_css)[ Packagist](https://packagist.org/packages/zeroseven/critical-css)[ RSS](/packages/zeroseven-critical-css/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (2)Versions (2)Used By (0)

CRITICAL CSS 🚀
==============

[](#critical-css-)

This extension creates the "critical css" dynamically for each page. Styles which have been integrated via PageRenderer or simple TypoScript are then automatically moved down from `head` to the end of the DOM.

Based on [penthouse](https://github.com/pocketjoso/penthouse/tree/master), a server running a service calls the single pages, determines the critical css and sends them back to TYPO3. If you change or move any content element, or update the page properties, the critical css will be flushed on this page and automatically recalculated.

Installation and setup
----------------------

[](#installation-and-setup)

1. Get this extension via `composer req zeroseven/critical-css`
2. Get a [free token here](https://www.zeroseven.de/critical-css)
3. Store the token via the extension configuration in TYPO3 settings module

Flush critical css
------------------

[](#flush-critical-css)

If you need to recalculate the critical css on all pages, for example because you updated the page template, you can do this with just a single click:

[![Flush critical css](Documentation/Images/flush_cache.png "Flush critical css")](Documentation/Images/flush_cache.png)

There are good reasons why "no admins" in TYPO3 shouldn't have this cache button. If they insist on needing it (they don't) then you can set the following option (you won't) in TSconfig:

```
options.clearCache.criticalCss = 1

```

### Flush command:

[](#flush-command)

This function can also be called via a TYPO3 command:

```
vendor/bin/typo3 critical_css:flush

```

Monitoring
----------

[](#monitoring)

A dashboard widget always gives you a good overview of how many pages are pending or expired, or just up-to-date.

[![Dashboard widget](Documentation/Images/dashboard_widget.png "Dashboard widget")](Documentation/Images/dashboard_widget.png)

Disable on some pages
---------------------

[](#disable-on-some-pages)

The service calls the respective sites without POST or GET parameters or even without cookies or anything similar. Therefore it could make sense to deactivate the service for certain pages. In the backend, there's an extra button in the page properties for that.

### 1. Post or get parameters

[](#1-post-or-get-parameters)

For pages with content that mostly behaves dynamic, the service should be disabled. Let's take a search result page for example. The service will call this page without any search results, therefore making it impossible to consider the CSS of search results. This leaves the user with incomplete styling in the `head` area.

### 2. The record based detail pages problem (also called TRBDPP)

[](#2-the-record-based-detail-pages-problem-also-called-trbdpp)

The critical css is stored in the database for each TYPO3 page. Unfortunately, extensions like the good old "news" extension, for example, offers one page for many records. For such "detail" pages you have to deactivate the service manually using the nicely styled button inside the page properties in the backend.

**TODO:** Create a Wikipedia article for "TRBDPP". LOL

PSR-14 Events
-------------

[](#psr-14-events)

### Register event listener

[](#register-event-listener)

You can modify the behavior of the critical CSS generation by listening to PSR-14 events. To register your event listener, add the following configuration to your `Configuration/Services.yaml`:

```
services:
  Vendor\MyExtension\Event\MyCriticalCssEventListener:
    tags:
      - name: event.listener
        identifier: 'myextension/critical-css'
        event: Zeroseven\CriticalCss\Event\CriticalCssRequierdEvent
```

`my_extensin/Classses/Event/CriticalCssEventListener.php`:

```
....

use Zeroseven\CriticalCss\Event\CriticalCssRequierdEvent;

class CriticalCssEventListener
{
    public function __invoke(CriticalCssRequierdEvent $event): CriticalCssRequierdEvent
    {
        if ($event->getRequest()->hasHeader('X-SKIP-CRITICAL-CSS')) {
            $event->setRequiered(false);
        }

        return $event;
    }
}
```

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance49

Moderate activity, may be stable

Popularity5

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity37

Early-stage or recently created project

 Bus Factor1

Top contributor holds 75% 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

Unknown

Total

1

Last Release

374d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6b22f8a50cfbda138fd9d18f9a9323a9ab93434487122956978e804dee700876?d=identicon)[zerosevendesignstudios](/maintainers/zerosevendesignstudios)

---

Top Contributors

[![srosskopf](https://avatars.githubusercontent.com/u/17512766?v=4)](https://github.com/srosskopf "srosskopf (3 commits)")[![pdaether](https://avatars.githubusercontent.com/u/1213181?v=4)](https://github.com/pdaether "pdaether (1 commits)")

### Embed Badge

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

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

###  Alternatives

[b13/assetcollector

Add CSS and SVG files and strings as inline style tag/inline svg to the html code.

10118.4k](/packages/b13-assetcollector)[codingfreaks/cf-cookiemanager

Manage cookies, scripts, and GDPR compliance on your Typo3 website with CodingFreaks Typo3 Cookie Manager. Customize cookie banners, streamline workflow, and enhance user experience. Ensure GDPR compliance and take control of cookie management with our Typo3 cookie management extension. Visit the official Typo3 Documentation page to learn more.

1625.8k](/packages/codingfreaks-cf-cookiemanager)[mfd/ai-filemetadata

Automatically generates FAL metadata for files by means of public LLMs

1142.1k](/packages/mfd-ai-filemetadata)[friendsoftypo3/widgets

Dashboard Widgets Collection

1129.4k](/packages/friendsoftypo3-widgets)[mautic/mautic-typo3

Add-on TYPO3 extension that enhances the "EXT:marketing\_automation" TYPO3 extension by connecting it to the Mautic Marketing Automation platform: Determine "Persona" from Mautic segments. Also provides additional services e.g. language synchronisation between Mautic and TYPO3.

236.3k](/packages/mautic-mautic-typo3)

PHPackages © 2026

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