PerfData

パフォーマンスエンジニアたち

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高速化サービスを利用したが、ビジネスインパクトが無かった」というご相談を時々頂きます。
お話を伺うと、いずれも計測による評価に原因がありました。

Webパフォーマンスの計測・監視で失敗する例
どんな計測で検証したかどうしてダメなのか
そもそも計測していない

計測していないと、Before/Afterの比較ができないので、プロジェクトが成功したかどうかが分かりません。
計測していないWeb高速化サービスは、評価そのものができないので、ベンダーに有利で、御社に不利になります。

Google PageSpeed InsightsやLighthouseで評価した

これらのツールは4G回線や光回線をエミュレートして計測しています。
レイテンシが150ms、下りが1.638Mbpsで、5Gが普及している日本の通信環境と大きく異なります。
そして、エミュレートなので、通信経路も異なりますから、実際の顧客が体験している表示速度ではありません。

またGoogle PageSpeed Insightsが高得点だから表示が高速というわけではありません。
ファイル容量を削減すると高得点になります。
しかし、日本のインターネット環境でのWebの遅延はファイル容量が原因ではなく、計算時間の遅延が原因です。

Google PageSpeed InsightsやLighthouseを評価に使うWeb高速化サービスは、ページ容量で評価されるため、ベンダーに有利で、御社に不利になります。

GoogleのCrUX(Chrome User Experience Report)で計測した

GoogleのCrUXの調査手法を確認されたでしょうか?
全てのChromeユーザのデータが使われているわけでなく、以下のような条件があります。
従って、データはバイアス(偏り)が入っており、それを補正する必要があります。

  1. 閲覧履歴の同期を許可
  2. Sync パスフレーズを設定していない
  3. 使用統計のレポートを有効にしている
  4. データの送信に成功した(これはGoogleのページには書かれていません)

データの送信に失敗する原因は、以下の3つです。

  • 御社のサイトが著しく遅延、もしくはサードパーティが遅延して、データを送信できない
  • 御社のWebページがエラーになって、データ送信に必要なデータが送信できない
  • Googleにデータを送信する際に、通信の問題、データ受信サーバの遅延があった場合に、そのデータを受信できない

Google CrUXを評価に使うWeb高速化サービスは、遅い数値やエラーは記録されないため、ベンダーに有利で、御社に不利になります。

RUMで確認した

RUM(Real User Monitoring)は以下の場合にデータを取得できません。

  • 御社のサイトが著しく遅延、もしくはサードパーティが遅延して、データを送信できない
  • 御社のWebページがエラーになって、データ送信に必要なデータが送信できない
  • 集計サーバにデータを送信する際に、通信の問題、データ受信サーバの遅延があった場合に、そのデータを受信できない

RUMを評価に使うWeb高速化サービスは、遅い数値やエラーは記録されないため、ベンダーに有利で、御社に不利になります。

WebPageTestで確認した

WebPageTestは、弊社が代理店として販売しているCatchpointの無料サービスですが、参考として計測するには使えますが、実際のビジネスで使うには不向きです。

  • AWSなどのクラウドサーバ上にシステムがあり、そこから回線のスループットをシミュレートして計測しているので、実際の現地のスピードではない
  • ネットワーク経路が異なるので、実際のユーザがどのような体験をしているかが分からない
    (高速道路の混雑状況で例えると、湾岸高速道路が渋滞していないから、東名高速道路も渋滞していないと主張するようなものです)
  • テストをしたその時点での観測値なので、それ以外の時間の表示速度を保証できない

WebPageTestを評価に使うWeb高速化サービスは、実際のユーザが使っている回線ではないですし、時間の推移による表示速度の変化を捉えられないので、ベンダーに有利で、御社に不利になります。

AWS上に計測サーバがあるSynthetic Monitoringで確認した

WebPageTestと同様に、AWS上で稼働しているサーバから計測したデータは、実際のユーザが体験する表示速度を保証できません。
東京の市場だけを重視しており、他の地方の市場は放棄するというのであれば、構わないでしょう。

  • AWSにお客様がいるわけではないので、実際のユーザがどのような体験をしているかが分からない
  • 5Gの計測ができない
  • 地方都市の実際のネットワーク経路を使った計測ではないので、地方都市での表示速度が分からない

