1

由于 CSS 文件，我在桌面和移动设备中的Google PageSpeed Insights中都失败了 1 个独特点，“错误”说：

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

谷歌开发者推荐说

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

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

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

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

4

1 回答 1

0

我编写了一个能够提取 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);
于 2015-05-25T17:45:14.253 回答