이 웹 성능을 향상시키는 다양한 방법. 그 중 하나는 나중에 필요할 콘텐츠를 미리 로드하는 것입니다. CSS 사전 처리, 전체 페이지 사전 렌더링 또는 도메인 이름 확인. 모든 작업을 미리 수행한 다음 즉시 결과를 표시합니다! 멋진데.

더욱 멋진 점은 구현이 매우 간단하다는 것입니다. 태그 XNUMX개 브라우저에 예비 작업을 수행하라는 명령을 제공합니다.

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

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

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

이 기능의 기능과 사용 시기를 간략하게 설명하겠습니다.

Перейти к : 프리로드 · 프리 페치 · 사전 연결 · DNS 프리페치 · 사전 렌더링

프리로드

<link rel= "preload"> 가능한 한 빨리 리소스(예: 스크립트 또는 스타일시트)를 로드하고 캐시하도록 브라우저에 지시합니다. 이는 페이지가 로드된 후 몇 초 후에 리소스가 필요할 때 유용하며 프로세스 속도를 높이고 싶습니다.

브라우저는 로드 후 리소스에 대해 아무 작업도 수행하지 않습니다. 스크립트가 실행되지 않고 스타일 시트가 적용되지 않습니다. 리소스는 단순히 캐시되어 요청 시 즉시 사용할 수 있게 됩니다.

구문

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

href 다운로드하려는 리소스를 가리킵니다.

as 브라우저에서 다운로드할 수 있는 모든 항목이 가능합니다.

• style 스타일 시트의 경우
• script 스크립트의 경우,
• font 글꼴의 경우,
• fetch 다음을 사용하여 로드된 리소스의 경우 fetch() 또는 XMLHttpRequest,
• 전체 목록 보기 MDN에서.

속성을 지정하는 것이 중요합니다. as – 이는 브라우저가 다운로드의 우선순위를 적절하게 지정하고 예약하는 데 도움이 됩니다.

사용시기

가까운 시일 내에 리소스가 필요할 때 사전 로드를 사용하세요. 예를 들어:

• 외부 파일의 비표준 글꼴:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  기본적으로 comic-sans.woff2 다운로드 및 구문 분석 후에만 로드가 시작됩니다. index.css. 너무 오래 기다리지 않으려면 다음을 사용하여 글꼴을 더 일찍 다운로드할 수 있습니다. <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• 접근 방식에 따라 스타일을 구분한다면 중요한 CSS 중요(즉시 렌더링의 경우)와 중요하지 않은 두 부분으로 나뉩니다.

  <style>
  /* Inlined critical styles */
  </style>
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

  이 접근 방식을 사용하면 중요하지 않은 스타일은 JavaScript가 실행될 때만 로드되기 시작하며, 이는 렌더링 후 몇 초 후에 발생할 수 있습니다. JS 사용을 기다리는 대신 <link rel= "preload">더 일찍 다운로드를 시작하려면:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/ko/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

사전 로딩을 과도하게 사용하지 마세요. 모든 항목을 연속으로 로드하면 사이트 속도가 마술처럼 빨라지지 않고 오히려 브라우저가 작업을 올바르게 계획하지 못하게 됩니다.

프리페치와 혼동하지 마세요.. 사용하지 마세요 <link rel= "preload">, 페이지가 로드된 직후 리소스가 필요하지 않은 경우. 예를 들어 다음 페이지 등 나중에 필요하면 다음을 사용하세요. <link rel= "prefetch">.

세부

필수 태그입니다 다른 모든 태그와 달리 브라우저에서 실행됩니다(지원하는 경우). 사전 로딩과 관련이 있습니다. 브라우저는 다음에 지정된 리소스를 다운로드해야 합니다. <link rel="preload">. 다른 경우에는 예를 들어 느린 연결에서 실행되는 경우 사전 로드를 무시할 수 있습니다.

우선 순위. 브라우저는 일반적으로 가장 중요한 리소스를 먼저 로드하기 위해 다양한 리소스(스타일, 스크립트, 글꼴 등)에 서로 다른 우선순위를 할당합니다. 이 경우 브라우저는 속성에 따라 우선순위를 결정합니다. as. Chrome 브라우저의 경우 다음을 볼 수 있습니다. 전체 우선순위 테이블.

프리 페치

<link rel= "prefetch"> 백그라운드에서 리소스(예: 스크립트 또는 스타일 시트)를 다운로드하고 캐시하도록 브라우저에 요청합니다. 로딩은 낮은 우선순위로 발생하므로 더 중요한 리소스를 방해하지 않습니다. 다음 페이지에 리소스가 필요하고 이를 미리 캐시하려는 경우에 유용합니다.

