Contents Optimization

웹페이지의 최적화를 통해 웹사이트의 성능을 향상시켜, 웹 서비스의 퍼포먼스 측면에서 많은 이익을 볼 수 있습니다. 이 문서는 Yahoo Developer Network에서 제시한 웹사이트 최적화 기법에 노하우를 추가하여 작성된 문서입니다.
참고: https://developer.yahoo.com/performance/rules.html

1. HTTP 요청을 줄이세요.

HTML안에 정의된 css, js, 이미지, 미디어 파일등은 서버로 요청하고 응답받기까지 시간이 필요합니다. 이러한 파일들이 많으면 많을수록 응답에 대기하는 시간이 길어지고 웹사이트의 성능을 떨어뜨립니다.

2. 스타일 시트는 HTML 문서의 상단에 선언하세요.

CSS파일은 DOM이 그려지기 전에 선언이 되는게 브라우저가 레이아웃을 렌더링하는 속도가 향상됩니다. CSS파일을 <head>태그안에 정의하세요.

3. 스크립트는 아래에 작성하세요.

스크립트 파일들은 <body>맨 밑에 선언되는것이 효율적입니다. DOM이 모두 그려지기전에 script가 해석되면 그만큼 DOM이 완전히 그려지는 시기가 늦어집니다.

4. 스타일 시트와 자바스크립트는 별도의 파일로 분리하세요.

스타일 시트와 자바스크립트를 별도로 분리함으로써 필요한 부분만 불러오는 효과를 기대할 수 있고 별도의 파일로 저장되므로 캐시효과를 기대할 수 있습니다. 서버측 최적화중 expire설정과 함께하면 효율이 좋아집니다.

5. 자바스크립트와 스타일시트를 압축(Minify)하세요.

텍스트기반의 스크립트인 자바스크립트는 컴파일 되지 않고 원시소스를 다운로드 받아 브라우저에서 해석하므로 원시소스의 용량이 크면 그만큼 다운로드 되는데 시간이 오래 걸립니다. YUI Compressor나 JSMIN, packer같은 툴로 기능은 유지하면서 주석, 줄바꿈, 공백문자, 들여쓰기등을 제거하고 변수명을 줄여줌으로써 용량을 줄여 로딩속도가 빨라지는 결과를 기대할 수 있습니다. 소스가 길수록 효과도 더 큽니다. 스타일시트도 마찬가지 방법으로 용량 감소효과를 기대할 수 있습니다.

6. CSS에서는 IE전용 속성인 Expression사용을 자제하세요.

IE계열 브라우저에서만 작동하는 expression식들은 IE 하위 버전에서 표현하지 못하는 스타일에 자주 사용하는 방법 중 하나입니다. 하지만 이는 브라우저에 많은 연산을 요구하기 때문에 로딩속도가 느려지는 결과를 초래합니다. 특히 오류를 발생할 가능성을 항상 가지고 있습니다.

7. CSS에서 Filter사용을 자제하세요.

Filter또한 Expression과 마찬가지로 IE계열 브라우저에서 사용되어집니다. 특히 IE6이하의 브라우저에서 AlphaImageLoader를 사용하여 투명한 PNG등을 처리하는 용도로 많이 사용되어집니다. 이는 페이지가 렌더링 될때 브라우저를 잠시 프리징시켜 느려지게 보이는 결과를 가져옵니다. 굳이 사용하겠다면 _filter등을 이용하여 IE7 이상에서는 작동하지 않게하세요.

8. 중복되는 스크립트를 제거하세요.

같은 자바스크립트를 여러개 불러야 할 경우가 가끔 발생합니다. 브라우저나 캐시설정에따라 같은 스크립트파일이라고 하더라도 브라우저는 지속적으로 파일을 요청하고 해석을 하기때문에 중복되는 스크립트 파일이나 함수는 가급적 피하는것이 좋습니다.

9. AJAX를 캐시하세요.

AJAX요청도 헤더에 expire설정을 통해 캐시할 수 있습니다.

10. @import사용을 자제하세요.

IE에서 css를 불러올때 @import를 사용하면 문서를 모두 불러들인 후 css파일을 읽어오는 등 css파일이 느리게 불러오거나 의도한 순서대로 불러오지 못하는 문제들이 있습니다. css를 개발자가 의도하는 순서로 다운로드 되게하기 위해선 <link>태그를 이용하여 css를 불러오는것이 효과적이고 빠릅니다.

11. 404응답을 없애세요.

서버에 없는 콘텐츠를 요청하는것은 비효울적이고 리퀘스트를 낭비하는 일입니다.

