こんにちは、孔雀です。
普段自分のブログの表示速度は気にならないんですが、他人のブログの表示速度は気になりますよね。
表示速度が遅いブログに対して「早く開け～～」という感じになってしまいます。
私はなかなか開かないブログをそのまま閉じてしまうことが何回かあります。
よく考えたら、これってもしかしてせっかく訪問してくれた人を別のブログに流してしまっているのかもしれません。
目次
PageSpeed Insightsとは？
PageSpeed Insightsとは、ブログやサイトを開いた時のページ速度の問題をあぶり出し、その改善策を提示してくれるという、とてもありがたいツールです。
このツールはGoogleさんが無料で提供してくれています。Googleさんが提供してくれるツールなら安心して使えますよね。
私の説明では、事足りない部分が多々あると思いますので、公式サイトの説明ページ部分を引用します。
Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します。
URL を 2 回（モバイル ユーザー エージェントと PC ユーザー エージェントで 1 回ずつ）取得します。
PageSpeed のスコアの範囲は 0～100 ポイントです。スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します。
なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります。
PageSpeed Insights では、次の項目について、ページのパフォーマンスをどの程度改善できるか測定します。
・スクロールせずに見える範囲のコンテンツの読み込み時間: ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間。
・ページ全体の読み込み時間: ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間。
ただし、ネットワーク接続のパフォーマンスは大きく変動するため、PageSpeed Insights では、ページのパフォーマンスのうちネットワークに依存しない部分
（サーバー設定、ページの HTML 構成、画像やJavaScript、CSS などの外部リソースの使用方法）のみを考慮します。
提案された解決策を実装すれば、ページの相対的なパフォーマンスは改善されるはずです。ただし、それでも、ページの絶対的なパフォーマンスはユーザーのネットワーク接続に左右されます。
携帯端末とデスクトップ端末、2つの表示速度を測定して改善策を提示してくれるあたりが、さすがGoogleさんが提供してくれてるだけあります。
そして、その改善策も各々のネット回線の良し悪しに影響されない部分での表示速度改善ということです。
PageSpeed Insightsを使って表示速度のチェック
さっそく、当ブログの表示速度の分析をさいてもらいましょう。
結果は、モバイルが54点、パソコンが62点。こんなん出ました～
修正してみよう
仮に修正箇所がわかったとしても、実際にどこをどう修正していいのかわからないくらい難しい内容です。
何もわからない素人が下手に手を加えてブログが表示されなくなるのも困るので、確実に出来そうなものからやっていき、記事としてまとまったものから順次アップしていきます。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
PageSpeed Insightsの「「スクロールせずに見えるコンテンツのレンダリングを～」を修正する方法
圧縮を有効にする
PageSpeed Insightsの「圧縮を有効にする」を修正する方法
サーバーの応答時間を短縮する
PageSpeed Insightsの「サーバーの応答時間を短縮する」を修正する方法
ブラウザのキャッシュを活用する
PageSpeed Insightsの「ブラウザのキャッシュを活用する」を修正する方法
画像を最適化する
PageSpeed Insightsの「画像を最適化する」を修正する方法
JavaScript を縮小する
作業完了次第でUP
CSS を縮小する
作業完了次第でUP
まとめ
さっそく修正に取り掛かろうとしましたが、ズブの素人である私にはチンプンカンプンで実行に移せませんでした。サーセン。
ということで、これをやろうとしたら、かなりの時間を要すると思われますので、残りの修正作業についての報告はまた後日ということで。
修正後のスコア
4/6のPC作業時間は9時間35分
