HTML 청소하기

불필요한 요소를 제거해 사이트를 훨씬 더 간단한 계층구조로 만들어야 한다.

가능하면 HTML5 요소를 사용하여 문맥 기반의 계층구조로 만들어야 한다.

문맥 기반

문맥 기반의 요소 이름들은 요소 안의 콘텐츠 종류를 보여준다.

문맥 기반 요소의 적당한 예로는 header,nav와 같은 대표적인 HTML5 요소나 login, breadcrumbs와 같은 class 또는 ID 이름이 있다.

요소의 이름을 문맥에 맞게 바꾸는 것은 사이트를 더 나은 HTML 구조로 만드는데 도움이 될 뿐만 아니라 사이트 전반에 걸쳐 재사용이 가능한 디자인 패턴을 만들 수 있게 한다.

접근성

간결한 HTML은 문맥 기반 마크업의 성능, 편집 용이성과 더불어 사이트의 접근성에 도움이 된다.

문맥 기반의 HTML은 브라우저나 검색엔진, 스크린 리더가 이해하기 좋은 콘텐츠 계층구조를 제공한다.

CSS 정리하기

사용하지 않는 스타일

기존 사이트가 있다면, CSS 정리 작업의 첫 번째는 당연히 사용하지 않는 스타일을 제거하는 것이다.

스타일을 합치고 줄이기

사이트에 사용된 요소들의 스타일 중복이 없다는 것은 일관성있게 스타일을 적용했는지를 알 수 있는 좋은 지표이다.

자주 사용되는 디자인 패턴을 발견했다면 여러 클래스 이름을 쉼표로 이어서 쓰는 것보다 하나의 클래스로 합쳐 사이트 전체에 걸쳐 사용하면 좋다.

스타일시트 이미지 정리하기

스타일을 합치거나 줄이는 작업을 한 후에는 스타일시트에서 사용하는 이미지들을 봐야한다.

이미지는 사이트 내 페이지 크기의 대부분을 차지하므로 스타일시트에서 사용되는 이미지의 숫자와 크기를 줄이면 사이트 페이지 로딩 시간을 줄이는 데 직접적인 영향을 준다.

첫 번째로, 스프라이트로 만들 수 있는 이미지가 있는지 찾아본다.

두 번쨰 사이트가 오래될수록 스프라이트도 오래되기 마련이다.

마지막으로 스타일시트 내의 이미지를 CSS3 그레이디언트나 데이터 URI, SVG로 대체할 수 있는 곳이 있는지 찾아보자

특이성 제거하기

CSS에서 특이성이란 브라우저가 어떤 CSS 규칙을 적용할 것인지 결정하는 데 도움이 되도록 셀렉터를 작성하는 방법을 말한다.

특이성은 셀렉터를 기반으로 한 공식에 의해 계산된다.

비효율적인 셀렉터와 !important 규칙은 CSS 파일의 크기가 커지게 하므로 가능함녀 항상 작고 가벼운 셀렉터부터 만들고 거기에 특이성을 추가하는 게 좋다.

웹 글꼴 최적화

웹 글꼴은 사이트에 필요한 요청 횟수를 늘리고 페이지의 크기도 커지게 한다.

웹 글꼴의 파일 크기는 수 킬로바이트에서 200킬로바이트가 되는 것까지 다영하다.

웹 글꼴 파일의 크긱가 얼마인지 점검하고 다음의 방법을 통해 크기를 줄일 수 는 없을지 확인해본다.

1. 사이트 로고처럼 글꼴 중 일부 글자만 사용하는가? 아니면 모든 글자와 문장 부호를 사용하는가?

2. 글꼴이 여러 언어를 지원하는가? 혹시 하나의 부분 집합으로 언어를 줄일 수 있는가?

3. 불필요한 문자를 낱개로 제거할 수 있는가?

문자 부분 집합은 웹 글꼴 파일의 크기를 줄일 수 있는 가장 효과적인 방법이다.

재사용할 수 있는 마크업 만들기

재사용할 수 있는 마크업으로 만든 디자인 패턴은 사이트의 디자인이 변경되더라도 성능이 떨어지지 않도록 유지할 수 있는 중요한 열쇠다.

마크업을 재사용하면 다음 과 같은 효과가 있다.

1. 자원을 캐싱할 수 있는 기회 제공

2. 디자이너나 개발자가 이미 있는 것을 또 만드는 일 방지

3. 새로운 콘텐츠가 추가될 때 불필요한 자원 요청 제거

4. 더 이상 필요하지 않는 스타일과 자원 분리

마크업에 대한 추가 고려사항

CSS와 자바스크립트 로딩

CSS와 자바스크립트를 로딩할 때는 두 가지 규칙이 있다.

1. head에서 CSS를 로딩한다.

2. 페이지 하단에서 자바스크립트를 로딩한다.

CSS가 렌더링을 방해한다. 스타일시트를 페이지의 하단 가까이에 넣는다면 스타일시트는 페이지가 화면에 그려지는 것을 방해하게 된다.

