<link>를 <head>에 배치하기
<link>를 <head>에 넣는 것은 최적화된 웹사이트를 구축하기 위한 적절한 사양의 일부입니다. 페이지가 처음 로드될 때 HTML과 CSS는 동시에 구문 분석됩니다. HTML은 DOM(문서 객체 모델)을 생성하고 CSS는 CSSOM(CSS 객체 모델)을 생성합니다. 둘 다 웹사이트의 시각적 요소를 생성하는 데 필요하며, 빠른 "첫 의미 있는 렌더링(first meaningful paint)" 시간을 허용합니다. 이 점진적 렌더링은 최적화 사이트의 성능 점수가 측정되는 범주입니다. 스타일시트를 문서 하단에 배치하면 많은 브라우저에서 점진적 렌더링이 금지됩니다. 일부 브라우저는 스타일이 변경될 경우 페이지 요소를 다시 칠해야 하는 것을 방지하기 위해 렌더링을 차단합니다. 그러면 사용자는 빈 흰색 페이지를 계속 보게 됩니다. 다른 경우에는 스타일이 적용되지 않은 웹페이지를 표시하는 **스타일 없는 콘텐츠의 깜박임(FOUC)**이 발생할 수 있습니다.
<script>를 </body> 바로 앞에 배치하기
<script> 태그는 다운로드 및 실행되는 동안 HTML 구문 분석을 차단하여 페이지 속도를 늦출 수 있습니다. 스크립트를 하단에 배치하면 HTML이 먼저 구문 분석되어 사용자에게 표시될 수 있습니다.
<script>를 하단에 배치하는 예외는 스크립트에 document.write()가 포함되어 있을 때이지만, 요즘에는 document.write()를 사용하는 것이 좋은 방법이 아닙니다. 또한, <script>를 하단에 배치하면 브라우저가 전체 문서가 구문 분석될 때까지 스크립트 다운로드를 시작할 수 없습니다. 이렇게 하면 DOM 요소를 조작해야 하는 코드가 오류를 발생시키거나 전체 스크립트를 중단시키지 않습니다. <script>를 <head>에 넣어야 하는 경우 defer 속성을 사용하면 HTML이 구문 분석된 후에만 스크립트를 실행하는 동일한 효과를 얻을 수 있지만 브라우저는 스크립트를 더 일찍 다운로드할 수 있습니다.
닫는 </body> 태그 바로 앞에 스크립트를 배치하면 빈 캐시에서 페이지가 더 빠르게 로드되는 것처럼 보일 수 있습니다 (스크립트가 나머지 문서 다운로드를 차단하지 않기 때문입니다). 그러나 페이지 로드 중에 실행하려는 코드가 있는 경우 전체 페이지가 로드된 후에만 실행되기 시작합니다. 이러한 스크립트를 <head> 태그에 넣으면 더 일찍 실행되기 시작하므로 프라임 캐시에서는 페이지가 실제로 더 빠르게 로드되는 것처럼 보일 것입니다.
<head> 및 <body> 태그는 이제 선택 사항입니다.
HTML5 사양에 따라 <head> 및 <body>와 같은 특정 HTML 태그는 선택 사항입니다. Google의 스타일 가이드에서는 심지어 바이트를 절약하기 위해 이들을 제거할 것을 권장합니다. 그러나 이 관행은 아직 널리 채택되지 않았으며 성능 향상은 미미할 가능성이 있으며 대부분의 사이트에서는 중요하지 않을 것입니다.