SEOコンサルタント募集中

ウェブサイトスピードテスト「PageSpeed Insights」の詳細と解説

ウェブサイトスピードテスト

Googleが考えるユーザー体験(ユーザーエクスペリエンス、UX)は、もちろんSEO対策にも読み込みスピードは影響があります。そのユーザー体験の中には、サイトの”表示速度”というSEO対策上、困難な対策が待ち受けています。

【目次】
PageSpeed Insightsとは
→PageSpeed Insightsは何点を目指すべき?
→評価は3段階の項目となる
PageSpeed Insightsの改善提案内容一覧
1.圧縮を有効にする
2.ブラウザのキャッシュを活用する
→.htaccessを設定する方法が一般的?
3.画像を最適化する
→適切な画像ファイルとは
→PNG形式の画像を圧縮するツール
→WordPressプラグインを利用して改善する
4.HTML/CSS/JavaScriptを縮小する
→CSS/JavaScriptを簡単最適化する
5.リンク先ページのリダイレクトを使用しない
6.スクロールせずに見えるコンテンツのレタリングをブロックしているJavaScript/CSSを排除する
→WordPressプラグインを利用して改善する
7.サーバーの応答時間を短縮する

当ページでは、Googleが提供している「PageSpeed Insights」の解説を行ったページです。時間があれば、1つ1つ対処法をブログで更新できればと思っています。それでは始めていきます。

SPONSORED LINK

PageSpeed Insightsとは

PageSpeed Insights

