PageSpeed Insights　使い方　-　Google Search Console の使い方　-　SEO対策

「 PageSpeed Insights 」

「モバイルフレンドリーテスト」で検出された問題の詳細を確認したいページURLを入力して、「分析」をクリックします

当サイトトップページの「 PageSpeed Insights 」「モバイル」カテゴリの結果です

この例では、ページ幅を、「<table border="0" width="900">」に設定、
ルートディレクトリ「 .htaccess 」ファイルで「圧縮」 ※ を、
ページHTMLファイル <head> 部の <meta> タグで「ビューポート」 ※ を設定してあります

「モバイルフレンドリーテスト」で検出された、「テキストが小さすぎて読めません」、「リンク同士が近すぎます」エラーについて、それぞれ、下記指摘が出ています

「修正が必要」項目で、「判読可能なフォントサイズの使用」

「修正を考慮」項目で、「タップターゲットのサイズを適切に調整する」

「ユーザーエクスペリエンス」は、「68 / 100」、「速度」は、「86 / 100」となっています

当サイトトップページの「 PageSpeed Insights 」「パソコン」カテゴリの結果です

「モバイルフレンドリーテスト」で検出された、「テキストが小さすぎて読めません」、「リンク同士が近すぎます」エラーについて、該当の指摘は無く、パソコン表示では問題のないことが分かります

「提案の概要」は、「87 / 100」となっています

※．「 .htaccess 」「圧縮」設定

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|pdf)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

# htmlやcssなどは圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

ExpiresActive On
ExpiresByType text/html "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/pdf "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/rss+xml "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

※．<meta> タグ「ビューポート」設定　（現状）

<meta name="viewport" content="width=device-width, initial-scale=0.54">

「レスポンシブウェブデザイン - ウェブマスター向けモバイルガイド」※では、「ページがすべてのデバイスに対応していることをブラウザに知らせるには、ドキュメントのヘッダーに次のメタタグを追加」するよう推奨されています

※．<meta> タグ「ビューポート」設定　（レスポンシブウェブデザイン - ウェブマスター向けモバイルガイド推奨）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

当ページは、ページ幅を「width="900"」にしていた為、「initial-scale=1.0」とすると、モバイル表示の際、ページが完全に画面からはみ出してしまいます

ページ幅を狭めることで、「initial-scale」を「initial-scale=1.0」に近付け、「モバイルフレンドリーテスト」での「テキストが小さすぎて読めません」、「リンク同士が近すぎます」エラーを消すよう試みてみます

「initial-scale=0.54」

まず、「initial-scale=1.0」を現状の「initial-scale=0.54」からいくつに引き上げれば、「テキストが小さすぎて読めません」エラーが消えるかを確認する為、値を少しづつ大きくしていくと、「initial-scale=0.54」で、「テキストが小さすぎて読めません」エラーは出なくなりました

「width="680"」

次に、「initial-scale=0.54」でページがモバイル画面からはみ出さないようページ幅を狭めていくと、「width="680"」でモバイル画面に納まりました

「 PageSpeed Insights 」　結果

ページ<head>部に、<meta name="viewport" content="width=device-width, initial-scale=0.54">を記述し、ページ幅を、<table width="680">とすることで、「モバイルフレンドリーテスト」では、「モバイルフレンドリー」判定になりました

その際の、「 PageSpeed Insights 」結果です

改善後、当サイトトップページの「 PageSpeed Insights 」「モバイル」カテゴリの結果です

改善後、当サイトトップページの「 PageSpeed Insights 」「パソコン」カテゴリの結果です

※、ページ幅を「<table border="0" width="900">」のまま、ビューポート設定値を Google 推奨の「 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 」に変更してみた際の表示画面です

ページ幅を「 <table border="0" width="900"> 」としている為、「モバイル」カテゴリの結果で、画面がはみ出してしまい、下記指摘が出てしまいます

「修正が必要」項目で、「コンテンツのサイズを表示域に合わせる」

やはり、ページの造りを「レスポンシブウェブデザイン」に変更しないと、「 <meta name="viewport" content=
"width=device-width, initial-scale=1.0"> 」は無理の様です

「パソコン」カテゴリの結果では、特に変化はありません

※．「モバイル設定を選択する - ウェブマスター向けモバイルガイド」画面で、「01 レスポンシブウェブデザイン」をクリックすると、下記、「レスポンシブウェブデザイン - ウェブマスター向けモバイルガイド」画面が表示されます

「モバイル設定を選択する - ウェブマスター向けモバイルガイド」画面で、「01 レスポンシブウェブデザイン」をクリックすると、この「レスポンシブウェブデザイン - ウェブマスター向けモバイルガイド」画面が表示されます

ページがすべてのデバイスに対応していることをブラウザに知らせるには、ドキュメントのヘッダーに次のメタタグを追加します

<meta name="viewport" content=
"width=device-width, initial-scale=1.0">

meta viewport タグは、ページのサイズや縮尺を、デバイスの幅に合わせてどう調整すべきかをブラウザに伝えるために使用します。meta viewport 要素を指定しない場合は、モバイルブラウザのデフォルトであるパソコン画面の幅（デバイスによって異なりますが通常はおよそ 980 ピクセル）でページがレンダリングされます。その後モバイルブラウザが、フォントを大きくして画面に合う縮尺に変える、コンテンツの一部のみが画面に収まるように表示する、といった調整を試みます。

このような調整によって、フォントサイズの統一感が失われたり、コンテンツを操作するためにダブルタップやピンチで拡大する必要が生じたりすることもあります。Google としては、モバイル端末でこのような操作が必要になるページについては、モバイルフレンドリーと見なすことができない場合もあります。

PageSpeed Insights について｜ PageSpeed Insights ｜ Google Developers

Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します
URL を 2 回（モバイルユーザーエージェントと PC ユーザーエージェントで 1 回ずつ）取得します

PageSpeed のスコアの範囲は 0～100 ポイントです
スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します
なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります

PageSpeed Insights では、次の項目について、ページのパフォーマンスをどの程度改善できるか測定します

スクロールせずに見える範囲のコンテンツの読み込み時間: ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間
ページ全体の読み込み時間: ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間
ただし、ネットワーク接続のパフォーマンスは大きく変動するため、PageSpeed Insights では、ページのパフォーマンスのうちネットワークに依存しない部分（サーバー設定、ページの HTML 構成、画像やJavaScript、CSS などの外部リソースの使用方法）のみを考慮します
提案された解決策を実装すれば、ページの相対的なパフォーマンスは改善されるはずです
ただし、それでも、ページの絶対的なパフォーマンスはユーザーのネットワーク接続に左右されます

各提案には、重要性を表す優先度インジケータが表示されます

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

PageSpeed Insights の最近の更新では、モバイルのパフォーマンス向上に力を入れています
詳細については、PageSpeed Insights のモバイル分析についての記事や、Google I/O 2013 で行われた素早いモバイルウェブサイトに関するプレゼンテーションをご覧ください
PageSpeed Insights で実行された分析の詳細なリストもご覧いただけます

フィードバックのお願い
Google では PageSpeed Insights に関する皆様からのフィードバックをお待ちしています
テストツールや推奨されたベストプラクティスについてご意見やご提案がある場合は、ディスカッショングループ（page-speed-discuss）に投稿してください

お問い合わせ
PageSpeed Insights についてご質問がある場合は、よくある質問をご覧いただくか、ディスカッショングループにメッセージを投稿してください

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

最終更新日: 4月 11, 2014

「 PageSpeed Insights について | PageSpeed Insights | Google Developers 」より

PageSpeed Insights　使い方