본문 바로가기

Tech-tips/Tistory

티스토리 속도향상 프로잭트 - 자바스크립트 위치 변경

티스토리 속도향상 프로잭트 자바스크립트 위치 변경


HTML문서에서는 자바스크립트는 CSS에 비해서 있어도 그뿐, 없어도 그뿐입니다. 물론 특정한 요소는 자바가 없으면 아예 구동이 되지 않지만, 블로그의 주 목적은 포스팅을 게제 하는 것이고 그 본연의 목적하에서는 자바스크립트는 크게 중요한 요소가 아닙니다. 사실 구글 웹사이트 개발 지침에서 보면 html과 css 만으로 사이트가 구동되어야 하며, 자바는 추가 적인 요소 이어야 한다고 명시되어 있습니다.


HTML 페이지는 페이지에 나타난 순서 부터 불러오게 됩니다. 그래서 보통 head 안에 link로 css를 넣으라고 하죠. 왜냐면 css가 가장 먼저 로드 되어야 페이지가 똑바로 뜨기 때문이죠. 정말 궁금하신 분들은 실험을 해보셔도 됩니다. css를 body 태그 맨 아래쪽에 놓고 태스트 해보세요


자바스크립트 예제


보통 head에 있는 요소를 불러오고 나서 아래의 내용을 불러오게 되는데, 이 때문에 자바 스크립트를 </body>바로 위쪽에 배치해야 하는 이유입니다. 포스팅이 로드가 되기도 전에 자바가 로딩을 하고 있다면 컨텐츠를 불러오지 않으니 곤란하겠죠?


참고로 웹사이트 로딩이 1초 늘어남에 따라 평균적으로 20%의 이탈자가 발생한다는 통계가 있습니다. 그러니 빠르게 로딩되는것이 아주 중요하겠죠 ㅎㅎ


간단하게 모든 자바스크립트를 </body> 태그 바로 위에 위치함으로써 로딩 속도를 향상 시켜보세요 ^^