성능 최적화를 하다가 preload, prefetch 등을 잘모르고 쓰는거 같아 이것을 알아보기로 했다.
1. Preload
현재 페이지에서 사용할 리소스(resource)를 우선순위를 높게하여 빠르게 가져오게 한다. 주로 웹 폰트, 비지니스적으로 필요한 이미지 같이 빠르게 로드(load)되어야하는 곳에서 사용한다.
<link rel="preload" href={'/static/images/myImage.png'} as="image" />* 주의사항
Preload는 전체적인 웹 성능을 빠르게 하기 위해 사용되는 속성이 아니다.
초기 로드 시 사용되지 않는 리소스에 PreLoad를 설정하지 않게 주의해야 한다.
2. Prefetch
낮은 순위의 리소스에 주로 사용하고 유휴상태일 때 background에서 리소스를 fetch해온다. 그리고 브라우저에 캐시로 잡아두는 방식이다. 캐싱을 해두기 때문에 렌더링 과정에서 큰 리소스도 빠르게 렌더링 할 수 있다.
<link rel="prefetch" href="page-2.html"> * 주의사항
Preload는 재귀적으로 동작하지 않습니다.
위의 코드와 같이 prefetch를 사용한다면, page-2.html이라는 HTML 리소스를 가져올 수 있지만 page-2.html에서 사용되는 CSS 등의 리소스들은 가져오지 않습니다.
3. Preconnect
현재 페이지에서 외부 도메인의 리소스를 참고하는 것을 브라우저에게 알려 미리 외부 도메인과 연결을 설정할 수 있게 합니다
<link rel="preconnect" href="https://example.com"> * 주의사항
preconnect는 외부 도메인과 연결을 구축하기 때문에 많은 CPU 시간을 차지할 수 있습니다.
10초 이내로 브라우저가 닫힌다면, 이전의 모든 연결 작업은 낭비되는 것이기 때문에 브라우저가 빨리 닫힐 수 있는 페이지에서는 preconnect를 사용하지 않는 것이 좋습니다.
느낀점
생각보다 상황에 따른 사용방법이 많았다 최적화를 더욱 관심 가질수록 cs, js 의 기초의 중요성이 많이 필요한거같다.
참고자료
