웹마스터 팁

  2. Support
  3. 웹마스터 팁

▩HTML 최적화 기법

2002.02.21 20:07

▩윤미

HTML 최적화 기법 - 어디 디자인 싸이틀에서 퍼온건데.. 기억이 안나네요 ^^;


▶꼭 필요한 요소만 삽입하라
웹 페이지 상에서 없어도 페이지를 표시하는데 지장을 주지 않는 불필요한 디자인적 요소/태그들은 제거하라!

▶주석은 제거하라
개발용 HTML 파일에서는 주석을 관리하고, 실제 웹 사이트에 올릴 파일에서는 주석을 제거하라. 자동으로 주석을 제거하는 프로그램을 웹서버에 올리기 전에 돌리는 것도 한 방법이다.

▶HEAD 태그를 가볍게 하라
웹 페이지를 해석하기 전에 <HEAD> 태그를 해석하므로 이 부분은 최대한 가볍게 가져가는 것이 좋다. 스크립트 부분을 할 수 있다면 BODY의 끝에 위치시켜 최대한 로드하는 시간을 뒤 쪽으로 가져가라. 또한 <META> 태그는 200 문자 이내로 사용하고 스페이스 보다는 컴마(,)를 사용하라. META 태그 사용시 웹 로봇만 HEAD에 접근할 수 있도록 조건부(CONDITIONAL) META 태그를 사용하는 것도 고려해 보라.

▶테이블
복잡한 테이블을 최대한 심플하게 가져가라.
테이블 구조가 복잡할수록 그 만큼 브라우저가 해석하는데 오래 걸리기 때문이다.

또한 웹 문서의 앞 부분에 좀 더 빨리 읽힐 수 있는 테이블을 위치시키고 복잡한 것일 수록 웹 문서의 뒤 쪽으로 위치시켜라.

table 관련 스타일 중 table-layout 속성을 fixed로 하는 것도 때에 따라 사용할 것을 고려하라.

TD align="center"를 여러 개 사용하기 보다 하나의 TR align="center"를 사용하라.

테이블 주변의 간격을 조절하기 위해 TD 태그들을 사용하는 것보다, cellpadding이나 cellspacing 속성을 사용하라.

이미지를 사용할 경우 테이블의 셀 배경색으로 커버가 되는 부분은 이미지 대신 테이블 셀 배경색으로 대치시켜라.

▶스타일시트
HTML 태그 요소 중 스타일 시트로 대치될 수 있는 부분은 최대한 대치시켜라.
또한 HTML 태그 요소 안에 스타일 속성을 많이 사용하기 보다, css 파일에서 스타일을 정의하라. 스타일 클래스의 이름도 최대한 간략화 하라.

▶폰트
텍스트를 꾸미는 것과 관련한 많은 태그들은 스타일 시트로 대치시킬 수 있다면 대치시키는 것이 좋다.

▶이미지
페이지 내에 있는 이미지 크기와 수를 최대한 줄여라. 매 이미지마다 HTTP 요청이 이뤄지기 때문이다.

모든 이미지, 테이블, 애플릿 같은 경우 width와 height 속성을 적어주면 그만큼 브라우저가 해석하는데 도움이 된다.

이미지 태그 내에 불필요한 ALT 속성은 제거하라. 꼭 필요한 곳에서만 ALT 속성을 사용하라.

▶불필요한 공란, 줄바꿈, 탭 등은 제거하라
(<a href=url>은 정상적으로 동작한다). 이를 위한 전용 프로그램을 사용하는 것도 한 방법이다.

▶DHTML과 자바스크립트
복잡한 멀티미어적 효과를 구현하기 위해 DHTML, 자바스크립트를 사용하는 것보다 플래시를 사용하는 것이 더 나을 때가 있다.
자바스크립트 코드 역시 최대한 최적화시킬 필요가 있으며, js 파일로 만들어 링크시키는 방법을 사용하라.

▶색상을 나타내는 16진수 코드 중 3자리로 표현 가능한 것은 3자리로 표현하라. 예를 들어, #FFCC00는 #FC0로 표현 가능하다.  
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
홈페이지 접속시 XE를 바로 실행하기 [7] ezi 2011.08.20
nginx Tip 업로드시 [Error Code: HTTP Error, File name: 파일명, Message: 413] 뜰떄 [3] leave 2011.08.18
내 PC에서 XE 설치하는 방법 [2] file amd짱좋아 2011.08.17
XE 템플릿 구문 정리 [1] 우진홈 2011.08.17
sejin7940 게시판에 소셜XE 댓글 다는 방법 [소스코드] [5] Treasurej 2011.08.16
FTP에서 인코딩 때문에 애 먹으시는 분들? file 히피♬ 2011.08.15
계시판 확장변수에 대하여 여쭤봅니다. [1] 마지막드론 2011.08.14
Vimeo, Youtube 자동 썸네일 생성법(TED 추가) [47] file 마나풀 2011.08.12
자체 우편번호 검색DB 사용하기 우진홈 2011.08.11
게시글 주소 아주 짧게 줄이기 [11] 웹 엔진 2011.08.07
닉네임이나 이름의 뒷부분을 ** 처리로 숨기고픈 경우 [2] sejin7940 2011.08.06
비회원이 게시글 추천할수있게하는방법 [4] file 토끼매니아 2011.08.03
모듈 개발 틀 쉽게짜기 file Xiso 2011.08.03
모바일 메인에서 쓰는 기능을 삽입할려면 어떻게 해야 할까요?> 최상순480 2011.08.02
모바일과 MP3 화일 JW player 로 재생 하기 꽁수 김성곤820 2011.07.28
warning: call time pass by reference 에러 해결 방법 [6] ezi 2011.07.28
제로보드 XE의 세팅중 ssl사용해제방법 준돌이 2011.07.26
도라란님의 팁에 추가하여 MP3와 동영상 파일도 막고 싶을 경우.. [4] Canto 2011.07.23
로그인 정보 폼에 읽지 않은 쪽지 개수 보이기. [21] file 무얼까 2011.07.23
RefTagger (영어 성경 본문 출력기)를 설치하는 쉬운 방법 유샤인 2011.07.23
태그 쓰기