웹마스터 팁
▩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
주석제거하라는건 봤는데
그럼 다음이나 그런데는 주석쓰던데요?
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| ▩왼쪽에다가 스크롤바 넣기 [1] | ▩윤미 | 2002.02.21 |
| ▩HTML 최적화 기법 [3] | ▩윤미 | 2002.02.21 |
| msn 메신저 내 홈에서 채팅창과/대화상대 추가하기를 넣어보장! [8] | 카멜롯™ | 2002.02.21 |
| 브라우저 입력 창에 나만의 아이콘 띄우기 [2] | Topy | 2002.02.22 |
| 원하는 위치에 배경 고정 시키기 [5] | Topy | 2002.02.22 |
| Http에러코드들입니다 [8] | Shyos | 2002.02.22 |
| ▩[CSS] 한꺼번에 border =0 으로주기 (최적화 방법) | ▩윤미 | 2002.02.22 |
| ▩<subject> 앞으로가기, 뒤로가기, 새로고침 버튼 만들기 | ▩윤미 | 2002.02.22 |
| ▩(a href=#) 대신에 쓸수 있는 스타일 태그 [3] | ▩윤미 | 2002.02.22 |
| [CSS]모든 엘리먼트에 스타일시트 지정 [1] | 엔카일 | 2002.02.22 |
| Microsoft 에이전트를 이용해서 멋나게 꾸며보자 -_-)/ [7] | 티르-_-)/ | 2002.02.23 |
| HTML 문서 용량 줄이기 [9] | Telles | 2002.02.24 |
| [CSS+JAVA]CSS 와 자바스크립트를 파일로 만들어 연결 [5] | ▩윤미 | 2002.02.24 |
| 동영상을 띄어볼까요? [2] | ZipShin | 2002.02.24 |
오른쪽 스크롤바 에 출렁이며 내려오는 공지창
[3]
 | choice | 2002.02.25 |
|
페이지 스크롤 - 네개의 레이어를 이용한겁니다
[4]
| choice | 2002.02.25 |
| [스타일시트] 스타일 시트의 개념 [4] | 태엽감는새 | 2002.02.26 |
| [HTML] 기초적인 태그모음 #1 | 태엽감는새 | 2002.02.26 |
| [HTML] 기초적인 태그모음 #2 [1] | 태엽감는새 | 2002.02.26 |
| [HTML] 기초적인 태그모음 #3 | 태엽감는새 | 2002.02.26 |