12. img태그에 빈 src를 사용하지마세요.

    <img src="" />
    
    var img = new Image();
    img.src = "";
이렇게 src를 비우면 일부 브라우저에서 문제가 발생합니다.

13. 포토샵에서 이미지를 저장할때 Save for Web으로 저장하세요.

웹용 이미지로 저장하면 웹에 최적화된 결과를 얻을 수 있습니다.

14. jpg파일은 꼭 quality를 100으로 할 필요는 없습니다.

좋은 품질의 이미지를 표시하는것은 필요한 일이지만, 좋은 퀄리티와 파일의 용량은 비례합니다. 굳이 고화질의 이미지를 고집해야 하지 않는다면 적당히 퀄리티를 줄이는게 용량감소에 큰 도움이 됩니다.

15. 이미지는 되도록 png를 사용하세요.

png는 가볍고 gif대비 크기 대 용량면에서 큰 이익을 얻을 수 있는 파일 포멧입니다.

16. png이미지는 최대한 압축하세요.

png이미지 압축툴로 png이미지를 줄이면 최대 절반이하로 용량이 줄어듭니다.

17. 조그마한 이미지들(불릿, 아이콘 등)은 하나의 이미지로 묶어서 HTTP 요청을 줄이세요.

조그마한 이미지들이 많아지면 용량대비 요청이 늘어나 웹페이지의 로딩에 많은 악영향을 끼칩니다. CSS Sprite기법으로 작은 이미지들은 하나의 파일로 묶어서 처리하면 좋습니다.

18. 이미지를 만들때 사용하는 색상수가 적으면 용량 감소에 큰 향상이 있습니다.

이미지는 색상수가 많을수록 압축률이 낮아져 용량이 커지게 됩니다. 아이콘이나 간단한 이미지를 마드실때 사용 색상수를 최소화하면 용량을 줄이는데 큰 도움이 됩니다.

19. favicon.ico을 작게 만들고 캐시가 되도록 하세요.

ico는 의외로 파일 사이즈가 큽니다. ico는 하나의 파일에 여러 사이즈의 아이콘을 넣을 수 있습니다. 그리하여 큰 사이즈의 파비콘을 넣을 경우 웹 페이지에서 다른 파일을 불어오는데도 방해가 되는 요소가 됩니다. 필요없는 사이즈의 아이콘을 제거하고 색상을 단순화하여 사이즈를 줄이세요. 또 파비콘은 거의 바뀔일이 없는 경우가 대부분입니다. 상황에 맞도록 적당히 길게 Expire 헤더를 설정하여 페이지가 로드될때마다 불러들이지 않게 설정하세요.

20. 파비콘은 png와 ico 두 가지를 준비하세요.

IE는 파비콘으로 ico만 사용할 수 있지만 다른 브라우저들은 대부분 png를 파비콘으로 사용할 수 있습니다. ico대비 png가 용량측면에서 큰 이득을 볼 수 있습니다. 또한 IE에서는 HTML5의 표준 파비콘 속성인 rel="icon"가 적용되지 않으므로 조건부 주석을 이용하여 IE이외의 브라우저에서는 png를 사용하세요. 

    <link rel="icon" type="image/png" href="favicon.png" />
    <!--[if ie]>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <![endif]-->
21. HTML에서 이미지 사이즈를 줄이지 마세요.

큰 이미지를 작게 표현할때 큰이미지를 로딩하여 css나 속성등을 사용하여 이미지 크기를 줄이는 경우 보여주는것에 비해서 쓸데없이 큰 용량의 이미지를 불러야 합니다. 작은 이미지를 불러들일때는 별도의 썸네일을 준비하세요.

22. CSS를 효율적이게 작성하세요

CSS중복을 줄이고 단순화함으로써 코드의 양을 줄일 수 있고 렌더링 속도에 이점을 가져올 수 있습니다. 줄바꿈을 최소화 하고 0의 단위응 생략하여 코드의 길이를 줄일 수 있습니다.

23. 리다이렉트를 피하세요.

리다이렉트를 사용하면 서버의 요청이 늘어날 뿐더러 사용자에게 원하는 페이지를 보기 전 쓸데없는 페이지를 보여주는 결과를 가져옵니다.

24. 웹사이트 성능 평가도구를 활용하세요.

Yahoo Developer Network에서는 웹사이트 최적화 가이드를 제시하고, 각각 항목에 대한 평가를 하는 도구인 YSlow라는 툴을 배포하고 있습니다.
또한 Google에서도 Page Speed라는 웹페이지 분석도구를 제공합니다.
이들 도구를 활용하여 웹페이지의 성능을 체크하고, 문제점을 파악하는데 도움을 얻을 수 있습니다.

History