画面表示を高速化できるか検証してみた

2024年3月23日検証してみた

Webサーバの機能を利用して、転送データの圧縮とサーバーサイドキャッシュを併用することで、WebFOCUSの画面表示時のレスポンスタイムが速くなるかを検証してみました。

今回利用した環境のスペック

Oracle Cloud に作成したインスタンス上で計測しました。

シェイプVM.Standard2.2
OSCentOS 7
OCPU2
メモリ30GB
WebサーバーApache HTTP Server 2.4
APサーバApache Tomcat 8.5.41
WebFOCUS8.2.07.27.02

画面表示時のレスポンスを調べる

検証では、Apacheのモジュールを利用し、転送データの圧縮とサーバーサイドキャッシュの設定をした場合、していない場合とで、画面表示時のレスポンスに変化があるかを調べてみます。

使用したモジュール

mod_deflatemod_filter

画面表示時の転送データを圧縮する事で、転送量が削減され、ページ表示速度の高速化につながるかを確認

mod_expires

画像ファイルなど静的なファイルをキャッシュすることで、ページの表示速度の高速化につながるかを確認 

モジュールの確認

モジュールがダウンロードされているか確認します。vimコマンドを使って「00-base.conf」を開きます。

vim /etc/httpd/conf.modules.d/00-base.conf

以下の記述があるか確認します。記述がなければ追加、コメントアウトされていれば外します。

LoadModule deflate_module modules/mod_deflate.so
LoadModule filter_module modules/mod_filter.so

追加、コメントアウトを外した場合はApacheを再起動します。

service httpd restart

モジュールの設定

モジュールの設定を記述します。vimコマンドを使って「httpd.conf」を開きます。

vim /etc/httpd/conf/httpd.conf

以下の記述を追加します。

FilterDeclare COMPRESS
DeflateCompressionLevel 1

FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} =~ m#^text/#i"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} =~ m#^application/(javascript|json|xml|xhtml+xml|rss+xml|atom+xml|rss+xml|vnd.ms-fontobject|x-font-ttf)#i"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} =~ m#^image/(svg+xml|vnd.microsoft.icon)#i"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'font/opentype'"
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no

「DeflateCompressionLevel 」数値を大きくする事で圧縮率が高くなります。(設定可能な数値:1~9)
ただし、圧縮率を上げるとCPUの負荷も高くなるため、サーバーリソースを考慮したうえで数値を設定します。

Apacheを再起動します。

service httpd restart

モジュールの確認

モジュールがダウンロードされているか確認するため「00-base.conf」をvimコマンドで開きます。

vim /etc/httpd/conf.modules.d/00-base.conf

以下の記述があるか確認します。記述がければ追加、コメントアウトされていれば外します。

LoadModule expires_module modules/mod_expires.so

追加、コメントアウトを外した場合はApacheを再起動します。

service httpd restart

モジュールの設定

モジュールの設定を記述します。vimコマンドを使って「httpd.conf」を開きます。

vim /etc/httpd/conf/httpd.conf

以下の記述を追加します。

ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"

Apacheを再起動します。

service httpd restart

検証内容

テストではデモデータを利用し、以下の3パターンで画面表示の計測を行いました。それぞれ5回ずつ実行し、画面表示時のレスポンスタイムを計測しています。

ホームページの表示

ログイン画面からログインし、「ホームページ」画面が表示されるまでを確認

ビジュアライゼーションページの表示

ビジュアライゼーションページですべてのコンテンツが表示されるまでを確認

DESIGNERの表示

「DESIGNER」でコンテンツ作成画面が表示されるまでを確認

また、転送データの圧縮とサーバーサイドキャッシュの設定は以下の組み合わせで検証しています。

検証転送データの圧縮設定サーバーサイドキャッシュの設定
なしなし
なしあり
ありあり
ありなし

検証結果

転送データの圧縮とサーバーサイドキャッシュの設定がない場合、ある場合とで以下のようなテスト結果となりました。5回計測した際の平均タイムと最速タイムは以下のとおりです。

検証
平均最速平均最速平均最速平均最速
ホームページの表示3.93秒3.76秒2.59秒2.51秒3.43秒3.33秒3.58秒3.31秒
ビジュアライゼーションページの表示13.11秒10.12秒9.68秒7.12秒13.58秒9.10秒11.49秒8.82秒
DESIGNERの表示10.53秒6.28秒4.44秒4.33秒6.88秒6.09秒5.95秒5.86秒
    計測した中で平均タイムが一番早かったもの 

まとめ

今回の計測では、サーバーサイドキャッシュのみを設定した場合が、WebFOCUSの画面表示時のレスポンスタイムが一番速い結果となりました。ただ、どちらもメリットとデメリットがあります。利用される状況やアプリケーションによっては変わる要素が多分にありますので、それぞれの特性を考慮しつつ自社環境でお試しください。

メリットデメリット
転送データの圧縮通信の帯域使用量を減らせることで画面表示のレスポンス改善が見込める場合がある大容量ファイルやもともと圧縮されているファイルの場合、圧縮してもサイズがあまり削減できない割に圧縮・解凍にCPUリソースを使うため、効果が期待できない場合がある
サーバーサイドキャッシュ再度同じページを表示させる時に、以前表示した時より速くページを表示させることで画面表示のレスポンス改善が見込める場合があるキャッシュを溜めすぎると、ブラウザの動作が遅くなる場合がある

今回は、WebサーバにApache HTTP Server を利用した場合の検証でした。
IISにも同じように圧縮設定やキャッシュ設定がありますので、どのような結果になるか気になりますね。