Оптимизация доставки 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).

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

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