★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

PageSpeed Insightsの使い方 – WordPressのスコアを上げるには?

サイトの表示速度は記事が読まれるかどうかに関わる重要な指標で、それが遅ければ直帰率が上がったりPVが下がるなどサイトにとってマイナスになります。

なので表示速度を遅いなら何が原因になっているか調べて改善していくのが重要です。

とは言うものの自分で表示速度を調べてどこが遅い原因になっているか、なんてことを調べるのは大変ですよね。

そこで役立つのがGoogleが開発した「PageSpeed Insights」というWebツールです。

このツールを使うとページ表示速度をスコア化してくれる上に何が速度低下の原因になっているかも教えてくれて便利です。ここではそのPageSpeed Insightsの使い方とWordPressでそのスコアを上げる方法について紹介します。

PageSpeed Insghtsの使い方

では早速PageSpeed Insightsを使ってページの表示速度速度を調べてみましょう。

その手順は次の通りです。

まずPageSpeed Insightsにアクセスすると次のようなページが表示されるので、ウェブページのURLを入力」と書かれたテキスト欄に表示速度を調べたいページのURLを入力します。

ページURLを入力したら右にある「分析」ボタンを押します。

しばらくすると次のように解析がスタートするのでしばらく待ちましょう。

しばらく待つと解析が完了して結果がスコア化して表示されます。

スコアは0~100の範囲で「パソコン」タブをクリックすると次のようにPCでの表示速度スコアが、

モバイル」タブをクリックするとモバイル(スマホやタブレット)でのスコアが表示されます。

またこのツールが素晴らしいのはただスコアを表示するだけでなく、次画像のように最適化についての提案」まで教えてくれるところです。

最適化の提案の見方や具体的な改善方法については後ほど説明していきます。

外部リソースの無効化

このようにPageSpeed Insightsは表示速度を視覚化するのに便利なツールですが1つ問題点があります。

それは外部リソースまでスコアに反映されるので純粋なページスピードが求められない、ということです。

外部リソースというのは自分のサーバー外で読み込むファイルで例えば・・・

  • 他サービスのCSSやJS
  • GoogleAnalyticsなどのコード
  • その他外部サイトの画像などのファイル

などのことを指します。

これらは自分の管理の外にあるので、圧縮や最適化などができません。

そして外部リソースを改善する対策をいくら表示されても対策は不可能なので、自分のサイトの正しいパフォーマンスを知るにはこれらの外部リソースは除外した方がいいかもしれません。

ではどうやって外部リソースを除外するかというと次のようにURLに「?filter_third_party_resources=true」をつけてアクセスするだけです。

https://developers.google.com/speed/pagespeed/insights/?filter_third_party_resources=true

実際にこのURLから解析を行うと次のようにサードパーティーのリソースが除外されているというメッセージが表示され、外部リソースはスコアに含まれないようになります。

もし自分のサイトパフォーマンスを正確に知りたい、という場合はこのオプションを試してみてください。

スコア改善案の改善方法

PageSpeed Insightsではスコアを改善するために色々な提案が表示されます。

その中でも特に表示速度に影響を与えるので改善した方がいいのは次の5つの提案です。

これらの提案を具体的に改善する方法については記事の最後の方で紹介するので、まずはこの最適化案の意味と改善の大まかなやり方について紹介します。

サーバーの応答時間を短縮する

もし最適化案に次のようなメッセージが表示される場合、サーバーからデータが送られるまでの時間(応答時間)が長すぎるということです。

このメッセージは応答時間が200ミリ秒(0.2秒)以上の場合に表示され、サーバーのスペックが低いことなどが原因として考えられます。

しかしサーバーのスペックというのはあらかじめ決まっていることなので、この最適化案をサイト側で解決するのは不可能です。

なのでもしサーバーの応答時間を少しでも短くしたいならスペックの高いサーバーを借りるか乗り換えるしか解決方法はないと思います。

高スペックレンタルサーバーは探せば色々なありますが、特にWordPressの高速化に適しているのは次の2つです。

これらのサーバーの詳しい情報やおすすめする理由については次の記事で詳しく紹介したのでそちらをご覧ください。

WordPressは多機能な分だけ表示速度が遅くなりがちで、高速に動かすにはサーバー選びが超重要です。そこでここではWordPress運営に特におススメの高速・高機能なレンタルサーバーを厳選して3つ紹介します。

特にwpxレンタルサーバーは初めからWordPressの高速化に必要な機能が一通りそろっているので、下手に自分で最適化案を試すより効果があります。

