웹 페이지 빠르게 랜더링하기✨

이서현·2021년 7월 2일

FE web

WEB

목록 보기

2/17

오늘은 HTML 빠르게 랜더링하는 법에 대해 정리한다🌷

Fast-loading HTML Pages

1. 페이지 무게 줄이기

웹 페이지 불러오기 성능의 가장 중요한 요소는 페이지 무게이다. 불필요한 공백과 주석을 없애고 인라인 스크립트와 CSS를 외부 파일로 옮겨 페이지 구조 변하를 최소화하면서 다운로드 성능을 향상시킬 수 있다.

2. 파일 수를 최소화하기

파일 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소한다. 웹페이지에서 파일 수를 줄이면 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있다.

3. 도메인 검색을 줄이기

도메인은 DNS 검색에 시간을 소비하기 때문에 CSS와 JS, 이미지에 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축된다.

4. 재사용되는 내용을 캐시하기

캐시 가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 한다.

5. 페이지 컴포넌트의 순서를 최적화

페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있다. CSS, JS가 먼저 다운로드되어야 한다. 페이지 표시를 하는 페이지 내용 요소이기 때문이다. 이런 요소는 텍스트로 되어 있고 모뎀상에서 텍스트 압축 효과를 얻을 수 있어 가장 빠른 응답 시간을 제공한다.
DHTML 기능은 초기에 사용하지 못하게 하고 불러오기가 모두 끝난 후에 사용할 수 있게 해야한다.

6. Inline 수를 최소화

인라인 스크립트는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정한다. 따라서 많은 비용이 들어간다. 인라인 스크립트와 내용을 출력하는 document.write()의 사용을 줄여 전체 페이지를 불러오는 시간을 줄인다.

7. 최신 CSS와 올바른 markup을 사용하기

최신 CSS는 markup 양을 줄여주고 그림의 사용을 줄여준다. 텍스트를 나타내는 그림의 사용을 줄여준다. 올바른 markup을 사용하면 브라우저가 HTML을 처리할 때 오류를 정정하지 않아도 된다. 웹페이지의 공백과 불필요한 종료 테그를 삭제해주는 웹페이지 전처리 도구를 사용할 수 있다.