サイトの表示スピードを確認するツールPageSpeedInsights

ホームページの改善箇所は色々あります。デザインやコーディング、文章の内容やレイアウトなどなど。上げていけばきりがありません。

スマートフォンサイトが普及してから、注目されている改善箇所の中で、「表示スピードの改善」というものがあります。

以前からあまり注目されていなかったわけではありませんが、スマートフォンユーザーが増えてくるとより一層注目されるようになりました。

なぜなら、スマートフォンユーザーはせっかちだからです。

Googleが公表したレポートによると、スマートフォンユーザーはサイトの表示が3秒以上かかると53%離脱すると述べています。表示スピードが7秒以上になると直帰率はなんと113%になるそうです。

いくらホームページを作り込んでも、表示される前に離脱されては意味がありません。

サイトの表示スピードが遅くなる原因はいくつもあります。画像を詰め込み過ぎていたり、複雑なJavascriptを入れていたり、サーバーの応答が遅かったり。

今回は、運営しているホームページの表示スピードの改善箇所を確認するGoogleが提供しているツール「PageSpeed Insights 」についてご紹介いたします。

表示スピードの改善箇所が簡単にわかる「PageSpeed Insights」

PageSpeed Insights

URL:https://developers.google.com/speed/pagespeed/insights/

「PageSpeed Insights」は、確認したいサイトのURLを入れて「分析」ボタンを押すだけで、簡単に表示スピードの改善箇所を分析してくれる便利なツールです。

運営しているサイトの表示スピードが現在どれくらいか、100点満点の点数で表示されます。

60点以下が赤色で改善が必要です。80点以下は黄色で注意が必要。80点以上は緑色で基準は超えていますという表記になります。

点数の表示の下に改善箇所がいくつか出ています。これらを改善すると点数が上がります。

画像を最適化する

この項目の改善には、サイトで使用している画像の圧縮が必要です。

画像を書き出す時、高品質で書き出すと画像はきれいに表示されますが、表示スピードはかなり低下します。

書き出す際は、品質を抑えて書き出すか、既に書き出した画像を画像圧縮ツールで圧縮して下さい。

画像圧縮ツールは、下記のTinyjpgが便利です。

TinyJPG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyJPG is the best automatic WEBP, JPEG and PNG optimizer and compresses your WEBP, JPEG and PNG images by 40-60%!

圧縮を有効にする

jsやcssの転送サイズを圧縮することでネットワークで送信されるバイト数を減らすことが出来ます。

基本的には、下記のコードをトップページの.htaccessに記述すると改善されます。

#圧縮の設定

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

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

jsやcssに有効期限を設定することで、ブラウザがネットワークからではなくローカルから以前にダウンロードしたリソースを読み込むようになり表示スピードが改善されます。

基本的には、下記のコードをトップページの.htaccessに記述すると改善されます。

#ブラウザキャッシュの設定

ExpiresActive On

ExpiresByType image/gif “access plus 1 months”

ExpiresByType image/jpg “access plus 1 months”

ExpiresByType image/jpeg “access plus 1 months”

ExpiresByType image/png “access plus 1 months”

ExpiresByType text/css “access plus 10 days”

ExpiresByType application/javascript “access plus 1 weeks”

ExpiresByType application/x-javascript “access plus 10 days”

上記の3項目を改善するだけでも、点数が跳ね上がります。最優先で確認してみて下さい。

もし、表示スピードが原因でアクセス数が伸びていなければ、これらを改善するだけでアクセス数が増加する可能性があります。

スピードの改善で、サイトの品質が低下する可能性がある

表示スピードを改善すれば、離脱率も防げアクセス数の増加が見込めますが、やりすぎるとサイト自体の品質が低下する可能性があります。

例えば画像の圧縮ですが、Googleが提示している基準で圧縮すると画像はかなり劣化してしまいます。そんな画像をホームページに多用していると、ユーザーに不信感を与える可能性があります。

また、ソースコードの圧縮を勧めてきますが、これをやってしまうと更新する際にソースコードが見にくくなり、簡単な更新でも大変な作業になってしまいます。

スピードの改善は大切ですが、サイトの品質も考えながら程々に行なうようにしましょう。

表示スピードが改善されるとGoogleの評価を得られる可能性がある

今後Googleはスマートフォンを優先的に考えた検索結果を表示する方針です。

現時点では「サイトの表示スピード」は評価基準ではないとされていますが、スマートフォンが優先的になれば、評価基準に入る可能性は大いにあります。

と言ってもSEOについては答えがわからないのであまり考えすぎない方が良いです。あくまで閲覧してくれるユーザーのために改善を進めるようにしましょう。

まとめ

現在コンテンツマーケティングやコンテンツSEOが主流になっていますが、中身をいくら作り込んでも見てもらわなければ意味がありません。

そのためには表示スピードを改善して、離脱率を防ぎましょう。

ただしやり過ぎは禁物です。なにごとも程々に進めていきましょう。