Webサイトを利用する環境がどんどんリッチなものになってきていますが、一方でデバイス環境は多様化してきており、スペックによっては表示に時間がかかる場合も出てきています。
検索エンジンではユーザーによりよい使用体験を与えるべく、高速で表示されるサイトを上位に評価するようになりました。
よりWebサイトを高速化し、ユーザーや検索エンジンに評価されるサイト作成のポイントについて紹介します。
Webサイトが表示されるまで
Webサイトを高速化するためには、Webサイトが表示されるまでのプロセスを正しく理解することが必要不可欠です。
まず概要を確認しておきましょう。
ブラウザを通し、URL（Webサーバーのアドレス）が入力されると、DNSサーバーにURLの情報が送られてそのサーバーの位置を特定して返信してくれます。
するとそのサーバーあてにhttpのリクエストを送り、サーバーは指定された位置の情報をhttpで送り返します。
サーバーから情報がクライアントのブラウザに届くと、ブラウザはその届けられたファイルの情報を元にレンダリング（文字や画像などの描画）を行います。
ファイルの情報の中には追加でファイル情報を要求することもあり、都度httpによるリクエストが行われ、ファイル情報の取得を繰り返して画面表示を行っていきます。
毎回同じような情報を取りに行くとそれだけ時間がかかることになりますので、パソコンにはキャッシュと呼ばれる機能がついています。
キャッシュは一時的に対象URLの位置や画像ファイルなどの情報を保存しておき、サイトへの接続回数を減らすことで表示を高速化する機能です。
Webサイトを高速表示するためのチェックポイント
では、Webサイトを高速表示するために必要なチェックポイントをWebサイト制作者側の視点から考えてみましょう。
【無料あり】エンジニアが解説！プログラミングスクールおすすめ５選サーバー・ネットワーク
環境によっては手が届かない部分ではありますが、サーバーやネットワークのスペックはWebサイトの表示に大きく影響します。
サーバーの基本的な性能はリクエストに対する返信の速さやphpやrubyなどのサーバーサイドの言語の処理速度に大きく影響します。
ネットワークのスペックは、大容量のデータを扱う場合には非常に重要になりますし、速度だけでなくネットワーク上の位置や経路も実は大きな問題になります。
サーバーの位置やプロバイダによっては、日本国内での接続のために海外の小さな諸島国を経由して日本のサーバーに接続するルートを取る場合もあります。
当然、できるだけ対象のサーバーまでの距離が近い方が接続速度の面では有利です。
ファイルの容量
ファイルの容量が大きい場合は送受信の速度が遅くなるというのは多くの人が経験していると思います。
これはファイルの情報をhttpで送るための処理や伝送にどうしても時間が多くかかるため仕方ないことです。
しかし、中には必要以上に大容量のファイル（特に画像、動画など）を利用している場合もあります。
Webで表示するのに十分なら、画質を落とすなどすることで高速化できる場合もあります。
処理するべきプログラムの状況
Webサイトには多くの高級プログラミング言語（機械語から遠く人間にわかりやすい言語）が利用されていますが、その分、プログラムの処理速度はWebサイトの表示スピードに大きく影響するようになってきています。
プログラムのコードを見直すことで、高速化できる場合も少なくありません。
Webサイトを高速表示するための基本テクニック5つ
Webサイトを高速表示するために考えてみたい基本的なテクニックを5つ紹介します。
サーバーの乗り換え検討
最近はレンタルのクラウドサーバーを利用するのが一般的になっていますが、サーバー提供会社によってスペックやバックボーンのネットワークの速度が違います。
使用しているサーバーのスペックを確認し、サービスを移転することで高速化できる場合があります。
大容量の画像ファイルの圧縮
ダウンロードを目的とした場合でなければ、Webサイトでは高画質と言えるような画像ファイルは必要ありません。
Googleの推奨は、１つの画面あたりで1.6MB以内だそうです。
また、現在のパソコンでの画面表示を考えるなら横幅が2000pxを超えるような画像ファイルはオーバースペックと考えることができます。
スマホなどがアクセスの中心なら640px程度でも十分です。
遅延読み込み
ブラウザはhtmlの情報を元に、ファイルに書かれた情報を上から読み取り、順次レンダリングを行います。
しかし、基本的には上に記載された表示を処理してから次の処理に向かうため、途中で大容量のファイルや処理量の多いスクリプトがあるとそこで表示が一旦止まってしまいます。
この時、レンダリング処理を画面に表示されるタイミングで行うのが遅延読み込みです。
遅延読み込みを行うためのjavascriptライブラリはフリーで多く提供されています。
非同期処理
CSSやJavascriptでは、読み取りが終わってから画面に対する処理を実行しますが、逆に言えばその処理が終わるまでは表示は止まってしまいます。
表示を止めることなく、並行して行うように指示するのが非同期処理です。
Javascriptなら<script>タグにdeferやasyncの属性をつけることで調整することが可能です。
スクリプトチェック
CSSやJavascriptなどのブラウザで処理するスクリプトは、利便性を考慮してついひとまとめにしてしまいがちですが、ページ内で使っていないスクリプトまで多量に含んでおり、ファイルサイズを肥大化させている場合も多いです。
これらを見直し、読み込むファイルサイズを適切に分割することでサイトが高速化します。
同様に、サーバーサイドのスクリプトも確認してみると高速化できる場合があります。
特にWordpressなどのCMSを使っている場合はプラグインを増やしていくうちに不要なスクリプトや読み込みファイルが増えるので定期的に見直すと良いでしょう。
WEBサイトの速度改善テクニックまとめ
Webサイトの高速化は専門的な知識だけでなく地味な作業が多く、かつその恩恵が見えにくいためについ後回しになりがちですが、昨今は表示の高速化によるメリットが大きくなっていますので早めに取り組むのが良いでしょう。
Lighthouseなどのツールでサイトの表示速度の改善ポイントを知ることができますので、うまく使ってサイトの改善に活かしましょう。