「PageSpeed Insights」を使ってサイトの読み込みスピードを測ってみた！

Googleはいろんなサービスを提供していますが、Google Developersが提供している「PageSpeed Insights」をご存知ですか？
こちらは運営しているホームページやブログのURLを入力るだけで、サイトの読み込みスペードを計測し、そして改善点を教えてくれるサービスです。

PageSpeed Insights

使い方はとっても簡単で「PageSpeed Insights」にあるフォーム（赤枠で囲っている箇所）に運営されているサイトのURLを入力して「分析」ボタンを押すだけです。

パソコンサイトが65点で、スマートフォンサイトが59点。
ん～。可もなく不可もなく、なんともコメントのしづらい結果となりました^^;

診断結果は大きく以下のように分かれています。

「修正が必要」な点は以下のとおりでした。

このページには、レンダリングをブロックするスクリプトリソースが 2 個、CSS リソースが 5 個あります。これが原因で、ページのレンダリングに遅延が発生しています。

外部から読み込んでいる「JavaScript」や「CSS」があることで読み込みスピードに時間がかかっているということ。
使用しているスクリプトの内容が小さければ直接HTMLに記述することで少しは改善できそうです。

JavaScript コードを縮小すると、データサイズを大きく削減でき、ダウンロード、解析、実行の速度を向上させることができます。

指摘のコードを見る限り「はてなブログ」ではさわれない部分が多かったので対応は難しそうです。

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカルディスクから以前にダウンロードしたリソースを読み込むようになります。

こちらの解決策はサーバに「.htaccess」を設置してブラウザキャッシュを設定することにより解決できるようですが、はてなブログの場合は、はてなのサーバでブログを管理しているので対応は出来ないですね。WordPressなど自分のサーバでブログを運営している方なら対応可能です。

僕が調べた限り、以下のツールを使用しなければ改善が見られました。

楽天アフィリエイトが提供している広告ユニットで、このウィジェットを削除すると4%スピードがアップしました。

はてなが提供しているコミュニケーションツールでこちらを非表示にすると1%スピードがアップしました。

はてなブログの公式テーマと人気テーマでそれぞれ計測してみました。
テーマによって使っているスクリプトやCSSも違うので、読み込みスピードにも変化があると思い計測してみました！
計測したのは公式テーマ1位の「Epic」と人気順1位の「Blank」です。

どちらも記事0の状態でテーマだけを変更した状態です。

気になる結果は！！

ドンッ！

皆さん、好きなテーマを選んで下さい^^;

診断結果はサイトによって異なりますがサイトの表示速度は見てもらうために非常に重要な要素です。
特にスマートフォンでは、4Gとなって改善されたと言ってもまだまだ十分なスピードとは言えないと思います。
一度皆さんのサイトを「PageSpeed Insights」を使って分析してみてください！

ちなみに85点以上がパフォーマンスの高いサイトだそうです^^;

僕も頑張って改善していこうと思います。