<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/web"><span itemprop="name">web</span></a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/web/optimization_load_google_font/"><span itemprop="name">[Web] Google Web Font 로드 최적화</span></a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#preconnect">Preconnect</a></li><li><a href="#preload">Preload</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2><p><code>Google</code>의 <code>Chrome</code> 브라우저에서는 웹 페이지의 성능을 측정할 수 있는 <code>Lighthouse</code>라는 기능을 제공하고 있습니다. 이 기능을 사용하면 웹 페이지의 전반적인 성능을 확인할 수 있고, 다음과 같이 문제점도 확인할 수 있습니다.</p><picture><source srcset="/assets/images/category/web/2023/optimization_load_google_font/render_blocking_resources_issue_of_google_web_font.avif" type="image/avif"><source srcset="/assets/images/category/web/2023/optimization_load_google_font/render_blocking_resources_issue_of_google_web_font.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/web/2023/optimization_load_google_font/render_blocking_resources_issue_of_google_web_font.png" alt="Optimization loading Google web font - Lighthouse Eliminate render-blocking resources issue of google web font"></picture><p>이번 블로그 포스트에서는 <code>Google Web Font</code>의 로딩을 최적화하여 <code>Eliminate render-blocking resources</code> 문제를 해결하는 방법에 대해서 알아보겠습니다.</p><h2 id="preconnect">Preconnect</h2><p><code>Preconnect</code>는 현재 페이지에서 외부 도메인의 리소스를 가져올 때, 웹 브라우저에 미리 외부 도메인과 연결을 하도록 도와줍니다.</p><ul><li>Preconnect: <a href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect" rel="nofollow noreferrer" target="_blank">https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect</a></li></ul><p><code>Preconnect</code>는 다음과 같이 사용할 수 있습니다.</p><div><pre><code><span>&lt;link</span> <span>rel=</span><span>"preconnect"</span> <span>href=</span><span>"https://example.com"</span><span>&gt;</span>
</code></pre></div><p>이를 활용하여 <code>Google Web Font</code>를 가져오는 속도를 향상시킬 수 있습니다. <code>Google Web Font</code>를 가져오는 속도를 향상시키기 위해 <code>&lt;head /&gt;</code>에 <code>Google Web Font</code>를 불러오는 코드보다 상위에 다음과 같이 추가합니다.</p><div><pre><code><span>&lt;head&gt;</span>
  <span>&lt;link</span> <span>rel=</span><span>"preconnect"</span> <span>href=</span><span>"https://fonts.googleapis.com"</span><span>&gt;</span>
  <span>&lt;link</span> <span>rel=</span><span>"preconnect"</span> <span>href=</span><span>"https://fonts.gstatic.com"</span> <span>crossorigin</span><span>&gt;</span>
  ...
  <span>&lt;link</span>  <span>rel=</span><span>"stylesheet"</span> <span>href=</span><span>"https://fonts.googleapis.com/css?family=Noto+Sans"</span> <span>/&gt;</span>
<span>&lt;/head&gt;</span>
</code></pre></div><h2 id="preload">Preload</h2><p><code>Preload</code>는 현재 웹 페이지에서 사용할 리소스들을 웹 브라우저에게 페이지를 렌더링하기 전에 미리 불러오도록 알려줍니다.</p><ul><li>Preload: <a href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload" rel="nofollow noreferrer" target="_blank">https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload</a></li></ul><p><code>Preload</code>는 다음과 같이 사용할 수 있습니다.</p><div><pre><code><span>&lt;link</span> <span>rel=</span><span>"preload"</span> <span>as=</span><span>"script"</span> <span>href=</span><span>"example.js"</span> <span>/&gt;</span>
<span>&lt;link</span> <span>rel=</span><span>"preload"</span> <span>as=</span><span>"style"</span> <span>href=</span><span>"example.css"</span> <span>/&gt;</span>
</code></pre></div><p>이를 활용하여 <code>Google Web Font</code>를 가져오는 속도를 향상시킬 수 있으며, 웹 페이지의 렌더링전에 미리 가져오므로 페이지 렌더링시 미리 준비된 폰트를 사용할 수 있게 됩니다. <code>Google Web Font</code>를 가져오는 속도를 향상시키기 위해 <code>Google Web Font</code>를 가져오는 코드를 다음과 같이 수정합니다.</p><div><pre><code><span>&lt;head&gt;</span>
  ...
  <span>&lt;link</span>
    <span>rel=</span><span>"preload"</span>
    <span>as=</span><span>"style"</span>
    <span>href=</span><span>"https://fonts.googleapis.com/css?family=Noto+Sans"</span>
  <span>/&gt;</span>
  <span>&lt;link</span>  <span>rel=</span><span>"stylesheet"</span> <span>href=</span><span>"https://fonts.googleapis.com/css?family=Noto+Sans"</span> <span>/&gt;</span>
<span>&lt;/head&gt;</span>
</code></pre></div><h2 id="완료">완료</h2><p>이것으로 웹 페이지 성능 향상을 위해 <code>Google Web Font</code>의 로딩을 최적화하는 방법에 대해서 알아보았습니다. <code>Lighthouse</code>에서 자주 발생하는 지적 사항이므로 이번 기회에 잘 기억해 두면 좋을 거 같습니다. 혹시 브라우저가 아닌 로컬이나 <code>CI</code> 환경에서 <code>Lighthouse</code>를 실행시키는 방법에 대해 궁금하신 분들은 아래 링크를 참고하시기 바랍니다.</p><ul><li><a href="https://deku.posstree.com/ko/code_quality/lighthouse_ci/" target="_blank">[Code Quality] Lighthouse CI</a></li></ul><p><code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code></p><h2>앱 홍보</h2><div><p> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요.<br><code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.</p><p> 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</p></div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

웹 페이지에서 Google Web Font를 사용할 때, 폰트를 불러오는 부분이 웹 페이지의 성능에 영향을 주지 않도록 최적화하는 방법에 대해서 알아보겠습니다.