On this page
이 규칙은 PageSpeed Insights가 웹 페이지에 렌더링이 차단된 외부 스타일시트가 있음을 감지할 때 트리거됩니다. 이 스타일시트는 화면에 컨텐트를 표시하는 시간을 지연시킵니다.
概览
屏幕显示内容之前，浏览器会阻止外部CSS文件。这会导致额外的网络延迟，并延长屏幕显示内容的时间。제안
외부 CSS 에셋이 작은 경우 HTML 문서에 직접 삽입할 수 있습니다. 이를 인라인 이라고 합니다. 이 방법으로 더 작은 CSS 에셋을 포함하면 브라우저는 웹 페이지를 계속 렌더링할 수 있습니다. CSS 파일이 큰 경우 CSS를 완전히 인라인하면 PageSpeed Insights가按优先级排列可见内容웹 페이지의 첫 화면 부분이 너무 크다고 경고합니다. CSS 파일이 큰 경우 첫 번째 화면 내용을 렌더링하는 데 필요한 CSS를 인식하고 인라인 처리해야 하며, 첫 번째 화면 내용이 표시될 때까지 나머지 스타일 로드를 잠시 유예해야 합니다.
内嵌较小CSS文件的示例
如果HTML文档如下所示：< head >
< div class="blue" >
Hello, world!
< /body >
< /html >
并且small.css资源如下所示：
.blue {color: blue;}
. big {font-size: 8em;}
.bold { font-weight: bold; }
您就可以内嵌关键的CSS，具体方法如下：
< head >
< style >
.blue{color:blue;}
< body >
< div class="blue" >
Hello, world!