웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
▩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.4.2 버전 업데이트 이후 발생하는 문제들과 대응 [10] | Gekkou | 2010.05.18 |
게시글볼때 댓글 입력폼 색상넣어서 구분짓기 | 유리가면™ | 2010.05.18 |
Textyle 블로그 메인 주소를 blog.domain.com 로 설정하기 [1] | 네오랑 | 2010.05.18 |
게시판(내용볼때) 제목란 색상을 원하는 색상으로 바꾸기 [1] | 유리가면™ | 2010.05.18 |
레이아웃 삽입 후 최근 설문조사 가져오기 | ilovesyr | 2010.05.18 |
최근게시물 태그가 적용된 상태로 불러오기 [3] | 땡땡이별나라 | 2010.05.13 |
Lighttpd 설치 | 김 무건 | 2010.05.12 |
Zend Optimizer + eAccelerator + Suhosin [1] | 김 무건 | 2010.05.12 |
PHP 설치 | 김 무건 | 2010.05.12 |
Apache 설치 | 김 무건 | 2010.05.12 |
MySQL 설치 | 김 무건 | 2010.05.12 |
파일 첨부 에러로 고생하시는 분 [2] | celli29 | 2010.05.11 |
XE운영을 하려면 닷네임(dotname) 호스팅을 사용하시면 안됩니다 [7] | nalireco | 2010.05.11 |
중국어게시판 사용할려고 합니다. | jmb5 | 2010.05.10 |
로그인시 다음과같은 오류가 발생합니다. 빠른답변좀 ㅠㅠ [3] | 푸팅 | 2010.05.10 |
기본 Content 위젯에 댓글 New표시하기 [10] | 조슈아킴 | 2010.05.08 |
XE 사용하기 - 동영상 강좌 [36] | 선우(善友) | 2010.05.05 |
게시판 수가 많아 제목을 써넣는데 시간 절약 방법 | 아모스리 | 2010.05.04 |
htaccess 쉽게 만들기 | 현원 | 2010.05.03 |
로그인 스킨 수정 팁 - 신규 쪽지 수 보여주기 [17] | 러브스킬 | 2010.05.03 |