- SEO
UX・SEOの点で重要。ページ表示速度の影響や確認・改善方法を紹介
Webサイトのページ表示速度について、考えたことはあるでしょうか。
実はページ表示速度はSEOや、サイトに訪れてくれるユーザーの体験に対して影響があるものです。
日々インターネットを利用する中で実感することがあると思いますが、年々通信速度は高速化。ユーザーにストレスを与えないよう、ページの表示速度が速いかどうかが重要視されています。
この記事では、そんなWebサイトのページ表示速度の影響・確認方法・表示速度改善の一例についてご紹介します。
目次
ページの表示速度が遅いとユーザーは離れてしまう
まずはWebサイトのページ表示速度による影響について。Googleはサイトのページ表示速度とユーザー直帰率の関係性について、ディープランニングを用いて予測したものを下記のように公表しています。
- 表示速度が1秒から3秒まで遅くなると、直帰率は32%増加する
- 表示速度が1秒から5秒まで遅くなると、直帰率は90%増加する
- 表示速度が1秒から6秒まで遅くなると、直帰率は106%増加する
- 表示速度が1秒から10秒まで遅くなると、直帰率は123%増加する
- 表示に3秒以上かかるモバイルページからは53%のユーザーが離脱している
参考：Find out how you stack up to new industry benchmarks for mobile page speed
上記について見ていくと、サイトのページ表示速度とユーザーエクスペリエンスが密接に関係しており、かつユーザーは高速なページを求めていることがわかります。
以上のことから、ユーザーエクスペリエンス向上のために、ページ表示速度の改善に取り組む価値は十分にあるととらえることができます。
【補足】
2018年7月からページの表示速度をモバイル検索のランキング要素として取り込む「スピードアップデート(Speed Update)」が導入されています。
参考：ページの読み込み速度をモバイル検索のランキング要素に使用します
内容としてはものすごく遅いとユーザーに感じさせるページのみが影響を受けるといったものです。
ただし影響を受けるページはわずかであり、関連性が高く優れたコンテンツであれば遅くても上位表示しうることから、SEOのためではなくあくまでユーザーエクスペリエンス向上のために取り組むべきです。
サイトのページ表示速度を確認できる複数のツール
では、あなたのサイトのページ表示速度はどのように調べたらよいでしょうか？
以下にサイトのページ表示速度を確認できるサービスを3点紹介します。
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=JA
コンテンツを解析して、ページの表示速度を改善する方法を提案してくれます。
PageSpeed Insightsはサイト全体ではなくページごとに解析します。
Google Analytics
https://analytics.google.com/analytics/web/provision/#/provision
あなたのサイト全体の平均読み込み時間を数字で教えてくれます。Googleアナリティクスを導入している場合は、こちらも併用しましょう。
アナリティクスにログイン後、左メニューの「行動」→「サイトの速度」から確認できます。
Test My Site
https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/
モバイルのサイト全体の平均読み込み時間を数字で教えてくれます。また、改善点をレポートで受け取ることも可能です。
あなたのサイトのページ表示速度はいかがでしたか？
表示速度の改善等のご相談はこちらから承っております。
ページ表示速度改善のための3つの方法
PageSpeed InsightsやTest My Siteでサイトを確認するとページの表示速度を改善する案を提案してくれます。
では、どのように改善すればよいでしょうか？
以下3点、PageSpeed Insightsから提案される改善案の例とそれらに対する対処法を一部ご紹介します。
- CSS・JavaScriptの最小化
- 画像の最適化
- サーバー応答時間の短縮
1.CSS・JavaScriptの最小化
ウェブサイトはHTML・CSS・JavaScript等の言語で構築されています。
通常、これらの言語は人が読みやすいように適切に改行やスペースが入れられていますが、
これらのスペースもデータ量に含まれてしまいます。
そこで、これらのスペースを除去してデータ量を削減します。これをMinify(ミニファイ)と呼びます。
Minifyを行うことによって数千数万ものコードが数行にまで圧縮されるので、容量もかなり圧縮されます。
また、使用されていない部分の記述を削除し、無駄をなくすことも大切です。
2.画像の最適化
画像には適切なファイルサイズと拡張子があります。画像のファイルサイズが大きいと表示に時間がかかってしまうので、圧縮してファイルサイズを小さくする必要があります。拡張子(後ろについている.jpgや.pngのこと)にもそれぞれ特徴があります。
以下2点、代表的な拡張子を紹介します。
2-1.JPEG(ジェイペグ) 拡張子：.jpg .jpeg
・データが軽い。
・画質が劣化する。(圧縮画像(不可逆)のため)
・背景を透過できない。
・写真や風景に適している。
2-2.PNG(ピング) 拡張子：.png
・データが他の拡張子と比べるとやや重い。
・画質が劣化しない。(圧縮画像(可逆)のため)
・背景を透過できる。
・文字を含んだ画像に適している。
風景か文字を含んだ画像か、目的に合わせた適切な拡張子を選択することで容量を削減することができます。
またそれ以外のテクニックとして、単純な図形は画像ではなくSVG画像やCSSを使用することでさらに容量を削減できるでしょう。
3.サーバー応答時間の短縮
使用するサーバーのスペック・OSのバージョン・PHPのバージョン等が影響します。
応答時間を短縮しユーザーエクスペリエンスを向上させるため、ドコドアではハイスペックなサーバーを標準でご利用いただけるようにしています。
Webサイトの制作・リニューアルはドコドアにお任せください！
今回はサイトのページ表示速度の影響・確認方法・表示速度改善の一例についてご紹介しました。
ページの表示速度を改善し、ユーザーに快適な経験を提供しましょう！
ドコドアはWebサイトの新規制作はもちろん、既存サイトのリニューアルも承っております。
お悩みがある方はぜひお気軽にお問い合わせください！
▼その他の記事はこちらから▼
