Googleが2018年7月9日よりSpeed Update(スピードアップデート)を正式導入!ページスピード改善は待ったなし!

こんにちは。クリエイティブプランナーの深谷です。

今回は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/

ページスピードの改善方法

【1】リンク先ページでリダイレクトを使用しない
【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点でした。

読み込みスピードは検索結果だけでなく、
離脱率にも大きく影響があります。

シーエムエーではユーザーの利便性を高めるため、
今後もスピード改善に取り組んでまいります。