web resource hint

link 요소의 rel 속성을 사용한 성능 최적화

 

preload

최우선 순위로 다운로드하도록 지시한다. 현재 탐색중인 페이지에 필요한 자원들에 적용할 때 사용한다. 그러므로 javascript, css, image, font 같은 자원에 사용한다.

 

dns-prefetch

dns 조회 수행을 미리 하도록 지시한다.

예를 들어 image 만을 위한 별도의 서브 도메인으로 사용중이라면

<link rel="dns-prefetch" href="https://images.example.com">

와 같이 미리 dns 확인 요청을 통해 실제로 이미지를 요청하는 시점보다 미리 dns 요청을 하게되어 보다 빠른 응답을 받을 수 있다.

 

preconnect

dns-prefetch가 dns 확인을 끝냈다면 preconnect는 TCP 핸드쉐이크(HTTPS의 경우 협상까지)를 마치도록 만든다.

dns-prefetch 보다 한단계 더 진행했다고 볼 수 있다.

 

prefetch

dns-prefetch와 preconnect 연결에 대한 부분까지를 담당했다면 prefetch는 필요한 리소스를 다운로드 하도록 지시한다.

 

prerender

prefetch가 필요한 리소스까지 다운로드했다면 prerender는 렌더링까지 하도록 지시한다. 자바스크립트 실행까지 끝내므로 속도면에 제일 빠르게 느낄 수 있다.

 

preload는 현재 탐색중인 페이지를 위한 최우선 순위의 자원을 위한 선택이며 그 이외에는 중요도가 떨어지거나 이후 사용자 요청을 위한 후순위 자원을 위한 선택이다.

 

preload 외의 속성은 사용자가 정말 필요할 때 보다 미리 필요한 자원을 위해 준비한다는 개념이다. 다시 말해 예측이 필요하다. 예측은 빗나갈 경우 손실로 처리되기 때문에 자원이 낭비되지 않도록 타당한 근거에 기반한 예측 전략이 필요하다.

 

link와 script

link 태그는 말 그대로 연결을 의미한다. script는 연결과 연결 후 코드 실행을 의미한다.

script 태그를 사용한다는 의미는 다운로드 후 코드 실행을 의미한다. 자체 속성으로 async와 defer를 통해서 다운로드 시점과 실행 시점을 설정할 수도 있다. link는 실행이 빠진 script라고 보면 된다. 대부분의 경우 script 태그를 통해서 javascript 코드를 불러오겠지만 어떤 경우에는 lazy load가 필요한 script가 있는 경우도 있다. 예를 들어 facebook 라이브러리를 즉시가 아닌 차후에 불러오길 원한다면 link 태그를 preconnect로 정의한 후 나중에 다운로드할 수도 있다.(script 태그를 사용하든 프로그래밍 코드를 사용하든) 이럴경우 DNS 조회, TCP 연결, TLS 협상 시간을 아낄 수 있다. 하지만 javascript resource를 위해서 많이 사용하지는 않을 것 같다.

 

참고 w3c, Google Web Fundamentals, keycdn