HOMEモバイルSEO > PageSpeed Insights(ページスピードインサイト)とは~使い方と点数改善方法教えます

PageSpeed Insights(ページスピードインサイト)とは~使い方と点数改善方法教えます

2016/11/01モバイルSEO[最終更新日]:2017/04/20
このエントリーをはてなブックマークに追加

PageSpeed Insights(ページスピードインサイト)を活用し、点数を確認しながら、ページスピード(表示速度)を改善することが大切です。

今回は、PageSpeed Insights(ページスピードインサイト)とは、PageSpeed Insightsの使い方、PageSpeed Insightsの点数改善方法中心に解説したいと思います。

PageSpeed Insights(ページスピードインサイト)とは~使い方と点数改善方法教えます

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR

PageSpeed Insights(ページスピードインサイト)とは

PageSpeed Insights(ページスピードインサイト)とは、Webページの表示速度を計測するGoogle公式提供の無料SEOツールです。

PageSpeed Insights(ページスピードインサイト)は、「Googleスピードチェック」「サイトスピードインサイト」「Google速度テスト」「Googleスピードインサイト」「Googleスピードテスト」などとも言われてます。

PageSpeed Insightsの使い方

PageSpeed Insightsでページ表示速度を確認するには、以下のような使い方があります。

PageSpeed Insightsのサイトにアクセス後、「ウェブページのURLを入力」し、「分析」ボタンをクリックします。

PageSpeed Insightsの使い方 イメージ①

②モバイルの点数が表示され「速度」「ユーザーエクスペリエンス」それぞれ確認できます。
表示された「修正が必要」「修正を考慮」「合格項目」に沿って対策を検討しましょう。

PageSpeed Insightsの使い方 イメージ②

③パソコンタブに切り替えると、パソコンの点数が表示され「提案の概要」が確認できます。
表示された「修正が必要」「修正を考慮」「合格項目」に沿って対策を検討しましょう。

PageSpeed Insightsの使い方 イメージ③

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PageSpeed Insightsで100点に向けた点数改善方法

PageSpeed Insightsで100点に向けて点数改善するには、「モバイル」「パソコン」それぞれ以下のような方法があります。

モバイル「速度」、パソコン「提案の概要」の点数改善方法
モバイル「ユーザー エクスペリエンス」の点数改善方法

モバイル「速度」、パソコン「提案の概要」の点数改善方法

・ブラウザのキャッシュを活用する
サーバーでブラウザのキャッシュを有効にし、静的なリソースのキャッシュの有効期間は1週間以上、広告やウィジェットなどのサードパーティリソースの場合は、キャッシュの有効期間を1日以上にする
※参考:ブラウザのキャッシュを活用する | PageSpeed Insights | Google Developers

・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
スクロールせずに見える範囲の表示に必要なJavaScriptはインライン化し、ページに機能を追加するのに必要なJavaScriptは、スクロールせずに見える範囲のコンテンツが配信されるまで遅延させる。また、この方法で読み込み時間を改善するためには、CSS の配信を最適化する必要あり。
※参考:レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google Developers

・圧縮を有効にする
ウェブサーバーで圧縮を有効にし、一般的なウェブサーバーで圧縮を有効にするには、「Apache: mod_deflate を使用する」「Nginx: HttpGzipModule を使用する」「IIS: HTTP 圧縮を設定する」の方法があります。
※参考:圧縮を有効にする | PageSpeed Insights | Google Developers

・画像を最適化する
すべての画像に対して基本的な最適化(不要なスペースの削除、色深度の最小許容レベルへの低減、画像のコメントの削除、適切なフォーマットでの画像の保存)と高度な最適化(JPEG や PNG ファイルの高度な(ロスレス)圧縮)の両方を行う。
※参考:画像を最適化する | PageSpeed Insights | Google Developers

