Оптимизируйте доставку CSS с помощью библиотеки CSS как Materialise CSS

Мне не хватает 1 уникального пункта в Google PageSpeed ​​Insights как на рабочем столе, так и на мобильном устройстве из-за файла CSS, "ошибка" говорит:

Устраните блокировку рендеринга JavaScript и CSS в верхнем содержании. На вашей странице есть 1 блокирующий CSS ресурсы. Это приводит к задержке рендеринга вашей страницы. Ни один из вышеперечисленных материалов на вашей странице не может быть обработан без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или вставить критические части этих ресурсов непосредственно в HTML.

Рекомендация разработчиков Google гласит

Если внешние ресурсы CSS невелики, вы можете вставить их непосредственно в HTML-документ, который называется встроенным. Таким образом, добавление небольшого CSS позволяет браузеру продолжить рендеринг страницы. Имейте в виду, что если файл CSS большой, то полная вставка CSS может привести к тому, что PageSpeed ​​Insights предупредит, что верхняя часть страницы слишком велика из-за приоритетов видимого содержимого. В случае большого CSS-файла вам нужно будет определить и встроить CSS, необходимый для рендеринга содержимого выше сгиба, и отложить загрузку оставшихся стилей до окончания содержимого выше сгиба.

Тем не менее, я использую Materialise CSS библиотеку CSS/JS. Такая библиотека содержит большой свернутый файл CSS, который работает для всего. Я не в состоянии извлечь части, которые используются в верхнем содержании, и даже сохранить его поддерживаемым / обновляемым.

Одним из вариантов является загрузка css после события загрузки окна, но в этом случае приложение загружается некрасиво до загрузки css.

Есть ли способ выполнить рекомендации Google, используя такие библиотеки, как Materialise CSS, Foundation или аналогичные?

Источник

1 ответ

Я написал код, способный извлекать CSS-содержимое, используемое в HTML-документе, его следует кэшировать, библиотеки как материализованные занимают 15 секунд для поиска каждого селектора в 200-строчном HTML в экземпляре t2.micro AWS.

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);
Источник
Другие вопросы по тегам