▶꼭 필요한 요소만 삽입하라
웹 페이지 상에서 없어도 페이지를 표시하는데 지장을 주지 않는 불필요한 디자인적 요소/태그들은 제거하라!
▶주석은 제거하라
개발용 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로 표현 가능하다.
**********아는 선배의 충고
음.. 다 좋은 이야기이긴 한데.. 약간 틀린 부분이 있네..
이미지 태그내에 ALT속성은.. 권고안상 필수 값이라는.. 즉, 이미지 태그에는 필요하든 불필요 하든 이미지 태그가 있는 곳에 ALT속성은 지정해줘야 해. 다만 이를 해결하기 위해 불필요한 이미지 태그를 없애는 방안이 나오게 된거고..
기존의 쓸데없이 많이 사용하던 이미지 태그 대신 background-image등을 이용하여 img 태그의 사용을 최소화 하는 방법이 나오게 된거.
즉, img 태그는 무언가 의미가 있는, alt속성이 지정될 정도의 의미가 있는 곳에만 사용하는게 바람직하다는 뜻.
블로그 > 웃으며살자
http://blog.naver.com/han1448oppa/40030757359
