페이지를 로드할때 리소스의 우선순위가 있다.
브라우저에서 기본적으로 제공하는 리소스 우선순위는 HTML에서
그 이외에 리소스의 우선순위를 지정할 수 있는데 prefetch, preload, preconnect 가 있다.
장점
왕복 요청을 줄여 네트워크 지연시간을 최소화 한다.
사용자가 페이지를 탐색하는 동안 리소스를 사전에 로드하여 콘텐츠를 빠르게 제공한다.
목적
prefetch
나중에 필요할 리소스를 미리 가져와 브라우저 캐시에 저장한다. 현재 페이지 로드 속도와는 무관하며, 페이지에서 벗어날 시 백그라운드에서 가져온다.
preload
현재 페이지에서 필요한 리소스를 미리 로드하는 것이다. 현재 페이지 로드 속도에 영향을 끼칠 수 있다.
preconnect
특정 도메인과 미리 연결을 한다. DNS 조회, TCP 3way-handshake, TLS-handshake 등을 미리 수행하여 리소스를 주고 받을 때 연결 요청 없이 주고받을 수 있다.
사용법
<link> 태그의 rel 속성을 이용한다.
예) <link rel=”preload” href=”#” />
이번생은 개발자