またスペックを高くしたいなら最低限無料のレンタルサーバーは借りないようにしましょう。無料というのはあらゆる点で機能が制限されるのでおススメできません。

最初は費用がかかっても安定・高速で長く続くサイト運営をしたいなら有料のレンタルサーバーを借りるのが賢い選択だと思います。

ブラウザのキャッシュを活用する

ブラウザでは一度サーバーからダウンロードしたファイルを次回アクセス時にすぐに読み込めるように保存しています。

このファイルのことを「キャッシュ(cache)」といい、サイトの高速表示には欠かせません。

しかしこのキャッシュファイルの有効期限が1日や3日など短く設定されている場合、次のような最適化案が表示されます。

この最適化案の解決方法は簡単でブラウザ側でキャッシュするファイルの有効期限を1週間・1カ月と長くすればいいだけです。

サーバーでのデータ圧縮を有効にする

ブラウザでページを表示するにはサーバーから必要なファイルをダウンロードしなくてはなりません。ですがファイルの読み込みというのは時間がかかります。

そこでそのサイズを減らすために圧縮することでページ表示速度の改善につながります。

その圧縮が有効になっていない場合に次のような改善案が表示されます。

この改善案に表示されている通り、サーバー側でgzipなどの圧縮形式を使ってファイルを配信するようにすると表示速度の向上が期待できます。

レンダリングをブロックするスクリプト

もし多くのCSSやJSファイルを読み込んでいるなら次のような最適化案が表示されることもあります。

このPageSpedd Insightsの説明だと分かりにくいと思うのでどういう意味なのか少し説明します。

まずWordPressや普通のサイトもそうですがデザインを整えるのには多くのCSSやJS(JavaScript)ファイルの読み込みが必要です。

特にWordPressの場合は次のようなCSS・JSファイルが大量に読み込まれるので表示速度が遅くなりがちです。

  • WordPress本体で読み込まれるCSS・JSファイル
  • テーマやプラグインで使われるCSS・JSファイル

ですが表示速度が遅くなるのはCSSやJSのサイズが大きいからでなく、読み込む位置に問題があるからです。

WordPressではCSSやスクリプトはヘッダー部分(headタグの間)で読み込まれます。そのためページを開いたときに読み込みが終わるまではページ表示が妨げられ、結果的に表示速度が遅くなってしまう、ということです。

解決策はこれらのファイルをフッター(bodyタグの最後当たり)に移動させてしまうことです。

画像を最適化する

ページで読み込まれる画像が全く無圧縮で読み込みの負担になっている場合に表示されるのが次のような最適化案

また最適化案の下に画像を圧縮することで何キロバイト圧縮できるかということも併せて確認できます。

この改善案は単に画像を圧縮してサイズを減らすだけで解決できます。

ですが圧縮すればいい、と言われてもアップロード時やアップロード後の画像を1つ1つ圧縮するとなるととても手間がかかって大変ですよね。

ところがWordPressなら画像圧縮用のプラグインを使うことができアップロードした後またはする前の画像でも自動で圧縮できるので、そのようなプラグインを活用していきましょう。

圧縮系プラグインを使えばディスク使用量も節約できてさらに表示速度も改善するのでまさに一石二鳥です。

WordPressでスコアを上げるには...

ここまでPageSpeed Insightの改善案の意味と改善のやり方について説明しましたが、WordPressでその問題を解決するために必要なことをまとめると次のようになります。

1つめについてはレンタルサーバーを変えるしかないので対応は難しいかもしれませんが、2~5つ目についてはサーバー側やWordPress側でプラグインを使うことで十分対応できる内容です。

これらの具体的なやり方については次の記事でWordPress高速化のために最低限しておきたいこととしてまとめたのでWordPressサイトのPageSpeedスコアが低いと悩んでいるなら試してみてください。

一言でWordPress高速化と言っても様々な方法があって何をすればいいか分からない方も多いと思います。そこでここではWordPress高速化のために"最低限"しておいた方がいい6つのテクニックについて紹介していきます。

最低でもこれらの設定をしておけば見違えるほどサイトが高速化するはずです。

まとめ

PageSpeed Insghtsは感覚的なページの表示速度を具体的にスコアとして視覚化できる上に、どうすれば表示速度が上がるかの提案までしてくれる便利なツールです。

特にWordPressの場合は表示速度が遅くなりがちなので、このようなツールを活用して何がボトルネックになっているのか調べ改善を繰り返していきましょう

以上ここではPageSpeed Insightsの使い方とWordPressでのスコアを上げる方法について紹介しました。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press