WordPressの高速表示を目指す!Google Page Speed Insightsの使い方

WordPressは動的にページを生成しているため、HTMLで作成された静的ページに比べてページの表示が遅くなることがあります。

ページの表示が遅いということは、せっかく検索エンジンなどを通してサイトに訪問してくれた閲覧者が、コンテンツの表示を待たずして、他のサイトに行ってしまう可能性が高くなるということでもあります。

私自身も普段それほど表示速度を気にしない人ですので留意したいところではあるのですが、全く何も施策を打たないと知らず知らずのうちに表示が遅くなっているということがままあります。

気づかないうちに閲覧者が減っているという事態を避けるためにも、できれば定期的に表示速度については確認しておきたいところです。

サイトの表示速度を図るツールにはいくつかあるのですが、私がよく使っているのはGoogle PageSpeed Insightsというツールを使用しています。

今回はGoogle PageSpeed Insightsの使い方について見ていきましょう。

スポンサーリンク




Google PageSpeed Insightsの使い方

使い方といっても非常にシンプルです。

PageSpeed Insightsにアクセスします。

ウェブページのURLを入力と書かれた入力欄に測定したいサイトのURLを入力し、右の分析ボタンをクリックします。

分析が終了すると、モバイル端末とPC(パソコン)端末の2つの分析結果が表示されます。

【モバイル端末の結果】

【PC(パソコン)端末の結果】

結果は100を最大値とした数値で表示され、85以上の場合は緑色、84以下65以上の場合はオレンジ色、64以下は赤色と信号の色のように分かりやすく表示されます。

当ブログの場合モバイルが【75】、パソコンが【78】と、どちらもオレンジ色ですが決して最適な表示速度とは言いがたい結果となりました(これでも高速化をいろいろ試しているのですが。。)

修正方法を確認する

結果が85よりも低い(緑色ではない)場合は、修正方法も確認してみましょう。

修正が必要な項目が3段階で表示されています。

アイコン 名前 説明
赤色の感嘆符 この問題を修正すると、ページのパフォーマンスが大幅に改善されます。
黄色の感嘆符 それほど忙しくない場合はこの問題の修正を検討してください。
緑色のチェックマーク 大きな問題は見つかりません。パフォーマンスは良好です。

それぞれの項目の修正方法を確認しましょう。

例えば、

修正が必要:
スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する

という項目を修正したい場合、表記の下の修正方法を表示をクリックします。

すると、修正方法について記載された画面が開きます。

このページには、レンダリングをブロックするスクリプト リソース が 2 個、CSS リソースが 14 個あります。これが原因で、ページのレンダリングに遅延が発生しています。

以下のリソースの読み込みが終わるまで、このページでスクロールせずに見えるコンテンツを何もレンダリングできませんでした。レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。

ここでは、CSS/Javascriptファイルの読み込みがページの表示速度に影響しており、リソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化すれば良いことがわかります。

この提案された修正方法にしたがって、修正を進めていきます。

次回は表示速度を改善させるために私が実践した方法について書いてみたいと思います。

以上、Wordpressの高速表示を目指す!Google Page Speed Insightsの使い方でした。

Wordpressの中級者以上を目指すなら

Wordpressの中級者以上を目指すのであればオンラインスクールもおすすめです。

筆者も講師(メンター)の一人ですが、オンラインスクールの一つ「Techacademy」ではWordpressをカスタマイズするために必要なカリキュラムが用意されています。

オンラインブートキャンプ WordPressコース

Wordpressにも利用されているPHPを利用してWebアプリケーションを開発してみたい方には「PHP/Laravelコース」がおすすめです。

オンラインブートキャンプ PHP/Laravelコース
スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする