PageSpeed Insights モバイル編
PageSpeed Insights を使用すると、すべての端末でウェブページの読み込み時間を短くする方法がわかります。
制作したサイトに対して実行してみました。
http://monica1818.sakura.ne.jp/
モバイルに対しての結果
速度
59/100 と表示されました。
PCでは「修正を考慮」だったものが、モバイルでは「修正が必要」になっていました。PCとモバイルでは同じ項目でも重要度の違いがあるわけです。
「修正が必要」とあった点
・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
これは画面レイアウトを変えなければいけないため、簡単には修正できません。
・ブラウザのキャッシュを活用する
CSS、JS、画像ファイルに対して、ブラウザの「キャッシュの有効期限を指定してください」ということです。
キャッシュの有効期限を指定すると、その有効期間内はネットからではなくローカルディスクから読み込むため、ネットに負荷をかけずにしかも早く表示させることができます。
しかしこれはサーバー側の設定になるので、簡単にはできない可能性があります。
「修正を考慮」とあった点
以下5点はすべて圧縮に関する内容です。サイズの大きな画像は圧縮してありましたが、1部の画像とHTML,CSS,JSファイルは圧縮をしていなかったため指摘されてしまいました。
・圧縮を有効にする
・画像を最適化する
・JavaScript を縮小する
・CSS を縮小する
・HTML を縮小する
「３個のルールに合格」
以下3点は合格したようです。
・サーバーの応答時間を短縮する
このサーバーは素早く応答しています。
・リンク先ページのリダイレクトを使用しない
このページでは、リダイレクトは使用されていません。
・表示可能コンテンツの優先順位を決定する
このページでは、スクロールせずに見えるコンテンツの優先順位は適切に決定されています。
ユーザーエクスペリエンス
100/100 と表示されました。
ユーザーエクスペリエンスはPCにはなく、モバイルだけの評価のようです。
ここで問題点が指摘されなかったことは自信になります。
・viewportの設定
ページに端末のサイズに一致する viewport が指定されており、すべての端末でページが適切にレンダリングされるよう設定されています。
・コンテンツのサイズを表示域に合わせる
ページのコンテンツは表示域に合っています。
・タップ ターゲットのサイズを適切に調整する
ページのリンク/ボタンはすべて、ユーザーがタッチスクリーンで簡単にタップするのに十分なサイズです。
・プラグインを使用しない
このページではプラグインが使用されていないようです。
・判読可能なフォント サイズの使用
ページのテキストは判読可能です。
PageSpeed Insights パソコン編
PageSpeed Insights を使用すると、すべての端末でウェブページの読み込み時間を短くする方法がわかります。
制作したサイトに対して実行してみました。
http://monica1818.sakura.ne.jp/
パソコンに対しての結果
72/100 と表示されました。
「修正が必要」とあった点
・ブラウザのキャッシュを活用する
CSS、JS、画像ファイルに対して、ブラウザの「キャッシュの有効期限を指定してください」ということです。
キャッシュの有効期限を指定すると、その有効期間内はネットからではなくローカルディスクから読み込むため、ネットに負荷をかけずにしかも早く表示させることができます。
しかしこれはサーバー側の設定になるので、簡単にはできない可能性があります。
「修正を考慮」とあった点
以下5点はすべて圧縮に関する内容です。サイズの大きな画像は圧縮してありましたが、1部の画像とHTML,CSS,JSファイルは圧縮をしていなかったため指摘されてしまいました。
・圧縮を有効にする
・画像を最適化する
・JavaScript を縮小する
・CSS を縮小する
・HTML を縮小する
・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
これは画面レイアウトを変えなければいけないため、簡単には修正できません。
「３個のルールに合格」
以下3点は合格したようです。
・サーバーの応答時間を短縮する
このサーバーは素早く応答しています。
・リンク先ページのリダイレクトを使用しない
このページでは、リダイレクトは使用されていません。
・表示可能コンテンツの優先順位を決定する
このページでは、スクロールせずに見えるコンテンツの優先順位は適切に決定されています。
作成したサイトのワード別検索順位を調べる
上位表示させたいワードを入力して掲載順位を確認しました。
検索はPCからGoogle ChromeのシークレットモードでGoogle検索を実行しました。
1ページ目に表示されることを目標にしていましたから、合格ラインはクリアしました。
シークレットモードで検索する理由
Googleの通常の検索では、パーソナライズド検索といって閲覧者の閲覧履歴から上位表示させるサイトが変わってきます。
誰が検索しても同様の検索結果とするためには、シークレットモードを使用する必要があります。ただし、シークレットモードでも検索する地域は無効にならないようです。
WebサイトがGoogleにインデックスされたかSearch Consoleで確認する
12月5日にサイトマップを送信し、2日後にはサイトがインデックスに登録されました。サイトのインデックスへの登録は1週間くらいかかると思っていましたから、ずいぶん早く登録されました。しかし、登録されたのは1ページです。実質5ページのサイトですから、ちょっと期待外れでした。
”インデックスに登録済み”が保留になっています。
サイトマップをGoogleに送信してから2日後の12月7日の状態
”インデックスに登録済み”が「1」になっていました。
このサイトのページは「トップ」、「お店紹介」、「素材へのこだわり」、「商品」、「お問い合わせ」の5ページです。その内「お問い合わせ」はインデックスにあまり意味がないので、登録されなくても仕方ないですが、他の4ページは登録して欲しいページでした。
どのページがインデックスに登録されたのか知る方法は無いと思いますが、検索結果から「トップ」か「素材へのこだわり」のどちらかだと予想できます。
XMLサイトマップの作成と登録
Google Search Console でWebサイトのドメインを登録しても、サイトの構成まで登録できません。そこでサイトの構成を ”XMLサイトマップ” として作成して、Search Consoleに登録します。
XMLサイトマップの作成は、サイトマップ・ジェネレーターを使うと便利です。
XMLサイトマップを作成する
Google Sitemap Generator を使用してXMLサイトマップを作成します。
URLにはサイトマップを作成するサイトのドメインを入力します。
サイトマップ作成後の画面です。
XMLサイトマップを登録する
Search Consoleのホームから、サイトマップを登録するWebサイトをクリックします。
「サイトマップ サイトマップがありません >>」をクリックします。
「サイトマップの追加/テスト」をクリックします。
サイトマップ・ジェネレーターで作成した ”sitemap.xml” を入力して「送信」をクリックします。
”sitemap.xml” が送信され、インデックスへの登録待ち（保留）になっています。
Google Search Console にサイトを登録する
Google Search Consoleは、Googleの検索エンジンがどのようにWebサイトを見ているのかを知ることができます。
サイトの登録は、このSearch Consoleで行います。
サイトの登録
Google Search Consoleのサイトに入り、「プロパティを追加」をクリックします。
登録したいサイトのURLを入力します。
入力したサイトの所有権の確認を求められます。
HTML確認ファイルをダウンロードします。
HTML確認ファイルをダウンロードしたら、サイトのトップにコピーします。
ブラウザでサイトのHTML確認ファイルにアクセスすると、以下のように表示されます。
最後に「確認」をクリックします。
これで登録は完了です。
widthを100％でborder、padding、marginを試す
widthを100%で使用した時に border、padding、margin を使用するとどのような表示になるのかを確認しました。
確認内容
親と子のdiv要素を作り、それぞれwidthを100%にしました。
親要素にpadding、border、marginを付けた場合の親子div要素の表示を確認します。
表示の青色は親divのborder、緑色は親divのpadding、黄色は子のdiv要素です。
１．padding、marginを付ける
HTML
<div class="box">
<div class="box1"></div>
</div>
.box {
width: 100%;
padding: 25px;
border: solid 25px #11A1A8;
background: #0C6308;
}
.box1 {
width: 100%;
height: 100px;
background: #B5BF0F;
}
親DIV
子DIV
２．上記１に box-sizing を付ける
HTML
<div class="box">
<div class="box1"></div>
</div>
.box {
width: 100%;
padding: 25px;
border: solid 25px #11A1A8;
background: #0C6308;
box-sizing: border-box; <=追加
}
.box1 {
width: 100%;
height: 100px;
background: #B5BF0F;
}
親DIV
子DIV
３．上記２に margin を付ける
HTML
<div class="box">
<div class="box1"></div>
</div>
.box {
width: 100%;
margin: 10px; <=追加
padding: 25px;
border: solid 25px #11A1A8;
background: #0C6308;
box-sizing: border-box;
}
.box1 {
width: 100%;
height: 100px;
background: #B5BF0F;
}
親DIV
子DIV
４．上記３の width の指定を変更する
HTML
<div class="box">
<div class="box1"></div>
</div>
.box {
width: calc(100% - 20px); <=100%からmarginの20pxを引く
margin: 10px;
padding: 25px;
border: solid 25px #11A1A8;
background: #0C6308;
box-sizing: border-box; <=これはborderとpaddingにしか効かない
}
.box1 {
width: 100%;
height: 100px;
background: #B5BF0F;
}
親DIV
子DIV
上記の結果は、CSSを以下のように変更しても可能です。
width: calc(100% - 120px); <=「-20」を「-120」に変更
box-sizing: border-box; <=この行を削除
