「AFPBB News」トップページの表示速度ボトルネック研究

AFP（フランス通信社）が配信する国際ニュースを日本語で届けるニュースサイトです。政治・経済、社会、環境・科学、スポーツなど幅広い分野の報道を写真とともに提供しています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

Core Web Vitalsにつながる指標の改善ポテンシャル ​

観測時点	全ボトルネック解消シミュレーション後

観測されたボトルネックを仮に解消した場合、Lighthouse スコアは以下のような変化を示しました。

総合スコア が89から99へと10ポイント変化するシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が3.8秒から0.6秒へと大きく変化しており、LCP に強く影響するボトルネックが存在していたことが読み取れます。

なお、FCP（First Contentful Paint）が0.1秒から0.5秒に増加していますが、これはリソースの配信元を複数の外部ドメインからHTMLと同一ドメインに統合したことで接続の並列性が減少したためで、FCP のスコアは100を維持しています。また、CLS が0.000から0.071に増加していますが、これはサードパーティータグ除去に伴うカルーセルのレイアウト変化を CSS で隔離した後の残存値です。

読み込みプロセスの変化を動画で体験 ​

本サイトでは、解消シミュレーション後に大幅な表示速度の改善が見て取れます。

サードパーティータグの影響 ​

詳細レポート

本研究ではまず、サードパーティータグを段階的に除去することで、タグ全体が表示速度に与えている影響を観測しました。あわせて、タグ由来のノイズを取り除くことで、サイト自体のボトルネックを観察しやすくする狙いもあります。タグを完全に除去することは現実的ではありませんが、最適化によってどこまでの改善ポテンシャルがあるかを把握する材料としてご覧ください。

本セクションは「サードパーティータグがページスピードに影響を与えている」という現実を数値で示すとともに、それらを最適化することでどれだけのスピード改善ポテンシャルがあるかを示唆するものです。

オリジナルページの全86リソースのうち、サイト固有のリソースは69件（約8割）、サードパーティタグ由来のリソースは17件（約2割）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの2割のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。

HTMLから直接読み込まれているタグ ​

Google Tag Manager経由で読み込まれているタグ ​

Google Tag Manager は内部で9件のリソースを連鎖的に読み込んでおり、GTM の除去によってこれらもすべて除去されます。

除去シミュレーションの結果 ​

Google Tag Manager 除去後に 総合スコア が100から94に低下していますが、これは GTM の除去によって CLS が0.000から0.145に悪化したためです。GTM が実行していたスクリプトの除去により、Slickカルーセルの初期化タイミングが変化したことが原因で、この CLS の悪化は後続のボトルネック解消シミュレーションで対処しています。

サードパーティータグを全て除去した状態では、LCP は3.8秒から1.2秒へと2.6秒短縮される結果が得られました。特に Google Analytics (UA) と Google Tag Manager の影響が大きく、それぞれ単体で LCP を1秒以上短縮しています。これはあくまで上限値ですが、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

サイト固有のボトルネック ​

サードパーティータグの影響を除去した状態から、サイト固有のボトルネックを観察しました。全10件のボトルネック仮説を検証し、その中から特に影響の大きかった2件を紹介します。

ボトルネック: Public CDNからのJavaScript配信 ​

詳細レポート 差分コミット

観察された状況 ​

jQuery（ajax.googleapis.com）とlozad（cdn.jsdelivr.net）が、それぞれ異なるPublic CDNから配信されていました。HTML本体は www.afpbb.com から配信されていますが、これらのJavaScriptはそれとは別のドメインから読み込まれるため、各ドメインに対してDNS解決とTLSハンドシェイクが追加で発生していました。

なお、直前のシミュレーションステップでは、メインCSS（top-mobile.css）も afpbb.ismcdn.jp という別ドメインから配信されており、これも同一ドメインへ統合しています。CSSの同一ドメイン化単体では計測揺らぎの範囲でしたが、JavaScript 2ファイルの同一ドメイン化との組み合わせで大きな変化が現れました。

解消シミュレーションの方法 ​

jQuery、lozad、メインCSSの配信元を全て www.afpbb.com（HTMLと同一ドメイン）に変更しました。HTTP/2環境では、同一ドメインからの配信であれば既に確立済みの接続を再利用でき、追加のDNS解決やTLSハンドシェイクが不要になります。

シミュレーション結果 ​

LCP が1.2秒から0.6秒へと半減しており、外部ドメインへの接続オーバーヘッドが LCP に与えていた影響の大きさが読み取れます。このシミュレーション結果は、CSS同一ドメイン化とJavaScript同一ドメイン化の複合的な効果を含んでいます。

解消前	解消後

ボトルネック: カルーセルのレイアウト不安定 ​

詳細レポート 差分コミット

観察された状況 ​

トップストーリーセクションでSlick.jsによるカルーセルが使用されていますが、Slick.jsの初期化時にDOM構造が <ul> から .slick-track / .slick-slide に変換されます。この変換に伴い、カルーセル内の見出し要素（h3.thumbtitle）の位置がずれ、CLS = 0.145という大きなレイアウトシフトが発生していました。

解消シミュレーションの方法 ​

CSS の contain: strict を使ってカルーセル内部のレイアウト変化を外部に波及しないよう隔離し、display: flex と固定幅の指定によってSlick.js初期化前でも安定したレイアウトを確保しました。

シミュレーション結果 ​

CLS が0.145から0.067へと54%減少し、総合スコア が5ポイント向上するシミュレーション結果が得られました。CLS（Cumulative Layout Shift = ページ読み込み中に発生するレイアウトのずれ）が 総合スコア に与えていた影響の大きさが分かります。

解消前	解消後

まとめ ​

AFPBB Newsのトップページでは、サードパーティータグ（Google Analytics (UA)、Google Tag Manager、Taboola 等）が LCP に対して合計2.6秒の影響を与えていたことが、除去シミュレーションから読み取れました。

サイト固有のボトルネックとしては、jQuery・lozad・CSSが3つの異なる外部ドメインから配信されていたことが LCP を0.6秒押し上げており、同一ドメインへの統合シミュレーションで LCP が半減する結果が得られました。また、Slickカルーセルの初期化に伴うレイアウトシフトが CLS = 0.145として表れており、CSS containmentによる隔離で 総合スコア が5ポイント向上するシミュレーション結果が観測されました。

全体として、観測時点の 総合スコア 89に対して解消シミュレーション後は99となり、LCP は3.8秒から0.6秒へと変化しています。サイト自体のJavaScript構成は軽量（TBT = 0ms）であり、ボトルネックは主にリソース配信の構成とサードパーティータグに起因するものでした。