PHPackages nemo64/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. nemo64/critical\_css ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) nemo64/critical\_css ==================== Critical CSS inline rendering for TYPO3 081PHP Since Dec 11Pushed 7y ago1 watchersCompare [ Source](https://github.com/Nemo64/critical_css)[ Packagist](https://packagist.org/packages/nemo64/critical_css)[ RSS](/packages/nemo64-critical-css/feed)WikiDiscussions master Synced yesterday READMEChangelogDependenciesVersions (1)Used By (0) [![Build Status](https://camo.githubusercontent.com/1777bd6ed2927fa32aa2bf5423fcd5fa2d2bbdbf2d5331ee74cf46481fe11174/68747470733a2f2f7472617669732d63692e6f72672f4e656d6f36342f637269746963616c5f6373732e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/Nemo64/critical_css)[![Latest Stable Version](https://camo.githubusercontent.com/11eb04e7e2cda000fe0315fe95f07c76db2f1bf35041b06d9cfe02e797b84601/68747470733a2f2f706f7365722e707567782e6f72672f6e656d6f36342f637269746963616c5f6373732f762f737461626c65)](https://packagist.org/packages/nemo64/critical_css)[![Total Downloads](https://camo.githubusercontent.com/f99d8ed7bc5857d465b1e79df9ac4cc43e20f7de7ba9f8cedca33cb3d2cf63c5/68747470733a2f2f706f7365722e707567782e6f72672f6e656d6f36342f637269746963616c5f6373732f646f776e6c6f616473)](https://packagist.org/packages/nemo64/critical_css)[![Monthly Downloads](https://camo.githubusercontent.com/4782c0c0f50bdc1f615036d3926eceaf4e35c974fbc6bb07b7950b95b2e57def/68747470733a2f2f706f7365722e707567782e6f72672f6e656d6f36342f637269746963616c5f6373732f642f6d6f6e74686c79)](https://packagist.org/packages/nemo64/critical_css)[![License](https://camo.githubusercontent.com/2cdc6d6447ea5af571d617a69b85b541516dcbf330a8962d000e626b20a65d9b/68747470733a2f2f706f7365722e707567782e6f72672f6e656d6f36342f637269746963616c5f6373732f6c6963656e7365)](https://packagist.org/packages/nemo64/critical_css) critical css typo3 extension ============================ [](#critical-css-typo3-extension) This extension automatically detects and inlines critical css definitions. how it works ------------ [](#how-it-works) The implementation of this extension does not use a browser to check a specific viewport size. Instead, it uses a marker that you can place anywhere on your site. The example TypoScript places it after the second tt\_content element. This extension will then use sophisticated regular expressions to create a statistic of what elements/attributes/classes/ids are used up until the marker. Then all css files are parsed using [sabberworm/php-css-parser](https://github.com/sabberworm/PHP-CSS-Parser)and all css selectors are matched against and reduced by the statistic created earlier. This entire process is quiet fast even against huge frameworks like bootstrap and results in just 2-3 kb of inline css. things you should know ---------------------- [](#things-you-should-know) - If the "below the fold" marker isn't present the extension will do nothing - The inlined css is just a good guess of what you'll need. There is no browser selector matching at work. It guesses quiet good though... - All animations/transitions as well as hover/focus effects are removed from the inline css since they aren't really important for the (hopefully at most) 1 second you'll have to wait until you get the real css - external stylesheets are also downloaded and inlined (TODO create a good way to create exceptions) - google fonts is currently a hardcoded exception from inlining since they deliver different fonts via user agent when should i consider using this extension (or alternatives, i'm not judging) ------------------------------------------------------------------------------ [](#when-should-i-consider-using-this-extension-or-alternatives-im-not-judging) - This should be one of the last optimizations you do - Make sure there is nothing but css blocking the first paint or else this optimization is useless - Make sure that your site isn't delivered via php since that will probably be the biggest performance improvement you can do. I recommend [lochmueller/staticfilecache](https://github.com/lochmueller/staticfilecache) since it has no platform dependencies and is very transparent. But other strategies are fine too. contributing ------------ [](#contributing) ### running the tests [](#running-the-tests) The easiest way to run the test suite is by having docker installed and using the following commands: - `composer db:start` which starts a docker image for a mysql database. This is required for functional tests. - `composer test` runs unit and functional test suites. You can run them separately by using `test:unit` or `test:functional`. You can also pass filters using `composer test:unit -- --filter External`. - `composer db:stop` will stop and remove the database again. You can of course run them without docker if you have a database locally but then you'll have to compose your tests commands manually ;) ### Health Score 19 — LowBetter than 10% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity5 Limited adoption so far Community8 Small or concentrated contributor base Maturity39 Early-stage or recently created project 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/f18b6c8ad90bb53f9c5273b79360259b0ec172951de367046ac13ab0f1b44f63?d=identicon)[Nemo641](/maintainers/Nemo641) --- Top Contributors [![Nemo64](https://avatars.githubusercontent.com/u/1749936?v=4)](https://github.com/Nemo64 "Nemo64 (37 commits)") ### Embed Badge ![Health badge](/badges/nemo64-critical-css/health.svg) ``` [![Health](https://phpackages.com/badges/nemo64-critical-css/health.svg)](https://phpackages.com/packages/nemo64-critical-css) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)