README

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

为什么？

为了最佳性能，您可能需要考虑将关键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

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

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

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

对于多个视图，您可以在

中包装@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') !!}

krisawzm/ critical-css

维护者

详细信息