おしい県でWebに携わって働く人のブログ

基本的にはIT&Web界隈に関する役に立ちそうなことをまとめていきます。

サイトの表示速度を測定して改善アドバイスしてくれるWebサービス「PageSpeed Insights」とそのChrome機能拡張を活用しよう

f:id:lord_cashew:20140719022015j:plain

光回線という環境でサイト制作や閲覧をしていると気付かないのですが、たまに外出先などでWiMAX回線とかの光よりも遅い回線でサイトを閲覧したりすると「・・・表示が遅い」ということに気付かされたりします。

というわけで、サイトの表示速度を調査したり改善したりするのに使えそうな「PageSpeed Insights」というWebサービスとChrome機能拡張を使ってみました。

 

Webサービス「PageSpeed Insights」

f:id:lord_cashew:20140719015138j:plain

PageSpeed Insights

 

とりあえずこのブログのURLを入力して「分析」ボタンをクリックしてみます。 

f:id:lord_cashew:20140719015327j:plain

パソコンで表示した場合の分析結果です。いくつか修正のアドバイスがありますが、とりあえずユーザー側として改善できそうなのは「画像を最適化する」くらいでしょうか。

f:id:lord_cashew:20140719015506j:plain

次にスマホで表示した場合の分析結果ですが、こちらは「修正が必要」が一つだけになっています。ちなみにパソコンでの改善点「画像を最適化する」はこちらでは「修正を考慮」になっています。

 

Chrome機能拡張「PageSpeed Insights」

f:id:lord_cashew:20140719015117j:plain

Chrome Web Store - PageSpeed Insights (by Google)

 

上で紹介したWebサービス「PageSpeed Insights」のGoogle Chrome機能拡張版です。インストールしたら「メニュー>ツール>デベロッパーツール」をクリックします。

f:id:lord_cashew:20140719020252j:plain

表示されたデベロッパーツールのメニューから「PageSpeed」をクリックして「分析」をクリックします。

f:id:lord_cashew:20140719020523j:plain

ページが再読み込みされて分析がスタートします。 

f:id:lord_cashew:20140719020736j:plain

分析が終了すると結果が表示されます。

f:id:lord_cashew:20140719020838j:plain

書き方は違いますが基本的にはWebサービス版での分析結果と同じです。

 

個人的な感想

サイトの表示速度改善は、サイトを見ているユーザーさんのためでもありますし、SEO的にも大事なポイントになるので、このツールを活用して定期的に改善に取り組んでいきたいと思います。

  

サイトサーチアナリティクス  アクセス解析とUXによるウェブサイトの分析・改善手法

サイトサーチアナリティクス アクセス解析とUXによるウェブサイトの分析・改善手法