Оптимизация доставки CSS

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

Пример встраивания небольшого CSS-файла

Если HTML-документ выглядит так:
<html>
 
<head>
   
<link rel="stylesheet" href="small.css">
 
</head>
 
<body>
   
<div class="blue">
      Hello, world!
   
</div>
 
</body>
</html>
А ресурс small.css выглядит так:
  .yellow {background-color: yellow;}
 
.blue {color: blue;}
 
.big { font-size: 8em; }
 
.bold { font-weight: bold; }
Затем вы можете встроить критический CSS следующим образом:
<html>
 
<head>
   
<style>
     
.blue{color:blue;}
   
</style>
   
</head>
 
<body>
   
<div class="blue">
      Hello, world!
   
</div>
   
<noscript id="deferred-styles">
     
<link rel="stylesheet" type="text/css" href="small.css"/>
   
</noscript>
   
<script>
     
var loadDeferredStyles = function() {
       
var addStylesNode = document.getElementById("deferred-styles");
       
var replacement = document.createElement("div");
        replacement
.innerHTML = addStylesNode.textContent;
        document
.body.appendChild(replacement)
        addStylesNode
.parentElement.removeChild(addStylesNode);
     
};
     
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window
.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
     
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
     
else window.addEventListener('load', loadDeferredStyles);
   
</script>
 
</body>
</html>

Это преобразование, включая определение критического/некритического CSS, встраивание критического CSS и отложенную загрузку некритического CSS, может быть выполнено автоматически модулями оптимизации PageSpeed ​​для nginx, apache, IIS, ATS и Open. Lightspeed, когда вы включаете фильтр Prioritize_critical_css .

См. также функцию loadCSS , помогающую асинхронно загружать CSS, которая может работать с Critical — инструментом для извлечения критического CSS с веб-страницы.

Важные стили, необходимые для стилизации содержимого верхней части сгиба, встроены и немедленно применяются к документу. Полный файл small.css загружается после первоначального рисования страницы. Его стили применяются к странице после завершения загрузки, не блокируя первоначальный рендеринг критического контента.

Обратите внимание, что веб-платформа вскоре будет поддерживать загрузку таблиц стилей без блокировки рендеринга, без необходимости прибегать к использованию JavaScript, используя импорт HTML .

Не встраивайте URI больших данных

Будьте осторожны при встраивании URI данных в файлы CSS. Хотя выборочное использование URI небольших данных в вашем CSS может иметь смысл, встраивание URI больших данных может привести к увеличению размера вашего CSS над сгибом, что замедлит время рендеринга страницы.

Не встраивайте атрибуты CSS

По возможности следует избегать встраивания атрибутов CSS в элементы HTML (например, <p style=...> ), поскольку это часто приводит к ненужному дублированию кода. Кроме того, встроенный CSS в элементах HTML по умолчанию блокируется Политикой безопасности контента (CSP).

Обратная связь

Была ли эта страница полезной?