NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


웹 페이지 성능향상을 위한 Javascript 코드의 지연.

본문 건너 뛰기

안녕하세요? 오늘은 매우 간단한 방법으로 웹 페이지의 성능을 크게 향상시킬 수 있는 팁 하나를 공유하고자 합니다. 혹시 알고 계셨나요? Javascript코드의 배치를 바꾸거나 간단한 속성을 추가하는 것만으로도 웹 페이지는 더 빠르게 화면을 렌더링 하게 됩니다. Yahoo.com 에 근무하며 High Performance Web Site라는 책을 저술했던 Steve Souders는 친절하게도 자신의 웹 사이트를 통하여 책에 있는 14가지 지침에 대한 예제를 공개하고 있습니다. 그것이 바로 14 Rules for Faster-Loading Web Sites 입니다. 포털의 UI부서에 근무하시는 분들에게는 거의 웹 페이지 성능에 관한 교과서로 읽힌다고 해도 과언이 아닐껍니다. 오늘 소개할 내용은 14원칙중  6번째인 ‘Put Scripts at the Bottom‘편이지만 그 밖의 나머지 지침들도 강력하게 권해드립니다.

<script>는 <body>~</body>요소의 닫기 태그 바로 위에 적습니다

웹 브라우저는 HTML/CSS/Javascript 구문을 해석(Parsing)할 때 하나의 파일을 모두 해석한 다음 한꺼번에 화면에 출력하지 않고 한줄 한줄씩 해석해내는대로 화면에 출력해 냅니다. 따라서 문서 <head>~</head>에 포함된 <script>문을 모두 해석한 다음 본문에 해당하는 <body>~</body>영역을 출력하게 되죠. 이때 <script>문을 해석하는 시간이 오래 걸린다면 어떻게 될까요? 웹 브라우저 화면과 사용자의 얼굴은 하얗게 질려 있겠죠. 때문에 Steve Souder는 말했습니다. ‘Put Scripts at the Bottom‘  스크립트는 바닥에 넣으라고 말이죠. Script Top vs. Bottom 이라는 페이지를 확인해 보세요. 어느쪽이 빨리 뜨는지. 단, <script> 요소는 반드시 <body>~</body> 안쪽에 포함되어 있어야 합니다. <head>~</head>또는 <body>~</body>영역 바깥쪽에 <script>를 넣으면 문법적으로 유효하지 않기 때문에 HTML Validation 오류를 만나시게 됩니다.

<script> 요소에 defer="defer" 속성을 사용합니다.

defer라는 단어는 우리말로 ‘연기하다, 미루다, 유예하다’라는 의미 입니다. 웹 페이지의 성능을 위하여 HTML 코드와 CSS 코드는 절대로 뒤로 미루어선 안되지만 script는 잠깐 지연시켜도 됩니다. 그 이유는 화면 렌더링과 관련된 대부분의 코드는 HTML/CSS 안에 포함되어 있으며 대부분의 script는 사용자의 액션이 발생한 이후의 동작을 렌더링하고 있기 때문입니다. 앞서 우리는 <script> 구문을 페이지의 아래쪽에 두면서 스크립트 코드를 지연시키는 방법을 알게 되었습니다. 하지만 굳이 <head>~</head>안에 포함시켜야 한다면? 웹 사이트에 CMS(Content Management System)도구를 사용하는등 여러가지 이유로 <script> 코드의 위치를 마음대로 바꿀 수 없는 경우라면 <script>코드의 위치를 바꾸는 대신 defer 속성을 기입하여 HTML코드의 해석이 끝난 이후로 지연시킬 수 있습니다. 그것이 바로 defer 속성입니다. 참고 : defer속성이 사용된 예제 페이지.

<script type="text/javascript" defer="defer">

하지만 defer는 현재 Internet Explorer 브라우저에서만 지원하고 있습니다. 그렇다면 defer 속성이 MS전용 속성이 아닌가 생각하실 텐데 그렇다면 제가 감히 이렇게 소개해 드리겠습니까? 표준 속성이 맞습니다. W3C > HTML 4.01 > Scripts > defer. 맨날 Internet Explorer 욕만 했는데 오늘은 칭찬꺼리 하나 나왔네요. Firefox, Opera, Safari 뭐하는겁니까? defer 속성도 지원 안해주고. 잘좀 해봐요.

분류: 웹 기획,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2008년 5월 23일, 1:28 | 정찬명 | 댓글: 9개 |
트랙백URI - http://naradesign.net/wp/2008/05/23/142/trackback/

9개의 댓글이 있습니다.

  1. 정찬명의 생각…

    ‘웹 페이지 성능 향상을 위한 Javascript 코드의 지연’…

  2. jucke 댓글:

    IE가 칭찬받다니. .별일이 다있네요.
    유용한 팁 감사합니다 .^^

  3. 초록별사랑 댓글:

    좋은글 감사합니다. ^^

  4. 장혁닷컴 댓글:

    예전에 High Performance Web Site 라는 글 읽어봤었는데도 번역(-_-)이 잘 안되어 적용이 힘들었던 기억이 나네요 =_=;;

    어거지로 몇개 이해해서 적용시켜놨습니다만, 이런 좋은 팁 새로 알려주셔서 감사합니다 ^^

  5. 장혁닷컴 댓글:

    속도가 빨라진다는 말에 너무 기쁜 마음에 바로 적용시켜봤습니다.
    그런데 페이지가 갑자기 안뜨길래 알고보니 google analytics 코드에 문제가 있더군요;
    document.write 부분이 있다보니 그 부분만 출력되고 끝이었던 것입니다;

    defer=”defer” 옵션이 아주 강력하네요 =_= ㅋ

  6. 삽지리 댓글:

    좋은내용이네요 담아갈게요

  7. […] 모두)를 채용하셔야 한다고 생각합니다. 인사가 만사. 그리고 자바스크립트 코드는 되도록 아래쪽에 […]

  8. 익명 댓글:

    아주 오래된 글이네요… 이제 막 시작하게된 신입입니다.. head태그안에 스크립트를 사용하는 방식과 body태그안에 스크립트를 사용하는 방식에 대해 궁금해져서 이곳저곳 검색해보았는데요. 태그 바로앞에 자바스크립트를 사용하는데 있어서 단점 같은 것은 없나요?? 꼭 필요한 경우가 아니라면 태그 바로 앞에 사용하는게 더 좋을지.. 궁금합니다.

  9. 정찬명 댓글:

    @익명
    소스 코드를 작성하셔서 내용이 누락된 것은 아닌지요? ‘태그 바로 앞’이 어떤 태그를 의미하는 것인가요? 소스 코드는 [head] 또는 [body] 이렇게 괄호로 변환하여 작성해 주세요.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님