PHPackages mcms/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. mcms/critical-css ActiveLibrary[Utility & Helpers](/categories/utility) mcms/critical-css ================= A Laravel package for generating and using inline critical-path CSS. v2.1.3(7y ago)015MITPHPPHP >=5.5.9 Since Nov 5Pushed 7y ago1 watchersCompare [ Source](https://github.com/mbouclas/critical-css)[ Packagist](https://packagist.org/packages/mcms/critical-css)[ RSS](/packages/mcms-critical-css/feed)WikiDiscussions master Synced 3d ago READMEChangelogDependencies (8)Versions (14)Used By (0) critical-css [![Build Status](https://camo.githubusercontent.com/74b0173d2603c110cfbfb0fe155559dddc6a59cfb487049b7c5f33d01b3e3cd1/68747470733a2f2f7472617669732d63692e6f72672f6b616c666865696d2f637269746963616c2d6373732e737667)](https://travis-ci.org/kalfheim/critical-css) =============================================================================================================================================================================================================================================================================== [](#critical-css-) A Laravel package for generating and using inline critical-path CSS. [![CriticalCss](https://camo.githubusercontent.com/ea34679fbc65375264a06e10ca61072d65626fe5e6aec80c9c83126bfe823698/68747470733a2f2f692e696d6775722e636f6d2f5a49476774417a2e676966)](https://camo.githubusercontent.com/ea34679fbc65375264a06e10ca61072d65626fe5e6aec80c9c83126bfe823698/68747470733a2f2f692e696d6775722e636f6d2f5a49476774417a2e676966) Why? ---- [](#why) > For best performance, you may want to consider inlining the critical CSS directly into the HTML document. This eliminates additional roundtrips in the critical path and if done correctly can be used to deliver a “one roundtrip” critical path length where only the HTML is a blocking resource. More information: - - **Table of Contents** - [Installation](#installation) - [1) Install the Critical npm package](#1-install-the-critical-npm-package) - [2) Require the package](#2-require-the-package) - [3) Configure Laravel](#3-configure-laravel) - [Usage](#usage) - [Generating critical-path CSS](#generating-critical-path-css) - [Using critical-path CSS with Blade templates](#using-critical-path-css-with-blade-templates) - [A demo](#a-demo) - [PageSpeed Insights results](#pagespeed-insights-results) - [A note on Laravel 5.0 compatibility](#a-note-on-laravel-50-compatibility) Installation ------------ [](#installation) ### 1) Install the Critical npm package [](#1-install-the-critical-npm-package) This package is used to extract critical-path CSS from an HTML document. From your project's base path, run: ``` $ npm install critical --save ``` Alternatively, install it globally: ``` $ npm install -g critical ``` ### 2) Require the package [](#2-require-the-package) Next, you'll need to require the package using Composer: From your project's base path, run: ``` $ composer require krisawzm/critical-css ``` ### 3) Configure Laravel [](#3-configure-laravel) #### Service Provider [](#service-provider) Add the following to the `providers` key in `config/app.php`: ``` 'providers' => [ Alfheim\CriticalCss\CriticalCssServiceProvider::class, ]; ``` #### Console [](#console) To get access to the `criticalcss:clear` and `criticalcss:make` commands, add the following to the `$commands` property in `app/Console/Kernel.php`: ``` protected $commands = [ \Alfheim\CriticalCss\Console\CriticalCssMake::class, \Alfheim\CriticalCss\Console\CriticalCssClear::class, ]; ``` #### Config [](#config) Generate a template for the `config/criticalcss.php` file by running: ``` $ php artisan vendor:publish ``` > **Note:** Descriptions for the config options are only present in the config file, **not** in this readme. Click [here](https://github.com/kalfheim/critical-css/blob/master/src/config/criticalcss.php) to open the config file on GitHub. Usage ----- [](#usage) Before getting started, I highly recommend reading through the [`config/criticalcss.php`](src/config/criticalcss.php) file. That will give you a good idea of how this all works. ### Generating critical-path CSS [](#generating-critical-path-css) Providing everything is set up and configured properly, all you need to do in order to generate a fresh set of critical-path CSS files, is running the following command: ``` $ php artisan criticalcss:make ``` This will generate a unique file for each of the URIs (routes) provided. See [this commit](https://github.com/kalfheim/critical-css-demo/commit/8288ba8971fc7381ef933affdde3b3d71c5475e3) for a diff of the implementation. ### Using critical-path CSS with Blade templates [](#using-critical-path-css-with-blade-templates) The service provider provides a new Blade directive named `@criticalCss`. Simply call that directive, passing a route as the only argument, like so: ``` ... @criticalCss('some/route') ``` If no argument is passed, the current route will be used, however, I highly recommend always passing a specific route. And of course, make sure to asynchronously load the full CSS for the page using something like loadCSS (). Full example (using Elixir to generate the URL for the CSS file, which or course is optional): ``` ... @criticalCss('some/route') !function(a){"use strict";var b=function(b,c,d){var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,f.media="only x",g.parentNode.insertBefore(f,c?g:g.nextSibling);var j=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){j(a)})};return f.onloadcssdefined=j,j(function(){f.media=d||"all"}),f};"undefined"!=typeof module?module.exports=b:a.loadCSS=b}("undefined"!=typeof global?global:this); loadCSS('{{ elixir('css/app.css') }}'); ``` For multiple views, you may wrap `@criticalCss` in a `@section`, then `@yield` the section in a master view. A demo ------ [](#a-demo) I made a simple demo using [this](http://startbootstrap.com/template-overviews/clean-blog/) Bootstrap theme. It's a fairly simple theme, and it does not have any major performance issues, but yet, implementing inline critical-path CSS **did** improve performance. Demo repo: See [this commit](https://github.com/kalfheim/critical-css-demo/commit/8288ba8971fc7381ef933affdde3b3d71c5475e3) for a diff of the implementation. ### [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) results [](#pagespeed-insights-results) ``` | Mobile | Desktop ``` \------------- | ------------- | ------------- Before | [![](https://camo.githubusercontent.com/54f9dca41c5e892466bc54436e6ef26d42643da1fc804f7d4fcfaa7c1163def1/68747470733a2f2f692e696d6775722e636f6d2f383656795667422e706e67)](https://camo.githubusercontent.com/54f9dca41c5e892466bc54436e6ef26d42643da1fc804f7d4fcfaa7c1163def1/68747470733a2f2f692e696d6775722e636f6d2f383656795667422e706e67) | [![](https://camo.githubusercontent.com/3219cfb93b4820afece39350fd30206798571733589962a6bdd608cdcf701b8c/68747470733a2f2f692e696d6775722e636f6d2f7253396a3849712e706e67)](https://camo.githubusercontent.com/3219cfb93b4820afece39350fd30206798571733589962a6bdd608cdcf701b8c/68747470733a2f2f692e696d6775722e636f6d2f7253396a3849712e706e67)**After** | [![](https://camo.githubusercontent.com/24856ea5c52658b9ed4145c2014f9967afa40fab0fe48d8dc3634f13a2813514/68747470733a2f2f692e696d6775722e636f6d2f69534d6a7a43732e706e67)](https://camo.githubusercontent.com/24856ea5c52658b9ed4145c2014f9967afa40fab0fe48d8dc3634f13a2813514/68747470733a2f2f692e696d6775722e636f6d2f69534d6a7a43732e706e67) | [![](https://camo.githubusercontent.com/7c63e69fc111cbe03fe464071d6a277bb46dcaa820f75611125244306a426224/68747470733a2f2f692e696d6775722e636f6d2f6438366b30766a2e706e67)](https://camo.githubusercontent.com/7c63e69fc111cbe03fe464071d6a277bb46dcaa820f75611125244306a426224/68747470733a2f2f692e696d6775722e636f6d2f6438366b30766a2e706e67) A note on Laravel 5.0 compatibility ----------------------------------- [](#a-note-on-laravel-50-compatibility) On Laravel 5.0, you must set `'blade_directive' => false` in the config. This is **not** recommended, but because [Custom Directives](http://laravel.com/docs/5.1/blade#extending-blade) were introduced in 5.1, it has to be done. This will require adding the following to the `aliases` key in **config/app.php**: ``` 'aliases' => [ 'Critical' => Alfheim\CriticalCss\Facades\Critical::class, ]; ``` In your Blade views, you'll now be able to do the following instead of `@criticalCss('some/route')`: ``` {!! Critical::css('some/route') !!} ``` ### Health Score 28 — LowBetter than 54% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community10 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor1 Top contributor holds 50% 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 ~89 days Recently: every ~219 days Total 13 Last Release 2772d ago Major Versions v1.0.6 → v2.0.02016-03-19 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/642742?v=4)[Michael Bouclas](/maintainers/mbouclas)[@mbouclas](https://github.com/mbouclas) --- Top Contributors [![antonbormotov](https://avatars.githubusercontent.com/u/6819243?v=4)](https://github.com/antonbormotov "antonbormotov (7 commits)")[![exodusanto](https://avatars.githubusercontent.com/u/13484843?v=4)](https://github.com/exodusanto "exodusanto (5 commits)")[![mbouclas](https://avatars.githubusercontent.com/u/642742?v=4)](https://github.com/mbouclas "mbouclas (2 commits)") --- Tags laravelcssperformance ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/mcms-critical-css/health.svg) ``` [![Health](https://phpackages.com/badges/mcms-critical-css/health.svg)](https://phpackages.com/packages/mcms-critical-css) ``` ### Alternatives [laravel/cashier Laravel Cashier provides an expressive, fluent interface to Stripe's subscription billing services. 2.5k25.9M107](/packages/laravel-cashier)[laravel/pulse Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application. 1.7k12.1M99](/packages/laravel-pulse)[spatie/laravel-enum Laravel Enum support 3655.4M31](/packages/spatie-laravel-enum)[psalm/plugin-laravel Psalm plugin for Laravel 3274.9M308](/packages/psalm-plugin-laravel)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[laragear/preload Effortlessly make a Preload script for your Laravel application. 119363.5k](/packages/laragear-preload) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)