「弁護士ドットコム」トップページの表示速度ボトルネック研究
パブリックCDNリソースが外部ドメインから配信されている、head内同期スクリプトによるレンダリングブロック、未使用CSSの蓄積などのボトルネックが観測され、これらを解消するシミュレーションではLighthouseスコアが99から最大100まで変化する結果が得られました。Core Web Vitalsには若干の改善余地が残ります。
詳細レポート 
ボトルネック一覧 
差分リポジトリ 
弁護士ドットコムは、602万件以上の法律相談実績を持つ日本最大級の法律ポータルサイトです。無料法律相談、弁護士検索、法律Q&Aなど、法律に関する幅広いサービスを提供しています。モバイル環境でのトップページの表示速度について、どのような要素がボトルネックとなっているかを研究しました。
Core Web Vitalsにつながる指標の改善ポテンシャル
観測されたボトルネックを仮に解消した場合、Lighthouse スコアは以下のような変化を示しました。
| 指標 | 観測時点 | 解消シミュレーション後 | 変化量 |
|---|---|---|---|
総合スコア | 99 | 100 | +1 |
LCP | 1.7秒 | 0.1秒 | -1.6秒 |
FCP | 1.6秒 | 0.1秒 | -1.5秒 |
SI | 2.6秒 | 0.9秒 | -1.7秒 |
TBT | 0ms | 0ms | 変化なし |
CLS | 0.000 | 0.000 | 変化なし |
| 観測時点 | 解消シミュレーション後 |
|---|---|
 |  |
