Webページの表示速度はどうすれば上がるのか
Webページの高速化に関するお問い合わせをよくいただくので、考え方や方法を共有します。
爆速Webサイトの簡単な作り方
まず、大多数向けの「正解」を書きます。
これだけで爆速なサイトが作れます。
もっと簡単に言うと、WordPressを0から始めるタイミングで「AMP」のプラグインをインストール（有効化）するだけです。
これで、PageSpeed Insightsで100点に近い点数が出せます。
表示速度に強く関係するもの
- Webサーバー（レンタルサーバー）
- 読み込んでいるファイル
- 画像
- ページの構成（HTML）
ざっくり言うと、これらが表示速度の良し悪しを決める要因です。
それぞれ実行ハードルが違いますが、「Webサーバー」と「画像」は、すぐに最適化できます。
表示速度の具体的な改善策
表示速度をどのように改善すればいいのか、具体的にシェアします。後半になるにつれて難易度が上がります。
Webサーバー（レンタルサーバー）を移行する
多くの人がレンタルサーバーを借りてWebサイトを運営していると思うので、その前提で話を進めます。
まず、マイナーなレンタルサーバーを使っている方をたまに見かけますが、メジャーなレンタルサーバーに移行することを強く推奨します。
例えば、あるマイナーなレンタルサーバーからConoHa WINGへのサーバー移行をサポートしたことがありますが、それだけで表示速度が劇的に改善しました。（体感でわかるほど）
もちろん、エックスサーバーや、その上位互換であるエックスサーバービジネスなど、他にも候補はあるので、名前を聞いたことがあるレンタルサーバーなら何を選んでもOKです。
要するに、良いスペックのパソコンの方が処理速度が速いのと同じ理屈なので、スペックを高くしましょう、という話です。
画像の遅延読み込み
Webページは様々なファイルで構成されていますが、「画像」はとりわけ大きいサイズの「ファイル」です。
そのため、画像を小さくしたり、別のファイル形式にするだけでも効果は大きいのですが、一番効果的なのは「遅延読み込み」です。
通常、Webページが表示される前に、ページで使われている画像ファイルがすべて読み込まれるのですが、ページ後半の画像などは「今読み込む必要がない画像」です。こういった不要な画像がページの表示を遅くしています。
そのため、必要な時に必要な画像だけ読み込むのが改善策になり、これが「遅延読み込み」または「レイジーロード」と呼ばれる手法になります。
WordPressでサイトを構築している場合は、バージョン5.5で画像の遅延読み込みがデフォルトの機能になったので対策は不要です。
また、AMPプラグインを使っている場合も対策は不要です。
自分でコードを書いている場合は、画像を読み込むコードを以下のように修正してください。
修正前
<img src="https://example.com/image-path/image.jpg">修正後
<img loading="lazy" src="https://example.com/image-path/image.jpg">外部ファイルの読み込み方を変更
画像に次いで重いファイルは、スクリプト（.js）やスタイルシート（.css）です。
スクリプトはボタンを押したら動かすといった処理に、スタイルシートは色や大きさなどの見た目に、それぞれ使われます。
※開発者向けの内容になるので、別記事でやり方をシェアします。
ページ構成の見直し
根本的にページの構成が悪いケースもあります。
例えば、WordPressサイトで、「特定のページだけサイドバーにバナー画像を表示する」こともできますが、この処理はほとんどの場合で悪手です。
理由はシンプルで、画像を表示しないページにとっては無駄な処理だからです。
塵も積もれば何とやらで、こういった無駄な処理が、どんどんページの表示速度を重くしていきます。
また、最適化処理が、逆に表示速度が遅い原因になっていることもあるので、便利そうな機能を考えなしに使うことは避けてください。
ページ構成の見直しは自動でどうにかなるものではありません。
- WordPressテーマを公式のものに変更する（内部のコードの信頼性が高いため）
- 不要な機能を乱用しない（アニメーションなど）
- 1つのページでしか使っていないような外部ライブラリやWordPressプラグインの使用をやめる
など、1つ1つ地道に対処していきましょう。
多くの場合、記事単位での見直し（リライト）が必要になります。