Оптимизация процесса передачи CSS

On this page

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

Обзор

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

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

如果外部CSS资源较小，您可以直接将这些内容插入到HTML文档中，这称为“内嵌”。通过这种方式内嵌较小CSS资源，浏览器可以继续呈现网页。请注意，如果CSS文件较大，完全内嵌CSS可能会导致PageSpeed Insights通过按优先级排列可见内容警告您网页的首屏部分体积过大。如果CSS文件较大，您需要识别和内嵌呈现首屏内容所需的CSS，并暂缓加载其余样式，直到首屏内容显示之后为止。

内嵌较小CSS文件的示例

如果HTML文档如下所示：
 
< html >
< head >
   
 
 
< div class="blue ">
Hello, world!
   

 

并且small.cssРесурсы выглядят следующим образом:

 
  .yellow {background-color: yellow;}
. blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

您就可以内嵌关键的CSS，具体方法如下：

 

< head >
< style >
      .blue{color:blue;}
< /style >
   
 
   

Hello, world!
< /div >
< /body >
< /html >
< link rel="stylesheet "href="small.css" >

Оригинальный small.css загружается только после загрузки веб-страницы. Поставить все через JavaScript< style >和< link >Элементы вставляются в документ для поддержания порядка применения правил CSS.

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

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

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

Следует стараться избегать в HTML-элементах (например,< p style=... >) встроенный атрибут CSS, так как это часто приводит к появлению излишнего дублирующего кода.Политика безопасности контента(CSP)会在默认情况下阻止在HTML元素上内嵌CSS。

 

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License. For details, see ourSite Policies.