반응형
Chapter 05. 스타일시트는 위에 넣어라.
간혹 엔지니어들은 페이지 초기에 필요없는 CSS를 외부 스타일시트에 넣고 이를 페이지 하단에 넣으면 페이지가 좀 더 빨리 로드될 것이란 기대를 한다. 하지만 오히려 반대로 HEAD 영역으로 이동시켰더니 속도가 더 빨라짐을 알 수 있었다.
1. 점진적인 렌더링.
브라우저는 브라우저 자신과 사용자가 페이지 하단의 스타일시트를 다 받을 때까지 기다리는 동안 페이지 렌더링을 지연시킨다. 스타일시트를 페이지 하단에 넣는 것의 문제는 여러 브라우저에서 점진적인 렌더링을 못하게 한다는 것이다.
2. sleep.cgi.
3. 빈 흰색 스크린.
웹 페이지를 호출 한 후에 빈 흰색 스크린을 보지 않으려면 CSS를 페이지 아래에 넣거나 @import 를 이용해 첨부하지 말고 CSS를 HEAD 영역으로 이동시키고 LINK 태그를 이용해서 첨부해야 한다. 이는 성능에도 영향을 준다.
4. 스타일이 뒤늦게 적용되는 콘텐츠.
빈 흰색 스크린 현상을 브라우저의 동작 방식 때문에 발생하는 현상이다. 페이지 안의 스타일시트 위치는 다운로드 시간에 영향을 주지 않지만 렌더링에는 영향을 준다. 마지막에 스타일시트가 다운된 후에 다시 렌더링되는 FOUC 현상은 반드시 피해야 한다.
5. 엔지니어는 무엇을 선택할 것인가.
스펙을 위반하는 페이지는 여전히 렌더링되지만 사용자 경험면에서는 성능 저하를 감수해야 한다. CSS는 HEAD 안에 LINK 태그를 이용해서 넣어라.
반응형