여기서도 브라우저는 로드 후 리소스에 대해 아무 작업도 수행하지 않습니다. 스크립트가 실행되지 않고 스타일 시트가 적용되지 않습니다. 리소스는 단순히 캐시되어 요청 시 즉시 사용할 수 있게 됩니다.

구문

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

href 다운로드하려는 리소스를 가리킵니다.

as 브라우저에서 다운로드할 수 있는 모든 항목이 가능합니다.

• style 스타일 시트의 경우
• script 스크립트의 경우,
• font 글꼴의 경우,
• fetch 다음을 사용하여 로드된 리소스의 경우 fetch() 또는 XMLHttpRequest,
• 전체 목록 보기 MDN에서.

속성을 지정하는 것이 중요합니다. as - 이는 브라우저가 다운로드의 우선순위를 올바르게 지정하고 예약하는 데 도움이 됩니다.

사용시기

다른 페이지에서 리소스를 로드하려면, 다른 페이지의 리소스가 필요하고 이를 미리 로드하여 해당 페이지의 렌더링 속도를 높이려는 경우. 예를 들어:

• 온라인 상점이 있고 사용자의 40%가 제품 페이지를 보기 위해 홈 페이지를 떠납니다. 사용 <link rel= "prefetch">, CSS 및 JS 파일을 로드하여 제품 페이지를 렌더링합니다.
• 단일 페이지 애플리케이션이 있고 페이지마다 서로 다른 패키지를 로드합니다. 사용자가 페이지를 방문하면 링크된 모든 페이지에 대한 패키지가 미리 로드될 수 있습니다.

이 태그는 어느 정도 안전하게 사용될 가능성이 높습니다.. 브라우저는 일반적으로 가장 낮은 우선순위로 프리페치를 예약하므로 누구에게도 방해가 되지 않습니다. 사용자 트래픽을 소비하므로 비용이 발생할 수 있다는 점을 명심하세요.

긴급요청이 아닌 경우. 사용하지 마세요 <link rel= "prefetch">, 몇 초 안에 리소스가 필요할 때. 이 경우에는 다음을 사용하십시오. <link rel= "preload">.

세부

선택적 태그. 브라우저는 이 지침을 따를 필요가 없으며, 예를 들어 연결 속도가 느린 경우에는 이를 무시할 수 있습니다.

Chrome의 우선순위. 크롬에서 <link rel= "prefetch"> 일반적으로 최소 우선순위로 실행됩니다(참조: 전체 우선순위 테이블), 즉, 다른 모든 항목을 로드한 후입니다.

사전 연결

<link rel= "preconnect"> 나중에 연결 설정 속도를 높이려면 브라우저에서 도메인에 미리 연결하도록 요청합니다.

브라우저는 새로운 타사 도메인에서 리소스를 검색하는 경우 연결을 설정해야 합니다. 예를 들어 Google 글꼴, CDN의 React 글꼴을 로드하거나 API 서버에서 JSON 응답을 요청하는 경우입니다.

새로운 연결을 설정하는 데는 일반적으로 수백 밀리초가 걸립니다. 한 번 완료되었지만 여전히 시간이 걸립니다. 미리 연결을 설정한 경우 시간을 절약하고 이 도메인에서 리소스를 더 빠르게 다운로드할 수 있습니다.

구문

<link rel= "preconnect" href="https://api.my-app.com" />