AWS上に計測サーバがあるSynthetic Monitoringを使うWeb高速化サービスは、実際の顧客が使っている回線ではなく、地方の表示速度も分からないので、ベンダーに有利で、御社に不利になります。

ビジネスで効果を出すための高速化であるならば、実際のユーザがいる都市や、ユーザが使っている回線で、表示速度が何秒であるかを計測すべきです。
そうでなければ、高速化の成果を証明できません。
8年に及ぶWebパフォーマンスチューニングのプロジェクトを通して、地方や回線によって、全く表示速度が違うとSpelldataは把握しています。

そこで、Spelldataでは、全国5都市(札幌、新潟、東京、大阪、福岡)に計測センターを開設しております。
日本で唯一、全国でのNTTとKDDIの光回線、NTTドコモ、au、ソフトバンク、楽天モバイルの5G回線での定常計測・監視ができます。
全国で計測するのは、高速化を行う私たちに不利ですが、確実に高速化し、お客様のビジネスにお役立ちするために欠かせないと考えています。

SpelldataのWebパフォーマンスチューニングサービスで使う計測・監視
計測・監視種別何を計測するか
BGP監視

御社サーバまでのインターネット上のルーティング情報の監視。
特に海外に置いてあるサーバやクラウドサービスなどと連携している場合に、BGPのルーティング情報が変わったり、通信ができない事態の発生を捉えないと、正しく分析できないです。

Trace Route計測・監視

各主要都市から御社サーバまでの経路状況の計測・監視。
通信回線については、100Mbpsのようなスループットばかり注目されますが、これは高速道路に例えると車線数です。
車線数がどんなに多くても、混雑すると時速が遅く渋滞するように、通信回線もレイテンシの方が重要です。

レイテンシの数値が、そのまま、DNS、TCP 3way handshakes、SSLの鍵交換、ファイルのダウンロード時間のベースとなります。
レイテンシの数値より高速にならないので、現在のインターネット回線の「時速」を知るのは、正しい高速化に欠かせません。

DNS計測・監視

ドメイン名からIPアドレスを探すDNSの応答速度を組織単位・回線単位で計測・監視。
DNSは、ルートDNSのレスポンス、co.jpのDNSなど、レベル別にレスポンス時間が異なります。
またCDNを利用していると、CNAME Chain(CNAMEが複数連鎖する状態)になっていて、どのDNSで遅延しているかを把握する必要があります。

トランザクション計測・監視

御社のWebページの主要動線を計測・監視。
特に、ログイン後のページや、ショッピングカートといった動的な生成ページは、計測するためには、実際に遷移する必要があります。
ユーザが遷移しているページをなぞるように、ページ遷移して計測すると、顧客体験を正確にトータルで把握できるようになります。

単ページ計測・監視

1ページだけで成り立っているページの計測・監視。
ランディングページやトップページなど、ページ遷移は伴わない、もしくは1ページだけの表示速度を知りたい場合に使います。

API計測・監視

御社のWebシステムで連携しているAPIがあれば、その応答速度を計測・監視。
特にバックエンド側で、APIを使った疎結合なシステムを構築している場合には、Enterpriseノードという計測機器を設置して、APIのレスポンスタイムを計測します。
Enterpriseノードは、オンプレミスでも、クラウドでも、どちらでも展開可能です。

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,88423,677-6,793-40%
表示開始時間48,87253,184-4,312-9%
表示完了時間131,841126,8375,0044%

この表から何が分かるかというと、HTMLの初出時間は40%も遅延しています。
HTMLが届く時間が遅くなれば、当然ながら、表示開始と表示完了も同じぐらいに遅延するはずです。
しかし、表示開始時間は9%の遅延に留まり、表示完了は4%改善されています。

この分析から、HTMLの初出時間をより高速にすれば、更に、表示開始と表示完了時間の高速化が見込める事が分かります。
累積分布関数のBase Responseの箇所を見ても、改善前の青いグラフに比べて、改善後の緑のグラフは全体的に上回っているのが分かります。
従って、次に打つべき手は、Webサーバの増強や高速化だと分かります。

このサービスの保証

表示開始0.5秒、表示完了1秒を、歩留まり98%で達成をお約束します。