「ギズモード・ジャパン」トップページの表示速度ボトルネック研究

ギズモード・ジャパンは、日本最大級のガジェット・テクノロジー系メディアサイトです。スマートフォンやPC、最新のテクノロジーからサイエンス、エンターテイメントまで幅広い情報を扱っています。モバイル環境でのトップページの表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

観測時点で 総合スコア は94と高水準でしたが、LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）は2.4秒、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）は2.2秒という値でした。全ボトルネックを解消するシミュレーションでは、LCP が0.2秒、FCP が0.1秒まで変化し、SI（Speed Index = ビューの視覚的な表示進捗の速さ）も3.9秒から0.5秒へと大幅に変化する結果が得られました。スコアだけでは見えにくい表示速度上のボトルネックが存在していたことが読み取れます。

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

本サイトは観測時点でもそこまで遅いわけではありませんが、解消シミュレーション後はそれよりさらにワンテンポ早い表示が見て取れます。

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

詳細レポート

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

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

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

ギズモード・ジャパンのトップページでは、26件のサードパーティータグが確認されました。

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

GTM・広告ネットワーク経由で読み込まれるタグ ​

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

サードパーティータグを段階的に除去した際の指標変化を以下に示します。

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

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

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

ボトルネック: Google Fonts CSSの外部ドメイン配信 ​

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

観察された状況 ​

fonts.googleapis.com から3つのGoogle Fonts CSSファイルがレンダリングブロックリソースとして読み込まれていました。CSSはレンダリングブロックリソースであるため、ブラウザはこれらのダウンロードが完了するまでページの描画を停止します。外部ドメインからの配信であるため、DNSルックアップ、TCP接続、TLSハンドシェイクという追加の接続コストが発生し、合計で約517msの遅延が観測されていました。

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

Google Fonts CSSを fonts.googleapis.com からではなく、同一ドメイン（www.gizmodo.jp）から配信するようシミュレーションしました。CSS内で参照されるフォントファイル（fonts.gstatic.com）のURLはそのまま維持しています。フォントファイルはレンダリングブロックリソースではないため、外部ドメインからの配信でも FCP に影響しません。

シミュレーション結果 ​

FCP が0.7秒から0.1秒へ、約509msの短縮が観測されました。このシミュレーション結果から、レンダリングブロックCSSの配信元ドメインが FCP に与えていた影響の大きさが読み取れます。外部ドメインへの接続コストが FCP の大部分を占めていたことになります。

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

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

観察された状況 ​

head 要素内に配置されたjQuery（jquery.min.js）が、defer 属性や async 属性なしで読み込まれていました。script タグにこれらの属性がない場合、ブラウザはスクリプトのダウンロードと実行が完了するまでHTMLの解析を停止します（パーサーブロッキング）。この間、ページの描画が進まない状態が続きます。

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

jQueryの script タグに defer 属性を付与し、パーサーブロッキングを解消するシミュレーションを行いました。defer 属性によりスクリプトのダウンロードはHTMLの解析と並行して行われ、実行はHTML解析完了後に行われるようになります。

シミュレーション結果 ​

LCP が0.7秒から0.2秒へ、SI が0.9秒から0.5秒へ変化する結果が得られました。FCP への影響は観測されませんでしたが、LCP と SI には大きな変化が現れています。jQueryのダウンロード完了を待たずにレンダリングが開始されるようになったことで、主要コンテンツの表示タイミングが早まったことが読み取れます。

まとめ ​

ギズモード・ジャパンのトップページでは、観測時点の 総合スコア が94と比較的高いにもかかわらず、LCP 2.4秒・FCP 2.2秒という表示速度上のボトルネックが存在していました。

最大の要因はサードパーティータグでした。26件・140リソースのタグが転送サイズの76%を占めており、除去シミュレーションでは LCP が1.7秒短縮される結果が得られました。メディアサイトの収益構造上、広告タグの存在は避けられませんが、その影響の大きさは数値として明らかです。

サイト固有のボトルネックとしては、Google Fonts CSSの外部ドメイン配信が FCP に約509msの遅延をもたらしていたこと、jQueryのパーサーブロッキングが LCP を約513ms遅延させていたことが、それぞれのシミュレーション結果から立証されました。いずれもサイトの見た目や機能に影響を与えない技術的な要因であり、表示速度への影響の大きさが際立っています。