検索エンジンで気になった情報をクリックしたとき、Webサイトがなかなか表示されず、あきらめて他のサイトを見ることはありませんか？Googleの調査でも、ページの表示に3秒以上かかると53％のユーザーが離脱してしまうことがわかっており、ページの表示速度は、Googleがサイトを評価する指標の一つにもなっています。ここではサイトの表示速度にお悩みの方に表示速度の改善方法をご紹介します。
「表示速度を改善して、ユーザーの直帰率を下げたい」「コンバージョン率を上げたい」など、サイトの課題をどのように解決したらいいかお悩みではありませんか？PAGE Deliveryでは経験豊富なSEOのプロが課題の分析を行い、具体的な解決策をご提案します！
目次
サイトの表示速度って重要なの？
スマートフォンの普及によりインターネットサービスが日常どんな時も気軽に利用できるようになりましたが、必要な時に情報が手に入らないとそれに代わる情報がすぐに探せてしまう状況でもあります。Webサイトで商品やサービスを販売している場合サイトの表示速度が遅く、ユーザーの離脱率が高くなってしまうと売り上げにも影響をあたえかねません。
実際、大手通販サイトのAmazonが計測したデータでは、サイトが0.1秒遅くなると売り上げが1％減少するという結果が出ています。これはサイトの表示速度が1秒早くなると売り上げが10％向上する可能性があるともいえます。
またgoogleでは2010年の4月よりWebページの表示速度を検索順位を決めるアルゴリズムに組み込んだことを発表しており、表示速度を改善することはSEOにも影響すると考えられます。このことからも、サイトのランキングにあまり変化が見られない場合は、表示速度を最適化することで検索順位を上げることもできると考えられます。
このことからもわかるように表示速度は、顧客満足度を高めて売り上げを向上させるためにも、SEO施策としても重要な要素の1つになっています。
表示速度を確かめる方法
実際に自分の運営するサイトや制作したサイトがどれくらいの表示速度か気になる方も多いのではないでしょうか。ページ表示速度の計測には、Googleが開発した「PageSpeed Insights」や「Test my site」、「Googleアナリティクス」などが無料で利用できるので便利です。それぞれのツールの特徴を簡単にご紹介します。
Google PageSpeed Insights
「Google Page Speed Insights」は、Googleが提供している無料の表示速度調査ツールです。サイトにアクセスするとトップページにドメインの入力欄がありますので、そこに調べたいページのURLを入力してください。分析結果では、以下の４つの項目に対して指標が0～100のスコアで表示されます。改善できる項目に関して診断結果が詳細にわかるので、改善策を立てるのに役立ちます。
- パフォーマンス
コンテンツの読み込みの速さやレンダリングの速さ、Webページを操作した時の反応の速さなどをを監査します。 - ユーザー補助
コンテンツにアクセスしてサイトを効果的に操作できるかを監査します。 - おすすめの方法
httpsで配信されていないかや古い技術が使われていないかを監査します。 - SEO
検索エンジンが理解するのに必要な設定ができているかどうかを監査します。
Test My Site
「Test My Site」では、モバイルページの表示速度を無料で計測することができます。トップページにドメインの入力欄がありますので、そこに調べたいページのURLを入力してください。しばらくするとテストの結果が表示され、4Gでの表示速度と評価がわかります。
Googleアナリティクス
Googleアナリティクスでは、サイトに関するさまざまなデータが見れますが、その中でもサイトの表示速度を調べるには「行動」「サイト コンテンツ」「サイトの速度」「概要」の順にページを開き、「概要」の中の「ページ速度」を選択してください。
画面右下にボーダーの図で表示速度が掲載されています。ボーダーの図は2色に分かれていて、緑色で表示されていれば平均より早く、赤で表示されていれば平均より遅いことになります。
Webページが読み込まれる仕組み
検索結果の中から見たいページを選んだり、URL入力欄に直接サイトのURLを入力してからサイトが表示されるまでは、次のような流れになります。
1. 指定したURLに含まれるドメインからDNSサーバーにIPアドレスを問い合わせる
2. DNSサーバーからIPアドレスが送信される
3. 取得したIPアドレスをもとにWebサーバーにアクセスしてページのデータを要求
4. Webサーバーから読み込みに必要なコンテンツがブラウザに送られ、Webページが表示される
Webサーバーからは、必要なコンテンツとして最初にHTMLを受け取りますが、その後HTMLが参照しているCSSやJavaScript、画像、動画などが追加で取得することになるので、その処理をする段階でサイトの読み込む速度が遅くなります。
サイトが遅くなる原因
サイトの読み込みが遅くなる原因としてよくあげられるのが次の内容です。
● ファイルサイズの大きい画像を使っている
● ホスティング（サーバー）に問題が起きている
● テーマや、それ以外のどの大きなファイルも表示速度を低下させる可能性がある
● プラグイン、アプリ、ウィジェットなどのスクリプトの読み込み
● Webページが表示されるまでにリダイレクトなどの工程をはさんでいる
● HTMLファイルがサイズの大きな他のファイル（CSS、JavaScriptなど）を参照している
● 効果判別用のタグを多用している
表示速度の改善方法
ご紹介したサイトが遅くなる原因は、改善に時間がかかるものもありますが、すぐに実践できる改善方法としては、次の3点があります。
画像を最適化する
ファイルサイズの大きい画像を使っている場合は、最適な画像サイズにリサイズすることで無駄なデータを削減できます。また、可逆圧縮（ロスレス圧縮）を行うことで画質を保ったままデータ量を減らすことも可能です。レスポンシブサイトの場合、PCの画像をスマホでも読み込む設定にしていると表示速度が低下する可能性があるので、スマホにあったサイズの画像を作成し、PCの画像と使い分けることで改善できます。
CSS、JavaScript、htmlを縮小する
htmlやCSS、JavaScript内の余分なスペースや改行、インデントは、1つ1つは容量は小さいですが、積み重なると容量が重くなってサイトを遅くする可能性があります。不要な記述はできるだけ削除してファイルサイズを軽量化しましょう。CSSやJavaScriptのファイルが複数ある場合は一つにまとめることでHTTPリクエストの回数を減らすことができるので、より高速化することができます。
ブラウザキャッシュを設定する
キャッシュとは、アクセスしたWebページのデータをデバイスに一時的に保存したものを指します。次に同じページにアクセスした時は、サーバーにIPアドレスを問い合わせることなくキャッシュデータを参照するので、1回目より早く表示できるのです。
ブラウザにキャッシュを保存させるには、Webサイトの.htaccessファイルにブラウザキャッシュの有効期限を設定する必要があります。.htaccessファイルに以下の記述を追加してください。追加する際に、すでに記述してある他の部分を消してしまうと最悪の場合サイト全体が表示されなくなる可能性もあるので、追記の作業には細心の注意を払いましょう。
ExpiresByType text/css “access plus 1 weeks”
ExpiresByType image/gif “access plus 1 months”
ExpiresByType image/jpeg “access plus 1 months”
ExpiresByType image/png “access plus 1 months”
ExpiresByType application/x-javascript “access plus 1 months”
まとめ
ここでは、よくあるページ表示速度が遅くなる原因やその改善方法をご紹介しました。初めに疑うのはよくあるケースからでもいいのですが、原因は複数あって1種類の方法ではすぐに改善されないこともあります。その場合は、冒頭でご紹介したWebページが読み込まれる仕組みに沿って考えられる原因を洗い出すことをおすすめします。1つ1つ改善策を試してページ表示速度の計測ツールで確認することで原因が特定されていくでしょう。ご紹介した表示速度の改善方法がお役に立てば幸いです。
