サイトが重いと言われたら、Front-End Performance Checklistを開く

はじめに

「サイトが重い」とだけ言われて、どこから手をつけるか困ったことはありませんか。

画像を圧縮すればいいのか、JavaScriptの読み込み順を変えるべきなのか、それともサーバー側のキャッシュ設定なのか。パフォーマンス改善は関わる領域が広すぎて、感覚だけで手を動かすと大事な項目を見落としがちです。

そんなときに便利なのが「Front-End Performance Checklist」です。HTML・CSS・フォント・画像・JavaScript・サーバー設定、さらにReactやAngularといったフレームワーク固有の項目まで、フロントエンドの高速化に関わるチェック項目を1つのリポジトリに体系的にまとめてあります。

Front-End Performance Checklistとは

Front-End Performance Checklistは、thedaviddias氏がGitHubで公開している、フロントエンドのパフォーマンス最適化に関するチェックリストです。GitHubで17,000以上のスターを獲得しており、アーカイブされることなく現在も更新が続いています。

基本情報

項目	内容
リポジトリ	thedaviddias/Front-End-Performance-Checklist
GitHubスター	17,000以上
ライセンス	MIT
形式	Markdownドキュメント（npmパッケージなし）

npmパッケージやCLIツールではなく、Markdownでまとめられたドキュメントという点が特徴です。プロジェクトに組み込むものではなく、開発者やチームが「見て確認する」ためのチェックリストとして使います。

特徴・メリット

1. 項目がカテゴリごとに整理されている

HTML、CSS、フォント、画像、JavaScript、サーバー、フレームワーク別と、関心事ごとにセクションが分かれています。「今回は画像周りだけ見直したい」というときに、該当セクションだけを開けば済みます。

2. 各項目に根拠となる参考リンクが付いている

「なぜこの対応が必要か」を説明する外部記事へのリンクが多数貼られています。チェック項目を鵜呑みにするのではなく、背景を理解したうえで採用するかどうかを判断できます。

3. フレームワーク固有の項目もカバーしている

React・Angular・Vueなど、フレームワークを使う場合に特有の落とし穴（不要な再レンダリング、バンドルサイズの肥大化など）についても項目が用意されています。素のHTML/CSS/JSだけでなく、実際の開発現場に即した内容になっています。

4. 定期的にメンテナンスされている

HTTP/2やWOFF2、loading="lazy"といった比較的新しい技術への言及もあり、古い情報のまま放置されていません。

使い方

npmパッケージではないため、インストールは不要です。以下のいずれかの方法で参照します。

# リポジトリをクローンしてローカルで読む
git clone https://github.com/thedaviddias/Front-End-Performance-Checklist.git

GitHub上でREADMEをそのまま閲覧してもよいですし、リポジトリをスターしておけば更新をフィードで追えます。チームで使う場合は、READMEをコピーしてプロジェクトのWikiやNotionに貼り付け、対応済みの項目にチェックを入れていく運用が現実的です。

基本的な使い方

Front-End Performance Checklistは実行するライブラリではなく、チェックリストに沿って自分たちのコードを見直していくものです。ここでは、チェックリストに登場する代表的な項目をどうコードに反映するかを見てみます。

たとえば「CSSタグをJavaScriptタグより前に配置する」という項目は、次のようにHTMLの記述順を意識するだけで対応できます。

<head>
  <!-- CSSは先に読み込み、レンダリングをブロックしても最小限に抑える -->
  <link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
  <!-- JavaScriptはCSSより後、かつdeferで非ブロッキングにする -->
  <script src="/scripts/app.js" defer></script>
</body>

linkタグでCSSを先に読み込み、scriptタグにはdeferを付けてレンダリングをブロックしないようにする。この2点だけでも、チェックリストの「HTML」セクションと「JavaScript」セクションの項目をそれぞれ1つずつ満たしたことになります。

実践的なユースケース

Front-End Performance Checklistの項目には、実際にコードへ落とし込むと分かりやすいものが多くあります。ここでは代表的な3つのカテゴリを取り上げます。

フォントの読み込みを最適化する

チェックリストの「Fonts」セクションでは、Webフォントの読み込みがレンダリングを遅らせる問題への対策が挙げられています。rel="preconnect"でフォント配信元への接続を事前に確立し、font-display: swapでフォント読み込み中もテキストを表示し続けるのが基本的な対応です。

<!-- フォント配信元へ事前接続しておく -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<style>
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter.woff2") format("woff2");
    /* フォント読み込み中もテキストを見えるままにする */
    font-display: swap;
  }
</style>

font-display: swapを外すと、フォントの読み込みが終わるまで文字が非表示になる「invisible text」状態が発生します。実際にこの1行を有無で切り替えて体感速度を比較してみると、効果の大きさが分かります。

画像を遅延読み込みする

「Images」セクションでは、画面外の画像を初期読み込みの対象から外すレイジーロードが取り上げられています。モダンブラウザでは、<img>タグにloading="lazy"属性を付けるだけで実装できます。

<!-- ファーストビュー内の画像は即座に読み込む -->
<img src="/hero.webp" alt="ヒーロー画像" width="1200" height="600" />

<!-- 画面外の画像はlazyで遅延読み込みする -->
<img
  src="/gallery-1.webp"
  alt="ギャラリー画像1"
  loading="lazy"
  width="400"
  height="300"
/>

widthとheightを明示しているのもチェックリストの項目の1つで、これによりレイアウトシフト（画像読み込み前後でページがガクッとずれる現象）を防げます。ファーストビュー内の画像にはloading="lazy"を付けない点にも注意が必要です。付けてしまうと、最初に見える画像の表示まで遅れてしまいます。

未使用JavaScriptを減らす

「JavaScript」セクションでは、使っていないコードを実行時まで持ち込まないための施策が挙げられています。動的import()を使うと、必要になったタイミングでだけコードを読み込めます。

// ページ読み込み時にはモーダル用のコードを読み込まない
document.getElementById("open-modal").addEventListener("click", async () => {
  const { openModal } = await import("./modal.js");
  openModal();
});