読者です 読者をやめる 読者になる 読者になる

PageSpeed Insights モバイル編

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個のルールに合格」

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

 

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

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

 

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

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

 

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

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

 

ユーザーエクスペリエンス

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

 

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

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

 

・viewportの設定

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

 

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

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

 

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

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

 

プラグインを使用しない

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

 

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

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