웹 성능 최적화 할 수 있는 방법은 웹 페이지 로딩 최적화와 웹 페이지 렌더링 최적화로 크게 두가지로 나눌 수 있습니다. 이에 대해 알아보겠습니다.
로딩 최적화
블록 리소스 최적화
브라우저 로딩 과정에서 파싱 중 블록 리소스가 발생할 수 있습니다. CSS와 자바스크립트가 블록 리소스에 해당합니다. 이 블록 리소스를 최적화하는 방법은 CSS는 head, JS는 body 최하단에 위치하면 됩니다. 그렇게 하면 HTML 파싱을 도중에 멈추는 일이 발생하지 않습니다.
script 태그 위치에 상관없이 HTML 파싱을 멈추지 않고 하는 방법이 있습니다. 그 방법은 async나 defer 속성을 사용합니다. 이 속성들은 스크립트 파일을 병렬로 다운로드하게 해줍니다.
<script>
<script async >
병렬 다운로드하고 즉시 실행
<script defer >
병렬 다운로드하고 HTML 파싱 완료 후 실행
리소스 요청 수 줄이기
리소스를 불러오기 위해 여러 번 요청하는 것보다 한 번에 요청하는 게 더 효율적입니다. 그래서 리소스 요청 수를 줄이는 방법을 알아보겠습니다.
-
이미지 스프라이트
이미지 스프라이트는 여러 개 이미지를 하나로 만들고, CSS의background-position속성을 사용해 부분 이미지를 사용하는 방법입니다. -
번들링
webpack 같은 번들러를 이용해 여러 개 파일을 하나의 파일로 번들링해서 불러옵니다.
리소스 크기 줄이기
-
중복 코드, 불필요한 태그나 공백 제거
-
이미지 크기 줄이기
이미지 크기는 되도록 1MB는 넘지 않도록 합니다. squoosh 사이트를 이용해 이미지 사이즈나 색상 수 조절, 확장자 변경을 통해 크기를 줄일 수 있습니다.
CDN 사용
CDN(Content Delivery Network)는 사용자와 최대한 가까운 곳에서 콘텐츠를 빠르게 전송하게 해주는 시스템입니다. 각 지역에 캐시 서버(PoP, Points of Presense)를 분산 배치해 근접한 사용자 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달합니다. 예를 들어 한국에 있는 사용자가 미국에 호스팅된 웹 사이트를 이용할 경우 미국 서버를 이용하지 않고 한국에서 제일 가까운 서버를 이용합니다.
왼쪽 그림(단일 서버 배포)은 웹 파일이 한 곳에서 제공됩니다. 반면, 오른쪽 그림(CDN)은 웹 파일이 사용자와 가장 가까운 서버에서 제공됩니다.
웹 캐시
웹 캐시는 사용자가 요청하는 리소스(html, css, js, image 등)를 첫 요청 시에 내려 받은 뒤 특정 위치에 복사본을 저장하고, 이후 동일한 요청이 왔을 때 다시 내려 받지 않고 내부에 저장한 파일을 사용해서 더 빠르게 로딩하는 데 사용됩니다.
렌더링 최적화
요즘은 주로 React, Vue, Angular를 사용해서 웹을 구현합니다. 그래서 자신이 사용하는 라이브러리나 프레임워크에 맞는 렌더링 최적화 방법을 찾는 게 좋습니다. 저는 React를 사용하기 때문에 React 렌더링 최적화 방법을 정리했습니다.
