그누보드 - 소개 - 웹사이트 최적화 기법

소개 - 웹사이트 최적화 기법 정보

소개 - 웹사이트 최적화 기법

진서기 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 (119.♡.♡.30)
2009.06.29 14:02:11
1,376

본문

준비물
Firefox
Firebug
Yslow

원문에는 "웹 페이지 로드 시간을 단축하고 싶습니까? 로드 시간을 최대 80%까지 단축하여 전화 접속 사용자의 웹 브라우징 경험을 향상시키는 방법에 대해 설명합니다. " 라고 나와 있습니다만 광대역 접속을 이용하는 우리나라 환경에도 충분히 효과를 발휘할 수 있습니다.

YSLOW로 분석한 내용은 A~ F까지 아래 항목으로 점수를 줍니다.
각 항목에 대한 자세한 설명은 Read More 를 클릭하면 야후 개발자 네트워크 링크로 연결되며 상새 내용으 뜹니다. 영어로!!
http://developer.yahoo.com/performance/

1. HTTP 요청을 줄여라 -
이미지맵
css Sprite - 구글 한국어 메인페이지 아이콘들, css sprite 이용한 애니메이션 버튼
인라인 이미지 - ie6은 지원 안함;; 뒈져 IE6
스크립트, 스타일시트 병합 - 여러개로 링크된 js, css를 1개로 병합

2. CDN 이용
3. mod_expires
4. Gzip , mod_deflate
5. 스타일시트는 상단에- 내용중간 중간에 사용하지 말라는 것입니다.
6. 스크립트는 아래에 - 하단에 넣을수 있다면 되도록 소스 하단에 삽입
7. CSS Expression은 피할것
8. js, css는 외부파일로
9. ~~DNS 조회를 줄일것~~
10.js 최소화
11. URL 리다이렉트를 피할것
12. 스크립트 중복을 피할것
13. Etag 를 설정 - apache 환경설정 파일에 "FileETag none" 추가

한줄 요약
화면에 보여지는 코딩의 개선 만으로 페이지 로딩을 더 빠르게 할 수 있다!

야후 디벨로퍼네뜨워꾸 하단에

High-Performance Books by Yahoo!s

위 3종의 서적이 링크 되어 있는데 첫번째 책이

웹 사이트 최적화 기법 - UI 개발자를 위한 필수 지침서
Steve Souders

이며 국내 번역 출판 중입니다.

참고하셔서 좀더 최적화된, 느린 컴퓨터에서도 빠르게 뜨는 웹사이트를 만드는데 도움이 되길 바랍니다.

댓글 8개

알찬돌삐 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

(124.♡.♡.130)

09.06.29 14:12:31

모두 다 만족시키진 못하더라도.
3번의 mod_expire 만 만족시키면
최소 40% 이상 사이트 로딩 속도가 향상됩니다.(이미지가 많은 사이트의 경우)

진서기 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

(119.♡.♡.30)

09.06.29 14:17:46

저도 mod_expire 격하게 아낍니다.!

알찬돌삐 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

(124.♡.♡.130)

09.06.29 14:13:27

실예로 일 트래픽 1.7G ~ 2.0G 나오는 사이트에
mod_expire 적용후 트래픽량이 800M ~ 900M 로 반 정도로 뚝 떨어진적도 있습니다.

키스 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

(114.♡.♡.185)

09.06.29 14:13:58

그 중에서
6. 스크립트는 아래에 - 하단에 넣을수 있다면 되도록 소스 하단에 삽입
8. js, css는 외부파일로
이거 두개는 정말로 속도향상에 도움이 될까요?

8번은 어차피 불러와서 로딩하는 건데 외부파일이라고 달라질까요?
제작시 저렇게 하면 편리하긴 하지만 "첫페이지!!"에서는 마찬가지인 거 같던데...

6번은 스크립트 적용부분은 어차피 마지막에 처리되므로
전체페이지가 빨라진다기 보다는 일부페이지만 먼저 보여지는 정도인 것 같습니다.