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

CNET Japanは、テクノロジーとビジネスの最新ニュースを配信するテクノロジーメディアサイトです。IT・ビジネス分野を中心に、国内外の製品レビューやインタビュー、コラムなどを掲載しています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

総合スコア が74から100へと26ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が6.0秒から1.3秒へ、SI（Speed Index = ビューの視覚的な表示進捗の速さ）が5.3秒から1.5秒へと大きな変化が観測されており、表示速度に強く影響するボトルネックが存在していたことが読み取れます。

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

本サイトは観測時点でも十分に高速ですが、解消シミュレーション後はそれよりさらにワンテンポ早く表示されるようになった様子が見て取れます。

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

詳細レポート

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

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

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

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

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

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

サードパーティータグを全て除去した状態では、総合スコア は74から100へ変化し、LCP は6.0秒から1.9秒へ、リソース数は264件から69件へと195件減少する結果が得られました。特にGTMの除去では、GTM経由で連鎖的に読み込まれていた126件のリソースが一括で不要となりました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

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

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

ボトルネック: パブリックCDNリソースの外部ドメイン配信 ​

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

観察された状況 ​

jQuery と jQuery UI が ajax.googleapis.com から配信されていました。HTMLの配信元である japan.cnet.com とは異なるドメインであるため、これらのリソースを取得するたびにDNSルックアップとTLS接続のオーバーヘッドが発生していました。jQuery はページ描画に直結するJavaScriptライブラリであり、その取得遅延は FCP に直接影響します。

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

jQuery と jQuery UI の配信元を ajax.googleapis.com から japan.cnet.com（HTMLと同一ドメイン）に変更するシミュレーションを行いました。これにより、既存のHTTP接続を再利用でき、DNSルックアップとTLS接続のオーバーヘッドが解消されます。

シミュレーション結果 ​

解消前	解消後

FCP が0.6秒から0.2秒へと約0.4秒短縮される結果が得られました。パブリックCDNは広く利用されるホスティングサービスですが、HTMLと異なるドメインからリソースを取得する際の接続コストが FCP に与えていた影響の大きさが、このシミュレーション結果から読み取れます。

ボトルネック: 画像フォーマットの未最適化 ​

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

観察された状況 ​

ページ内の39枚の画像がJPEGまたはPNG形式で配信されており、画像転送量の合計は約1.23MBに達していました。これにはLCP要素となるメイン画像も含まれており、画像サイズの大きさが LCP の遅延に寄与していました。

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

39枚のJPEG/PNG画像をすべてWebP形式に変換するシミュレーションを行いました。変換後の画像転送量は395.8KBとなり、約68.6%の削減となりました。

シミュレーション結果 ​

解消前	解消後

画像転送量を68.6%削減したことで、LCP が約0.4秒短縮される結果が得られました。画像フォーマットの違いだけでこれだけの差が生じており、特にLCP要素が画像である場合、フォーマットの最適化が表示速度に与える影響の大きさが分かります。

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

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

観察された状況 ​

CSS内に2つの @import 文が記述されており、fonts.googleapis.com からMaterial Symbols SharpフォントとUbuntuフォントが読み込まれていました。CSSの @import はCSSパース中に追加のHTTPリクエストを発生させるため、外部ドメインへのDNSルックアップ、TLS接続、フォントCSSの取得、フォントファイルの取得という連鎖的なリクエストが発生し、レンダリングがブロックされていました。

このシミュレーションではフォントの @import を除去しているため、テキストの見た目が変わることを前提としています。

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

CSS内の2つの @import url('https://fonts.googleapis.com/...') 文を除去するシミュレーションを行いました。

シミュレーション結果 ​

解消前	解消後

このボトルネックは単体での数値変化が小さく、ms単位の秒換算では変化として表れませんでした（LCP -69ms、FCP -27ms）。ただし、@import によるフォント読み込みは外部ドメインへの連鎖的なリクエストを発生させる構造であり、ネットワーク状況によっては表示遅延の要因となり得ます。日本語Webフォントほどのデータ量ではありませんが、CSSの @import による外部リソース取得がレンダリングパスに組み込まれている点は、表示速度の観点から注目に値する構造です。

まとめ ​

CNET Japanトップページの表示速度について、ボトルネックの観察とシミュレーションを行いました。

最も大きな影響を与えていたのはサードパーティータグでした。広告配信（Google Ad Manager）、データ分析（Treasure Data）、ソーシャル連携（Facebook SDK）、そしてGTM経由の各種広告タグなど、合計195件のリソースが読み込まれており、これらの除去シミュレーションでは 総合スコア が74から100へ、LCP が6.0秒から1.9秒へ変化する結果が得られました。メディアサイトとして広告配信は事業の根幹に関わる要素であり、完全な除去は現実的ではありませんが、その影響の大きさは数値として明確に表れています。

サイト固有のボトルネックとしては、パブリックCDNからの外部ドメイン配信が FCP に0.4秒の影響を与えていたこと、画像フォーマットの未最適化が LCP に0.4秒の影響を与えていたことが、それぞれのシミュレーション結果から立証されました。いずれもサイトの見た目や機能に影響を与えることなく解消可能な技術的要因であり、ボトルネックとしての影響の大きさが際立っています。