・CSS、HTML、JavaScriptを縮小する
余分なスペース、改行、インデントなどの不要なバイトを取り除き、HTML、CSS、JavaScript を圧縮する。
HTMLの圧縮は「PageSpeed Insights の Chrome 拡張機能」、CSSの圧縮は「YUI Compressor と cssmin.js 」、JavaScriptの圧縮は「Closure Compiler、JSMin、YUI Compressor 」が使用可能です。
※参考:リソース(HTML、CSS、JavaScript)を圧縮する | PageSpeed Insights | Google Developers

・サーバーの応答時間を短縮する
速度の遅いアプリケーション ロジック、遅いデータベース クエリ、遅いルーティング、フレームワーク、ライブラリ、リソースによる CPU の消費、メモリ不足など改善し、サーバーの応答時間は 200 ミリ秒以下に減らす必要がある。
※参考:サーバーの応答時間を改善する | PageSpeed Insights | Google Developers

・リンク先ページのリダイレクトを使用しない
Googleの推奨事項に従ってレスポンシブなウェブデザインを使用する
※参考:リンク先ページでリダイレクトを使用しない | PageSpeed Insights | Google Developers

・表示可能コンテンツの優先順位を決定する
ページのスクロールせずに見える範囲のコンテンツの表示に必要なデータ(HTML マークアップ、画像、CSS、JavaScript)のサイズを制限する
※参考:スクロールせずに見える範囲のコンテンツのサイズを削減する | PageSpeed Insights | Google Developers

モバイル「ユーザー エクスペリエンス」の点数改善方法

・モバイルフレンドリーテストに合格する
ユーザーエクスペリエンスの基本項目中心に対応し、モバイルフレンドリーテストに合格(スマホ対応)することが重要。 ※参考:モバイルフレンドリー対応

・判読可能なフォントサイズの使用
さまざまな端末でフォントが期待どおりに拡大縮小されるようにビューポートを設定後、CSSで基準フォントサイズの16pxを指定し、必要に応じてサイズを調整する。 ※参考:読みやすいフォント サイズを使用する | PageSpeed Insights | Google Developers

・viewport の設定
ドキュメントの先頭に width=device-width、initial-scale=1 を指定したメタビューポートを含め、携帯端末に適切に表示されるよう最適化する
※参考:ビューポートを設定する | PageSpeed Insights | Google Developers

<meta name=viewport content=”width=device-width, initial-scale=1″>

・コンテンツのサイズを表示域に合わせる
さまざまな端末でページが正しく表示されるようにビューポートを設定し、ページコンテンツの表示を特定のビューポートの幅に依存しないようにする
※参考:コンテンツのサイズをビューポートに合わせる | PageSpeed Insights | Google Developers

・タップターゲットのサイズを適切に調整する
サイト上で最も重要なタップターゲット(ユーザーが最も頻繁に使用するもの)は押しやすいように十分大きくし、高さと幅を 48 CSS ピクセル以上にする(ビューポートを正しく設定済みと仮定した場合)。
※参考:タップターゲットのサイズを適切に調整する| PageSpeed Insights | Google Developers

・プラグインを使用しない
プラグインを使わず、ウェブプラットフォームの機能を使用し、リッチコンテンツをすべての端末からアクセス可能にする
※参考:プラグインを使用しない | PageSpeed Insights | Google Developers

上記のような項目を改善し、モバイル「速度」、パソコン「提案の概要」、モバイル「ユーザー エクスペリエンス」の点数を上げながら、PageSpeed Insightsで100点を目指しましょう。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PageSpeed InsightsのGoogle Chrome拡張機能(アドオン)の使い方

PageSpeed InsightsのGoogle Chrome拡張機能(アドオン)として、PageSpeed Insights (with PNaCl)の使い方は以下のようになります。
PageSpeed Insights (by Google)は廃止されたようです。

①Google Chromeのブラウザで、PageSpeed Insights (with PNaCl)のプラグインの画面にアクセスし、「CHROMEに追加」をクリックします。

PageSpeed InsightsのGoogle Chrome拡張機能(アドオン)の使い方 イメージ①

