[Web] CSS와 JS 로드 최적화

개요

Google의 Chrome 브라우저에서는 웹 페이지의 성능을 측정할 수 있는 Lighthouse라는 기능을 제공하고 있습니다. 이 기능을 사용하면 웹 페이지의 전반적인 성능을 확인할 수 있고, 다음과 같이 문제점도 확인할 수 있습니다.

Optimization loading Google web font - Lighthouse Eliminate render-blocking resources issue of google web font

이번 블로그 포스트에서는 CSS와 JS의 로딩을 최적화하여 Reduce unused JavaScript와 Reduce unused CSS 문제를 해결하는 방법에 대해서 알아보겠습니다.

Preconnect

Preconnect는 현재 페이지에서 외부 도메인의 리소스를 가져올 때, 웹 브라우저에 미리 외부 도메인과 연결을 하도록 도와줍니다.

Preconnect: https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect

Preconnect는 다음과 같이 사용할 수 있습니다.

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

이를 활용하여 CSS 또는 JS를 가져오는 속도를 향상시킬 수 있습니다. CSS와 JS를 가져오는 속도를 향상시키기 위해 <head />를 다음과 같이 수정합니다. 이번 블로그 포스트에서는 Bootstrap을 예로 사용했습니다.

<head>
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  ...
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>

Preload

Preload는 현재 웹 페이지에서 사용할 리소스들을 웹 브라우저에게 페이지를 렌더링하기 전에 미리 불러오도록 알려줍니다.

Preload: https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload

Preload는 다음과 같이 사용할 수 있습니다.

<link rel="preload" as="script" href="example.js" />
<link rel="preload" as="style" href="example.css" />

이를 활용하여 CSS와 JS를 가져오는 속도를 향상시킬 수 있습니다. CSS와 JS를 가져오는 속도를 향상시키기 위해 다음과 같이 수정합니다.

<head>
  ...
  <link
    rel="preload"
    as="style"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  />
  <link
    rel="preload"
    as="script"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>

완료

이것으로 웹 페이지 성능 향상을 위해 CSS와 JS의 로딩을 최적화하는 방법에 대해서 알아보았습니다. Lighthouse에서 자주 발생하는 지적 사항이므로 이번 기회에 잘 기억해 두면 좋을 거 같습니다. 혹시 브라우저가 아닌 로컬이나 CI 환경에서 Lighthouse를 실행시키는 방법에 대해 궁금하신 분들은 아래 링크를 참고하시기 바랍니다.

[Code Quality] Lighthouse CI

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.