WEBサイトの表示速度を素早く改善する方法

こんにちは、ザックス株式会社の開発担当のものです。

WEBサイトの表示速度を気にしたことはありますか？WEBサイトの表示速度が早いかどうかによって、SEO、UXに大きな影響がでます。
本記事では、WEBサイトの表示速度を改善する方法について説明します。

１．WEBサイト表示速度の課題

WEBサイトのページを表示する速度について、以下の課題があります。

課題

アクセス数の減少
ページの離脱数の増加
コンバージョン率の低下
検索順位の降下

ユーザー体験の低下を招いてしまい、最終的には売上の減少につながってしまいますので、対策を行う必要があります。

2．改善するためのツールやサービス

WEBサイトの運用担当者は、数ある情報からどれが自社のWEBサイトに必要なものかを検討する必要があります。

例）手段

画像を最適化する（画像サイズ、容量など）
外部ファイルを圧縮する（CSS、JS）
gzip圧縮

例）画像を最適化する際のツール／サービス

TinyJPG
Optimizilla
Compressor.io
mozjpeg
JPEG Optimizer
Squoosh

※その他に画像やソースコードの圧縮などの作業を自動化するツール（タスクランナー）も存在します。

WEBサイトの運用担当者は、やることも多くなかなか手が回らないのが現実だと思います。
そんな方のために弊社では「Varnish Cacheを導入し、WEBサイトの表示速度を素早く高速にする方法」を勧めています。

3．Varnish Cacheとは

高負荷な動的サイト向けの高性能HTTPアクセラレータフリー百科事典『ウィキペディア（Wikipedia）』引用

一言で言うと「キャッシュ機能を持つ高性能なリバースプロキシサーバー」になります。
主な特徴は以下のとおりです。

キャッシュによるレスポンスの飛躍的な向上（これがWEBサイトの高速化につながります）
ページ内にある静的なコンテンツはキャッシュ化、動的なコンテンツはキャッシュせず「WEB／APサーバー」にリクエストするといった細かい制御が可能
導入コストが高くない（OSSであること、導入の際はインストールと設定作業程度で済む）
キャッシュがあれば、「WEB／APサーバー」まで通信する必要がなくなるため、サーバー負荷を軽減できる

例）国内で利用されているケース

料理レシピコミュニティの「クックパッド」（EC2とVarnishで画像配信 – SlideShare）
国内最大級の生活総合情報サイト「All About」（国内最大級の総合情報メディアを支えるVarnish Cache）

4．Varnish Cache導入のイメージ

Varnish Cacheの導入前と導入後の簡単な図を以下に示します。

Varnish Cacheは「クライアント」と「WEB／APサーバー」の間にたち、クライアントからリクエストがあると、Varnish Cacheがそれを受けます。
キャッシュがあれば、そのまま「クライアント」にレスポンスします。
キャッシュがなければ、「WEB／APサーバー」にリクエストし、レスポンスをVarnish Cacheで受け止めてキャッシュし、「クライアント」にレスポンスします。

キャッシュをする・しない、キャッシュの有効期限など詳細な動作については、Varnish Cacheの設定ファイル（VCL）にて制御可能です。

5．検証

Varnish Cache導入前と導入後ではどれくらい違うか、弊社のサイトを使って実験してみます。

今回はApache HTTP Serverに同梱されている性能計測ツールApache Benchを使って、結果を比較してみましょう。

本サイトのサーバー情報

CPU：2コア
メモリ：1GB
ストレージ：100GB

10ユーザー同時接続、1ユーザー1リクエスト、計10リクエストで検証

まずVarnish Cacheの導入前をテストしてみます。

[root@localhost ~]# ab -c 10 -n 10 https://zax.bz/
This is ApacheBench, Version 2.3 <$Revision: 1430300 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking zax.bz (be patient).....done


Server Software:        Apache
Server Hostname:        zax.bz
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-AES256-GCM-SHA384,2048,256

Document Path:          /
Document Length:        138760 bytes

Concurrency Level:      10
Time taken for tests:   9.558 seconds
Complete requests:      10
Failed requests:        0
Write errors:           0
Total transferred:      1390790 bytes
HTML transferred:       1387600 bytes
Requests per second:    1.05 [#/sec] (mean)
Time per request:       9557.782 [ms] (mean)
Time per request:       955.778 [ms] (mean, across all concurrent requests)
Transfer rate:          142.10 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       77   87  13.1     84     122
Processing:  3931 4316 679.4   4171    6229
Waiting:     2918 3298 674.8   3083    5176
Total:       4008 4402 680.4   4265    6317

Percentage of the requests served within a certain time (ms)
  50%   4265
  66%   4273
  75%   4279
  80%   4293
  90%   6317
  95%   6317
  98%   6317
  99%   6317
 100%   6317 (longest request)

次にVarnish Cacheの導入後をテストします。

[root@localhost ~]# ab -c 10 -n 10 https://zax.bz/
This is ApacheBench, Version 2.3 <$Revision: 1430300 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking zax.bz (be patient).....done


Server Software:        Apache
Server Hostname:        zax.bz
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-AES256-GCM-SHA384,2048,256

Document Path:          /
Document Length:        138760 bytes

Concurrency Level:      10
Time taken for tests:   4.164 seconds
Complete requests:      10
Failed requests:        0
Write errors:           0
Total transferred:      1391842 bytes
HTML transferred:       1387600 bytes
Requests per second:    2.40 [#/sec] (mean)
Time per request:       4163.730 [ms] (mean)
Time per request:       416.373 [ms] (mean, across all concurrent requests)
Transfer rate:          326.44 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       78  179 123.5     89     331
Processing:   106  532 1188.4    188    3912
Waiting:       24  386 1142.1     25    3637
Total:        275  711 1155.0    415    3990

Percentage of the requests served within a certain time (ms)
  50%    415
  66%    436
  75%    437
  80%    449
  90%   3990
  95%   3990
  98%   3990
  99%   3990
 100%   3990 (longest request)

1リクエストあたりの平均処理時間で比較してみます。

Varnish導入前

Time per request: 955.778 [ms] (mean, across all concurrent requests)

Varnish導入後

Time per request: 416.373 [ms] (mean, across all concurrent requests)

Varnishを導入することで1リクエストの平均処理時間が約1/2以下になっていることが分かりました。

6．最後に

今回はWEBサイト表示の速度を素早く改善する方法を説明しました。

弊社では『WEBサイト高速化』のサービスを行っています。
WEBサイトを素早く高速化したい方、興味のある方はお気軽にお問い合わせください。

目次