(계속 추가됨)

중요 요청 체이닝 방지하기

중요 요청(critical request)

웹 페이지의 콘텐츠를 렌더링하는 데 필수적인 모든 리소스(css, js, 폰트 등..)
로드되는 동안 전체 페이지 렌더링 프로세스가 중단됨 = 렌더링 차단(render-blocking)

라이트하우스에서 요청 체인 파악하기

라이트하우스-성능 권장 사항의 “중요한 요청 체인 피하기”에서 체이닝 된 요청의 수를 확인할 수 있다!

요청 체이닝을 피하는 방법

• 폰트, css 프리로드하기
  ->라이트하우스는 프리로드된 요청을 중요 요청 체인의 일부로 간주하지 않는다!

• js 지연(defer, async)시키기
  -> js에 defer, async를 사용하면 HTML이 로드된 후에만 실행된다!
  -> 따라서 렌더링 프로세스를 차단하지 않으므로 중요 요청이 아니게 된다.

• LCP 이미지를 HTML 문서에서 직접 요청하기
  -> 라이트하우스에서는 중요 요청이 아니지만, 사용성에 영향을 끼치는 부분.

• 중요 바이트 수 절감
  -> CSS, js를 압축(Minifying)하여 파일 크기를 줄임
  -> 속도 향상

• HTTP/2 멀티플렉싱
  -> HTTP/2로 요청을 병렬전송
  -> 리소스 대기 시간을 줄일 수 있다!

• 지연 로딩
  -> 이미지나 동영상과 같은 비필수요소는 필요할 때만 로드

• 프리페치(Prefetch) 및 프리커넥트(Preconnect)
  -> 리소스를 프리페칭하거나 외부 도메인에 프리커넥트 해 두면..
  -> 향후 요청시 리소스를 더 빠르게 로드한다!

http/2 멀티플레싱

• http/2 : HTTP 프로토콜의 두 번째 주요 버전
• 멀티플렉싱: HTTP/2 프로토콜의 핵심 기능 중 하나로, 1개 TCP 연결에서 동시에 여러 요청/응답 가능