ホーム > 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 としては、モバイル端末でこのような操作が必要になるページについては、モバイル フレンドリーと見なすことができない場合もあります。




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