README

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

为什么？

为了最佳性能，您可能希望考虑直接将关键CSS内联到HTML文档中。这消除了关键路径中的额外往返，如果操作正确，可以用来提供一个“单次往返”的关键路径长度，其中只有HTML是阻塞资源。

更多信息

安装
使用
- 生成关键路径CSS
- 在Blade模板中使用关键路径CSS
演示
- 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（路由）生成一个独特的文件。

参见此提交以获取实现差异。

在Blade模板中使用关键路径CSS

服务提供者提供了一个名为@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') !!}

mcms / critical-css

维护者

详细信息