サイトの表示速度が遅い原因と対策について紹介します

サイトの表示速度が遅くイライラした経験は誰もがありますが、自社のウェブサイトの表示速度が遅いことについては、見て見ぬふりの状態だとしたら、あまりいい状態だとはいえません。

ウェブサイトの表示が理由をWi-Fiの接続状況のせいにしていないでしょうか。ウェブサイトの表示速度が遅い理由についてはそれだけではありません。

ウェブサイトの表示速度が遅い理由１：画像の最適化ができていない

ウェブサイトの表示が遅い理由の一つに『画像の最適化がされていない』という問題があります。

画像の最適化が行われていないサイトは、必要以上に画像の容量が大きくなってしまい、データの読み込みに時間がかかります。

ですので、ウェブサイトの表示に時間がかかると感じる場合は、ウェブサイトに埋め込まれている画像のサイズを確認してみて下さい。

画像の最適化ツールはOptimizillaがおすすめ

ウェブサイトに埋め込む画像の最適化ツールは元の画像と同じ拡張子で画像を最適化したい場合は、オンラインイメージ最適化ツール(Optimizilla)が使いやすいのでオススメです。

使用方法はシンプルです。

最適化したいファイルを参照するかドラックアンドドロップするだけで、処理が終わったらダウンロードします。

次世代フォーマットWebpに変換する

WebPとは、Googleが2010年に開発した静止画像フォーマットです。

画像の劣化を抑えて圧縮しているので、効率よく画像を軽量化できるのが特徴です。

WebPの圧縮方法は、JPEGと同じく圧縮率が高い「非可逆圧縮」にも対応しています。

GoogleはWebPのファイルサイズについて、同等の画質のPNG画像と比較して26％、JPEG画像では25～34％小さくできると発表しています。

ブラウザについても懸念されていたSafariが14以降で対応するようになりました。

ウェブサイトの表示速度が遅い理由２：サーバが最適化されていない

ウェブサイトの表示速度を改善したい場合に利用しているサーバを見直すことで大幅に改善されるケースがあります。

サーバの見直しといっても原因と施策は様々です。その原因によって取るべき対策も異なりますので、切り分けて考えてみましょう。

サーバとトラフィックで原因をさらに分類する

サーバ周りが原因でウェブサイトの表示速度が遅い場合は、大きく二つに分類します。

一つ目は、サーバの処理の速度の問題。二つ目は、サーバとブラウザとの通信速度の問題です。

サーバのスペックを上げる

ウェブサイトの表示速度が遅いのは、そもそもサーバの処理能力の問題だと考えるパターンです。これは実にシンプルな解決策です。サーバの処理速度を上げることで、問題の解決につながります。

現在のサーバの負担が大きく、それに伴って処理速度が遅くなっているとすれば、サーバのスペックを向上させることで、速く、大量のレスポンスを返すことができるようになります。

例えば、AWS(AmazonWebServices)やGCP(GoogleCloudPlatform)などのクラウドサービスであれば、サーバのスペックを上げることも簡単です。状況に応じて、柔軟にプラン変更をすることが可能です。

サーバの台数を増やす

ウェブサイトの表示速度が遅いときに行う処理として、サーバの台数を増やすことも考える必要があります。

サーバの台数を増やす場合は、一つ一つの処理に対する能力というよりも、大量のユーザーからの同時アクセスにより処理をさばききれない場合に用いる手法です。

これを負荷分散といいますが、複数のサーバを並列的にならべて大量のアクセスを上手に振り分けます。この手法を用いることで、無制限にサーバを用意することができる反面、設計・開発の面で複雑になってきます。

この手法に関しても、ELB(AmazonElasticLoadBalancing)を用いることでスケーラブルな設計が実現可能です。

キャッシュの有効活用

ウェブサイトの中でもそこまでリアルタイム性を求めないものなどについては、キャッシュの活用によって読み込み処理を減らすこｔにより、サイトの表示速度を大幅に減らすことが可能です。

ほかにも、データベースの読み込みについては、サーバ処理では、特に負荷が大きい作業になります。

サーバサイドでのキャッシュには次のような方法があります。

1. データベースを読み込んで動的に作ったHTMLをキャッシュする
2. Apache、Nginxといったソフトウェアにキャッシュさせる
3. インメモリデータベース（Redis、Memcache）を使う
4. CDNを活用する

この中でも特に一般的なのが、CDNの活用です。

CDN(Contents Delivery Network)とは、世界中に構築されたコンテンツ配信ネットワークを利用することで、世界中のエッジサーバにキャッシュを配置することが可能です。

CDNでは、AWSのCloudFrontがそれに該当し、多くのサービスで利用されています。

例えば、日本のユーザーであれば、日本のエッジサーバにキャッシュがあれば、それを取得することができ、実際に日本国内にあるウェブサーバが処理を行なうよりも高速化できます。

ウェブサイトの表示速度が遅い理由３：CSS、JavaScriptの最適化ができていない

多くのウェブサイトでは、サイトを見栄えよく表示させるために、CSSやJavaScript、画像やWebフォントなどのファイルを読み込んで処理をしています。

これらは全て、外部ファイルになりますが、そのファイルを最適化させることで、トラフィックの容量や回数を減らすことができます。

具体的に、これらの外部ファイルの最適化には、Webpackと呼ばれるモジュールハンドラーを使用します。Webpackを活用することでリクエスト回数を減らせるため、通信回数を減らすことができサーバの負担が少なくなります。

CSS、画像といったJavascript以外の外部ファイルも1つのJavascriptファイルの中にバンドルして組み込むこともできます。

Webpack通信の効率化の点でもとても有用なツールになりますので、ぜひ参考にしてみて下さい。

なお、Webpack（モジュールバンドラー）の詳細については、ここでは割愛して別の機会にまとめたいと思います。

ウェブサイトの表示速度を改善することはSEOの観点からも重要です

ウェブサイトの表示速度を各デバイスごとにチェックすることができます。

Googleが無償で提供しているPageSpeed Insightsでは、ウェブサイトのURLを入力するだけでパフォーマンスを把握することができます。

これにより改善点を見つけ出して、ウェブサイトの改善につなげます。

Webサイトの表示速度は、よりよいユーザー体験を実現するために非常に重要な要素です。

SEOの観点から見ても、ページの表示速度については検索エンジンのページ評価基準の一つになりますので、サイトのオーナーには、ぜひ気に留めていただきたい点になります。

PageSpeed Insights以外にも、Googleが無償で提供しているSEOツールはあります。これらのツールを上手に活用して、ウェブサイトの分析と改善をしてみることをお勧めします。