그누커뮨 GNUboard COMmUNities
트위터아이디로 로그인하기트위터ID로 로그인
커뮤니티 운영에 관련된 노하우를 정리해보았습니다.
특히 검색엔진최적화(SEO)에 대한 내용도 있으니 읽어보세요.
초기 단계에 있는 운영자들에게 도움이 되었으면 좋겠습니다.
더불어 이 게시판에 있는 글은 링크와 함께 퍼가는 것을 허용합니다.
공감하시거나 이견이 있으시면 언제든 댓글 달아주세요.^^
 
작성일 : 09-11-11 18:35

웹사이트 속도를 올려보자

 글쓴이 : 말러83
조회 : 3,373  

키워드 : 최적화, 속도, 사이트운영, javascript, js, css, 향상

오토스크랩 : 일괄 스크랩 오토스크랩 설정 네이버 블로그로 스크랩 다음 블로그로 스크랩 이글루스로 스크랩 티스토리로 스크랩 텍스트큐브로 스크랩 트위터로 보내기
ITC에서 나온 웹 사이트 최적화 기법에서는 다음과 같이 14가지 기법을 언급하고 있습니다.
- HTTP 요청을 줄여라
- 콘텐츠 전송 네트워크를 이용하라
- 헤더에 만료기한을 추가하라
- Gzip 컴포넌트
- 스타일시트를 위에 넣어라
- 스크립트를 아래에 넣어라
- CSS expression을 피해라
- 자바스크립트와 CSS를 외부파일에 넣어라
- DNS 조회를 줄여라
- 자바스크립트를 최소화하라
- 리다이렉트를 피하라
- 중복되는 스크립트를 제거하라
- ETag를 설정하라
- 캐시를 지원하는 Ajax 만들기

이중에서 서버 세팅과 관련성이 적고, 에디트플러스만으로도 비교적 쉽게 할 수 있는 몇가지를 언급해보겠습니다. 전체적인 내용을 찾고 싶으면 포털 사이트에서 책 제목으로 검색하시면 됩니다.

CSS, JS 파일을 사용하자
이렇게 파일을 쪼개는 것은 언뜻 보면 1번 기법 "HTTP 요청을 줄여라"에 위배되는 것처럼 보입니다. 하지만 css와 js 파일은 캐쉬가 되기 때문에 잘 변하지 않는 css와 js 파일을 이용자 컴퓨터에서 매번 받아오지 않게 함으로써 속도를 올릴 수 있습니다.

CSS 파일은 head에 넣자.
<link rel="stylesheet" href="/style.css" type="text/css" />
보통 이런식으로 head 태그 안에 넣는데요, 종종 이것을 본문에 넣는 경우가 있습니다.
브라우저에서 스타일시트의 구조를 분석하고 정리한 다음에 문서를 그리는 작업(렌더링)을 시작하는 것이 더 효율적이기 때문에 가능한 css 파일은 head에서 로딩되도록 하는 것이 좋습니다.

JS 파일은 tail에 넣자.
특히 <script src="...." type="text/javascript"></script> 이런 식으로 스크립트를 불러오는 경우라면 더더욱 문서 뒤로 넣어야 합니다. 첫머리에 js파일을 불러들이는 스크립트가 있다면, 그 스크립트를 불러들인 뒤에야 이어지는 문서 내용을 렌더링할 수 있기 때문입니다. 문서를 모두 그려준 후에 스크립트를 불러들이는 것이 로딩 속도가 당연히 빠르겠죠?

이런 작업을 마친 뒤에 웹사이트 로딩 속도를 측정해보는 건 어떨까요?

게시물의 저작권은 별도 표시가 없는 한 작성자에게 있습니다.
게시물 주소 : http://gnucomun.net/sp/knowhow.48
5.3 (3명)
평가해주세요. 비회원 가능!
 
 

