使用作为 Materialize css 的 css 库优化 CSS 交付答案

【问题标题】：Optimize CSS Delivery with a css library as Materialize css使用作为 Materialize css 的 css 库优化 CSS 交付
【发布时间】：2015-05-22 16:03:06
【问题描述】：

由于 CSS 文件，我在桌面和移动设备中的 Google PageSpeed Insights 中的 1 个唯一点失败，“错误”表示：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS 您的页面有 1 个阻止 CSS 资源。这会导致延迟呈现您的页面。您的页面上没有首屏内容可以在不等待以下资源加载的情况下呈现。尝试延迟或异步加载阻塞资源，或内联这些资源的关键部分直接在 HTML 中。

Google Developers推荐说

如果外部CSS资源比较少，可以直接插入到 HTML 文档中，这称为内联。内联小 CSS 以这种方式允许浏览器继续渲染页面。请记住，如果 CSS 文件很大，完全内联 CSS 可能导致 PageSpeed Insights 警告说，通过优先化可见内容，您的页面太大。如果是一个大的 CSS 文件，你需要识别和内联 CSS 呈现首屏内容和延迟加载所必需的其余样式直到首屏内容之后。

但是，我正在使用 Materialize CSS 一个 CSS/JS 库。这样的库包含一个适用于所有内容的大型最小化 css 文件。我无法提取首屏内容中使用的部分，甚至无法使其保持可维护/可更新。

一个选项是在窗口加载事件之后加载 css，但在这种情况下，应用程序在加载 css 之前加载很丑。

有没有办法使用 Materialize CSS、Foundation 或类似的库来完成 Google 的建议？

【问题讨论】：

标签： google-pagespeed

【解决方案1】：

我编写了一个能够提取 HTML 文档中使用的 CSS 内容的代码，这应该被缓存，作为物化的库需要 15 秒来寻找 t2.micro AWS 实例中 200 行 HTML 中的每个选择器。

use PHPHtmlParser\Dom;
ob_start();
?><!doctype html>
<html>
<head>
.....

</body>
</html><?PHP
$html = ob_get_contents();
ob_end_clean();
$md5 = md5($html);
if($memcached->append($md5, NULL)==TRUE){
    echo $memcached->get($md5);
}else{
    //add to HTML in style labels the CSS Used and minimized the result
    $dom = new Dom;
    $dom->load($html);
    $style = '';
    foreach($css_files as $css_file){
        $md5CSS = md5_file($css_file);
        if($memcached->append($md5CSS, NULL)==TRUE){
            $cssParsed = $memcached ->get($md5CSS);
        }else{
            $cssContent = file_get_contents($css_file);
            $oSettings = Sabberworm\CSS\Settings::create()->withMultibyteSupport(false)/*->beStrict()*/;
            $oCssParser = new Sabberworm\CSS\Parser($cssContent, $oSettings);
            $cssParsed = $oCssParser->parse();
            $memcached->set($md5CSS, $cssParsed);
        }
        foreach ($cssParsed->getContents() as $oItem) {
            if ($oItem instanceof Sabberworm\CSS\CSSList\KeyFrame)
                continue;
             if ($oItem instanceof Sabberworm\CSS\RuleSet\AtRuleSet)
                continue;
            if($oItem instanceof Sabberworm\CSS\RuleSet\DeclarationBlock){
                $oBlock = $oItem;
                $selectors = array();
                foreach($oBlock->getSelectors() as $oSelector)
                    $selectors[] = $oSelector->getSelector();
                if(count($dom->find(implode(",",$selectors))) > 0)
                    $style .= $oBlock->render(Sabberworm\CSS\OutputFormat::createCompact());
            }
            if ($oItem instanceof Sabberworm\CSS\CSSList\AtRuleBlockList) {
                foreach($oItem->getContents() as $oBlock) {
                    $selectors = array();
                    foreach($oBlock->getSelectors() as $oSelector)
                        $selectors[] = $oSelector->getSelector();
                    if(count($dom->find(implode(",",$selectors))) > 0){
                        $style .= $oItem->render(Sabberworm\CSS\OutputFormat::createCompact());
                        break;
                    }
                }
            }            
        }
    }
    $styleLabel = '<style type="text/css">'.$style.'</style>';
    $html = str_replace("</head>", $styleLabel."\n</head>",$html);

【讨论】：