こんにちは。クリエイティブプランナーの深谷です。
今回はGoogleが正式導入したSpeed Update(スピードアップデート)について、改善方法やスピードチェックツールをご紹介いたします。
スピードアップデートとは?
スピードアップデートとは、ページの読み込み速度がモバイル検索のランキング要因として利用されることです。
2018年1月に事前アナウンスされ、2018年7月9日より正式導入の発表がありました。
Google ウェブマスター向け公式ブログ
https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html?
ページスピードを速くすれば上位表示されるものではなく、
極端に遅いページのみ検索結果に影響があるとのことです。
ページスピードと離脱率の関係
米Googleが公式ブログで発表した、ページスピードと離脱率について、
3秒以上かかると53%のユーザーが離脱するとのことです。
Think With Google
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
スピードチェックツールについて
スピードチェックツールについて、Googleが無料で提供してる「PageSpeed Insights」があります。
PageSpeed Insights
URLを入力するだけでサイトのページスピードを0~100点で採点し、改善内容を的確におしえてくれます。
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
- 「Good」80点以上
- 「Medium」60点~79点
- 「Low」0点~59点
ページスピードの改善方法
【2】圧縮を有効にする
【3】サーバーの応答時間を改善する
【4】ブラウザのキャッシュを活用する
【5】画像を最適化する
【6】CSS の配信を最適化する
【7】スクロールせずに見える範囲のコンテンツのサイズを削減する
【8】レンダリングを妨げる JavaScript を削除する
圧縮を有効にする
.htaccessに以下のような記述を加えることで設定できます。
<IfModule mod_deflate.c> SetOutputFilter DEFLATE SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/js AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-woff AddOutputFilterByType DEFLATE application/x-font-opentype </IfModule>
ブラウザのキャッシュを活用する
.htaccessに以下のような記述を加えることで設定できます。
<ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 7 days" ExpiresByType text/css "access plus 7 days" ExpiresByType text/js "access plus 7 days" ExpiresByType text/javascript "access plus 7 days" ExpiresByType image/png "access plus 7 days" ExpiresByType image/jpg "access plus 7 days" ExpiresByType image/jpeg "access plus 7 days" ExpiresByType image/gif "access plus 7 days" ExpiresByType image/x-icon "access plus 7 days" ExpiresByType application/javascript "access plus 7 days" ExpiresByType application/x-javascript "access plus 7 days" ExpiresByType application/x-font-ttf "access plus 7 days" ExpiresByType application/x-font-woff "access plus 7 days" </ifModule>
まとめ
今回Googleのサイトを計測した結果、モバイル・パソコンとも「Good」100点でした。
読み込みスピードは検索結果だけでなく、
離脱率にも大きく影響があります。
シーエムエーではユーザーの利便性を高めるため、
今後もスピード改善に取り組んでまいります。