Download the PHP package krisawzm/critical-css without Composer

On this page you can find all versions of the php package krisawzm/critical-css. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package critical-css

critical-css Build Status

A Laravel package for generating and using inline critical-path CSS.

CriticalCss

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

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

PHP Build Version
Package Version
Requires php Version >=5.5.9
illuminate/contracts Version 5.0.*|5.1.*|5.2.*|5.3.*|5.4.*
illuminate/support Version 5.0.*|5.1.*|5.2.*|5.3.*|5.4.*
illuminate/console Version 5.0.*|5.1.*|5.2.*|5.3.*|5.4.*
illuminate/http Version 5.0.*|5.1.*|5.2.*|5.3.*|5.4.*
illuminate/view Version 5.0.*|5.1.*|5.2.*|5.3.*|5.4.*
symfony/process Version ^2.6|^3.1.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package krisawzm/critical-css contains the following files

Loading the files please wait ....