preload

현재 페이지에서 사용할 리소스(resource)를 우선순위를 높게하여 빠르게 가져오게 한다. 주로 웹 폰트와 같은 빠르게 로드(load)되어야하는 곳에서 사용한다.

<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="myfont.woff2">

주의사항

• as 속성을 사용하여 브라우저에게 해당 리소스의 유형을 알려줘야 한다. 올바른 유형이 아닐 경우 브라우저는 리소스를 사용하지 않는다.
• 해당 속성을 적용한 리소스는 반드시 가져오기 때문에 중복해서 요청하게 되면 중복한 요청 수만큼 네트워크 자원을 낭비할 수 있다.

preconnect

현재 페이지에서 외부 리소스의 도메인에 미리 연결해두는 속성값이다. 미리 연결된 리소스는 빠르게 접근할 수 있게 되어 리소스 로드 시간을 줄일 수 있다.

<link rel="preconnect" href="example.com">

주의사항

미리 연결해 두는 만큼 CPU 사용이 늘어날 수 있고 연결을 빠르게 종료한다면 연결 작업에 대한 낭비가 일어나 유의해야 한다. 한 도메인에서 여러 버전에 리소스를 가져올 때, 미리 연결해두어 여러번의 연결 시도를 줄일 수 있다. 또한 미디어 스트리밍을 위해 미리 연결해 둔다면 연결 시간을 줄여 대기 시간을 줄일 수 있다.

prefetch

낮은 순위의 리소스에 주로 사용하고 유휴상태일 때 background에서 리소스를 fetch해온다. 그리고 브라우저에 캐시로 잡아두는 방식이다. 캐싱을 해두기 때문에 렌더링 과정에서 큰 리소스도 빠르게 렌더링 할 수 있다.

주의사항

언뜻 보기에 좋아 보이지만 유저가 이용하지 않는 리소스를 prefetch해두는 것은 낭비이고 최신 정보가 아닐 수도 있다. 그렇기 때문에 유저의 이동이 예측되는 곳에서 사용해야 효과를 볼 수 있다.

결론

preload, preconnect, prefetch 모두 리소스를 조금 더 유연하고 빠르게 가져와서 렌더링 과정을 앞당기는데 사용된다. 하지만 세 가지 방식은 다른 방식으로 렌더링 문제를 해결한다.
preload는 우선순위를 높여 초기 렌더링 과정에 필요한 리소스를 빠르게 불러오는 방식을 이용하고, preconnect는 해당 도메인의 리소스들을 빠르게 불러올 수 있는 준비상태를 만들어 두는 방식으로 해결하고 마지막으로, prefetch는 미리 리소스를 캐싱해두는 방식으로 렌더링 문제를 해결한다.

참고

• [Browser] 리소스 우선순위 - preload, preconnect, prefetch
  
• Resource Hints - What is Preload, Prefetch, and Preconnect?