https://ui.toast.com/weekly-pick/ko_202012101720_ 의 글을 참고하며 정리한 글입니다.
LCP ?
Largest Contentful Paint의 약자로 이전 글에서 작성한 Web vitals의 주요 지표중 하나이다.
이름에서도 알 수 있듯이 가장 큰 컨텐츠가 화면에 나타나는 시간을 측정한다.
여기서 왜 가장 큰 컨텐츠를 다루었냐면 페이지의 주요 내용이 바로 가장 큰 컨텐츠로 예상하기 때문이라 한다.
LCP가 저하되는 이유는 아래의 4가지 이유과 같다.
- 느린 서버 응답 시간
- 자바스크립트와 CSS의 렌더 블로킹
- 느린 리소스 로딩 시간
- 클라이언트측 렌더링
느린 서버 응답 시간
당연히 서버의 응답 시간이 느리면 컨텐츠의 렌더링은 느려진다.
여기서 가장 먼저 떠오른 방법은 서버를 최적화 해야한다.
그렇다면 서버의 역활을 나눈다면 보다 서버의 부담이 줄어들지 않을까?
이를 위해 클라이언트와 CDN을 활용한다.
CDN이란 Content delivery network의 약자로 콘텐츠 전송 네트워크란 뜻이다.
다양한 위치에 분산된 서버들의 네트워크로 지리적으로 멀리 떨어진 사람이 웹 서버에 접속한다면, 물리적인 거리로 인해 응답이 늦어질 것이다.
CDN을 사용하여 사용자가 먼 곳의 서버에 대한 네트워크 요청을 절대 기다리지 않도록 한다.
또한 자원을 캐시하는 방법이 있다.
HTML이나 이미지와 같은 자원을 캐시하게되면, 서버에서 받을 필요 없이 PROXY서버나, 웹 브라우저 내부에는 캐시를 저장하는 저장소에서 캐시를 바로 사용하므로 시간이 절약된다.
캐시는 HTTP 헤더를 통해 해당 캐시 데이터를 사용해도 되는지 서버에서 검증을 받은 후에 사용된다.
자바스크립트와 CSS의 렌더 블로킹
브라우저가 콘텐츠를 렌더링하려면, 가장 먼저 HTML 마크업을 파싱해서 DOM 트리로 만들어야 한다. 이때 렌더링 과정에서도 관련 글을 정리했찌만 HTML 파서는 CSS , JS 파일이 만나면 DOM 생서잉 중단되고, CSSOM을 만들거나 JS파일을 해석한다.
결국 CSS와 JS는 DOM 트리 생성을 늦춰서 LCP를 지연시키는 렌더 블로킹 요소다. 웹 페이지의 주요 컨텐츠를 빠르게 로딩하기 위해서 중요하지 않은 자바스크립트와 CSS는 지연시킨다.
때문에 CSS, JS 각각에 맞는 최적화 방법이 필요하다
CSS
- 중요한 CSS는 내재한다.
- CSS를 최소화한다.
스페이스, 들여쓰기, 혹은 주석과 같은 문자들을 포함할 수 있는데 이런 문자들은 브라우저에게는 필요하지 않으며, 파일을 최소화하는 것으로 해당 문자가 제거될 수 있다.
현재 가장 대중적인 webpack에서는 optimize-css-assets-webpack-plugin 플러그인을 사용하여 이 문제를 해결한다. - 중요하지 않은 CSS를 지연시킨다.
사용되지 않는 CSS는 제거하며 link 태그의
rel="preload"와 onload 어트리뷰트를 활용하면 초기에 렌더링되지 않는 CSS는 비동기 방식으로 로드할 수 있다.
rel="preload" : 우선 순위를 높여야 하는 특정 리소스가 있다면, 보다 빨리 로드하기 위해 사용한다.
JS
JS 파일도 위와 같이 최소화를 하며 파일의 크기를 줄일 수 있다.
또한 defer 어트리뷰트를 통해, dom이 완성이 된 이후에 js파일을 해석하도록 설정해줄 수 있다.
CSR 에서의 단점으로 지적되는 것이 비대해진 JS파일을 불러오느라 그만큼의 초기 렌더링이 늦어진다는 것이다. 때문에 REACT에서는 코드 스플리팅 기능이나, Lazy Loading을 사용함으로 필요한 코드만을 응답해 시간을 가급적 줄이길 권장한다.
코드 스플리팅?
- 코드를 다양한 청크(chunk)로 나눌 수 있으며 필요에 따라 로드할 수 있다.
- 페이지 렌더링에 필요한 초기 응답 크기를 줄이는 데 도움이 된다.
더 상세한 설명은 https://ui.toast.com/weekly-pick/ko_20200128 이곳을 참고하려 한다.
느린 리소스 로딩 시간
리소스를 한번에 다 응답받는 다면 그만큼 초기 렌더링은 늦어진다. 때문에 리소스의 응답 시간을 늦춤으로서 문제를 어느정도 해결할 수 있다.
이를 lazy loading이라고 하는데, 스크롤이 해당 리소스의 위치에 접근하면 그제서야 리소스를 요청하는 것이다.
이외에도 몇가지 방법이 더 있다.
- 이미지를 최적화하고 압축한다.
이전에도 정리를 해봤지만, 포맷을 webp나 png 등을 사용하며 반응형 이미지를 이용함과 동시에 이미지의 크기를 가급적 줄인다. - 중요한 리소스를 미리 로드한다.
- 텍스트 파일을 압축한다.
- 네트워크 연결에 기반하여 다른 리소스를 제공한다(적응형 제공방식)
- 서비스 워커를 사용하여 리소스를 캐시한다.
클라이언트 측 렌더링
자바스크립트 파일을 가능한한 줄이는 것은 위에서도 언급했지만, 그만큼 중요한 내용이다.
이 외에도 다른 방법을 추가로 정리한다.
- 서버측 렌더링
SSR이 CSR보다 첫 렌더링이 빠른 이유는 서버의 렌더링을 사용하기 때문이다. 일반적으로 서버 측 성능이 클라이언트보다 좋으므로 렌더링도 그만큼 빨라진다.
이러한 이유로 react에서는 next.js를 통해 ssr 기능을 도입했다.
