Webサイトの表示速度を改善したいけれど、どこから手をつければいいか分からない。そんな方のために、改善ポイントを厳選してまとめました。
本記事では、特別な知識がなくても取り組める「コンテンツの修正」から、少し踏み込んだ「サーバー設定」まで解説します。
PageSpeed Insightsの概要と見方・使い方については以下の記事をご覧ください。
【迷ったら！】改善の優先順位マップ
何をすべきか迷ったら、以下の順番でチェックしてみてください。上のものほど「手間が少なく、効果が出やすい」項目です。
- 【必須】画像の最適化（全サイト共通・最優先）
- 【設定のみ】Webフォントの &display=swap 設定
- 【設定のみ】サーバーのキャッシュ・gzip設定
- 【推奨】画像の遅延ロード設定（最新のWordPressなら自動）
- 【必要に応じて】動画のWebM化（動画を使っている場合のみ）
コンテンツ側の改善（取り組みやすい6項目）
サイトの見た目や内容を少し工夫するだけで、読み込み速度は大きく変わります。
① 画像を最適化する
最初に取り組むのが、容量の大きい画像ファイル（JPEG/PNG/GIF）の圧縮です。
画像ファイルの圧縮は、以下の2つの方法があります。PageSpeed Insightsの「改善できる項目」をみて、必要な対処をしましょう。
| 改善できる項目 | 具体的な対処法 | 利用できるサイト |
| 次世代フォーマットでの画像の配信 | JPEGやPNGを、より軽量な WebPやAVIF形式に変換する。 | Squoosh |
| 適切なサイズの画像 | 表示領域（スマホ・PC）に合わせて、画像のピクセルサイズ（縦横）をリサイズする。 | Bulk Resize Photos |
| 効率的な画像コーディング | 画質を保ちつつ、ファイル内の不要なメタデータを削除し圧縮する。 | TinyPNG / Compressor.io |
② 動画を「WebM」形式にする
これまで動画といえば「MP4」が一般的でしたが、現在はそれよりもデータ量が軽い「WebM（ウェブエム）」という形式が主流になっています。
やり方はとてもシンプルです。まずは Convertio などの無料変換サイトを使い、手持ちの動画をMP4からWebMへにしましょう。これだけで、見た目はそのままに、動画の重さだけをグッと減らすことができます。
ただし、ごく一部の古いブラウザではWebMが再生できない場合があるため、ホームページのコードには「基本は軽いWebMで、もし読み込めなければMP4で再生してね」という二段構えの指示を書いておくといいでしょう。
<video autoplay loop muted playsinline>
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
</video> ③ Webフォントの読み込み設定
おしゃれなWebフォントは「重い荷物」になりがちです。これを速く表示させるコツは2つに絞られます。
まずは、「フォントを待たずに文字を出す」設定です。 Google FontsなどのURL末尾に &display=swap を書き加えましょう。これだけで「フォントが届くまでは、代わりの標準フォントで文字を表示する」という指示になり、画面が真っ白になる時間をゼロにできます。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">④ 画像読み込み（Lazy Load)
すべての画像を一度に読み込もうとすると、サイトの表示は遅くなります。そこで、「画面に映る分だけ先に読み込み、残りはスクロールに合わせて表示させる」のが「遅延ロード」というテクニックです。
現在はブラウザの標準機能としてサポートされており、img タグに loading=”lazy” と書き加えるだけで、表示領域に近づいたタイミングで画像を読み込むよう自動制御されます。
<img src="photo.jpg" loading="lazy" alt="画像の説明">WordPressを使用している場合、以前はプラグインが必要でしたが、現在は標準機能として自動的に遅延ロードが適用されます。 特殊なカスタマイズが必要な場合を除き、追加の設定は不要です。
⑤ライブラリの「Minify（軽量版）」を使う
実務で外部のライブラリ（jQueryなど）を読み込む際は、ファイル名に .min.js や .min.css と付いている「Minify版」を優先して使用しましょう。
Minify版は、プログラムの動作に影響しない改行やコメント、空白をすべて削除してデータ量を極限まで削ったものです。中身の機能は通常版と全く同じですが、転送されるデータサイズが小さくなるため、ネットワークの負荷を軽減し、読み込み時間を短縮できます。
⑥ scriptタグにdefer属性を付与する
JavaScriptは、そのまま記述すると読み込み中に画面の描画を止めてしまいます。現在は、scriptタグに defer 属性を付与して <head> 内に記述するのが一般的です。 これにより、ブラウザはHTMLの解析を止めずにJavaScriptをバックグラウンドでダウンロードし、解析が終わったタイミングで実行するため、表示速度（LCPなど）の向上につながります。
サーバー設定の改善2項目
レンタルサーバーの設定画面や .htaccess ファイルを調整することで、ネットワーク転送の効率を高めることができます。
① コンテンツの圧縮（Brotli / gzip）
ファイルを圧縮して転送量を減らす設定です。現在は従来の gzip よりさらに圧縮率が高い Brotli（ブロトリ） を使うのが一般的で、テキストベースのファイルの読み込みを大幅に高速化できます。
最近のレンタルサーバーでは管理画面からワンクリックで設定できることが多いため、まずは Brotli が有効か確認しましょう。サーバー側が未対応の場合のみ、代替案として .htaccess で gzip を設定します。
②ブラウザキャッシュを活用する
一度読み込んだ画像などのデータをユーザーの端末側に一時保存させ、2回目以降のアクセスで再利用する仕組みです。
Apacheサーバーを利用している場合、.htaccess でファイルの種類ごとに「キャッシュの有効期限（Expiresヘッダ）」を明示します。これにより、同じユーザーがサイト内を回遊したり再訪したりする際のサーバーリクエストを削減でき、スムーズなページ遷移を実現できます。
開発中・公開前のサイトを測定する方法
通常、PageSpeed Insights（PSI）は、「世界中に公開されているURL」しか見ることができません。 しかし、制作途中のサイトはまだ自分のパソコンの中にしかない（＝世界からは見えない）ため、Googleのツールがアクセスできずにエラーになってしまいます。
そこで、以下の2つの方法のどちらかを使います。
lighthouse（ライトハウス）でテストする
これは、「Googleの測定機能を、自分のブラウザに呼び出して測る」方法です。
イメージは健康診断の「出張検査」。検査キットを自分の家に持ち込んで、自分の家（ローカル環境）で測定します。
やり方は、Google Chromeで制作中のサイトを開き、キーボードの「F12」を押すか、画面上の適当な場所を「右クリック」して「検証」を選択します。画面の端にデベロッパーツールというメニューが出てくるので、その中の「Lighthouse」タブをクリックし、「Analyze page load（ページ読み込みを分析）」ボタンを押すだけです。
公開前の段階でも、今作っている画面のパフォーマンスをその場ですぐに計測できるため、開発中のトライ＆エラーに非常に便利です。
ngrok（エングロック）を利用する
これは、自分のパソコンの中だけに閉じているサイトに、「外から覗ける専用の窓」を一時的に作るツールです。
イメージは 「内覧会」。家（自分のPC）はまだ建設中ですが、専用の入り口（一時的なURL）を作って、外の人（PSIの測定ロボット）を招待します。
ツールを動かすと「http://xxxx.ngrok.io」のようなURLが発行されるので、そのURLをいつものPageSpeed Insightsに貼り付ければ、公開前でも計測できます。
まとめ
表示速度の改善は、難しいコードを書き換えることだけではありません。「画像のサイズを整える」「無駄な読み込みを後回しにする」といった、ちょっとした「おもてなし」の積み重ねが、最終的なスコアとユーザーの満足度につながります。
まずは一番の原因になりやすい「画像の圧縮」から手をつけてみてください。それだけで、PageSpeed Insightsの点数が驚くほど改善されるはずです。すべてを一度にやろうとせず、できるところから一歩ずつ進めていきましょう。
