「サイトの表示を早くしたい」
「アクセス数が上がらない」
このようなことで悩んでいませんか？
本記事では、サイトの表示スピードを高速化してアクセス数アップ・直帰率を改善する方法を解説します。
この記事を書いている僕は、Webエンジニア歴5年目、数々のサイトの表示スピード対策をしてきたので、記事の信頼性にもつながると思います。
サイトの表示スピードを確認
まずは現在の表示スピードを確認しておきましょう。
Google PageSpeed Insights で自分のサイトURLを入力してみましょう。
どうでしたか？
80点未満なら改善の必要がありそうです。
表示スピードが1秒遅れるとPVがおよそ10%低下する
ちなみに、表示スピードが1秒遅れるごとに、PVがおよそ10%低下することが分かっています。自分が思っている以上にユーザーの反応はシビアですね。
表示スピードがいかに重要か分かると思います。
表示スピードの改善策
ここからが具体的な解決策です。
リソースの削減
HTML内で読み込んでいるCSSやJSの数を減らしてリソースの削減をしてみましょう。
サイトが表示される時、ブラウザからサーバーにHTTPリクエストが送られます。
HTML内にCSSやJSの読み込みがある場合は、その分サーバーとの通信回数が増えるのでページの表示が遅くなってしまいます。
そのため、出来るだけ読み込むファイルを少なくし、リクエストを減らすことで表示スピード改善につながる可能性があります。
画像の軽量化
画像のファイルサイズを軽量化してみましょう。
画像の他に動画を使っているサイトでは、動画のファイルサイズも見直してみると良いかもしれません。
タスクランナーや、npm scriptsが使える環境では、画像の圧縮モジュールを追加するか、圧縮率を変えてみるのがオススメです。
また、そのような環境がなくても以下のサイトで画像の圧縮をすることができます。
CSSスプライト
サイト内に小さいアイコンが多くある場合、一つ一つのアイコンを個別に読み込むのではなく、複数のアイコンを一枚の画像にまとめる手法です。
この場合、アイコンをimgタグで読み込むのではなく、CSSの背景として読み込み、表示するアイコンに応じてその画像のどのアイコンを表示するかをCSSで指定することになります。
これも前述したリソースの削減と同じ理由で、画像の数だけリクエスト数が増えるためです。
CSSの記述に階層構造を持たせない
CSSの記述で要素を指定する時に、階層構造を持たせると、その要素を探すのに時間がかかり表示スピードに影響します。
悪い例
<ul class="list">
<li>テキスト</li>
</ul>
<style>
.list li{
list-style:disc;
}
</style>
良い例
<ul>
<li class="list-line">テキスト</li>
</ul>
<style>
.list-line{
list-style:disc;
}
</style>
CDNを使う
CDNは、CSSやJSを外部のサーバーから読み込む方法です。
ファイルの読み込みを外部のサーバーに任せると、その分サーバーにかかる負荷が軽減するので、表示スピードの改善に良い影響を与えます。
懸念点として、外部のサーバーで何らかの障害が発生した場合、ファイルを読み込むことはできないので、コンテンツの正しい表示ができなくなることがあります。
HTML・CSS・JSを軽量化
HTML・CSS・JS、これらのファイルサイズ自体を小さくする方法です。
タスクランナーやnpm scriptsが使える環境では、Sass等を使ってコンパイルすると良いです。
また、そういった環境がなくても、preprosを使うと、お手軽にコンパイルを実行してくれるのでオススメです。
それでも改善できない場合
ここまで紹介した方法でサイトの表示スピードが改善できない場合、原因は他にあると考えた方が良いでしょう。
ここまでの方法で改善できない場合は、その原因のほとんどはサーバーにあります。
サーバーのスペックが低すぎたり、アクセス数に対して適切でないと表示スピードが遅くなります
サーバーのスペックを見直してみましょう。
