1. preload
<link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2" />- 웹페이지에서 사용할 소스를 미리 로딩하여 필요한 리소스를 빠르게 가져오게 한다.
- 현재 페이지에서 3초 이내에 반드시 사용되는 리소스에만 사용
- 남발하면 리퀘스트를 늘리기 때문에 오히려 악영향
주의사항
as 속성 사용
as 속성을 사용하여 리소스의 유형을 브라우저에 알려줘야 한다. 올바른 유형이 설정되어 있지 않다면 브라우저는 해당 리소스를 사용하지 않음
중복 리소스 참조
preload는 브라우저가 반드시 리소스를 가져오게 만든다. 리소스를 중복 참조하면 중복된 개수만큼 리소스를 가져오기 때문에 리소스를 중복해서 참조하지 않도록 해야 한다.
사례
- 폰트시스템 폰트와 선언된 폰트의 충돌을 해결할 수 있다.
- 웹폰트소스가 웹페이지가 로딩이 시작될때부터 불러와지기 때문에, 렌더링이 끝나고 나서 전체 폰트를 바꾸는 것보다 성능이 좋다.
- Critical Rendering Path(초기 렌더링 전에 반드시 로드되어야 할 리소스)
<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">위의 코드와 같이 초기 렌더링에 반드시 필요한 리소스를 preload해서 렌더링 속도를 높일 수 있다.
2. preconnect
<link rel="preconnect" href="https://~~~" />- 현재 페이지에서 사용할 외부 도메인을 브라웆저에게 알려 미리 외부 도메인과 연결을 설정할 수 있게 한다.
- 브라우저는 필요한 소켓을 미리 설정할 수 있기 때문에 DNS, TCP, TLS왕복에 필요한 시간을 절약할 수 있게 된다.
주의사항
외부 도메인과 연결을 구축하기 때문에 CPU부하를 줄 수 있다.
보안 연결의 경우(https) 더 많은 부하를 일으킬 수 있고, 10초 이내로 브라우저가 닫힌다면 이전의 모든 연결작업은 낭비가 되는 것이기 대문에 10초 이상 보지 않는 짧은 내용의 콘텐츠에는 부적절하다.
사례
- 정확한 경로를 알 수 없을 때
- 이러한 경우 브라우저는 리소스를 가져오지는 않지만 서버에 미리 연결하여 연결에 필용한 시간을 절약할 수 있다.
- 미디어 스트리밍
- 리소스를 가져올 준비가 되면 연결을 설정하는게 아니라 미리 연결된 설정에 따라 리소스를 가져오므로 연결을 설정하는 대기시간을 줄일 수 있다.
3. prefetch
<link rel="prefetch" as='document" href="prefetch.html" />- 지금 보는 콘텐츠가 아닌 사용자가 다음에 볼 콘텐츠에서 필요한 리소스를 가져와 캐시에 저장한다.
- 캐싱을 해두기 때문에 렌더링 과정에서 큰 리소스도 빠르게 렌더링할 수 있다.
주의사항
재귀적으로 동작하지 않는다.
<link rel="prefetch" as='document" href="prefetch.html" />위와 같은 코드일 경우, prefetch.html이라는 HTML리소스를 가져올 수 있지만, 해당 문서에서 사용되는 css등의 리소스들은 가져오지 않는다.
4. 정리
preload, preconnect, prefetch모두 리소스를 좀 더 빠르게 가져와서 렌더링 과정을 앞당기는데 사용된다.
preload는 현재 페이지에서 반드시 사용되는 리소스로, 우선순위를 높여 초기 렌더링 과정에 필요한 리소스를 빠르게 불러오는 방식
preconnect는 외부 도메인의 리소스를 빠르게 불러올 수 있는 준비상태를 만들어 놓는 방식
prefetch는 미래에 사용될 리소스를 미리 캐싱해두는 방식
