2016年3月24日

ウェブサイトがなかなか表示されず、イライラした経験はないでしょうか。表示が遅い原因はさまざまありますが、ウェブサイトの容量が大きく、レンダリングが遅くなっている可能性もあります。

ウェブサイトのレンダリング速度は重要な要素の一つです。これを軽視すると、ページを閲覧したユーザーのストレスを溜めるだけでなく、そのまま去る(直帰する)ことにもつながります。直帰率を下げ、ウェブサイトの快適性や回遊性を高めるためにも、レンダリング速度を1秒でも速くする工夫が求められます。

ウェブサイトのレンダリングを担うのはブラウザ

ウェブサイトを閲覧する際に使用するブラウザには、レンダリングエンジンというものが搭載されています。これは文字どおりウェブサイトを表示(レンダリング)する役割を担っており、HTMLやCSSを解析して端末の画面へ表示します。

しかし、レンダリングの速度はレンダリングエンジンによって変わるほか、ウェブサイトのデータ量も影響します。基本的にデータ量が多いほどレンダリング速度も遅くなるため、ウェブサイトの管理者はいかに軽くするかが求められます。

直帰率に影響する

レンダリング速度はユーザーの直帰率とも深い関わりがあります。直帰率は、ユーザーがそのページを見ただけで去った(直帰した)割合を指します。例えば直帰率が30%のページは、10人中3人が他のページを見ずに去ったことを意味します。

直帰する原因はさまざまですが、ウェブサイトの表示速度も影響しています。表示速度が遅いと、ユーザーはストレスを感じるため、読み込み完了前にページを去る確率が高まります。その結果、広告収益や売上に影響を及ぼす可能性もあります。

レンダリング速度を高める方法

レンダリング速度はウェブサイトに多大な影響を及ぼします。ユーザーに快適な環境を届けるためにも、以下で解説する5つの方法を試してみましょう。

1.JavaScriptを減らす・まとめる

ajaxを始め、現在はJavaScriptを導入しているウェブサイトが大半を占めます。しかし、ブラウザのレンダリングを遅くする原因にもなっています。そのため、極力スクリプトを減らし、ファイルをまとめる工夫をしましょう。読み込むファイル数が減るだけでも相当な速度向上が期待できます。

2.CSSもファイルをまとめる

JavaScriptと同様に、CSSもファイルをまとめましょう。外部ファイルが減るとレンダリングの速度向上が期待できます。

なお、ページ内へCSSを記述するのであれば、ヘッダ内にまとめることをおすすめします。タグ内へ直接記述する場合と比べ、ページの解析時間が短くなって表示が速くなります。

3.キャッシュを活用する

キャッシュはサーバー上にファイルなどを一時保管しておく仕組みです。ユーザーがウェブサイトへアクセスした場合、あらかじめ生成したキャッシュが読み込まれるため、レンダリング速度が向上します。特にWordpressのような動的にページを生成するCMSでは、キャッシュを使うことで表示速度が改善されます。

ただし、細かな更新が必要なページには適しません。ページの種類や内容によって使い分けるのがよいでしょう。

4.画像を減らす・容量を削減する

画像もレンダリングに大きな影響を与えます。特に画像を多用したページや、ファイルサイズが大きなページは速度が遅くなるため注意が必要です。不要な画像を減らし、容量を削減するなどの工夫を行いましょう。

それでも改善されない時はCDNの導入もおすすめです。CND上に画像を置くことで、レンダリングが速くなる可能性もあります。

5.レンタルサーバーを移転する・上位プランへ移行する

もし上記を試しても改善されない時は、サーバーの移転や上位プランへの移行を行いましょう。

特にレンタルサーバーを利用中の方は、業者を変えるだけでレンダリングが高速になることもあります。それが難しい場合よりスペックが高い上位プランへの移行をおすすめします。

このほか、共有サーバーから専用サーバーに切り替える方法もあります。コストが増加しますが、余裕があるなら検討してみましょう。

レンダリングに注目してウェブサイトを快適に!

ウェブサイトの表示速度は、ユーザーの直帰率に関わるだけでなく、売上などにも影響を及ぼします。少しでも快適なウェブサイトを作るためにも、レンダリング速度を高める工夫を行いましょう。