包简介

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

README 文档

README

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:

Table of Contents

Installation
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:

'providers' => [
    Alfheim\CriticalCss\CriticalCssServiceProvider::class,
];

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

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:

<html>
<head>
  ...
  @criticalCss('some/route')
</head>
</html>

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):

<html>
<head>
  ...
  @criticalCss('some/route')
  <script>
    !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') }}');
  </script>
</head>
</html>

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:

'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') !!}

krisawzm/critical-css 适用场景与选型建议

krisawzm/critical-css 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 14.19k 次下载、GitHub Stars 达 46，最近一次更新时间为 2015 年 11 月 05 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「performance」「css」「laravel」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 krisawzm/critical-css 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 krisawzm/critical-css 我们能提供哪些服务？

定制开发 / 二次开发

基于 krisawzm/critical-css 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 krisawzm/critical-css 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

g4/profiler 0

g4 application profiler package

sgalinski/scriptmerger 0

CSS/Javascript Minificator, Compressor and Concatenator for TYPO3 - highly configurable frontend asset optimization for CSS/JS merging, minification and compression with optional body parsing, async/defer loading, inline output, data-ignore exclusions, SRI integrity validation/calculation, external

nerds-and-company/css-to-inline-styles-twig-extension 3

A Twig extension to insert css as inline styles with a tag

wearerequired/jquery-light 1

WordPress mu-plugin to remove jQuery Migrate from the list of jQuery dependencies and to allow jQuery to enqueue before </body> instead of in the <head>.

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

opsdev/cache-breaker 4

Create link to static resources with cache-breaking segment based on md5 of the file

krisawzm/critical-css

包简介

关键字：