Question

由于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推荐？

Answer 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);

使用css库优化CSS传递作为Materialize css

1 个答案: