rel
rel = “prefetch”
•
low priority resources hint → 미리 로드해 브라우저 캐시에 저장해놓는 역할
•
low priority를 가지고 있기 때문에 중요한 파일 다운로드를 위해 사용하지 않는다.
◦
e.g.) 유저 인터렉션이 필요한 로그인페이지에는 prefetch를 이용할 경우 도움이 된다.
•
다음 네비게이션을 위한 directive
•
총 데이터 사용량을 증가시킬 수 있다.
◦
낮은 우선순위를 가지고 있다 하더라도 실제로 필요한 데이터 이상으로 유저들이 설치할 수 도 있고 실ㄹ제로 필요 이상의 데이터가 서버에 부담될 수 도 있다.
rel= “dns-prefetch”
•
미리 DNS Lookup을 수행 결과적으로 연결이 더 빨라진다. → 주로 ms 단위로 이루어진다.
•
DNS, TCP, TLS 연결을 미리 해놓는 역할
rel=”prerender”
•
특정 리소스 뿐만 아니라 다음 페이지를 미리 그려놓는다는 뜻
•
prefetch보다 더 총 데이터 사용량을 증가 시킬 수 있다. → 실제로 유저가 해당 페이지를 안가게되면 끝이다.
rel = “preconnect”
•
dns-prefetch와 마찬가지로 브라우저가 좀더 빠른 서버와의 연결을 돕는 역할을 한다.
•
다른점으로는 DNS lookups만 하는게 아니라 TLS negotiations, TCP handshakes까지 수행한다.
•
dns-prefetch의 상위호환 이지만 브라우저 호환성이 비교적 낮으므로 dns-prefetch와 함께 사용한다.
•
CPU 사용량이 증가할 수 있다.
◦
낮은 우선순위를 가지고 있다고 하더라도 크롬 기준으로 10초이내에 실제 연결이 일어나지 않을 경우 preconnect를 닫으므로 의미없는 CPU 사용량 증가로 이어진다.
rel = “preload”
•
브라우저 기본 다운로드 순위에서 벗어나 최우선으로 다운로드 하도록 만드는 역할
◦
최근 브라우저들은 나름 똑똑한 우선순위 시스템을 가지고 있으나 preload를 남용하게 될 경우 그 “똑똑한” 우선순위 시스템을 망치게 된다. 잘 사용하도록.
•
브라우저에게 hint를 준다기보단 “먼저 fetch해” command에 가까운 수준이다.
•
현 페이지의 퍼포먼스 개선을 위한 directive
•
CRP(Critical Rendering Path)에 잘 활용될 수 있다. → font, CSS, critical JS
•
as 옵션을 같이 사용하지 않을 경우 두번 fetch하게 되므로 필수적으로 함께 사용해야한다.
•
render blocking이 될 수 있다.