Total 44
번호 제   목 글쓴이 평점 날짜 조회
44 많은 글 속에 나와 관련된 것을 쉽게 찾게 해주자 (4) 말러83 9.50 01-30 6937
43 꼬리에 꼬리를 물게 해주자 (1) 말러83 10.00 01-08 6455
42 관심을 글쓴이에게 전달해주자 말러83 5.50 01-08 6105
41 메인화면 수정하는 것을 두려워하지 말자 말러83 3.50 01-08 6328
40 설문으로 사이트의 기능을 소개하자 말러83 9.50 12-28 6001
39 [애드센스] 영어광고가 자꾸 나올 때 조치 방법 말러83 8.00 05-08 5146
38 부하가 걸리는 곳을 캐싱해주자 말러83 10.00 04-16 3835
37 방문자의 통계를 내고 싶다면 구글 Analytics (5) 말러83 5.50 04-13 6247
36 자유게시판을 없애라 (5) 말러83 8.20 01-09 4897
35 게시판/블로그에 글 잘 쓰는 방법 (5) 말러83 9.25 12-15 5323
34 [SEO] double SERP listing에 대한 실험과 분석 (3) 말러83 9.33 12-11 5110
33 [SEO] 타이틀과 메타태그 쓰는 요령 7가지 말러83 7.86 12-10 5679
32 [SEO] 이용자가 편한 것이 최고 말러83 7.00 12-10 3302
31 미러블로그를 운영하자 (3) 말러83 8.75 12-06 4529
30 트위터로 소개하기 버튼 (10) 말러83 6.83 12-05 5863
29 방문자를 부풀려 보여주자 (1) 말러83 8.75 12-05 3825
28 이벤트를 해보자 (2) 말러83 8.67 11-29 2467
27 내 홈페이지 로딩시간 측정 (11) 말러83 7.67 11-11 4535
26 웹사이트 속도를 올려보자 말러83 5.33 11-11 3374
25 대체 RSS 주소를 제공하자 (5) 말러83 9.50 11-11 3020
24 RSS를 제공하자 (5) 말러83 8.00 11-11 3106
23 눈팅족은 많을수록 좋다 (3) 말러83 8.44 11-07 2929
22 사이트에 위젯을 달아보자 말러83 4.50 11-03 2531
21 구글 웹마스터에서 사이트맵을 제출하자 말러83 8.00 11-02 2890
20 다 보여주되 알짜배기는 아껴두자 (4) 말러83 9.20 11-01 3198
19 어떤 주제의 커뮤니티를 만들어볼까? 말러83 7.00 10-31 2075
18 어디서 트래픽을 줄일 수 있을까? Google Page Speed (1) 말러83 7.50 10-28 3174
17 [SEO] 게시물의 정규링크(cannonical link) 지정하기 (2) 말러83 0.00 10-27 3365
16 [SEO] 품질 가이드라인 - 구글 웹마스터 가이드라인 (1) 말러83 0.00 10-27 2955
15 [SEO] 디자인 및 콘텐츠 가이드라인 - 구글 웹마스터 가이드라인 말러83 0.00 10-27 3612
14 파란 블로그의 블로그글 동시발행 기능을 이용해 홍보하자 (4) 말러83 10.00 10-26 2934
13 캐쉬포인트, 구글 애드센스를 대체할만한 광고일까? (2) 말러83 6.00 10-26 2576
12 파비콘(favicon)을 추가해주자 (1) 말러83 8.71 10-15 5859
11 [SEO] 첨부 그림파일에 대체텍스트(alt)를 넣자 (10) 말러83 10.00 10-14 4201
10 [SEO] 글 작성시 키워드를 받자 (9) 말러83 8.50 10-14 5342
9 [SEO] 그누보드 글 제목을 title로 넣기 + 메타태그 개선 (11) 말러83 8.14 10-14 10328
8 [SEO] 포털 로봇을 불러들이자 (3) 말러83 7.14 10-14 5126
7 초보자용 로고 작성 툴 소개 말러83 9.00 10-09 2865
6 사이트 이름, 카피, 로고 만들기 말러83 9.67 10-07 2519
5 포털 사이트에 홈페이지를 등록하자 (5) 말러83 9.50 10-05 3914
4 커뮤니티를 홍보하는 방법 (1) 말러83 7.60 10-05 5212
3 첫 화면에 그림을 노출시켜라 (1) 말러83 7.50 10-02 2880
2 오픈 전에 화면을 가득 채워라 (1) 말러83 9.67 10-02 2810
1 커뮨 활성화 가능성을 가늠하는 5가지 척도 말러83 6.00 09-27 3937

Copyright ⓒ그누커뮨(http://gnucomun.net) All rights reserved.