출처
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
왜 궁금했을까
매번 작성하는 HTML 문서에서, 링크 태그와 스크립트 태그를 보고 문득 궁금증이 생겼다. 둘다 문서 외부의 파일을 HTML 문서에 연결시키는 역할은 비슷한거 같은데, 왜 이들의 위치가 다를까?
개요
웹사이트 제작 시 HTML 코드의 배치는 깔끔함뿐만 아니라 웹사이트의 성능에 직접적인 영향을 미친다. 특히 <link>와 <script> 태그의 배치는 사용자가 페이지와 상호작용할 수 있는 속도에 큰 영향을 준다. 최적의 성능을 위한 이 태그들의 배치 방법에 대해 안내하겠다.
배치의 중요성
- CSS와
<link>태그:
CSS 스타일시트는 웹페이지 스타일링에 필수적이지만, 잘못 처리되면 페이지 렌더링을 차단할 수 있다. 렌더링 지연과 스타일 미적용 내용의 깜박임(FOUC)을 방지하기 위해 <link> 태그는 HTML의 <head> 섹션 안에 배치하는 것이 좋다. 이렇게 하면 스타일이 초기에 처리되어 페이지가 로딩 시작할 때부터 일관된 모습을 보여준다.
<head>
<link rel="stylesheet" href="styles.css">
</head>- 자바스크립트와
<script>태그:
자바스크립트 파일은 HTML을 조작할 수 있으므로 주의해서 다뤄야 한다. <head>에 <script> 태그를 배치하면 HTML 파싱 과정을 차단할 수 있으며, 스크립트가 크거나 네트워크가 느릴 경우 페이지 렌더링 지연이 눈에 띄게 된다. 모든 페이지가 파싱되고 렌더링된 후 스크립트가 실행되도록 <script> 태그는 </body> 태그 바로 앞에 배치하는 것이 좋다.
<body>
<!-- HTML content above -->
<script src="scripts.js"></script>
</body><head>에 스크립트를 배치해야 할 때
스크립트의 기능 요구 사항으로 인해 때때로 <head>에 스크립트를 로드해야 할 수 있다. 이 경우, async나 defer 속성을 사용하여 스크립트 로딩을 제어하고 파싱 과정에 방해가 되지 않도록 한다:
- Async: 스크립트를 비동기적으로 다운로드하고 다운로드가 완료되는 즉시 실행한다.
<script async src="script.js"></script>- Defer: 스크립트를 비동기적으로 다운로드하지만 HTML 파싱이 완료된 후 실행을 지연한다.
<script defer src="script.js"></script>결론
<link>와 <script> 태그의 정확한 배치를 이해하고 구현하면 웹사이트의 로딩 속도와 사용자 경험을 크게 개선할 수 있다. CSS와 자바스크립트가 최적의 시간에 로드되도록 함으로써 사이트의 미적 요소와 기능을 효율적으로 유지할 수 있다.
