サイトの表示速度には気をつけるべき?その理由と改善方法とは
Webサイトがなかなか表示されなくてイライラ、という経験をしたことがある人は多いのではないでしょうか。サイト作成の際には、デザインや使いやすさ、その内容などに目がいきがちですが、サイトの表示速度も忘れてはいけないポイントです。今回は、サイトの表示速度の重要性と、その改善方法についてご紹介します。
なぜサイトの表示速度が重視されるのか
サイトの表示速度が大切な理由は、表示速度が遅いとお問い合わせや商品購入のチャンスを失う可能性があるからです。というのも、表示速度の遅いサイトはユーザーの直帰率が高いというデータが存在します。直帰率というのは、サイトにアクセスしたものの、最初のページだけを見てサイトを離脱した人の割合のことです。
2018年のGoogleの調査によると、表示速度が1秒から3秒になると直帰率が32%、1秒から5秒になると90%、1秒から6秒に落ちた場合は106%も直帰率が上昇してしまいます。実際、ご飯屋さんを検索したときに、検索画面の一番上のサイトを選択したものの、なかなかサイトが表示されないので検索画面に戻って別のサイトに移ったことがある、という人は多いのではないでしょうか。
またGoogleは、ページの表示速度はWebサイトの評価基準の1つであると公表しています。どんなに有益なWebサイトだったとしても、表示速度の遅さで検索順位が下がり、競合のサイトに負けてしまう可能性があるのです。より多くの人にサイトに訪問してもらうためにも、サイトの表示速度は非常に重要です。
自社サイトの表示速度をチェックしよう
サイトの表示速度を改善する前に、まずは自身のサイトの表示速度を確認してみましょう。ここでは、サイトの表示速度を確認できるツールを3つご紹介します。
PageSpeedInsights
これは、Googleが提供しているページパフォーマンスを測定するツールです。サイトのURLを入力するだけで、モバイル版とPC版両方の表示速度を100点満点で表示してくれます。0~49点だと赤色(遅い)、50~89点だと黄色(平均)、90~100点だと緑(速い)で表示されます。90点以上は表示速度が早いと評価されるので、90点以上を目指すとよいでしょう。また、PageSpeedInsightsの分析結果には「改善できる項目」というものがあります。なにから改善すればよいのか分からない場合は、こちらを参考にしてみるとよいでしょう。
GoogleAnalytics
GoogleAnalyticsでは、「行動」タブの「サイトの速度」というメニューからサイト内の平均読み込み時間と、ページ別の読み込み時間を確認できます。ページごとの読み込み時間は、サイト内平均と比べて遅い場合は赤色、速い場合は緑色で表示されます。
Chromeのデベロッパーツール
これは、Windowsならctrl+shift+I、Macならcommand+option+iのショートカットキーで起動できます。サイトの表示速度は、画面上の「Network」タブから確認できます。確認する前に、左上のリロードボタンをクリックしてキャッシュを削除しておきましょう。その後ページを再読み込みさせると、画面下部の「Finish」の欄にページが表示されるまでにかかった時間が表示されます。
サイトの表示をスムーズにする方法
では上記の測定結果などから、表示速度が遅いと分かった場合どうすればよいのでしょうか。ここでは、表示速度の改善に有効な方法をいくつかご紹介します。
サーバーのスペックを確認する
サーバーにかかる負荷が重すぎると、表示速度が遅くなることがあります。サーバーのスペックを改善したり、共用サーバーを利用しているなら専用サーバーを利用したり、サーバーの台数を増やしたりすることで改善される可能性があります。
画像ファイルの圧縮
画像ファイルが大きすぎると、表示速度が遅くなります。「AdobePhotoshop」「OptiPNG」「JPEGOptimizer」などといった画像最適化ツールを使い、ファイルの容量を抑えることで表示速度が改善できます。画像ファイルを最適なフォーマット(GIF、JPG、PNG)で保存することや、画像のリサイズも効果的です。
また、画像は読み込みに時間がかかるため、すべて読み込もうとするとどうしても表示速度は遅くなってしまいます。これは、ワードプレスで「Autoptimize」というプラグインをインストールし、画像を後から読み込むように設定することで解決できます。
リソースの圧縮
リソースとは「HTML、CSS、JavaScript」などを指します。こういったコードに含まれる必要のない改行やコメントアウトなどを削除することでファイルが軽くなり、サイトの表示速度の改善が期待できます。サイトすべてを手作業で修正するのは時間も手間もかかるので、「html-minifier」「csso」「cssnano」などの自動圧縮ツールを活用するとよいでしょう。
今回は、サイトの表示速度が重要な理由や、表示速度の改善方法についてご紹介しました。サイトの表示速度が遅いと、検索順位やアクセス数が下がってしまう可能性があります。まずは今回ご紹介したツールを活用して表示速度を測定し、改善が必要と分かった場合は、着手しやすいところから対策をしてみてはいかがでしょうか。