静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > Googleが2018年7月9日よりSpeed Update(スピードアップデート)を正式導入!ページスピード改善は待ったなし!

ホームページ制作 SEO対策 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%のユーザーが離脱するとのことです。

1秒 ⇒ 3秒になると・・・32%離脱率が増加する
1秒 ⇒ 5秒になると・・・90%離脱率が増加する
1秒 ⇒ 6秒になると・・・106%離脱率が増加する
1秒 ⇒ 10秒になると・・・123%離脱率が増加する

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点

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

【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点でした。

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

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

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2024/02/22「文字コード」って何?Webディレクターなら知っておきたいUnicode(ユニコード)のこと!

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top