こんにちは、ザックス株式会社の開発担当のものです。
WEBサイトの表示速度を気にしたことはありますか?WEBサイトの表示速度が早いかどうかによって、SEO、UXに大きな影響がでます。
本記事では、WEBサイトの表示速度を改善する方法について説明します。
目次
1.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サイトを素早く高速化したい方、興味のある方はお気軽にお問い合わせください。