README

一个用于生成和使用内联关键路径CSS的Laravel包。

为什么？

为了最佳性能，您可能需要将关键CSS直接内联到HTML文档中。这将消除关键路径中的额外往返，如果正确实施，可以使用“单次往返”的关键路径长度，其中只有HTML是阻塞资源。

更多信息

安装
使用
- 生成关键路径CSS
- 使用关键路径CSS与Blade模板
演示
- PageSpeed Insights结果
关于Laravel 5.0兼容性的说明

安装

1) 安装Critical npm包

此包用于从HTML文档中提取关键路径CSS。

从您的项目基本路径运行

$ npm install critical --save

或者，全局安装

$ npm install -g critical

2) 需求包

接下来，您需要使用Composer需求该包

从您的项目基本路径运行

$ composer require krisawzm/critical-css

3) 配置Laravel

服务提供者

将以下内容添加到config/app.php中的providers键

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

控制台

为了获取对criticalcss:clear和criticalcss:make命令的访问，将以下内容添加到app/Console/Kernel.php中的$commands属性

protected $commands = [
    \Alfheim\CriticalCss\Console\CriticalCssMake::class,
    \Alfheim\CriticalCss\Console\CriticalCssClear::class,
];

配置

通过运行生成config/criticalcss.php文件的模板

$ php artisan vendor:publish

注意：配置选项的描述仅存在于配置文件中，不在此readme中。点击这里在GitHub上打开配置文件。

使用

在开始之前，我强烈建议阅读config/criticalcss.php文件。这将使您对这一切如何工作有一个很好的了解。

生成关键路径CSS

如果一切设置和配置都正确，为了生成一组新的关键路径CSS文件，您只需运行以下命令

$ php artisan criticalcss:make

这将为提供的每个URI（路由）生成一个独特的文件。

查看此提交以查看实现差异。

使用关键路径CSS与Blade模板

服务提供者提供了一个名为@criticalCss的新Blade指令。

只需调用该指令，传递一个路由作为唯一的参数，如下所示

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

如果没有传递参数，则将使用当前路由，但是，我强烈建议始终传递特定的路由。

当然，请确保使用类似loadCSS（https://github.com/filamentgroup/loadCSS）之类的工具异步加载页面的完整CSS。

完整示例（使用Elixir生成CSS文件的URL，当然这是可选的）

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

对于多个视图，您可以在@section中包裹@criticalCss，然后在主视图中@yield该部分。

演示

我使用这个Bootstrap主题做了一个简单的演示。这是一个相当简单的主题，并且没有重大的性能问题，但实现内联关键路径CSS确实提高了性能。

演示仓库: https://github.com/kalfheim/critical-css-demo

查看此提交以查看实现差异。

PageSpeed Insights 结果

          | Mobile        | Desktop

------------- | ------------- | ------------- 之前 | | 之后 | |

关于Laravel 5.0兼容性的说明

在 Laravel 5.0 中，您必须在配置中设置 'blade_directive' => false。这不推荐，但由于在 5.1 版本中引入了自定义指令，所以必须这样做。

这需要您将以下内容添加到 config/app.php 中的 aliases 键中

'aliases' => [
    'Critical' => Alfheim\CriticalCss\Facades\Critical::class,
];

在您的 Blade 视图中，您现在可以使用以下方法替代 @criticalCss('some/route')

{!! Critical::css('some/route') !!}

getmaple / critical-css

维护者

详细信息