Оптимизируйте код CSS

Это правило срабатывает, когда PageSpeed Insights обнаруживает, что страница использует внешние таблицы стилей, препятствующие ее отображению на экране.

Общая информация

Браузеры запрашивают внешние файлы CSS перед отображением контента на экране. Это приводит к задержке и замедляет обработку страницы.

Рекомендации

Если внешние ресурсы CSS имеют малый объем, их можно вставить непосредственно в документ HTML. Подобное встраивание позволяет браузеру продолжать загрузку страницы. Обратите внимание: если файл CSS слишком велик, после его встраивания PageSpeed Insights может вас предупредить, что верхняя часть страницы имеет слишком большой объем (правило приоритета видимого контента). Если файл CSS слишком велик, вам необходимо найти код CSS, отвечающий за контент в верхней части страницы и встроить его в HTML, отложив загрузку остальных стилей.

Пример встраивания небольшого файла 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>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Оригинальный файл small.css загружается после загрузки страницы. Порядок применения правил CSS определяется путем внедрения всех элементов <style> и <link> в документ с помощью JavaScript.

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

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

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

Не следует встраивать атрибуты CSS в элементы HTML (например, &lt p style=...&gt), так как это приводит к излишнему дублированию кода. Кроме того, подобное встраивание по умолчанию блокируется правилами по безопасности контента.