②「拡張機能を追加」をクリックし、追加されたことが確認できます。

PageSpeed InsightsのGoogle Chrome拡張機能(アドオン)の使い方 イメージ②

③Google Chromeのブラウザ右上の「Google Chromeの設定」>「その他のツール」>「デベロッパーツール」をクリックします。

PageSpeed InsightsのGoogle Chrome拡張機能(アドオン)の使い方 イメージ③

④新たに追加された「PageSpeed」をクリックし、「ANALYZE」もしくは「START ANALYZING」をクリックします。

PageSpeed InsightsのGoogle Chrome拡張機能(アドオン)の使い方 イメージ④

⑤「採点結果」と「採点項目の詳細」が確認できます。
丸の色(赤:修正必要⇒黄色:修正考慮⇒緑:修正余地あり)で、採点項目の重要度を確認し対策を検討しましょう。

PageSpeed InsightsのGoogle Chrome拡張機能(アドオン)の使い方 イメージ⑤

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PageSpeed Insightsとモバイルフレンドリーテストについて

PageSpeed Insights(ページスピードインサイト)とモバイルフレンドリーテストは、Google提供のモバイルフレンドリーに必要な公式ツールです。

PageSpeed Insights(ページスピードインサイト)は、Webページの表示速度を計測するツールです。
モバイルフレンドリーテストは、Webサイトがモバイル用に最適化され、しっかり表示されてるかチェックできるツールです。

モバイルフレンドリーテストに合格するために、表示速度は関係ありません。
しかし、表示速度を上げることがGoogleで推奨され、そのために、PageSpeed Insights(ページスピードインサイト)で良い点数をとることが大切となります。

モバイルフレンドリーとPageSpeed Insights(ページスピードインサイト)」を合わせて参考いただくことで、より理解が深まると思います。

PageSpeed InsightsとSEOの関係

PageSpeed Insightsで良い点数をとり、Webページの表示速度を上げることで、SEO効果による検索上位化が期待できます。

※参考:サイト(ページ)の表示速度と検索順位

サイト(ページ)の表示速度は、2012年Googleアルゴリズムに導入され、すでに検索順位決定要因の1つとなってるためです。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PageSpeed InsightsとAPIについて

PageSpeed Insightsは専用のAPIが用意され、Google API ConsoleにGoogleアカウントでログイン後、ライブラリから検索し、「PageSpeed Insights API」を確認することができます。

「PageSpeed Insights API」を使用するには、API キーが必要となります。

PageSpeed Insightsの終了について

PageSpeed Insightsは終了していません。
2015年8月3日にPageSpeed Insightsと名称が似たサービスであるGoogleのWebサイト高速化サービス 「PageSpeed Service」 の方が、サービスの終了を発表したとのことです。
参考:GoogleのWebサイト高速化サービス「PageSpeed Service」が8月3日で終了するらしい | WWW WATCH

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PageSpeed Insightsの日本語対応サイトについて

PageSpeed Insightsは、当初、モバイルとデスクトップそれぞれでの診断が可能になった後リニューアルされ、日本語版がなくなり英語版だけになってしまった。
※参考:グーグル製の高速化支援ツールがリニューアル

しかし、その後再び日本語版が利用できるようになり、現在のPageSpeed Insightsに至った経緯があります。

PageSpeed InsightsとBasic認証

Google Chrome拡張機能(アドオン)であるPageSpeed Insights (with PNaCl)を入れることで、Basic認証をかけて開発している途中のサイトでもPageSpeed Insightsのページ表示速度解析ができるようです。
※参考:ページ読み込み速度を改善!「PageSpeed Insights」 | Oh! WebLoGのページ下部で紹介されてます。

まとめ

PageSpeed Insightsを活用し、サイト(ページ)表示速度を確認・改善しましょう。

アクセスしやすくし、ユーザービリティ・クローラビリティを高めながら、SEO対策で順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。
follow us in feedly