스타일시트를 head에 넣으면 브라우저가 더 이상 스타일 정보를 찾지 않으므로 사용자에게 화면이 순차적으로 보이도록 할 수 있다.

스타일시트의 파일 개수를 가능한 적게 유지하면 브라우저가 요청하는 횟수를 줄일 수 있다.

이는 더 빨라진 페이지 로딩 시간으로 이어진다. 페이지 로딩 시간을 크게 증가시킬 수 있는 @import를 사용하지 말아야 한다는 것도 의미한다.

CSS는 작을수록 좋으며 개인적으로 CSS의 파일 크기는 30KB이하를 목표로 잡길 추천한다.

자바스크립트 파일은 페이지의 끝에서 가능한 비동기 방식으로 로딩되어야 한다.

그렇게 하면 더 빠르게 다른 페이지의 콘텐츠를 사용자에게 보여줄 수 있다.

이떄 자바스크립트를 명시적으로 비동기라고 선언하지 않음녀 DOM 만들기를 방해한다.

브라우저의 HTML 파서가 스크립트 태그를 발견하면 브라우저는 스크립트에 포함된 작업이 페이지의 렌더링 트리를 변경할 수도 있다고 판단한다.

그래서 스크립트가 실행되고 끝날떄까지 DOM 만들기를 중단한다.

스크립트의 작업이 끝나면 브라우저는 HTML 파서가 중단된 곳에서 DOM 만들기를 이어시 시작한다.

그러므로 스크립트를 페이지의 마지막에 호출하도록 옮기고 비동기로 선언하는 과정을 통해 중요 렌더링 경로를 최적화함으로써

사용자의 체감 성능을 개선하고 렌더링 블로킹문제를 없앨 수도 있다.

aysnc 태그를 스크립트에 추가하면 브라우저에 이 스크립트가 바로 실행되지 않아도 되므로 콘텐츠 렌더링을 막지 말라고 알려줄 수 있다.

이 코드는 브라우저가 DOM만들기를 계속하도록 하고 스크립트는 다운받은 후 준비가 되면 실행한다.

비동기 속성은 로딩순서를 보장하지 않으므로 의존성 문제를 일으킬 수 있다는 것을 기억해야 한다.

최소화와 GZIP

사용자에게 사이트를 공개하기 전에 스타일시트나 자바스크립트에 포함된 불필요한 문자들을 지우는 방법으로 자원을 최소화하는 작업이다.

최소화하기 위해 CSS 미니파이어나 JS 컴프레스 같은 도구를 사용한다.

텍스트 파일을 압축할 수 있는 또 다른 방법은 gzip을 적용하는 것이다.

gzip은 알고리즘에 기초한 파일 압축을 위해 사용하는 소프트웨어 애플리케이션이다.

gzip 알고리즘은 텍스트파일 안에 유사한 문자열을 찾은 후 찾은 문자열을 대체하여 전체 파일 크기를 줄인다.

반대로 브라우저는 압축된 파일을 받아 대체된 문자열을 디코딩한 후 사용자에게 올바른 콘텐츠를 보여준다.

gzip 압축을 적용하려면 먼저 웹 서버에서 활성화해야 한다.

gzip은 스타일시트와 HTML, 글꼴 등 모든 텍스트 파일에 적용할 수 있다.

WOFF 글꼴 파일은 유일하게 이미 압축되어 있어 gzip을 적용할 수 없다.

자원 캐싱하기

캐싱은 사이트 성능에 매우 중요하다.

캐싱된 자원은 서버에ㅓ 다시 받을 필요가 없기 때문에 요청 횟수를줄일 수 있다.

캐싱을 위한 정보는 브라우저와 서버 사이에 주고받는 요청의 HTTP 헤더에 있다.

서버에 새로운 자원이 있는지 확인하지 않고 캐싱된 자원을 사용할 수 있는 기간 정보(Expires와 Cache-Control: max-age)

브라우저가 캐싱된 자원인지 비교, 판단하는 데 사용되는 서버에 저장된 자원의 버전 정보(Last-Modified와 ETag)

Expires나 Cache-Control: max-age 둘 중 하나와 Last-Modified나 ETag 중 하나를 모든 캐싱 가능한 자원들에 설정해야 한다.

Expires가 Cache-Control: max-age 보다 널리 사용된다.

Last-Modified는 날짜를, ETag는 파일 버전 숫자처럼 자원의 버전을 의미 할수 있는 고유 식별 값을 갖는다.

모든 스태틱 자원은 캐싱이 적용되어야 한다.

이 떄 다음과 같은 점을 기억해야한다.

1. Expires에는 만기일로부터 최대 1년까지만 설정한다. 1년 이상 값으로 설정하면 RFC 지침에 위배된다.

2. Last-Modified는 자원이 마지막으로 변경된 날짜를 설정한다.

자주 바꿀 파일이라 유효 기간을 더 짧게 설정하고 싶다면 그렇게 해도 된다.

기간을 조절하는 대신 자원의 URL을 변경하여 사용자의 브라우저가 캐싱을 중단하고 새 버전을 가져오도록 강제할 수도 있다.