Googleが考えるウェブサイトのパフォーマンスを改善するための無料ツールになります。あらゆる端末でウェブページの読み込み時間を短縮することを目的としているツールです。(公式:PageSpeed Insights

 

PageSpeed Insightsは何点を目指すべき?

Googleを分析したよ

PageSpeed Insightsを行うとモバイル、PCともに点数が出てきます。もちろん100点を取ることができれば一番良いのでしょうが、100点を取ることは容易ではありません。そのため、モバイル、PCともに80点~85点を取れるように改善を行ってみましょう

上記はGoogle(日本)の検索トップ画面ですが、モバイルが59点、パソコンが97点という結果が出ました。点数を高くすることが容易ではないことを理解できたと思います。

 

評価は3段階の項目となる

修正が必要

PageSpeed Insightsが分析で下す評価は以下の3段階となっています。

評価 内容
修正が必要 修正したほうが良い点
修正を考慮 出来れば修正したほうが良い点
合格 問題がない項目

 

修正が必要」と出た部分から改善することができれば、大きくパフォーマンスを改善することができますので、まずは「修正が必要」から手を付けていけばベストといえます。それでは改善内容について確認していきます。

 

PageSpeed Insightsの改善提案内容一覧

提案内容
1.圧縮を有効にする
2.ブラウザのキャッシュを活用する
3.画像を最適化する
4.HTML/CSS/JavaScriptを縮小する
5.リンク先ページのリダイレクトを使用しない
6.スクロールせずに見えるコンテンツのレタリングをブロックしているJavaScript/CSSを排除する
(表示可能コンテンツの優先順位を決定する)
7.サーバーの応答時間を短縮する

 

PageSpeed Insightsテストを行い、改善を注意される項目は上記の8つになります。8個の項目がGoogleの考えるウェブページの構造になっていれば、合格をもらうことができます。

ひとつ、ひとつ詳しく説明していきます。また、当サイトでご紹介している改善点は一般的な改善点となりますので、バックアップなどをしっかりと取得した上でご本人の責任で取り組んでみてください

 

1.圧縮を有効にする

「圧縮を有効にする」というものは「送信する画像ファイルの圧縮を行ってください」という意味になります。サーバーの設定で利用することが可能な「HTTP圧縮」という機能利用を促す注意です。

こちらはサーバーの設定によるものなので、利用しているサーバーに設定が可能かどうか確認することが必要になります。

Google社が提供している「mod_pagespeed」の設定を行って改善することもあります。以下のサイトも分かりやすく記載していますので、確認してみてください。

 

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

こちらは、「ブラウザにキャッシュさせるように設定を行ってください」という意味になります。

サーバー設定で画像やCSSなどのコンテンツを一時ファイルに保存(キャッシュ)する期間を明示します。明示することで一時保存されているファイルはサーバーから直接取得する必要がなくなりますので、結果ウェブページを早くすることが可能になります。

 

.htaccessを設定する方法が一般的?

.htaccessファイルを設置し、コードを記載することが一般的になっていますが、.htaccessに記載しない方が良いという方もいるので、こちらは検証が必要です。

以下の外部サイトが分かりやすかったので、リンクしておきます。

 

3.画像を最適化する

画像のファイルが大きければ大きいほど、データ転送にも時間がかかるため、ページの読み込み時間を遅くする原因にもなっています。そのため、画像の使い方を最適することを促してくれます。以下のようなことができないかをまず考えてみてください。

  • 画像の大きさ(ピクセルサイズ)を可能な限り小さくする
  • 画像余白部分に切り取れる部分がないか確認する
  • 適切な画像ファイルを選択する

上記のような方法が一般的に最適化できる方法になります。少し行い方を確認してみましょう。

 

適切な画像ファイルとは

こちらで伝える適切な画像ファイルは以下の通りになります。

  • PNG形式の画像ファイル
  • GIF形式の画像ファイル
  • JPEG形式の画像ファイル

ウェブサイトに適している画像ファイルは上記の3つになり、それ以外の画像ファイルは使わない方が良いでしょう。また、以下のように基本的には使い分けするのが一般的です。

ファイル形式 使い分け
PNG ロゴやバナーなど
GIF アイコンやアニメーションなど
JPEG ページで利用する写真など

 

必ずしも上記のように使い分ける必要はありませんが、あくまでも一般的だということです。画像加工ソフトを保持している方は必ずデータサイズの適正化を行ってから、ウェブサイトに利用しすれば、画像ファイルの圧縮化が期待できます。

 

PNG形式の画像を圧縮するツール

Shrink PNG files

「TinyPNG」https://tinypng.com/

PNG形式の画像をアップロードするだけで、適正に縮小してくれます。設定しているウェブページ内のPNG画像を最適化するだけでも点数は上がってきますので、利用してみましょう。

またJPEGの圧縮ツールに関しては「COMPERSS JPEG」を私は利用していますが、複数ありますので、チェックしてみてください。

 

WordPressプラグインを利用して改善する

  • EWWW Image Optimizer:記事などを投稿するためにメディアにアップロード済みの画像ファイルを圧縮させるプラグインです。簡単な設定が必要になりますので、インストール後検索してみてください。
  • WP Smush.it:特定のGIFをPNGに変換したりJPEGの画像圧縮を最適化してくれるプラグインです。

上記2つの公式プラグインで画像を最適化することが可能なので、ご自身の判断で利用してみてください。

 

4.HTML/CSS/JavaScriptを縮小する

PageSpeed Insightsのテストでは「HTMLを縮小する」「CSSを縮小する」「JavaScriptを縮小する」などの個別に修正点が出てきます。これは「各ファイル動作に影響をしない部分を削除することでサイズが縮小することができます」という意味になります。主に以下のようなことを行います。

  • コメントやインデントの削除
  • 空行の削除
  • 変数名などの削除

上記のようなことが該当します。

 

CSS/JavaScriptを簡単最適化する

最適化された画像、JavaScript、CSS リソースをダウンロード

PageSpeed Insightsでは、ページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードすることができる機能が存在します。ZIPファイル形式で紹介されていますので、是非簡単に取り組んでみてください。

こちらが、費用もかけずにかつ、ミスなく簡単に取り組むことができる縮小化ではないでしょうか。

 

5.リンク先ページのリダイレクトを使用しない

こちらは、あまり出現する方も少ない改善点ですが、サイトの増設や移転などを繰り返した場合に、2重でリダイレクトを行った場合に表示されることがあります。つまり、無意味なリダイレクトを行っているリンクに対して表示されます。

こちらは、リダイレクト処理を行っているのを適正にすればよいだけなので、改善方法としては簡単です。すぐに改善しておきましょう。

 

6.スクロールせずに見えるコンテンツのレタリングをブロックしているJavaScript/CSSを排除する

レタリングをブロックしているJavaScript/CSSを排除する

PageSpeed Insightsでの読み込み時間は以下のように把握されます。

  • ページ全体の表示完了時間
  • スクロール不要で見える範囲の表示完了時間

このスクロール不要で見える範囲の表示時間を短縮したらどうだろうかという提案になります。こちらでは以下の提案がGoogleからされています。

  • レアリングをブロックするCSSの排除
  • レンダリングをブロックする JavaScript を除去
  • CSS 配信を最適化

上記のような改善項目がなされますが、技術的な難しさがあるとともに、サイトのメンテナンスも工数がかかってしまう傾向がありますので、修正に取り組むかどうかはウェブサイトの運用面から考えていきましょう。

基本的にCSSとJavaScriptをインライン化すること、 JavaScriptファイルを非同期化することが一般的な対処方法になります。

 

WordPressプラグインを利用して改善する

Asynchronous Javascript:こちらのプラグインはjavascriptを非同期で読み込むプラグインとなり、レタリングをブロックしているjavascriptを排除してくれる機能を持っています。プラグインを有効化することのみで利用することができます。

 

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

PageSpeed Insightsで求められる応答時間は200ミリ秒(0.2秒)以下になります。

応答時間とは、アクセスに対してサーバーがHTMLファイル等を返すまでの時間のことになります。この部分の改善は一長一短にはいかないため、応答時間を遅くしている原因を確認しながら切り分けて問題に対処する必要があります。

Googleが推奨している方法は以下の通りです。参考にしてみてください。

  • 既存のパフォーマンスやデータを収集して調査します。データがない場合は、自動的なウェブ アプリケーション監視ソリューション使用したり(ほとんどのプラットフォームでホストされたオープンソース版が提供されています)、カスタムな計測プログラムを追加したりします。
  •  パフォーマンス上の最大のボトルネックを特定して修正します。一般的なウェブ フレームワークやコンテンツ管理プラットフォームを使用している場合は、パフォーマンス最適化のベスト プラクティスに関するドキュメントを確認してください。
  • 今後のパフォーマンスの問題に備えて、監視と警戒を続けます。

上記の内容は「サーバーの応答時間を改善する」に記載されています。

 

まとめ

今回はまずPageSpeed Insightsを理解するための掲載を行い、改善方法はあまり記載していません。少しずつ自社サイトで試しながら改善方法を今後掲載できればと思っております。また、WordPressプラグインによる改善プラグインを掲載していますが、プラグインを複数利用することでバグも起きやすくなりますし、メンテナンスも厳密に考えれば大変となってきます。あくまで参考程度にとどめておいてください。

最後まで、ありがとうございました。

Edit

[Google Ads and peko]

この記事を書いた人

辻 昌彦

辻 昌彦
当サイトにお越しいただいてありがとうございます。株式会社peko(ペコ)の代表をしております。 趣味にならないように・・・企業や個人の方になるべく役に立つようなSEOの記事、Webマーケティング関連の記事を配信していきますので、よろしくお願いします。

コメント

メールアドレスは非公開情報です。必須項目: *

*