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