Webサイトの表示速度を気にしたことはありますか？
サイトの表示速度が早ければ早いほど、Googleの検索エンジンからも高い評価を受けます。
ですが、反対に表示速度が遅いサイトは、評価はガクッと下がってしまいます。
この記事では、Webサイトの表示速度を改善する方法を厳選して4つ紹介します。
いますぐ簡単に改善できるものばかりなので、まだ実施していない人は必ずチェックしてくださいね！
サイトの表示速度が遅くなる原因
そもそもですが、サイトの表示速度が遅くなる原因は、以下の2つ。
- 画像（コンテンツ）が重い
- 余分な外部ファイルを読み込んでいる
ひとつずつ解説します。
画像（コンテンツ）が重い
サイトはテキストや画像や動画など、たくさんのコンテンツが集まって形成されています。そして、これらのコンテンツひとつひとつが、サイトの表示速度に影響しています。
そして、この中で一番表示速度に影響を与えているのが、間違いなく「画像」です。
サイト内にある、大量の画像を読み込む際に時間がかかってしまうということですね。
余分な外部ファイルを読み込んでいる
表示速度が遅くなるもう一つの原因は、余分な外部ファイルを読み込んでいる点です。
サイトを表示させる際に、画像・CSS・JavaScriptの数だけ通信を実施するので、余分な外部ファイルが大量にあると、読み込みに時間を有するため、その分表示速度が遅延します。
サイトの表示速度を改善する方法4選
では、サイトの表示速度を改善するためにはどうすればいいのか。
それは「画像サイズを圧縮」して「外部ファイルを圧縮＆削除」すれば解決ですね。
ここからは、その具体的な方法を紹介します。
下記の4つを実施すれば、表示速度を大きく改善できます。
- 画像を圧縮する
- CSS・JavaScriptを圧縮する
- 必要ないファイルを削除する
- キャッシュを有効にする
ひとつずつ、詳細に解説していきます。
画像を圧縮する
先ほども述べましたが、画像サイズの大きさはサイトの表示速度にかなり影響します。
ですので、まずは挿入する画像サイズを圧縮しましょう。
画像サイズの圧縮方法は非常に簡単で、例えば下記リンクのような「画像圧縮サイト」を利用すれば、ものの10秒で画像が圧縮できます。
サイトに挿入する前に、こちらのサイトを利用して画像を圧縮しましょう！
また、すでにサイト内に挿入してしまっている画像も、プラグインを利用すればまとめて圧縮してくれます。
気になる方は、下記の記事を参考にどうぞ！
https://works-agency.co.jp/seo/imagecompression-plugin/
CSS・JavaScriptを圧縮する
CSSやJavaScriptの容量を圧縮することでも、サイトの表示速度はかなり改善されます。
コンテンツを毎日更新していると、知らず知らずのうちに容量が増えていき、じりじりと表示速度に影響を与えていきます。
ですので、定期的にCSS・JavaScriptを圧縮しましょう。
それぞれ、下記のサイトを利用すれば簡単に圧縮できますので参考に。
CSSの圧縮⇒https://syncer.jp/css-minifier
JavaScriptの圧縮⇒https://syncer.jp/js-minifier
必要ないファイルを削除する
必要ないファイルは、問答無用で削除しましょう。
例えば、indexさせていないコンテンツ（記事）や、インポートしたものの利用していない画像ファイルなど。また、必要のない計測タグなども削除しましょう。
無駄なファイルを極限まで省くことで、サイトは最適化されていきます。
キャッシュを有効にする
キャッシュを有効にすることで、スマホ・PCともに表示速度が改善されます。
このキャッシュ機能を利用することで、サーバーでのファイル作成の工程を省いたり、ブラウザからサーバーへのデータ通信が不要になったりします。
サーバー上にある「.htaccessファイル」に、下記を記述すれば簡単にキャッシュの設定ができます。
ExpiresActive On
ExpiresByType text/css “access plus 2 weeks”
ExpiresByType text/js “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType image/jpg “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/svg+xml “access plus 1 weeks”
ExpiresByType application/pdf “access plus 1 weeks”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType application/x-font-ttf “access plus 1 weeks”
ExpiresByType application/x-font-woff “access plus 1 weeks”
ExpiresByType application/x-font-opentype “access plus 1 weeks”
ExpiresByType application/vnd.ms-fontobject “access plus 1 weeks”
「1month」や「1weeks」の数値がキャッシュの保有期間を意味していますので、ここは好みに合わせて任意で変更しても問題ありません。
表示速度はSEOにも影響する
繰り返しになりますが、Webサイトの表示速度はSEOに大きく影響します。
特に、スマホ（モバイル）の表示速度が評価に大きく影響するので、早めのうちに改善することをオススメします。
Webサイトの表示速度は、下のサービスでチェックできるので、上記4つの改善を試した後に、ぜひチェックしてみてくださいね。
https://developers.google.com/speed/pagespeed/insights/?hl=JA
まとめ
いかがでしたか。
ユーザーにとっても表示速度が遅いサイトはストレスが溜まり、早期離脱の原因にもなりますので、早めの対策が必須です。
今回ご紹介した、4つの方法を実施するだけでも、表示速度はかなり改善されること間違いありません。
ユーザビリティを高めるためにも、いますぐ改善しましょう！