「ASCII.jp」トップページの表示速度ボトルネック研究

ASCII.jpは、KADOKAWAグループのアスキー・メディアワークスが運営する総合IT情報サイトです。PC・スマートフォン・デジタルガジェットのレビューやニュースを中心に、幅広いジャンルの技術情報を配信しています。本記事では、モバイル環境におけるトップページの表示速度に関するボトルネック研究の観測結果を記録します。

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

観測時点	解消シミュレーション後

本サイトは観測時点で 総合スコア 71、LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）11.6秒という値が記録されていました。TBT（Total Blocking Time = メインスレッドのブロック時間）は0msでメインスレッド負荷にはボトルネックが存在しない一方、LCP と FCP（First Contentful Paint = 最初のコンテンツ描画までの時間）に大きなボトルネックが観測されました。ボトルネックを段階的に解消するシミュレーションの結果、LCP が0.1秒まで変化する結果が得られました。

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

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

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

詳細レポート

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

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

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

ASCII.jpで確認されたサードパーティータグは以下の通りです。広告配信・Header Bidding連携を中心に、計測・プッシュ通知を含む多数のタグが読み込まれており、合計で203件のサードパーティリソースが確認されました。

これら全てのサードパーティータグを除去したシミュレーション結果は以下の通りです。

サードパーティータグを全て除去した状態では、総合スコア は71から100へ、LCP は11.6秒から0.4秒へ変化し、リソース数の68%がサードパーティータグ由来であったことが観測されました。この結果から、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

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

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

ボトルネック: Font Awesome CDNの外部ドメイン配信 ​

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

観察された状況 ​

Font AwesomeのCSSとWebfontファイルが maxcdn.bootstrapcdn.com という外部ドメインから配信されていました。外部ドメインからリソースを取得する場合、同一ドメインとは異なり、DNSルックアップやTLSハンドシェイクといった接続確立のための追加コストが発生します。CSSはレンダリングブロックリソースであるため、このオーバーヘッドが FCP の遅延として直接影響していました。

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

Font AwesomeのCSSとWebfontファイルをサイトと同一ドメイン（ascii.jp）から配信するように変更しました。CSS内の相対パスも同一ドメインの絶対URLに書き換えています。

シミュレーション結果 ​

FCP が0.4秒から0.1秒へと変化し、外部CDNからのCSS配信が FCP に与えていた影響の大きさが読み取れます。レンダリングブロックリソースの配信元ドメインが表示速度に直結するという構造が、このシミュレーション結果から明確に観測されました。

ボトルネック: 画像のWebP未変換 ​

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

観察された状況 ​

トップページに掲載されている61枚の画像がJPEGまたはPNG形式のままで配信されていました。画像総サイズは622KBにのぼり、より効率的な圧縮形式への変換余地がある状態でした。

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

61枚のJPEG/PNG画像をWebP形式に変換しました。

シミュレーション結果 ​

Lighthouse の指標上は計測誤差の範囲で数値変化は見られませんでしたが、画像転送量が54.2%削減されたという事実は注目に値します。特にモバイル環境やネットワーク帯域が限られる状況では、転送量の削減が体感速度や通信コストに影響するため、この削減幅は表示速度のボトルネック要因として無視できない規模です。

まとめ ​

ASCII.jpトップページの表示速度ボトルネックの実例研究では、LCP 11.6秒・総合スコア 71という観測時点の値から、ボトルネックを段階的に解消するシミュレーションを実施しました。

最も影響が大きかったのはサードパーティータグです。203件のサードパーティリソースが確認され、これらの除去により LCP が11.6秒から0.4秒へ変化する結果が得られました。広告配信やHeader Bidding連携が特に多く、リソース数全体の68%がサードパーティー由来でした。

サイト固有のボトルネックとしては、Font AwesomeのCSSが外部CDNから配信されていた点が FCP に大きく影響しており、同一ドメイン化のシミュレーションで FCP が0.4秒から0.1秒に変化しました。画像のWebP変換では Lighthouse スコア上の変化は小さかったものの、画像転送量が54.2%削減されるという結果が得られています。

これらの観測結果から、本サイトの表示速度を左右する主な要因は、大量のサードパーティータグと外部ドメインからのレンダリングブロックリソース配信にあったことが分かります。