はじめに
Webページをブラウザで表示するということは、Webサーバ側でコンテンツを生成して、それをHTTPレスポンスとしてブラウザに送信することです。
Webページの表示を高速化するためには、Webサーバ側の高速化とブラウザの高速化が必要になります。ブラウザの高速化において重要となるのがコンテンツの最適化です。Webサーバ側からブラウザへ送信するデータを削減することで、転送に要する時間を減らし表示までの時間を短縮することができます。
WEXAL® Page Speed Technology（以下、PST）は、以下の処理を行いWebページの表示を高速化します。
最適化戦略の生成とコンテンツの最適化
コンテンツとは、HTTPレスポンスのWebページそのもの(HTML)です。
PSTは、戦略AI Davidがリクエストしてきたブラウザの環境に合わせて最適化戦略を生成し、Webサーバ側のPSTプラグインでWebサーバ処理後のHTTPレスポンスの文字列処理と書き換えを行います。
リソースの監視と最適化
リソースとは、コンテンツにより読み込まれる画像、スクリプト、スタイルシートです。
PSTは、オリジナルのリソースの更新を監視して、随時最適化済のリソースを生成します。ブラウザへのレスポンス時には、この最適化済のリソースを返すことで表示の高速化を実現しています。
構成
PSTは、以下の要素より構成されます。
WEXALサービス
WEXALサービスは、最適化戦略の生成、リソースの監視と最適化を担います。wexal.serviceとしてsystemdに登録しています。
最適化戦略サービス(strategy)
Webサーバにリクエストしてきたブラウザの環境に合わせて、Webページ毎に最適化戦略を生成するサービスです。puppeteer(ヘッドレスブラウザ)によりブラウザでのWebページの表示を再現し、最適化戦略を生成しています。システム共通でリクエスト毎に逐次処理します。リクエストはキューで管理しています。
リソース監視サービス(watch)
オリジナルのリソースの更新を監視するサービスです。画像、スクリプト、スタイルシートの更新が行われると、後述のリソース最適化サービス(optimizer)に対して最適化済のリソースの生成を指示します。また、オリジナルのリソースが削除された場合には、対応する最適化済リソースの削除も行います。リソース監視はプロファイル毎に行います。
リソース最適化サービス(optimizer)
オリジナルのリソースから最適化済のリソースを生成するサービスです。リソース監視サービス(watch)、PSTコマンド、または、APIサービス(api)から指示を受けて画像、スクリプト、スタイルシートの最適化を行います。システム共通でリクエスト毎に逐次処理しますが、同時にシステムのコア数分を処理できます。指示はキューで管理しています。
APIサービス(api)
PSTのAPIを提供するサービスです。各WEXALサービスをはじめ、PSTコマンド、PST Managerから使われています。デフォルトでローカルホスト(127.0.0.1)、ポート3000を使用します。
PSTプラグイン
Webサーバ(nginx/httpd)上で動作して、リクエストしてきたブラウザの環境に合わせて最適化戦略サービス(strategy)に対する指示と、最適化戦略に応じたWebサーバ処理後のHTTPレスポンスの文字列処理と書き換えを行います。
PSTコマンド
PSTの機能を制御するためのコマンドラインインターフェース(CLI: Command Line Interface)です。コマンドは/usr/bin/pstです。
PST Manager
PSTの機能を制御するためのWeb管理画面です。デフォルトでは、システムのグローバルIPアドレス、ポート61000を使用します。
PST設定ファイル
PSTの設定を記述する設定ファイルです。フォーマットはYAML形式です。プロファイル毎にwexal/pst.config.yamlに作成されます。
最適化済リソースファイル
リソース最適化サービス(strategy)により生成した最適化済の画像、スクリプト、スタイルシートです。プロファイル毎にwexal/optdir配下に作成されます。
最適化戦略データベース
最適化戦略サービス(strategy)により、ブラウザとリクエスト毎に生成した最適化戦略を格納したデータベースです。最適化戦略を生成する過程で、puppeteer(ヘッドレスブラウザ)がブラウザでのWebページの表示を再現するために取得したリソースも保存されます。プロファイル毎にwexal/{プロファイル名}.sqlite3に作成されます。
キュー
最適化戦略サービス(strategy)とリソース最適化サービス(optimizer)の指示を管理するキューです。Redis(remote dictionary server)を使用します。
Webサーバ
WebサーバでPSTプラグインが動作します。また最適化戦略に合わせてリソースの出し分けを行います。例えば、WebPに対応したブラウザにはWebPリソースを、WebPに対応していないブラウザにはPNG/JPEGリソースを出力します。