Web高速化の手法
統計的品質管理による性能改善
特徴
SpelldataのWebパフォーマンスチューニングサービスは、専門用語で「パフォーマンスエンジニアリング」と呼ばれる分野の技術です。
ITの技術分野でも、かなり難しい分野で、小難しい説明が以下に続きますが、できる限り正しく説明するためなので、ご容赦下さい。
Spelldataのパフォーマンスチューニングのアプローチは以下の特徴があります。
統計的品質管理
Spelldataが改善で使うアプローチは、製造業で普及している「統計的品質管理」です。
高速であるかどうかを確認するなら、高速な表示速度の値が取れれば終わりです。
しかし、品質管理で大事なのは、品質不適合の確認、つまり遅延した配信が存在したかの確認です。
品質基準を満たさない品質不適合な配信が発生していないか確認するには、継続的に計測・監視する必要があります。
継続的な計測によって、表示速度の「歩留まり」を月単位で確認します。
リアルに全国5都市で計測
Webページの表示速度は、場所や時間帯によって、刻一刻と変化します。
Spelldataは、御社のWebページを札幌、新潟、東京、大阪、福岡の全国5都市で計測。
モバイルページは、ドコモ、au、ソフトバンク、楽天モバイルのリアル5Gで計測が可能。
デスクトップページは、NTTとKDDIの光回線でも計測が可能。
高速化のBefore/Afterを実際の現地の表示速度で見える化します。
ボトルネックを特定し解消
「画像の容量が大きいからだろう」とか「データベースが原因だろう」という「予想」で高速化を行うと、必ず失敗します。
高速化では、ボトルネックを特定できるかどうかが鍵を握り、Webシステムはフロントエンド、ネットワーク、バックエンドのそれぞれに存在します。
大小合わせると、1サイトあたり60~100ぐらいあります。
ボトルネックの証拠となるデータをご提示して、1つ1つ丁寧に解決して、高速化していきます。
リバースエンジニアリング
真のパフォーマンスチューニングとは、計算量の削減と計算処理の最適化です。
問題点を修正するためには、他人が書いたプログラムのコードを解析して、何をしようとしているのかを理解する必要があります。
これを専門用語でリバースエンジニアリングと云います。
リバースエンジニアリングができる技術者は希少で、Spelldataはそれができます。
目標値
性能品質管理においては、例えば「300%の高速化を実現」という表現に価値はありません。
表示完了6秒のページを2秒まで高速化したとしても、目標が1秒であるなら、品質不適合です。
また、一瞬だけ1秒になって、1日の殆どは1秒より遅延していたとしたら、それも品質不適合です。
Spelldataでは、品質管理の原則どおりに、目標とする値を、全体の何%が達成できたか、歩留まりで評価します。
表示開始時間
表示開始時間とは、Webページに最初の1ピクセルが表示された時間です。
ブラウザの描画は、必ずOSの描画処理が関与するため、ブラウザのAPIでは正確には計測できません。
OSのグラフィックスAPIにアクセスして表示開始を計測しています。
目標は、0.5秒です。
表示完了時間
Webページの表示処理が完了した時間で、Document Complete、load、onloadの発火が該当します。
ページ内の全ての要素が表示された状態です。
地方の福岡や札幌で1秒以内に表示完了させるには、東京で0.5秒以内に表示完了させる必要があります。
目標は、1秒です。
SpeedIndex
表示開始から表示完了までの単位時間あたりの未表示領域の面積を足した数値。
数式としては、積分となり、無単位です。
昨今は、先にloadを発火させて、後から表示させるWebページもあるので、そういうサイトは、SpeedIndexを使います。
目標は1,000以下です。
Core Web Vitals
Googleが策定した新しいWebパフォーマンスの指標。
表示開始0.5秒、表示完了1秒は、Core Web Vitalsの目標値より厳しい値で、これが達成できるとCore Web Vitalsは全て合格数値内になります。
調査対象
SpelldataのWebパフォーマンスチューニングサービスは、Webシステムのフロントエンドからバックエンドまで、全体的に調査します。
フロントエンド
- HTML
- CSS
- JavaScript
- 画像
- 動画
- API
フロントエンドは、Webパフォーマンスの遅延要因の概ね50~70%を占めます。
一見、ファイルのダウンロードの遅延が原因に見える場合でも、JavaScriptの処理などでダウンロードを遅延させている事象が多いです。
JavaScriptの処理でHTMLのパース処理がフラグメント化(断片化)してしまい、遅延している事も多いです。
フロントエンドの調査は、プロファイリングとトランザクション計測で行います。
ネットワーク
- BGP
- Trace Route
- DNS
- SSL
- CDN
ネットワークは、下のレイヤーから確認をしていきます。
現在の日本でのインターネット通信のスループットは十分であり、ファイル容量はページ全体で10MBを超えない限り、遅延要因にはなりません。
ネットワークの遅延要因として多いのは、DNSやSSLの処理です。
ネットワークの調査は、各都市の各キャリア毎の計測で行います。
バックエンド
- サーバ
- OS
- ミドルウェア
- プログラム
- API連携
- データベース
バックエンドは、常にコンテキストスイッチと割込の数との勝負です。
CPU使用率やメモリ使用率だけを見ていると、高速化は難しいでしょう。
また昨今のシステムの遅延は、順次処理で依存する処理の待機時間とメモリ周りが原因として多いです。
バックエンドの調査は、OSに入っているコマンドとプロファイリングで行います。
サードパーティー
- タグマネージャ
- A/Bテスト
- 効果測定タグ
- オンライン広告
- リターゲティング広告
- レコメンドエンジン
- チャットシステム
- MAツール
昨今のWebサイトは、サードパーティーコンテンツと呼ばれる10〜100ぐらいの他社システムと連携しています。
まるで製造業のサプライチェーンのようで、「デジタル配信チェーン」を形成しています。
現状、多くの上述のサービスを提供している企業は、計測による品質管理をしていないので、100%遅延要因になっています。
サプライチェーンで、どこかの部品メーカーが品質が悪い部品を納入すると、製品の不具合の原因となるように、品質管理がされていないサードパーティコンテンツを自社のWebサイトに組み込むと、遅延原因となります。
サードパーティの調査は、プロファイリングとトランザクション計測で行います。
計測・監視
計測・監視は、Webパフォーマンスチューニングにおいて、成功の鍵を握る大きな要素です。
御社としては、高速化そのものが目的ではなく、高速化によって収益が向上したり、顧客体験が向上させるのが最終的な目的のはずです。
数値上は高速化しているが、ビジネスには殆ど影響が無いというのでは、投資した意味がありません。
「他社のWeb高速化サービスを利用したが、ビジネスインパクトが無かった」というご相談を時々頂きます。
お話を伺うと、いずれも計測による評価に原因がありました。
どんな計測で検証したか | どうしてダメなのか |
---|---|
そもそも計測していない |
計測していないと、Before/Afterの比較ができないので、プロジェクトが成功したかどうかが分かりません。 |
Google PageSpeed InsightsやLighthouseで評価した |
これらのツールは4G回線や光回線をエミュレートして計測しています。
またGoogle PageSpeed Insightsが高得点だから表示が高速というわけではありません。 Google PageSpeed InsightsやLighthouseを評価に使うWeb高速化サービスは、ページ容量で評価されるため、ベンダーに有利で、御社に不利になります。 |
GoogleのCrUX(Chrome User Experience Report)で計測した |
GoogleのCrUXの調査手法を確認されたでしょうか?
データの送信に失敗する原因は、以下の3つです。
Google CrUXを評価に使うWeb高速化サービスは、遅い数値やエラーは記録されないため、ベンダーに有利で、御社に不利になります。 |
RUMで確認した |
RUM(Real User Monitoring)は以下の場合にデータを取得できません。
RUMを評価に使うWeb高速化サービスは、遅い数値やエラーは記録されないため、ベンダーに有利で、御社に不利になります。 |
WebPageTestで確認した |
WebPageTestは、弊社が代理店として販売しているCatchpointの無料サービスですが、参考として計測するには使えますが、実際のビジネスで使うには不向きです。
WebPageTestを評価に使うWeb高速化サービスは、実際のユーザが使っている回線ではないですし、時間の推移による表示速度の変化を捉えられないので、ベンダーに有利で、御社に不利になります。 |
AWS上に計測サーバがあるSynthetic Monitoringで確認した |
WebPageTestと同様に、AWS上で稼働しているサーバから計測したデータは、実際のユーザが体験する表示速度を保証できません。
AWS上に計測サーバがあるSynthetic Monitoringを使うWeb高速化サービスは、実際の顧客が使っている回線ではなく、地方の表示速度も分からないので、ベンダーに有利で、御社に不利になります。 |
ビジネスで効果を出すための高速化であるならば、実際のユーザがいる都市や、ユーザが使っている回線で、表示速度が何秒であるかを計測すべきです。
そうでなければ、高速化の成果を証明できません。
8年に及ぶWebパフォーマンスチューニングのプロジェクトを通して、地方や回線によって、全く表示速度が違うとSpelldataは把握しています。
そこで、Spelldataでは、全国5都市(札幌、新潟、東京、大阪、福岡)に計測センターを開設しております。
日本で唯一、全国でのNTTとKDDIの光回線、NTTドコモ、au、ソフトバンク、楽天モバイルの5G回線での定常計測・監視ができます。
全国で計測するのは、高速化を行う私たちに不利ですが、確実に高速化し、お客様のビジネスにお役立ちするために欠かせないと考えています。
計測・監視種別 | 何を計測するか |
---|---|
BGP監視 |
御社サーバまでのインターネット上のルーティング情報の監視。 |
Trace Route計測・監視 |
各主要都市から御社サーバまでの経路状況の計測・監視。
レイテンシの数値が、そのまま、DNS、TCP 3way handshakes、SSLの鍵交換、ファイルのダウンロード時間のベースとなります。 |
DNS計測・監視 |
ドメイン名からIPアドレスを探すDNSの応答速度を組織単位・回線単位で計測・監視。 |
トランザクション計測・監視 |
御社のWebページの主要動線を計測・監視。 |
単ページ計測・監視 |
1ページだけで成り立っているページの計測・監視。 |
API計測・監視 |
御社のWebシステムで連携しているAPIがあれば、その応答速度を計測・監視。 APIのレスポンスタイムは100ms以下が望ましいです。 |
改善
私たちのWebパフォーマンスチューニングサービスは、ボトルネックの証拠と共に具体的な解決策をご提案します。
具体的な変更の提案
フロントエンド周りのコードを具体的な変更案コードを書いて提案します。
御社のWebサイトの開発メンテナンスしている技術者や制作会社さんと連携して、本番適用します。
ネットワーク周りやバックエンド周りについても、具体的なパラメータや設定の変更をご提案します。
夜間作業
バックエンド周りの調査は、実際に遅延が発生する夜21時以降のサーバにログインする必要があります。
その改善作業についても、お客様のアクセスが少なく、ビジネスの影響が少ない夜の作業が好まれます。
Spelldataでは、夜間の調査や作業に対応しています。
ベンダーとの交渉
インフラやサードパーティーなど、ベンダー製品やサービスに遅延要因がある場合、委任状を頂き、御社の代理人として交渉します。
証拠となるデータを揃えて提示します。
評価分析
Webパフォーマンスの高速化の評価は、1か月単位での積分で比較して行います。
Before/Afterの比較は、期間単位で行うのが順当です。
これは、標本の大きさが十分でないと、検出力が弱いためです。
検出力が弱いと、本当は差があるのに、差が無いと判断してしまう「第二種の過誤」に陥ります。
プロジェクトの最初の内は、高速化によるBefore/Afterの差が大きいので分かりやすいですが、高速化が進む程に、差が小さくなっていきます。
本当は差があるのに、差がないと判断してしまうのを避けるために、最低でも変更した時点から前後1週間分の標本で比較します。
計測の頻度は、15分に1回で行うと、1日あたり96の標本の大きさになります。
標本分布のt分布表では、自由度が100あると、ほぼ正規分布になります。
従って、標本の大きさを100ぐらい用意できるのが理想です。
1日あたり96の標本の大きさだと、一週間で、観測値672のデータセットになります。
これで散布図で比較しましょう。
下記の図は、かなり高速化が進んだ段階での計測です。
これでは、高速化できたのかどうか、判断に悩みますね。
そこで、累積分布関数で表してみましょう。
この比較を正確に行うために、改善前の観測値の集まりである青い線で描かれた面積と、改善後の観測値の集まりである緑の線で描かれた面積を比較するのです。
期間 | 一週間前 | 一週間後 | 差分 | 改善率 |
---|---|---|---|---|
HTML初出時間 | 16,884 | 23,677 | -6,793 | -40% |
表示開始時間 | 48,872 | 53,184 | -4,312 | -9% |
表示完了時間 | 131,841 | 126,837 | 5,004 | 4% |
この表から何が分かるかというと、HTMLの初出時間は40%も遅延しています。
HTMLが届く時間が遅くなれば、当然ながら、表示開始と表示完了も同じぐらいに遅延するはずです。
しかし、表示開始時間は9%の遅延に留まり、表示完了は4%改善されています。
この分析から、HTMLの初出時間をより高速にすれば、更に、表示開始と表示完了時間の高速化が見込める事が分かります。
累積分布関数のBase Responseの箇所を見ても、改善前の青いグラフに比べて、改善後の緑のグラフは全体的に上回っているのが分かります。
従って、次に打つべき手は、Webサーバの増強や高速化だと分かります。
このサービスの保証
表示開始0.5秒、表示完了1秒を、歩留まり98%で達成をお約束します。