■(꿀팁)-웹서비스 성능 최적화 - 브라우저 prefetch,preconnect

 

< web performance tunning >

 

웹서비스 성능 최적화는 브라우저의 성능 개선과 관계가 있습니다.

이 방법은 성능을 최적화 한다기 보다 브라우저가 처리하는 일의 우선 순위를 분산하고 미리 실행하도록해서 응답속도를 높이는 방법입니다. 

아래와 같이 브라우저에서 많은 웹 리소스 로딩을 위해서 우선 순위를 조정하도록 하는 방법을 정리하여 보았 습니다.

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

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />


<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/script.js" />

 

<link rel="dns-prefetch">   서버의 IP 주소에 대한 DNS 요청을 미리 작성하도록 브라우저에 지시합니다. 
이것은  짧은 시간에 리소스 (CDN, Google Fonts 등)가 필요하다는 것을 알고 리소스가 호스팅되는 도메인을 알고 있지만 정확한 경로를 모르는 경우에 유용합니다. 이 경우 서버의 IP 주소를 미리 확인하면  50ms~ 300ms 시간을 줄일 수 있습니다.

 

<link rel="preconnect">브라우저에 미리 서버에 대한 연결을 수행하도록 지시합니다. 
dns-prefetch와 동일하게 유용하지만 전체 연결을 미리 설정하므로 더 많은 시간을 절약합니다 . 여기서 단점은 새 연결을 여는 것이 상당히 리소스를 많이 사용하므로이 최적화를 과도하게 사용하는 것은 피해야 합니다.

 

<link rel="prefetch">우선 순위가 낮은 백그라운드에서 리소스를 미리로드하고 캐시합니다.
이것은 앱의 다음 페이지를 위해 JS 번들을 미리로드하는 데 유용합니다.

 

<link rel="preload">우선 순위가 높은 백그라운드에서 리소스를 미리로드합니다.
이것은 몇 초 안에 필요한 리소스 ( 중요하지 않은 CSS 파일) 를 미리로드하는 데 유용 합니다 .

 

<link rel="prerender">백그라운드에서 지정된 페이지를 미리로드하고 보이지 않는 탭에 렌더링합니다.
나중에 방문자가 미리 렌더링 된 페이지로 연결되는 링크를 클릭하면 페이지가 즉시 표시됩니다. 이것이 Google이 첫 번째 검색 결과를 미리로드하는 데 사용하는 것입니다. 

 

<link rel="modulepreload">브라우저에 가능한 한 빨리 JS 모듈 스크립트를 다운로드, 캐시 및 컴파일하도록 지시합니다. 
프로덕션에서 ES 모듈을 사용하고 앱을 더 빠르게로드하려는 경우 유용합니다.
모든 모듈이 다운로드되기 전에 앱이 작동을 시작할 수 없을때 앱로드 시간을 줄이기 위해 사용 할수 있습니다.

 

[참고 주의 사항]
프리 페치 방법을 과도하게 사용하지 않아야 한다. 페이지 당 2-4개이내에서 사전로드가 적당하다.
백그라운드에서 콘텐츠를 다운로드하는 것은 여전히 ​​방문자의 트래픽을 소비하고 있으며 모바일에서는 정말 좋지 않습니다.
따라서 10개 정도의 사전로드를 추가하면 앱이 조금 더 빨라질 수 있지만 방문자는 이에 대해 실제 돈을 지불하게됩니다.  

 

<link rel="modulepreload" href="/static/Image.js" />

as기본값은 script이므로 일반적으로이를 전혀 지정할 필요가 없습니다.

<!-- 서비스 워커(작업자 : worker)를 이용하여  모듈을 로딩하는 경우 -->
<link rel="modulepreload" href="/static/Header.js" as="serviceworker" />

• worker – 모듈이 웹 워커(worker)에 의해 로드되는 경우
• as = serviceworker – 모듈이 서비스 워커에 의해 로드 된 경우

참고

웹서비스 성능 최적화 - dns-prefetch