<body>

2016-07-31 2 views
1

외부 시트를 배치하여 CSS 차단하기 나는 웹 사이트로드를 최적화하고 Google의 PageSpeed ​​Insights에서 '귀하의 웹 사이트 상단에서 CSS 차단을 제거하십시오'라는 메시지를 찾으십시오.<body>

JavaScript가 아닌 해결책을 검색했습니다.이 파일 위치 때문에이 페이지 속도 증가를 피할 수있는 신체의 맨 아래에 CSS를 놓는 것이 좋습니다. 나는 그것의 바닥에있는 CSS 파일을 웹 사이트를 발견 적이 없다

  • :

    나는 때문에 의심입니다.

  • 웹 사이트가 처음부터 CSS없이로드 될 수 있기 때문에 맨 아래에 CSS 파일이있는 것이 위험합니다.

이 문제의 일반적인 해결책은 무엇입니까? JS가 없으면 CSS 외부 시트를 비동기 적으로로드 할 수 있습니까?

+0

저는 브라우저 자체가이 작업을 더 잘 수행하기 때문에 _no_라고 말하고 싶습니다. http2는 블로킹을 극복하기 때문에 더 나아질 것입니다. 더 읽기 : https://http2.github.io/faq/ – LGSon

답변

3

CSS를 두 부분으로 나눌 수 있습니다. 첫 번째 코드에는 내용을 렌더링하는 코드 "above the fold"이 들어 있습니다. 이것은 스크롤없이 보게되는 것입니다. 나머지는 페이지 하단에 포함될 수 있습니다.

장점 :
브라우저는 가능한 한 빨리 렌더링 된 페이지를 사용자에게 제공하기 위해 렌더링하는 중요한 코드를 얻지 만 브라우저는 페이지의 맨 아래를 백그라운드로 렌더링합니다.

하지만 내 테스트에서는 페이지 속도에 큰 영향을 미치지 않습니다.

+0

매우 감사드립니다. 이것은 유일한 비 js 솔루션 인 것 같습니다. :) – Biomehanika