【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測

今回は、スマートフォンに特化した、サイトの表示速度チェックツールをご紹介します。

最近では競合もサイト持っていないということが少ないので、あまりにもページ表示速度が遅すぎると、ユーザーが離脱して他のサイトに行ってしまうことが考えられます。早速、チェックをしてみましょう。

どこで発見？使用方法は？

先日、web担当者forumのブログ
「御社のスマホサイト、遅いから19%離脱してるよ」グーグルのわかりやすい測定サービス登場
http://web-tan.forum.impressrd.jp/e/2017/07/04/26217
でみたのですが、このツールです。

https://testmysite.withgoogle.com/intl/ja-jp

ちょっと『pagespeed insight』ぽく、使用方法も簡単。測定したいサイトのurlを入れるだけ。これで、よくあるスマートフォン回線とおなじスピードを再現して（analiticsにも携帯アクセスということで記録されるようです）、チェックしてくれます。

管理人もスマートフォンサイトの速度をチェックしてみます。

管理人のもってるオーディオや曲アレンジのサイトで試してみました。スマホ専用に作ったものでなく、pcにも対応できるレスポンシブタイプなので、やや苦戦するかなと思いましたが、そこそこ良好のようです。pagespeed insightでは９６点出た画像を、twitterに上げています。

上記のweb担当forumブログでは、『30秒超えるとエラー（実際の離脱はもっと早い）』などツッコミどころがある点が述べられていますので、数字が緑になるよう（だいたい５秒以内くらい）を目安とするとよいでしょう。

サイト表示速度アップポイント１：画像圧縮して小さいサイズに

pagespeed insightなどでもよく出てくる、表示速度高速化ポイント。jpg画像を圧縮して、（見た目は同じでも）サイズを小さくします。いろいろな画像編集ソフトでできるテクニックです。例えば500KBのpng画像を、80～90KBのjpgにした場合は、体感的にもかなり速くなります。
ただし、圧縮しすぎると画質がザラザラしてくるので、トップやランディングなどはサイズ小さく、メインのコンテンツが画像やイラストになる場合は、多少重くても解像度が高くてきれいなものを、というように使い分けます。

（すべてgoogleの言うとおりならok、ということはありません。彼らはクリエイティブコンテンツを作っていませんし、検索ユーザーのデータ無くして単独でその質を判断することもできないからです。）

サイト表示速度アップポイント２：JavaScript/CSSを圧縮する

http://refresh-sf.com

オンラインJavaScript/CSS/HTML圧縮サービスというのを使ってみました。ウィンドウJavaScript/CSSを入れてボタンを押すと圧縮してくれます。
さらに、gzip（JavaScriptなどを圧縮したファイル）も出せるスグレモノ。gzipファイルを出したときは、htaccessファイルを書き換えて（他にも方法あります）、この形式でも読み込んでスクリプト実行できるようにします。

今回計測したサイトでは、主にこのようなテクを使用しました。

以前出ていた『pagespeed insight』との違いは？

pagespeed insightでも似たようなチェックができます（pc/sp表示速度と、読み込み改善ポイント通知）。しかしこちらは、『具体的な秒数や、競合同ジャンルのサイトと比べてどうか？』みたいなポイントも。

改善ポイントはだいたい画像やスクリプト/CSS、キャッシュであることが多いので、これらの点を意識して、『離脱が1日５人減るを積み重ねたら、１ヶ月でどのくらい売り上げ/メインで見せたいページへ誘導が増えるか』みたいなのを狙っていきましょう！