晴れ時々晴天なり

韓国ドラマやアニメの事が中心の雑記ブログです。

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

スポンサーリンク

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

PageSpeed Insights

PageSpeed Insights

PageSpeed Insights

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

自分のブログの読み込みスピードを分析してみる

パソコンサイト:読み込みスピード測定結果

パソコンサイト結果

スマートフォンサイト:読み込みスピード測定結果

スマートフォンサイト結果

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

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

  • 修正が必要:改善するべき。
  • 修正を考慮:改善することで読み込みスピードの向上が期待できる。
  • ○個のルールに合格:最適化されている。

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

  1. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  2. JavaScript を縮小する
  3. ブラウザのキャッシュを活用する

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

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

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

JavaScript を縮小する

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

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

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

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

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

改善例

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

  • 楽天ウィジェット

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

  • はてなスター

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

番外編

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

はてなブログの人気テーマ

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

気になる結果は!!



ドンッ!

分析結果

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

まとめ

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

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

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

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/