href IP 주소를 결정하려는 도메인 이름을 나타냅니다. 접두사(https://domain.com) 또는 그것 없이(//domain.com).

사용시기

곧 필요할 도메인에 사용 거기에서 중요한 스타일, 스크립트 또는 이미지를 다운로드하지만 아직 리소스 URL을 모릅니다. 예를 들어:

• 귀하의 애플리케이션은 다음에서 호스팅됩니다. my-app.com AJAX 요청을 합니다. api.my-app.com: JS에서 동적으로 만들어지기 때문에 구체적인 쿼리를 미리 알 수 없습니다. 여기서는 태그를 사용하여 도메인에 미리 연결하는 것이 매우 적절합니다.
• 귀하의 애플리케이션은 다음에서 호스팅됩니다. my-app.com Google 글꼴을 사용합니다. 두 단계로 다운로드됩니다. 먼저 CSS 파일이 도메인에서 다운로드됩니다. fonts.googleapis.com, 이 파일은 다음과 같은 글꼴을 요청합니다. fonts.gstatic.com. 어떤 특정 글꼴 파일이 출처인지 알 수 없습니다. fonts.gstatic.com CSS 파일을 로드할 때까지 필요하므로 사전에 예비 연결만 만들 수 있습니다.

일부 타사 스크립트나 스타일의 속도를 약간 높이려면 이 태그를 사용하세요. 사전 설정된 연결로 인해.

과도하게 사용하지 마십시오. 연결을 설정하고 유지하는 것은 클라이언트와 서버 모두에게 비용이 많이 드는 작업입니다. 최대 4~6개의 도메인에 이 태그를 사용하세요.

세부

선택적 태그. 브라우저는 이 지침을 따를 필요가 없으며 예를 들어 이미 많은 연결이 설정되었거나 다른 경우에는 이를 무시할 수 있습니다.

연결 프로세스에는 무엇이 포함됩니까?. 각 사이트에 연결하려면 브라우저가 다음을 수행해야 합니다.

• DNS 확인. 서버 IP 주소 찾기(216.58.215.78) 지정된 도메인 이름(google.com).
• TCP 핸드셰이크. 패킷을 교환(클라이언트 → 서버 → 클라이언트)하여 서버와의 TCP 연결을 시작합니다.
• TLS 핸드셰이크(HTTPS 사이트에만 해당). 보안 TLS 세션을 시작하기 위한 두 라운드의 패킷 교환(클라이언트 → 서버 → 클라이언트 → 서버 → 클라이언트)

참고: HTTP/3은 핸드셰이크 메커니즘을 개선하고 속도를 높이지만 아직 갈 길이 멀습니다.

DNS 프리페치

<link rel= "dns-prefetch"> 곧 연결할 예정이고 초기 연결 속도를 높이려는 경우 브라우저에 도메인에 대한 DNS 확인을 미리 수행하도록 요청합니다.

브라우저는 새로운 타사 도메인에서 리소스를 검색하려면 도메인의 IP 주소를 확인해야 합니다. 예를 들어 Google 글꼴을 로드하거나 CDN에서 React 글꼴을 로드하거나 API 서버에서 JSON 응답을 요청합니다.

각각의 새 도메인에 대해 DNS 레코드 확인에는 일반적으로 약 20-120ms가 소요됩니다. 이는 특정 도메인의 첫 번째 리소스 로드에만 영향을 주지만 여전히 지연이 발생합니다. DNS 확인을 미리 수행하면 시간을 절약하고 리소스를 더 빠르게 로드할 수 있습니다.

구문

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href IP 주소를 설정하려는 도메인 이름을 나타냅니다. 접두사(https://domain.com) 또는 그것 없이(//domain.com).

사용시기

곧 필요할 도메인에 사용 브라우저가 미리 알지 못하는 리소스를 거기에서 다운로드합니다. 예를 들어:

• 귀하의 애플리케이션은 다음에서 호스팅됩니다. my-app.com AJAX 요청을 합니다. api.my-app.com: JS에서 동적으로 만들어지기 때문에 구체적인 쿼리를 미리 알 수 없습니다. 여기서는 태그를 사용하여 도메인에 미리 연결하는 것이 매우 적절합니다.
• 귀하의 애플리케이션은 다음에서 호스팅됩니다. my-app.com, Google 글꼴을 사용합니다. 두 단계로 다운로드됩니다. 먼저 CSS 파일이 도메인에서 다운로드됩니다. fonts.googleapis.com, 이 파일은 다음과 같은 글꼴을 요청합니다. fonts.gstatic.com. 어떤 특정 글꼴 파일이 출처인지 알 수 없습니다. fonts.gstatic.com CSS 파일을 로드할 때까지 필요하므로 사전에 예비 연결만 만들 수 있습니다.

일부 타사 스크립트나 스타일의 속도를 약간 높이려면 이 태그를 사용하세요. 사전 설정된 연결로 인해.

다음과 유사한 특성을 참고하세요. <link rel= "dns-prefetch"/> и <link rel= "preconnect">. 일반적으로 하나의 도메인에 함께 사용하는 것은 의미가 없습니다. <link rel= "preconnect"> 이미 포함되어 있습니다 <link rel= "dns-prefetch"/> 그리고 훨씬 더. 이는 두 가지 경우에 정당화될 수 있습니다.

• 이전 브라우저를 지원하고 싶나요?. <link rel= "dns-prefetch" /> 에 의해 지원 IE10 및 Safari 5부터. <link rel= "preconnect"> Chrome 및 Firefox에서 한동안 지원되었지만 11.1의 Safari에만 추가되었으며 IE/Edge에서는 아직 지원되지 않습니다.. 이러한 브라우저를 지원해야 하는 경우 다음을 사용하세요. <link rel= "dns-prefetch" /> 백업 옵션으로 <link rel= "preconnect">.
• 4~6개 이상의 도메인에 대한 연결 속도를 높이고 싶습니다.. 꼬리표 <link rel= "preconnect"> 연결을 설정하고 유지하는 데 비용이 많이 드는 작업이므로 4~6개 이상의 도메인을 사용하는 것은 권장되지 않습니다. <link rel= "dns-prefetch" /> 리소스 소모가 적으므로 필요한 경우 사용하세요.

세부

선택적 태그. 브라우저는 이 지침을 따를 필요가 없으므로, 예를 들어 페이지에 그러한 태그가 많거나 다른 경우에는 DNS 확인을 수행하지 않을 수 있습니다.

DNS 란 무엇입니까?. 인터넷의 각 서버에는 다음과 같은 고유한 IP 주소가 있습니다. 216.58.215.78. 사이트 이름은 일반적으로 브라우저의 주소 표시줄에 입력됩니다(예: google.com), DNS(Domain Name System) 서버는 이를 서버의 IP 주소(216.58.215.78).

IP 주소를 확인하려면 브라우저가 DNS 서버에 쿼리해야 합니다. 새로운 타사 도메인에 연결하는 데 20~120ms가 걸립니다.

DNS는 캐시되지만 그다지 안정적이지는 않습니다.. 일부 OS 및 브라우저는 DNS 쿼리를 캐시합니다. 이렇게 하면 반복 쿼리에서 시간이 절약되지만 캐싱을 신뢰할 수는 없습니다. Linux에서는 일반적으로 전혀 작동하지 않습니다. Chrome에는 DNS 캐시가 있지만 XNUMX분 동안만 지속됩니다. Windows는 XNUMX일 동안 DNS 응답을 캐시합니다.

사전 렌더링

<link rel= "prerender"> 브라우저에 URL을 다운로드하여 보이지 않는 탭에 표시하도록 요청합니다. 사용자가 링크를 클릭하면 페이지가 즉시 표시되어야 합니다. 이는 사용자가 특정 페이지를 방문할 것이 확실하고 표시 속도를 높이려는 경우 유용합니다.

이 태그의 탁월한 효율성에도 불구하고(또는 그로 인해) 2019년 <link rel= "prerender"> 주요 브라우저에서는 제대로 지원되지 않습니다. 자세한 내용보기. 이하.

구문

<link rel="prerender" href="https://my-app.com/pricing" />

href 백그라운드에서 렌더링을 시작하려는 URL을 가리킵니다.

사용시기

사용자가 특정 페이지로 이동할 것이라고 확신하는 경우. A 페이지 방문자의 70%가 B 페이지로 이동하는 "터널"이 있다면 <link rel= "prerender"> 페이지 A는 페이지 B를 매우 빠르게 표시하는 데 도움이 됩니다.

과도하게 사용하지 마십시오. 사전 렌더링은 대역폭과 메모리 측면에서 매우 비쌉니다. 사용하지 마세요 <link rel= "prerender"> 한 페이지 이상.

세부

선택적 태그. 브라우저는 이 지침을 따를 필요가 없으며, 예를 들어 연결이 느리거나 사용 가능한 메모리가 부족한 경우 이를 무시할 수 있습니다.

메모리를 절약하려면 Chrome은 전체 렌더링을 수행하지 않습니다.과 NoState만 미리 로드. 즉, Chrome은 페이지와 모든 리소스를 로드하지만 JavaScript를 렌더링하거나 실행하지는 않습니다.

Firefox와 Safari는 이 태그를 전혀 지원하지 않습니다. 브라우저는 이 지침을 따를 필요가 없으므로 이는 사양을 위반하지 않습니다. 하지만 여전히 슬프다. 구현 버그 Firefox가 오픈된 지 XNUMX년이 되었습니다. Safari라는 보고가 있습니다. 이 태그도 지원하지 않습니다.

개요

사용:

• <link rel= "preload"> - 몇 초 안에 리소스가 필요할 때
• <link rel= "prefetch"> - 다음 페이지의 자료가 필요할 때
• <link rel= "preconnect"> - 리소스가 곧 필요하다는 것을 알고 있지만 아직 해당 리소스의 전체 URL을 알지 못하는 경우
• <link rel= "dns-prefetch"> - 마찬가지로 리소스가 곧 필요하다는 것을 알고 있지만 전체 URL을 아직 알지 못하는 경우(이전 브라우저의 경우)
• <link rel= "prerender"> — 사용자가 특정 페이지로 이동할 것이라고 확신하고 해당 페이지의 표시 속도를 높이고 싶을 때

출처 : habr.com