Skip to Content
Suffering builds character
아카이브5.Browser코어 바이탈특징6. Resource load duration 줄이기

6. Resource load duration 줄이기

Resource load duration은 LCP 요소를 실제로 로딩(다운로드)하는데 걸리는 시간을 말함

이 개선 전략의 목표는 네트워크를 통해 사용자의 디바이스로 리소스에 대한 바이트(byte)를 전송하는데 소요되는 시간을 줄이는 것으로, 크게 네 가지 방법으로 적용할 수 있음

  • 리소스의 사이즈 줄이기
  • 리소스가 이동해야 하는 거리 줄이기
  • 네트워크 대역폭에 대한 경합 줄이기
  • 네트워크 시간을 완전히 제거하기

1. 리소스 사이즈 줄이기

리소스의 사이즈가 작을수록 Resource load duration도 감소함

대부분의 페이지에서 LCP 요소는 이미지나 웹 폰트로, 다음의 방식들을 통해 사이즈를 줄일 수 있음

2. 리소스가 전송되는 거리 줄이기

리소스를 요청하여 소비하는 사용자와 리소스를 제공하는 서버와의 물리적인 거리가 가까울수록 Resource load duration도 감소함

대표적인 방법은 CDN(Content Delivery Network)을 활용하는 것으로,

특히 이미지를 CDN을 통해 제공하는 것은 리소스의 사이즈도 1-1.에서 언급한 권장사항에 맞게 자동으로 줄여주기 때문에 편리하고 유용함

3. 네트워크 대역폭에 대한 경합 줄이기

리소스의 사이즈와 물리적인 거리를 줄였더라도, 서로 다른 리소스들을 동시에 다운로드하는 경우라면 Resource load duration이 증가할 수 있음

각 페이지별 LCP 리소스에 높은 우선 순위, fetchPriority를 부여하고, Resource load delay가 적을 경우 브라우저는 상대적으로 우선순위가 낮은 리소스가 LCP 리소스와 경쟁하지 않도록 동작함

하지만 fetchPriority가 2개 이상인 것과 같이 우선순위가 높은 리소스를 많이 다운로드하거나, 리소스 다운로드 숫자 자체가 너무 많을 경우에는 Resource load duration에 여전히 영향을 줄 수 있음

4. 네트워크 시간을 완전히 제거하기

Resource load duration을 개선하는 가장 좋은 방법은 네트워크를 통한 병목을 완전히 제거하는 것으로, 캐싱 전략을 통해 리소스를 제공할 경우 해당 리소스에 대해 두 번째 요청부터는 Resource load duration이 거의 0에 가까워짐

Last updated on