웹마스터 팁
▩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로 표현 가능하다.
▶꼭 필요한 요소만 삽입하라
웹 페이지 상에서 없어도 페이지를 표시하는데 지장을 주지 않는 불필요한 디자인적 요소/태그들은 제거하라!
▶주석은 제거하라
개발용 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로 표현 가능하다.
댓글 3
-
피일식
2002.02.25 07:43
-- -
sohna
2002.04.18 21:33
"table-layout 속성을 fixed로" 하라구 하셨는데 구체적으로 명령어가 어떻게 되죠? -
마지막성지
2003.10.24 12:57
주석제거하라는건 봤는데
그럼 다음이나 그런데는 주석쓰던데요?
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| [스타일시트] 스타일 시트의 개념 [4] | 태엽감는새 | 2002.02.26 |
| ▩(a href=#) 대신에 쓸수 있는 스타일 태그 [3] | ▩윤미 | 2002.02.22 |
| 브라우저 입력 창에 나만의 아이콘 띄우기 [2] | Topy | 2002.02.22 |
| msn 메신저 내 홈에서 채팅창과/대화상대 추가하기를 넣어보장! [8] | 카멜롯™ | 2002.02.21 |
| ▩HTML 최적화 기법 [3] | ▩윤미 | 2002.02.21 |
| CSS 와 HTML 과 연결하기 [5] | Topy | 2002.02.21 |
| CSS에 클래스에 관한거 추가 [4] | DearMai | 2002.02.21 |
| 웹사이트 로딩속도 높혀주는 10가지 방법 [32] | 秀 | 2001.07.25 |
| 홈페이지에 Fade-in 적용하기~ [5] | remy | 2002.01.08 |
| [1차패치] 내 msn 현재상태를 보여주자! + 캡처없앰 -ㅂ- [18] | 티르 | 2002.01.04 |
| XE 업데이트 방법 - 제3편 (1.2.4 에서 1.4.4.1 이상의 최신버전으로 업그레이드) + 문제대응 [8] | Gekkou | 2010.07.07 |
비밀번호 찾기 기능 조심하세요
[4]
 | 老姜君 | 2010.10.28 |
|
내가 작성 한 글에 대한 일괄 삭제/이동/복사 권한 주기
[2]
| 개돌 | 2009.05.15 |
|
확장변수에 회원정보를 넣어보자
[10]
| 개돌 | 2009.06.30 |
| 관리자 페이지 (module=admin) 백지 문제 [5] | 개돌 | 2009.03.17 |
| lighttpd 에서 XE rewrite 기능 (.htaccess) 사용하기 [2] | msl2246 | 2009.02.28 |
|
에디터에 웹폰트를 추가하여 사용하기
[3]
| 하얌이 | 2010.10.18 |
| 플래시를 이용한 최근게시물 구현 [6] | 한그림 | 2010.10.13 |
| 애드온에서 모바일 환경 구분 코드 | misol | 2010.12.24 |
| BGM 등을 배경을 투명하게 iframe 으로 넣는 팁 [3] | 푸른커튼 | 2008.02.05 |