주로 CSS의 <link> 태그는 <head> 태그 안에, JS의 <script> 태그는 </body> 태그 직전에 위치하도록 하는 것을 권장합니다.
웹 페이지의 렌더링 속도와 사용자 경험을 향상시키는 데 도움이 되기 때문인데요, CSS와 JS에서의 권장 위치가 다른 이유는 CSS는 페이지 구조, JS는 동작과 관련된 정보라는 차이 때문입니다-!
CSS는 페이지의 구조를 정의하는 데 필요한 정보라 앞쪽에, JS는 페이지의 동작을 제어하는 데 필요한 코드라 뒤쪽에 배치함으로써 브라우저가 웹 페이지를 효율적으로 처리할 수 있도록 합니다.
CSS <link> 태그 위치 (<head> 태그 사이)
<head>태그는 문서의 헤더 섹션을 나타내며, 여기에는 문서의 제목, 스타일 시트, 스크립트, 메타데이터 등이 포함됩니다. CSS를<head>태그 안에 위치시키면 아무래도 브라우저가 HTML 문서의 구조를 파악하는 데 필요한 정보를 앞쪽에 배치해서 유리하겠죠?- CSS는 페이지의 레이아웃을 결정하는 데 사용되므로 가능한 빨리 적용되어야 해요.
<head>태그 내에 CSS를 위치시키면, 브라우저가 HTML 문서를 렌더링하기 전에 스타일 규칙을 알고 있기 때문에 페이지의 첫 번째 렌더링 단계에서 이미 레이아웃을 생성할 수 있다는 장점이 있습니다.
JS <script> 태그 위치 (</body> 직전)
- <script> 태그가 다운 및 실행되는 동안에는 HTML 구문 분석이 막히기 때문에 script 태그가 상단에 있다면 페이지 표시 속도가 느려질 수 있습니다. body의 닫는 태그 직전, 즉 하단에 <script>를 배치하면 HTML이 먼저 파싱되어 사용자에게 보여지고, 이후에 동작과 관련된 script가 작동합니다.
- 즉, JavaScript는 페이지의 동작 제어에 사용되기 때문에 페이지의 마지막 부분에 위치시키면 사용자가 페이지를 처음 로드할 때 발생하는 렌더링 지연을 최소화할 수 있습니다.(페이지 로딩 시간이 단축됩니다.)
- <script>에 포함된 동적으로 로드될 수 있는 콘텐츠(팝업 창, 애니메이션 등) 제어도 초기 로드 후 이루어질 수 있다는 장점이 있습니다. 사용자가 페이지를 처음 로드할 때 불필요한 작업을 피하고, 필요한 시점에만 해당 기능을 로드하기 때문에 script 위치를 바꾸는 것만으로도 성능 개선이 가능해요.
참고자료
Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? | Fr
In a nutshell, such a placement of CSS s and JavaScript s allows for faster rendering of the page and better overall performance. Putting s in is part of the proper specification in building an optimized website. When a page first loads, HTML and CSS are b
www.greatfrontend.com
'WEB' 카테고리의 다른 글
| [CSS] normalize vs reset (0) | 2024.08.08 |
|---|---|
| [CSS] CSS 방법론(CSS Methodology) (0) | 2024.08.08 |
| [WEB] UI | 이미지 렌더링 속도 관리 | 이미지 태그의 src 속성 (0) | 2024.08.07 |
| [WEB] SVG (1) | 2024.08.07 |
| [WEB] 웹 표준 및 웹 접근성 (0) | 2024.08.06 |
