블로그 로딩 속도 UP! (3) - JavaScript를 페이지 아래로 옮기기

2011. 3. 30. 18:04IT/Tistory Tips

 앞의 두 게시물에서 JavaScript 최적화와 CSS Sprite를 적용해서 블로그 로딩 시간을 줄이는 방법에 대해 이야기했다. 이번에 이야기할 내용은 앞의 두 내용보다 훨씬 간단히 적용할 수 있으면서도 JavaScript를 많이 사용하는 사이트나 블로그에서 그 효과가 더 크다. Ctrl + C, Ctrl + V만 잘하면 끝이다.

 웹 사이트를 표시할 때 해당 사이트의 HTML과 CSS를 참고 해서 작성된 순서대로 표시한다. 그런데 JavaScript 적용 방법에 대한 많은 글에서 인라인 JavaScript나 js 파일 적용에 대해 다음과 같이 설명한다.

여기 전체를 복사해서 <head>와 </head> 사이에 붙여넣기 하세요~

 여기서 문제가 발생한다. 티스토리를 기준으로 skin.html 파일 구성을 살펴보면 거의 맨 위에 <head>와 </head>가 위치한다. 이 공간에 JavaScript를 삽입하면 정작 페이지 표시에 관한 내용이 담긴 <body>가 시작하기도 전에 JavaScript를 내려받느라 시간을 허비한다. 많은 JavaScript가 적용된 사이트일수록 이 과정에 걸리는 시간이 길다.

 해결 방법은 아주 간단하다. <head>와 </head> 사이에 있는 JavaScript 부분을 </body> 바로 위로 옮기면 된다. JavaScript는 아래와 같은 부분이다.
  • <script type="text/javascript"> 스크립트 내용 </script>
  • <script type="text/javascript" src="스크립트 파일 주소.js"> </script>
 이 부분 전체를 복사해서 붙여넣기 하면 된다.

 일반적인 스킨의 JavaScript 위치다. <script type="text/javascript"> </script> 부분이 </head> 바로 위에 있는 것을 확인할 수 있다. 이 녀석들을 </body> 바로 위로 옮기자.

 수정한 JavaScript의 위치다. 이렇게 옮기면 페이지 구성 요소를 모두 불러온 다음 JavaScript를 불러오므로 JavaScript를 불러오느라 페이지가 제대로 표시되지 않는 일은 없다.

 보통 JavaScript는 특정한 명령을 수행하기 위한 것이지 HTML이나 CSS 처럼 웹페이지 표시 자체와 관련된 부분이 아니다. 그래서 이렇게 JavaScript의 위치를 옮기는 것만으로 웹페이지 표시 속도를 향상시키고 원래 JavaScript의 기능은 그대로 사용할 수 있다.

  • 프로필사진
    알 수 없는 사용자2011.04.01 11:31

    안쓴지 오래되니까 저도 가물가물 하네요. 페이지가 다 로딩됐는지 체크한 다음에 실행할 수 있는 메소드가 있었던것 같은데...

    익스플로러에서만 적용됐던것 같기도 하네요.
    좋은 정보 감사합니다. ^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.04.01 21:08 신고

      네포무크님 이야기 보니까 그런게 있었던가 하는 생각도 문득 드네요^^ 나중에 한 번 찾아봐야 겠습니다~

  • 프로필사진
    BlogIcon 김지태2011.07.29 17:59

    //네포무크
    기본자바스크립트
    window.onload = function(){
    (..실행할 소스..)
    };

    jQuery
    jQuery(function(){
    (..실행할 소스..)
    });

    이걸 말씀하시는건가보네요.

    아마 IE 말고도 웬만한건 다될꺼에요~

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.07.30 01:32 신고

      '실행할 소스' 부분에 스크립트 내용을 입력하면 되나요? 요걸로 페이지 로딩 끝난 다음 스크립트 실행되도록 하면 좋겠네요~
      좋은 팁 고맙습니다!

  • 프로필사진
    Favicon of https://quarker.tistory.com BlogIcon Uvan Osper2012.02.13 16:47 신고

    흠... 자바스크립트는 왠지 모르게 느려질것 같은 "기분" 이 들어서 최대한 자바스크립트를 없애고 쓰게되네요 ;; ㅎㅎ...
    잘 쓰면 굉장히 멋지게 쓸 수 있는데 말이죠...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.02.21 17:57 신고

      화려한 기능이 많지만, 확실히 속도는 느려지는 것 같아요 ㅎㅎ 선택의 문제죠^^

  • 프로필사진
    Favicon of https://min-blog.tistory.com BlogIcon 백전백승2012.07.19 18:36 신고

    자바스크립트를 body로 옮기면 로딩속도를 빠르게 한다는 아주 좋은 팁을 배웠네요. 감사합니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.07.19 19:54 신고

      안녕하세요^^ 비도 많이 오는데 별 일 없으시죠?
      좋은 하루 되세요!

  • 프로필사진
    알 수 없는 사용자2012.11.22 20:57

    좋은거 배워갑니다! 맨 윗줄 점령하고 있던 스크립트 세개 밑으로 옮겼네요.
    밑으로 내리면 작동을 안하는 줄로만 알고있었네요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2012.12.10 23:16 신고

      잘 되시니 다행이네요~ 가끔 안되는 녀석들도 있거든요 ㅠㅠ
      남들은 잘 몰라도 자기는 아는 자기 만족의 세계! 환영합니다.ㅎㅎ