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

Forbes JAPANは、米国の経済誌Forbesの日本版として、ビジネス・テクノロジー・ライフスタイルなど幅広い分野の記事を配信するメディアサイトです。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

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

なお、TBT（Total Blocking Time = メインスレッドのブロック時間）は観測時点で既に0msであり、JavaScriptの実行によるブロッキングは観測されませんでした。

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

本サイトは観測時点でも表示が早く、解消シミュレーション後との差は読み込みプロセス動画上では微妙なものにとどまっています。

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

詳細レポート

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

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

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

forbesjapan.comでは30種類97リソースのサードパーティータグが確認されました。以下に種別ごとの一覧を示します。

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

GTM経由で読み込まれるタグ ​

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

サードパーティータグを一括除去した際の指標変化は以下のとおりです。

サードパーティータグを全て除去した状態では、総合スコア は73から100へ変化し、LCP は6.7秒から0.5秒まで短縮される結果が得られました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

特筆すべきは、サードパーティータグを除去しただけで 総合スコア が100に達した点です。この結果から、Forbes JAPANのサイト自体の構成は十分に高速であり、パフォーマンス低下の主因は30種類97リソースにおよぶサードパーティータグにあったことが分かります。

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

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

ボトルネック: Google Fontsによるレンダリングブロック ​

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

観察された状況 ​

Google Fontsから3書体（Noto Sans JP、Lato、Roboto Condensed）が読み込まれており、合計47リソース（1.16MB）を消費していました。特に Noto Sans JP のCSSは同期読み込みされており、Lighthouse のトレース分析では116msのレンダリングブロックとして検出されていました。

日本語Webフォントはアルファベットフォントと異なり、文字数の多さからUnicode範囲ごとに分割された44個のwoff2ファイル（合計823KB）をダウンロードする必要があり、データ量が桁違いに大きくなります。デザインとしてWebフォントを使いたい意図は理解できますが、表示速度への影響もまた大きいものでした。

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

Google Fonts 3書体の読み込みを全て廃止し、OSのシステムフォントにフォールバックさせました。HTML内の <link> タグ（dns-prefetch、preconnect、stylesheet）を削除しています。このシミュレーションはサイトのフォントの見た目が変わることを前提に行いました。

シミュレーション結果 ​

FCP は341msから269msへと72ms（21%）短縮される結果が得られました。レンダリングブロックCSS（116ms）の解消が主因です。転送サイズも2.93MBから1.77MBへと1.16MB削減されており、日本語Webフォントが転送量に与えていた影響の大きさが読み取れます。

ボトルネック: PNG画像のフォーマット ​

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

観察された状況 ​

サイト内で使用されている画像のうち24枚がPNG形式で配信されていました。合計サイズは1.06MBです。

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

PNG画像24枚をWebP形式に変換しました。レグレッションテストでは視覚的な差異は検出されず（Diff Percent 0.00%）、見た目の変化なくデータ量のみを削減するシミュレーションです。

シミュレーション結果 ​

総合スコア や LCP への直接的な影響は限定的でしたが、転送サイズは345KB（31.7%）削減されました。特にアイコン系の画像では80%以上の削減率が観測されたものもあります。Lighthouse スコアには表れにくいものの、通信環境の悪い端末での体験に影響する要素です。

まとめ ​

Forbes JAPANトップページの表示速度を研究した結果、以下のボトルネックが観測されました。

最も影響が大きかったのはサードパーティータグです。30種類97リソースのタグが LCP を6.2秒、総合スコア を27ポイント押し下げていたことがシミュレーションで立証されました。サードパーティータグを除去しただけで 総合スコア が100に達したことから、サイト自体の構成は高速であり、タグの負荷が支配的であったことが分かります。

サイト固有のボトルネックとしては、Google Fonts（特にNoto Sans JP）のレンダリングブロックが FCP を21%押し下げ、転送量を1.16MB増加させていました。またPNG画像のフォーマットも345KBの転送量増に寄与していました。

これらの結果から、Forbes JAPANのパフォーマンス課題はサイト構成そのものよりも、外部リソース（サードパーティータグとWebフォント）に起因する部分が大きいことが読み取れます。