ホーム > SEO > Search Console > モバイル > PageSpeed Insights 使い方
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

PageSpeed Insights 使い方


PageSpeed Insights 使い方



ウェブサイトのモバイル フレンドリー 度について、下枠左側の 「 モバイル フレンドリー テスト 」 にて、URLを指定して、ページ毎に確認することができます

検出された問題の詳細については、同様に、下枠右側の 「 PageSpeed Insights 」 で確認します


モバイル フレンドリー 度確認 検出された問題の詳細確認
モバイル フレンドリー テスト PageSpeed Insights



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




「 PageSpeed Insights 」

「 モバイル フレンドリー テスト 」 で検出された問題の詳細を確認したいページURLを入力して、「分析」をクリックします
当サイト トップページの「 PageSpeed Insights 」「モバイル」 カテゴリの結果です 「 モバイル フレンドリー テスト 」 で検出された、「テキストが小さすぎて読めません」、「リンク同士が近すぎます」エラーについて、それぞれ、下記指摘が出ています




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


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


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

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

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


「ユーザー エクスペリエンス」は、「68 / 100」、「速度」は、「86 / 100」 となっています
当サイト トップページの「 PageSpeed Insights 」「パソコン」 カテゴリの結果です 「 モバイル フレンドリー テスト 」 で検出された、「テキストが小さすぎて読めません」、「リンク同士が近すぎます」エラーについて、該当の指摘は無く、パソコン表示では問題のないことが分かります




当サイト トップページの「 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 」「モバイル」 カテゴリの結果です
改善後、当サイト トップページの「 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"> 」 としている為、「モバイル」 カテゴリの結果で、画面がはみ出してしまい、下記指摘が出てしまいます 「修正が必要」項目で、「コンテンツのサイズを表示域に合わせる」




ページ幅を 「 <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 」 より





Google Search Console Google AdSense 等 Googleで使用、表示される日時について


Google Search Console Google AdSense 等 Googleで使用、表示される日時は、Google アメリカ本社のある「アメリカ合衆国 カリフォルニア州 マウンテンビューアンフィシアターパークウェイ1600番」の時間である「ロサンゼルス時間」(タイムゾーンの名称 「アメリカ合衆国 太平洋時間」)になっています
日本との時差は、「-16」で、日本の方が、16時間進んでいます (日本で日付が変わっても、現地で日付が変わるのは 16 時間後です)

日本時間に置き換えたい時は、Google Search Console で表示される日時に、16 時間足すことにより求められます
例えば、、Google Search Consoleでの表示時間、「2014.4.27 0:00」 は、日本時間、「2014.4.27 16:00」のことになります

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > SEO > Search Console > モバイル > PageSpeed Insights 使い方
   

© 2014 abhp.net All Rights Reserved.

関連情報サイト


はじめる - ウェブマスター向けモバイルガイド

コンテンツ一覧

ページTOP
ページTOP
ページTOP
ページTOP