(번역) 페이지 로드 속도 향상을 위한 중요 요청 체이닝 방지

원문: https://www.debugbear.com/blog/avoid-chaining-critical-requests

중요 요청(critical request) 체이닝은 웹사이트의 성능에 상당한 영향을 미칠 수 있으며, First Contentful Paint(FCP) 그리고 Largest Contentful Paint(LCP)와 같은 페이지 로드 지표에 영향을 줄 수 있습니다.

브라우저가 다음 요청을 로드하기 전에 리소스 로드가 완료될 때까지 기다려야 하므로 콘텐츠 렌더링 속도가 느려집니다. 이는 사용자에게 불쾌한 경험이 될 수 있으며 SEO 순위에도 영향을 미칠 수 있습니다.

이 글에서는 페이지 로드 시간을 개선하기 위해 중요한 요청을 최적화하는 전략을 살펴봅니다.

중요 요청이 뭘까요?

중요 요청이란 웹 페이지의 콘텐츠를 렌더링하는 데 필수적인 모든 리소스를 말합니다. 여기에는 일반적으로 브라우저가 사용자에게 페이지를 표시하기 전에 완전히 로드되어야 하는 CSS 및 자바스크립트 파일이 포함됩니다.

이러한 리소스가 지연되거나 로드하는 데 너무 오래 걸리면 전체 페이지 렌더링 프로세스가 중단됩니다. 이러한 요청은 브라우저가 화면에 콘텐츠를 표시하는 작업을 완료하지 못하게 하므로 렌더링 차단(render-blocking)으로 간주됩니다.

중요 요청을 체이닝하면 안 되는 이유

앞서 언급했듯이 중요 요청은 페이지를 렌더링하는 데 필수적입니다. 이러한 요청이 체이닝되면 콘텐츠 전송이 지연됩니다. 체인의 각 종속 요청은 전체 지연을 증가시킵니다.

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

페이지 로드를 최적화하는 핵심 단계 중 하나는 요청 체인을 파악하는 것입니다. 라이트하우스에는 성능 권장 사항에서 체이닝 된 요청의 수를 제공하는 “중요한 요청 체인 피하기”라는 감사가 포함되어 있습니다.

요청 체인을 확인하면 병목 현상을 파악하고 로딩 순서를 훨씬 간단하게 최적화하는 데 도움이 됩니다.

요청 체이닝을 피하는 방법

여기서 중요 요청 체인이 하나만 있는 하우스 테스트 결과를 볼 수 있습니다. 거의 모든 리소스가 초기 HTML 문서 요청에 직접 연결됩니다. 이 구조는 지연을 최소화하고 페이지를 빠르게 로드할 수 있습니다.

이 단일 요청 체인을 가능하게 하는 몇 가지 최적화 방법이 있습니다. 첫 번째 방법은 글꼴을 프리로드하는 것입니다. 요청이 프리로드되면 라이트하우스는 해당 요청을 중요 요청 체인의 일부로 간주하지 않습니다.

자바스크립트 파일은 지연(deferred)되어 페이지 렌더링을 차단하지 않고 HTML이 로드된 후에만 실행됩니다. 자바스크립트 요청에 defer 또는 async를 사용하면 이러한 요청이 렌더링 프로세스를 차단하지 않으므로 중요 요청이 아니게 됩니다.

마지막으로, LCP 이미지를 HTML 문서에서 직접 요청하여, 가능한 한 빨리 로드 되도록 합니다. 이 요청은 라이트하우스에서 중요 요청이 아닌 것으로 간주되지만 사용자 경험에는 여전히 중요합니다.

예시의 전략과 함께 다음과 같은 다른 기법을 사용하면 중요한 요청이 체이닝되는 것을 방지하거나 그 영향을 줄일 수 있습니다.

• CSS 및 자바스크립 압축(Minifying): 파일 크기를 줄여 중요 리소스를 더 빠르게 로드하고 지연을 최소화합니다. 이를 중요 바이트 수 절감이라고 합니다.
• HTTP/2 멀티플렉싱: HTTP/2를 사용하여 단일 연결을 통해 여러 요청을 병렬로 전송함으로써 리소스 대기 시간을 줄입니다.
• 지연 로딩: 이미지나 동영상과 같이 필수적이지 않은 요소는 필요할 때만 로드하여 중요 요청 체인을 짧게 유지합니다.
• 프리페치(Prefetch) 및 프리커넥트(Preconnect): 리소스를 프리페칭 하거나 외부 도메인에 프리커넥트해 향후 요청을 함으로써 필요할 때 리소스를 더 빠르게 로드합니다.

이제 중요한 요청 체인의 작동 방식과 이를 줄이거나 최적화할 수 있는 방법을 이해했습니다. 이제 DebugBear 속도 테스트를 기반으로 한 몇 가지 실제 사례를 살펴보겠습니다.

예시 1: 자바스크립트 요청 지연

중요 요청 체인을 줄이는 가장 효과적인 방법 중 하나는 자바스크립트 요청을 지연시키는 것입니다. defer를 사용하면 브라우저는 HTML 렌더링을 차단하지 않고 백그라운드에서 자바스크립트 파일을 다운로드합니다. 따라서 자바스크립트를 가져오는 동안 브라우저는 페이지를 계속 렌더링할 수 있습니다.

이 페이지에서 렌더링 차단이 적용된 여러 자바스크립트 요청을 볼 수 있습니다.

DebugBear를 사용하면 이러한 자바스크립트 요청을 지연시키는 실험을 실행할 수 있습니다.

실험을 실행하고 요청 워터폴을 분석한 결과, 자바스크립트 요청 중 단 하나의 요청만 중요 요청으로 남아있는 것을 확인할 수 있습니다. 가장 주목할 만한 점은 이전에 강조 표시된 모든 요청은 렌더링을 차단하지 않는다는 것입니다.

이제 자바스크립트 요청이 지연되었으므로 페이지가 더 빨리 로드될 수 있습니다. FCP 점수는 750밀리초, LCP 점수는 1초 가까이 개선되었습니다. 이러한 최적화를 통해 콘텐츠를 더 빠르게 제공함으로써 사용자에게 더 나은 경험을 제공할 수 있습니다.

예시 2: CSS import 체인

이 페이지에서는 페이지가 더 빨리 렌더링되지 못하게 하는 많은 렌더링 차단 요청을 볼 수 있습니다.

마지막 렌더링 차단 요청을 보면 CSS import 요청이 있음을 알 수 있습니다. 요청 체인을 보면 build/style.css 요청이 완료되어야 fonts.google 요청이 시작될 수 있음을 알 수 있습니다.

스타일시트를 프리로드하는 실험을 실행한 결과, 이제 요청이 논-블로킹 상태가 되어 더 이상 요청 체인의 일부가 아닌 것을 확인할 수 있습니다.

그 결과 FCP가 500밀리초 이상 개선되었습니다.

결론

결론적으로 중요 요청이 체이닝되지 않도록 하는 것이 웹 성능 개선의 핵심입니다. 자바스크립트 로드 지연, 리소스 프리로드, HTML에서 직접 LCP 이미지 로드와 같은 전략은 페이지 로드 시간을 개선하는 데 도움이 됩니다.

DebugBear는 웹사이트에 대해 최적화할 수 있는 부분을 자동으로 찾아 표시해 줍니다. 스크립트 지연 및 리소스 미리 로드 등 이러한 권장 사항 중 일부는 실험을 통해 테스트할 수 있습니다.

🚀 한국어로 된 프런트엔드 아티클을 빠르게 받아보고 싶다면 Korean FE Article(https://kofearticle.substack.com/)을 구독해주세요!