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

이번 블로그 포스트에서는 CSS
와 JS
의 로딩을 최적화하여 Reduce unused JavaScript
와 Reduce unused CSS
문제를 해결하는 방법에 대해서 알아보겠습니다.
Preconnect
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
는 다음과 같이 사용할 수 있습니다.
<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
를 실행시키는 방법에 대해 궁금하신 분들은 아래 링크를 참고하시기 바랍니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku
가 개발한 앱을 한번 사용해보세요.Deku
가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.