자산을 로드하기 위해 HTML에서 프리로드 및 프리페치를 사용하는 방법

소개

페이지에 자산을 로드하는 것은 최적의 웹 성능과 원활한 사용자 경험을 달성하는 데 중요한 부분입니다. 일반적으로 실제 앱은 여러 CSS, 글꼴, JavaScript 및 이미지 파일을 로드합니다. 이러한 자산은 기본적으로 렌더링을 차단하여 로드 성능을 저하시킵니다.

이 자습서에서는 미리 로드 및 프리페치와 같은 리소스 힌트라는 새로운 기능을 살펴봅니다. 이러한 리소스 힌트를 통해 렌더링 차단을 극복할 수 있습니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

Google 크롬을 다운로드하여 설치했습니다. 이 튜토리얼은 Google 크롬 버전 86.0.4240.80에서 작성되었습니다.
HTML로 웹사이트를 구축하는 방법 시리즈에서 찾을 수 있는 HTML에 대한 이해
JavaScript에 대한 기본적인 이해. JavaScript로 코딩하는 방법 시리즈는 이를 달성하는 데 도움이 됩니다.

1단계 - 렌더링 차단 이해

리소스에 대한 요청이 렌더링 차단이면 해당 요청이 완료될 때까지 window.onload 이벤트가 트리거되지 않음을 의미합니다. 최신 단일 페이지 앱에서 이미지와 함께 CSS 및 JavaScript 파일과 같은 대부분의 자산은 작동을 시작하기 위해 이 이벤트에 의존합니다. 즉, 렌더링 차단 요청이 로드를 완료할 때까지 UI의 일부가 렌더링을 시작하거나 화면에 표시되지 않습니다.

이를 실제로 보려면 표준 상용구 HTML이 있는 HTML 파일을 만드십시오. 선택한 코드 편집기에서 이 작업을 수행할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

  </body>
</html>

헤드에서 <link> 태그를 사용하여 Roboto에 액세스합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
  </head>
  <body>

  </body>
</html>

