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!

< /body >
< /html >

并且small.css资源如下所示：

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

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

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

< body >
< div class="blue" >
Hello, world!

원본 small.css는 웹 페이지가 로드될 때까지 로드되지 않습니다. JavaScript를 통해

概览

제안

内嵌较小CSS文件的示例

당신이 우리와 연락할 필요가 있다면, 다음은 우리의 연락처 정보입니다