웹 페이지가 로드되기 전에 더 빠르게 만드는 방법

https://ykss.netlify.app/translation/how_to_make_your_web_page_faster_before_it_even_loads/

보통 성능 개선을 할때는 FCP, LCP, INP 등 페이지가 로드 되고 난 이후의 성능을 고려한다. 이 아티클에서는 페이지가 로드되는 것까지 성능 개선을 어떻게 할 수 있을지에대해 다루었다

웹 페이지가 로드되기 전에 하는 일

window.performance 를 통해 로드와 관련된 성능 지표를 확인할 수 있다

• 브라우저 캐시 : HTTP GET 을 통해 리소스를 가져오면 브라우저는 먼저 HTTP 캐시를 확인한다.
  • domainLookupStart - fetchStart 가 캐시를 가져오는 시간이며 0이 아닌경우 느린 브라우저를 사용하거나 브라우저 캐시를 오랜 기간 지우지 않는 유저일 수 있다
• 브라우저 DNS : IP 주소를 찾는데 걸리는 시간 (domainLookupEnd - domainLookupStart)
• 브라우저 연결 : 브라우저가 웹 서버에 연결하는 시간 (connectEnd - connectStart)
• 브라우저 TLS/SSL : HTTPS로 연결할 경우 암호화 연결을 맺는 시간. (connectEnd 와 connectStart 사이에 secureConnectionStart)
  • HTTPS 미사용이거나 HTTP persistent connection 상태일경우 0일수 있음
• 브라우저 요청 : 리소스 요청을 공식적으로 시작하는 시간 (requestStart)
• 브라우저 응답 : 브라우저가 콘텐츠의 첫번째 바이트를 수신하는 시간

각 이벤트를 더 빠르게 할 수 있을까?

• 브라우저 캐시 : 사용자가 스스로 브라우저 캐시를 관리해야하는 부분임. 개발자가 관여할 수는 없다
• DNS 조회
  • 전세계에 분산된 DNS 제공업체에 투자하거나, DNS 레코드의 TTL 시간을 최대한 높게 설정함으로써 빠르게 할 수 있음
  • 다만 TTL 시간이 길면 메인 서버가 다운되고 백업 서버로 운영해야할때 TTL 시간만큼 변경이 늦어질 수 있다. DNS 조회는 일반적으로 빠르므로 이러한 단점을 감수할만큼 효과가 없을 수도 있다
  • 서드파티 리소스의 경우에는 rel="dns-prefetch" 속성을 주어 dns 를 미리 조회하게해서 속도를 개선할 수 있다. (자신의 도메인을 대상으로는 dns-prefetch를 사용하지마라)
• 브라우저연결, TLS 연결
  • TLS 연결은 이미 잘 최적화가 되어있다. 다만 서드파티리소스에 대해서 rel="preconnect"를 사용하여 개선할 수는 있다
• 브라우저 요청 및 응답
  • 요청 워터폴을 줄여라
    • 요청 워터폴 : 리소스를 요청하기 위해 다른 리소스 요청이 완료되기를 기다리는 상황
    • 서버에서 요청을 받았을때 응답을 주기까지 DB 호출을 하거나 API 요청을 보내는 경우, 이를 병렬로 처리하거나 리액트 fetch 워터폴(Suspense) 등으로 개선할 수 있음
  • 캐시 : CDN 으로 정적 리소스를 캐싱할 수 있음. 그외 많은 캐싱이 있다
  • HTML 스트리밍 : HTML 문서를 부분적으로 제공하는 방식으로, 유저에게 더 빠른 경험을 줄 수 있음.