サイトの表示速度を改善する4つの手順|PageSpeed Insightsスコアが7倍になった実例
「PageSpeed Insightsで計測したら、自分のサイトのスコアが低くて落ち込んだ」という方も多いのではないでしょうか。結論から言うと、表示速度の改善は意外と簡単で、特にこれまであまり手を加えていないサイトほど、対策の効果が大きく出ます。この記事では、実際に当ブログで行った4つの改善手順を紹介します。同じ対策を行ったところ、モバイルのスコアが最大7.4倍にアップしました。
目次
PageSpeed Insightsで現在のスコアを計測する
サイトの表示速度を改善するには、まずGoogleの計測ツール「PageSpeed Insights」で現状のスコアを確認します。下の画像は、改善前に当ブログのページを計測したときのスコアです。
- モバイル:5
- パソコン:39
この記事で紹介する4つの手順を行ったところ、以下のスコアまで改善しました。
- モバイル:37(7.4倍UP)
- パソコン:66(1.6倍UP)
モバイルのスコアが7.4倍に改善していることがわかります。なお、PageSpeed Insightsはスコアの算出基準が随時更新されるため、表示される数値や項目は計測時期によって変わります。大切なのは数値そのものより、画面に表示される「改善できる項目」を一つずつ潰していくことです。
特に効果が大きい4つの改善項目
PageSpeed Insightsの「改善できる項目」には、表示速度を改善するためのヒントが一覧で表示されます。数ある項目の中でも、特に効果が大きく、初心者でも対策しやすいのが次の4つです。
- レンダリングを妨げるリソースの除外
- テキスト圧縮の有効化
- オフスクリーン画像の遅延読み込み
- サーバー応答時間の短縮(TTFB)
以下、それぞれの対策方法を詳しく解説した記事へのリンクとあわせて紹介します。
1. レンダリングを妨げるリソースの除外
「レンダリングを妨げるリソースの除外」は、CSSやJavaScriptの読み込みによってページの表示が遅れる現象を解決する方法です。これらはWordPressのプラグインやテーマによって発生しやすく、CSS・JSの遅延読み込みを設定することで改善できます。詳しい手順は以下の記事で解説しています。
2. テキスト圧縮の有効化
Webページの大部分を占めるテキストデータ。「テキスト圧縮の有効化」は、容量が大きくなりがちなテキストを圧縮して通信することで、表示速度を改善する方法です。.htaccessへの追記だけで対応でき、コピー&ペーストで設定できます。具体的な手順は以下の記事をご覧ください。
3. オフスクリーン画像の遅延読み込み
「オフスクリーン画像の遅延読み込み」は、ページを開いたときにまだ画面に表示されていない画像を、後から読み込むようにする改善策です。画像を多用しているサイトほど効果が大きく、現在のWordPressでは標準機能で対応できます。詳しくは以下の記事で解説しています。
4. サーバー応答時間の短縮(TTFB)
サイトにアクセスがあるたびに、サーバー側ではページを生成するための処理が行われています。この処理に時間がかかるとサーバーの応答時間(TTFB)が長くなり、結果としてサイト全体の表示速度が遅くなります。「サーバー応答時間の短縮(TTFB)」では、キャッシュの仕組みを使って、この応答時間を短縮します。WordPressの場合はキャッシュ系プラグインで対応可能です。具体的な方法は以下の記事で解説しています。
プラグインで改善しない場合はサーバー環境も確認を
TTFBはキャッシュプラグインである程度改善できますが、根本的にはサーバーそのものの性能に大きく左右されます。プラグインで対策しても応答が遅いままの場合は、サーバー環境の見直しも検討してみてください。サーバーごとの速度の違いは、レンタルサーバー速度比較|WordPressが速いサーバーおすすめ5選で詳しく比較されています。
まとめ
サイトの表示速度は、ユーザーの満足度に直結する大切な要素です。今回紹介した「レンダリングを妨げるリソースの除外」「テキスト圧縮の有効化」「オフスクリーン画像の遅延読み込み」「サーバー応答時間の短縮(TTFB)」の4つは、いずれも初心者でも取り組みやすい対策です。当ブログではこの4つを行っただけで、モバイルのスコアが7.4倍に改善しました。まずはPageSpeed Insightsで現状を計測し、表示された項目から1つずつ試してみてください。
