Quiz - preload/prefetch/preconnect, image loading optimization, lazy load

1. preload, prefetch, preconnect의 차이를 설명해주세요.

• preload, preconnect, prefetch 모두 리소스를 빠르게 가져와서 렌더링 과정을 앞당기는데 사용됩니다.
  • preload는 리소스의 우선순위를 높여 초기 렌더링 과정에 필요한 리소스를 빠르게 불러올 때 사용합니다.
  • preconnect는 해당 출처의 리소스를 빠르게 불러올 수 있도록 해당 출처 서버와 미리 연결을 할 때 사용됩니다.
  • prefetch는 페이지 전환시 필요한 리소스를 미리 가져와서 캐시할 때 사용합니다.

1.1 각각 어떠한 경우에 사용되나요?

• preload는 font나 css 파일을 html 파싱 전에 미리 가져오기 위해 주로 사용됩니다.
• preconnect는 미디어 스트리밍을 할 때 미디어 리소스 서버와 미리 연결하여 리소스를 빠르게 가져오기 위해 사용됩니다.
• prefetch는 현재 페이지의 상세 페이지를 가져오거나 다음 페이지를 가져올 때 사용됩니다.

2. 웹 성능 최적화 방법 중 이미지 로딩 속도를 개선하는 방법에 대해 설명해주세요.

• 첫 화면에 보이는 이미지의 경우, preload 설정을 통해 미리 가져옴으로써 이미지 로딩 속도를 개선할 수 있습니다.
• 페이지에서 여러 개의 이미지를 로딩해야 하는 경우, lazy load를 사용하여 화면에서 필요한 이미지만 로드하는 방식을 사용하여 이미지 로딩 속도를 개선할 수 있습니다.
• 이미지 용량이 클 경우, wepP를 적용하여 이미지를 압축함으로써 이미지 로딩 속도를 개선할 수 있습니다.

3. lazy load란 어떤 방식이며, 어떻게 작동하는지 설명해주세요.

• lazy loading은 리소스를 non-blocking으로 식별하고 필요할 때만 로드하는 방식입니다. 첫 렌더링 시 중요하지 않은 리소스를 지연 로드하여 Critical Rendering Path 길이를 줄입니다.
  • img나 iframe의 loading 속성 값을 lazy로 설정하여, 사용자가 img나 iframe에 가까워질 때까지 브라우저가 화면 밖에 있는 im, iframe을 연기하도록 지시할 수 있습니다.
  • Intersection Observer API를 통해 관측된 요소가 화면 안에 있을 때 로드하도록 지시할 수 있습니다.

참고

• Blog - 리소스 우선순위 - preload, preconnect, prefetch
• Blog - preload, preconnect, prefetch
• MDN - Lazy loading