<style> 태그를 추가합니다. CSS를 사용하여 모든 p 태그의 font-family를 Roboto로 설정합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
      <style>
      p {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>

  </body>
</html>

메타데이터와 CSS가 있으면 <body> 내에 Hello라고 말하는 <p>를 만들 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>
  </body>
</html>

작동 중인 렌더링 차단을 보려면 <body> 내에 <script> 태그를 추가하십시오. 로드됨 메시지를 console.log하는 window.onload를 사용하여 JavaScript 함수를 생성합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>

    <script>
      window.onload = function () {
        console.log('Loaded');
      }
    </script>
  </body>
</html>

코드가 준비되면 Chrome에서 HTML 파일을 엽니다. 그런 다음 개발자 도구를 열고 네트워크 탭으로 이동합니다. Slow 3G에 대한 연결을 낮추고 페이지를 다시 로드하십시오.

Loaded 메시지는 다음 이미지와 같이 CSS 파일이 로드된 직후 콘솔에 기록됩니다.

이 효과는 더 큰 웹사이트를 구축하고 로드할 때 더 문제가 됩니다. 다른 많은 자산과 함께 CSS 및 JavaScript 자산을 로드하는 데 시간이 오래 걸릴 수 있습니다. 따라서 CSS 스타일이 즉시 표시되지 않을 수 있습니다. 리소스를 미리 로드하면 이 효과를 제거하고 지연된 로드를 방지할 수 있습니다.

2단계 - 리소스 사전 로드

기본 렌더링 차단을 방지하고 글꼴 및 CSS와 같은 페이지 리소스가 페이지 수명 주기 초기에 로드되기 시작하도록 하려면 미리 로드를 구현해야 합니다. rel=\preload\ 속성 값은 자산을 미리 로드하는 데 사용됩니다. CSS, JS, 글꼴, 이미지 등 여러 파일 형식에 적용할 수 있습니다. 사전 로드하려는 파일 유형에 따라 해당 as 속성도 rel=\preload\와 함께 포함해야 할 수 있습니다. CSS의 경우 as=를 \style\과 동일하게 설정해야 합니다. JavaScript의 경우 as=를 \script\와 동일하게 설정해야 합니다.

HTML 파일로 돌아가서 이전 <link>를 변경합니다. rel을 \preload\와 동일하게 설정합니다. \style\과 동일한 as 속성 세트를 추가합니다.

<head>
    <link
      rel="preload"
      as="style"
      href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>

Google Chrome에서 HTML 파일을 연 상태에서 개발자 도구로 돌아가서 네트워크가 여전히 느린 3G로 설정된 페이지를 로드합니다. 다음 이미지와 같이 CSS 요청이 시작되기 직전에 Loaded 로그가 표시되는 것을 볼 수 있습니다.

그러나 CSS 스타일이 텍스트에 적용되지 않았음을 알 수 있습니다. preload 또는 prefetch를 사용하면 리소스를 가져오기만 하고 적용하지는 않기 때문입니다. 대신 미리 로드 및 미리 가져오기는 리소스를 메모리에 유지합니다. 리소스가 로드되는 시기를 정의해야 합니다.

글꼴은 로드되는 즉시 적용해야 합니다. 이렇게 하려면 <link> 태그에 onload 특성을 추가합니다. onload를 \this.rel = stylesheet\와 같게 설정합니다.

<link
  rel="preload"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>

onload에서 rel 속성을 stylesheet로 설정하면 브라우저는 리소스를 사용하도록 지시받습니다. 이미 메모리에 다운로드 되었기 때문에 다시 다운로드하지 않습니다.

onload 솔루션은 JavaScript에 의존하므로 원본 <link> 태그를 포함하는 <noscript> 태그를 rel 와 함께 추가합니다. stylesheet로 설정:

<link
  rel="preload"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>
<noscript>
  <link
    rel="stylesheet"
    href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
</noscript>

이렇게 하면 JavaScript가 비활성화되거나 로드되지 않는 경우 글꼴이 표시됩니다.

이제 웹 페이지 자산을 미리 로드하는 방법을 알게 되었습니다. 대신 리소스를 미리 가져오려는 경우가 있습니다.

3단계 - 리소스 미리 가져오기

미리 가져오기는 미리 로드와 유사하게 작동합니다. 차이점은 리소스를 프리페치할 때 브라우저가 리소스를 낮은 우선순위로 간주한다는 것입니다. 이는 리소스 또는 자산이 조금 나중에 로드됨을 의미합니다. 이 때문에 프리페치는 일반적으로 처음에는 필요하지 않지만 나중에 사용되는 리소스로 구현됩니다.

HTML 페이지에서 프리펙칭을 구현하려면 rel 값을 \prefetching\으로 변경합니다.

<link
  rel="prefetch"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>

CSS를 미리 가져오고 미리 로드하면 웹 성능을 개선하는 데 도움이 될 수 있습니다. JavaScript에도 사전 로드를 적용할 수 있습니다. JavaScript 사전 로드는 CSS 리소스 사전 로드와 다릅니다.

4단계 — 자바스크립트 사전 로드

JavaScript 자원을 미리 로드하는 것은 다르게 수행됩니다. 사전 로드에 대한 이 Google Developers 기사에서 가져온 이 예는 다음을 보여줍니다.

<link rel="preload" href="used-later.js" as="script">
<!-- ... -->
<script>
  var usedLaterScript = document.createElement('script');
  usedLaterScript.src = 'used-later.js';
  document.body.appendChild(usedLaterScript);
</script>

참고: 생성된 작업 및 Apache 2.0 라이선스에서 재생산된 코드 스니펫.

여기서 중요한 단계는 파일의 src 속성을 설정하고 DOM에 삽입하는 것입니다.

결론

미리 로드 및 미리 가져오기를 사용하면 리소스가 로드되는 방식을 제어하고 웹 성능을 향상하는 데 도움이 됩니다. 이 자습서에서는 CSS, 글꼴 및 JavaScript와 같은 리소스를 미리 로드하고 프리페치하는 리소스 힌트를 구현했습니다. 이렇게 하면 더 빠른 프로그레시브 웹 앱을 만드는 데 도움이 됩니다.

Angular로 프로그레시브 웹 앱을 만들려면 Vanilla JavaScript 자습서에서 PWA를 빌드하는 방법이 도움이 될 수 있습니다.