PageSpeed Insights　モバイル編

PageSpeed Insights を使用すると、すべての端末でウェブページの読み込み時間を短くする方法がわかります。

制作したサイトに対して実行してみました。

59/100　と表示されました。

PCでは「修正を考慮」だったものが、モバイルでは「修正が必要」になっていました。PCとモバイルでは同じ項目でも重要度の違いがあるわけです。

「修正が必要」とあった点

・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

これは画面レイアウトを変えなければいけないため、簡単には修正できません。

・ブラウザのキャッシュを活用する

CSS、JS、画像ファイルに対して、ブラウザの「キャッシュの有効期限を指定してください」ということです。

キャッシュの有効期限を指定すると、その有効期間内はネットからではなくローカルディスクから読み込むため、ネットに負荷をかけずにしかも早く表示させることができます。

しかしこれはサーバー側の設定になるので、簡単にはできない可能性があります。

「修正を考慮」とあった点

以下5点はすべて圧縮に関する内容です。サイズの大きな画像は圧縮してありましたが、1部の画像とHTML,CSS,JSファイルは圧縮をしていなかったため指摘されてしまいました。

・圧縮を有効にする

・画像を最適化する

・JavaScript を縮小する

・CSS を縮小する

・HTML を縮小する

「３個のルールに合格」

以下3点は合格したようです。

・サーバーの応答時間を短縮する

　このサーバーは素早く応答しています。

・リンク先ページのリダイレクトを使用しない

　このページでは、リダイレクトは使用されていません。

・表示可能コンテンツの優先順位を決定する

　このページでは、スクロールせずに見えるコンテンツの優先順位は適切に決定されています。

100/100　と表示されました。

ユーザーエクスペリエンスはPCにはなく、モバイルだけの評価のようです。

ここで問題点が指摘されなかったことは自信になります。

・viewportの設定

　ページに端末のサイズに一致する viewport が指定されており、すべての端末でページが適切にレンダリングされるよう設定されています。

・コンテンツのサイズを表示域に合わせる

　ページのコンテンツは表示域に合っています。

・タップターゲットのサイズを適切に調整する

　ページのリンク/ボタンはすべて、ユーザーがタッチスクリーンで簡単にタップするのに十分なサイズです。

・プラグインを使用しない

　このページではプラグインが使用されていないようです。

・判読可能なフォントサイズの使用

　ページのテキストは判読可能です。