무료광고 ▶자세히보기
웹사이트 속도를 올려보자
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파일을 불러들이는 스크립트가 있다면, 그 스크립트를 불러들인 뒤에야 이어지는 문서 내용을 렌더링할 수 있기 때문입니다. 문서를 모두 그려준 후에 스크립트를 불러들이는 것이 로딩 속도가 당연히 빠르겠죠?

이 게시물을

번호
제목
조회 수
작성자
날짜
31777
조회 수: 11
2024.04.05
31774
조회 수: 12
2024.04.04
31773
조회 수: 11
2024.04.04
31772
조회 수: 13
2024.04.03
31771
조회 수: 13
2024.04.03
조회 수: 12
2024.04.04
조회 수: 11
2024.04.04
조회 수: 13
2024.04.03
조회 수: 13
2024.04.03

SEARCH