[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を実行する方法について確認したい方は下記のリンクを参考してください。