Download the PHP package getmaple/critical-css without Composer
On this page you can find all versions of the php package getmaple/critical-css. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download getmaple/critical-css
More information about getmaple/critical-css
Files in getmaple/critical-css
Package critical-css
Short Description A Laravel package for generating and using inline critical-path CSS.
License MIT
Informations about the package critical-css
critical-css
A Laravel package for generating and using inline critical-path CSS.
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:
- https://github.com/addyosmani/critical/blob/master/README.md#why
- https://developers.google.com/web/fundamentals/performance/
Table of Contents
- Installation
- 1) Install the Critical npm package
- 2) Require the package
- 3) Configure Laravel
- Usage
- Generating critical-path CSS
- Using critical-path CSS with Blade templates
- A demo
- PageSpeed Insights results
- A note on Laravel 5.0 compatibility
Installation
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
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
Service Provider
Add the following to the providers
key in config/app.php
:
Console
To get access to the criticalcss:clear
and criticalcss:make
commands, add the following to the $commands
property in app/Console/Kernel.php
:
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 to open the config file on GitHub.
Usage
Before getting started, I highly recommend reading through the config/criticalcss.php
file. That will give you a good idea of how this all works.
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 for a diff of the implementation.
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:
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 (https://github.com/filamentgroup/loadCSS).
Full example (using Elixir to generate the URL for the CSS file, which or course is optional):
For multiple views, you may wrap @criticalCss
in a @section
, then @yield
the section in a master view.
A demo
I made a simple demo using this 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: https://github.com/kalfheim/critical-css-demo
See this commit for a diff of the implementation.
PageSpeed Insights results
| Mobile | Desktop
------------- | ------------- | ------------- Before | | After | |
A note on Laravel 5.0 compatibility
On Laravel 5.0, you must set 'blade_directive' => false
in the config. This is not recommended, but because Custom Directives were introduced in 5.1, it has to be done.
This will require adding the following to the aliases
key in config/app.php:
In your Blade views, you'll now be able to do the following instead of @criticalCss('some/route')
:
All versions of critical-css with dependencies
illuminate/contracts Version ~5.0
illuminate/support Version ~5.0
illuminate/console Version ~5.0
illuminate/http Version ~5.0
illuminate/view Version ~5.0
symfony/process Version ~4.0