総合スコア は観測時点で既に99と高水準でしたが、LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）は1.7秒、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）は1.6秒と、ファーストビューの描画には時間がかかっている状態でした。ボトルネックを解消するシミュレーションでは、LCP が0.1秒、FCP が0.1秒まで変化するという結果が得られています。
読み込みプロセスの変化を動画で体験
本サイトは観測時点でも十分に高速ですが、解消シミュレーション後はそれよりさらにワンテンポ早く表示されるようになった様子が見て取れます。
サードパーティータグの影響
本研究ではまず、サードパーティータグを段階的に除去することで、タグ全体が表示速度に与えている影響を観測します。あわせて、タグ由来のノイズを取り除くことで、サイト自体のボトルネックを観察しやすくする狙いもあります。タグを完全に除去することは現実的ではありませんが、最適化によってどこまでの改善ポテンシャルがあるかを把握する材料としてご覧ください。
本セクションは「サードパーティータグがページスピードに影響を与えている」という現実を数値で示すとともに、それらを最適化することでどれだけのスピード改善ポテンシャルがあるかを示唆するものです。
オリジナルページの全199リソースのうち、サイト固有のリソースは58件（約3割）、サードパーティタグ由来のリソースは141件（約7割）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの7割のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。
弁護士ドットコムのトップページでは、16種類のサードパーティータグが確認されました。
HTMLから直接読み込まれているタグ
| タグ名 | 種別 |
|---|---|
VWO (Visual Website Optimizer) | A/Bテスト |
Criteo | リターゲティング広告 |
Datadog Logs | エラー監視/ログ収集 |
Microsoft Bing UET | 広告トラッキング |
Facebook Pixel | 広告トラッキング |
Twitter Conversion Tracking | 広告トラッキング |
Google広告 (GPT/DFP) | 広告配信 |
Google Tag Manager | タグマネージャー |
GTMまたはGPT経由で読み込まれているタグ
| タグ名 | 種別 |
|---|---|
Google Analytics | アクセス解析 |
Microsoft Clarity | ヒートマップ |
Yahoo広告 | 広告 |
MicroAd | 広告 |
| Cookie Sync系等4サービス | トラッキング |
段階的に除去した際の指標の推移は次のとおりです。
| 除去段階 | LCP | FCP | SI | 総合スコア |
|---|---|---|---|---|
| 観測時点（タグあり） | 1.7秒 | 1.6秒 | 2.6秒 | 99 |
VWO 除去 | 1.7秒 | 1.6秒 | 2.3秒 | 99 |
Criteo Datadog Bing UET 等5サービス除去 | 1.2秒 | 1.1秒 | 1.9秒 | 100 |
Google広告 (GPT/DFP) 除去 | 1.3秒 | 1.2秒 | 1.7秒 | 100 |
Google Tag Manager + Google Analytics 除去 | 1.2秒 | 1.1秒 | 1.6秒 | 100 |
サードパーティータグを全て除去した状態では、LCP が1.7秒から1.2秒へ、FCP が1.6秒から1.1秒へ、SI が2.6秒から1.6秒へ変化する結果が得られました。特に Criteo Datadog 等の広告トラッキングタグ群の一括除去では LCP が約0.5秒短縮されており、この段階の影響が最も大きいことが読み取れます。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。
サイト固有のボトルネック
サードパーティータグの影響を切り離した状態を起点として、サイト固有のボトルネックを調査しました。本研究では全10件のボトルネック仮説を検証しました。その中から、特に影響の大きかった3件を紹介します。
ボトルネック1: パブリックCDNリソースが外部ドメインから配信されている
観察された状況
polyfill-fastly.io、ajax.googleapis.com、cdnjs.cloudflare.com という3つの外部ドメインからJavaScriptライブラリが読み込まれている状態が観測されました。外部ドメインからリソースを読み込む場合、ドメインごとに DNS ルックアップと TLS ハンドシェイクのオーバーヘッド（各100〜300ms程度）が発生します。実際に polyfill.min.js のTTFBは463ms、jquery.min.js のTTFBは468msと、接続確立に要する時間が計測されていました。
解消シミュレーションの方法
3つのパブリックCDNリソースをHTMLと同一ドメイン（www.bengo4.com）から配信する変更を加え、その影響を計測しました。同一ドメインであれば、HTMLの取得で既に確立済みのHTTP接続が再利用でき、さらにHTTP/2の多重化によって複数リソースの並列ダウンロードも効率化されます。
シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 1.2秒 | 0.2秒 | -1.0秒 |
FCP | 1.1秒 | 0.2秒 | -0.9秒 |
SI | 1.6秒 | 1.1秒 | -0.5秒 |
LCP が1.2秒から0.2秒へ、FCP が1.1秒から0.2秒へと大きく変化しました。外部ドメインへの接続コストが描画速度に与えていた影響の大きさが、このシミュレーション結果から明確に読み取れます。
ボトルネック2: head内同期スクリプトによるレンダリングブロック
観察された状況
<head> 内で polyfill.min.js と jquery.min.js が defer や async 属性なしで同期的に読み込まれている状態が観測されました。同期スクリプトはHTMLパーサーがスクリプトの読み込みと実行を待つため、後続のCSSやコンテンツの描画がブロックされます。
解消シミュレーションの方法
2つのスクリプトに defer 属性を付与し、HTMLパースと並行してダウンロードし、パース完了後に実行する形に変更しました。
シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 0.2秒 | 0.2秒 | 変化なし |
FCP | 0.2秒 | 0.1秒 | -0.1秒 |
SI | 1.1秒 | 0.7秒 | -0.4秒 |
SI（Speed Index = ビューの視覚的な表示進捗の速さ）が1.1秒から0.7秒へ変化しました。LCP や FCP への影響は軽微でしたが、SI の変化から、同期スクリプトによるレンダリングブロックがページの描画速度全体に影響を与えていたことが読み取れます。
ボトルネック3: 未使用CSSの蓄積
観察された状況
結合済みCSSファイルの非圧縮サイズが758KBに達しており、トップページで実際に使用されていないCSSセレクタが大量に含まれている状態が観測されました。CSSファイルが大きいほど、ブラウザがCSSOM（CSSの解析結果をもとに構築する内部データ構造）を構築する時間が長くなり、レンダリングの開始が遅延します。
解消シミュレーションの方法
トップページで使用されていないCSSセレクタを除去し、CSSファイルサイズを758KBから144KB（81%削減）に縮小しました。gzip転送サイズも111KBから21KBに削減されています。
シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 0.1秒 | 0.1秒 | 変化なし |
FCP | 0.1秒 | 0.1秒 | 変化なし |
SI | 0.9秒 | 0.9秒 | 変化なし |
CSSファイルサイズを81%削減したにもかかわらず、Lighthouse の指標値には目立った変化が観測されませんでした。これは、この時点で既に LCP 0.1秒・FCP 0.1秒と十分に高速な状態まで最適化が進んでおり、CSSパース時間の短縮が指標に反映されにくい状況であったためと考えられます。ただし、gzip転送サイズが111KBから21KBに削減されたことは、ネットワーク帯域の消費やモバイル環境でのデータ通信量に影響する要素であり、表示速度とは別の観点で意味のある変化です。
まとめ
弁護士ドットコム（bengo4.com）のトップページは、観測時点で 総合スコア 99と高水準な一方、LCP 1.7秒・FCP 1.6秒と、ファーストビューの描画に要する時間にはボトルネックが存在していました。
本研究で観測されたボトルネックとその影響は次のように整理できます。
- サードパーティータグ（16種類）: 段階的な除去によって
LCPが0.5秒、FCPが0.5秒、SIが1.0秒変化。特にCriteoDatadog等の広告トラッキングタグ群の影響が大きく観測されました。 - パブリックCDNリソースの外部ドメイン配信: 同一ドメイン化によって
LCPが1.0秒、FCPが0.9秒変化。3つの外部ドメインへの接続コストがファーストビュー描画の最大のボトルネックでした。 - head内同期スクリプトのレンダリングブロック:
defer属性の付与によってSIが0.4秒変化。
全ボトルネックの解消シミュレーションを重ねた結果、LCP は1.7秒から0.1秒へ、FCP は1.6秒から0.1秒へと変化しました。総合スコア が99と既に高い水準にあっても、ファーストビューの描画速度には大きな改善余地があったことが、この一連のシミュレーションによって観測された形です。
