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

Billboard Japanは、米Billboard誌の日本版として音楽チャート・ニュース・アーティスト情報を発信するメディアサイトです。「JP Hot 100」をはじめとする各種チャートランキングや、音楽業界の最新ニュースを幅広く掲載しています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア が70から100へと30ポイント変化するというシミュレーション結果が得られました。特に SI（Speed Index = ビューの視覚的な表示進捗の速さ）が8.3秒から1.2秒へと大幅に変化しており、CLS（Cumulative Layout Shift = ページ読み込み中のレイアウトのズレ）も0.530から0.002へと劇的な変化が観測されました。

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

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

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

詳細レポート

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

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

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

billboard-japan.comで確認されたサードパーティータグは54種類と非常に多く、以下はその主要なものです。

広告関連タグ ​

その他、Bidswitch、StackAdapt、Adobe Demdex、The Trade Desk、Opera Ads、Tapad、SimpliFi、Semasio、Dotomi、Appier、Everest Tech、Zemanta、Dynalyst、Docomo、MicroAd、Ladsp、Turn/Amobee、RLCDn、ID5、FOUT、a-mo.net、Temuなど、Cookie同期用タグを含む多数のタグが確認されました。

SNS・トラッキング・分析関連タグ ​

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

サードパーティータグを全て除去した状態では、リソース数が485から153へ68%削減、転送サイズが12.69MBから7.01MBへ45%削減され、SI は8.3秒から1.1秒へと87%短縮される結果が得られました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。以降のセクションでは、この状態を起点としてサイト固有のボトルネックを観察していきます。

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

サードパーティータグの影響を切り離した状態を起点として、サイト固有のボトルネックを調査しました。本研究では全9件のボトルネック仮説を検証しています。その中から、特に影響の大きかった3件を紹介します。

ボトルネック1: 画像にwidth/height属性が未指定 ​

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

観察された状況 ​

HTMLの74箇所すべての <img> 要素に width / height 属性が指定されていない状態が観測されました。ブラウザは画像のダウンロードが完了するまで画像の表示領域を確保できず、読み込み完了時にレイアウトが大きくずれていました。CLS が0.721という極めて高い値を示しており、その最大の原因がこの属性の不足にあることが特定されました。

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

全74箇所の <img> 要素に width / height 属性を追加し、CSSで img { max-width: 100%; height: auto; } を併用することで、レスポンシブデザインとの互換性を維持しながらレイアウトシフトの解消を図りました。あわせて、Google Fonts（Poppins）に font-display: swap を追加し、フォント由来のレイアウトシフトも軽減しています。

<!-- 変更前 -->
<img src="/common/sys/img/specialbanner/1634/image_l_1.jpg" alt="">

<!-- 変更後 -->
<img src="/common/sys/img/specialbanner/1634/image_l_1.jpg" alt="" width="1327" height="886">

シミュレーション結果 ​

CLS が0.721から0.002へと劇的に変化し、総合スコア も76から100へ24ポイント上昇するという結果が得られました。width / height 属性の不足がページ全体の安定性とスコアに与えていた影響の大きさが、このシミュレーションから明確に読み取れます。

ボトルネック2: JPEG/PNG画像がWebP未変換 ​

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

観察された状況 ​

LCP 対象画像（トップバナー）は989KBのJPEGで、解像度1327x886pxでした。モバイル表示では412x275px程度で表示されており、必要以上に大きなファイルサイズが転送されていることが観測されました。同様にサイト内の計34枚のJPEG/PNG画像が未最適化のまま配信されていました。

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

34枚のJPEG/PNG画像をWebP形式に変換し、HTMLの参照先を変更しました。LCP 画像は989KBから153KBへ84.5%削減、全体では3.67MBから691.6KBへ81.6%削減されています。

シミュレーション結果 ​

LCP が1.7秒から1.0秒へと0.7秒短縮されました。画像フォーマットの違いだけで LCP にこれだけの差が生じるという結果から、画像の未最適化が表示速度に対して無視できない影響を持っていたことが読み取れます。

ボトルネック3: テキストリソースのGZIP未圧縮 ​

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

観察された状況 ​

www.billboard-japan.com ドメイン上のCSS 12ファイル、JS 22ファイルなど計35ファイルのテキストリソースがGZIP圧縮なしで配信されている状態が観測されました。HTMLのみGZIP圧縮済みでしたが、CSS/JSは非圧縮のまま転送されており、ネットワーク帯域を余分に消費していました。

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

CSS/JSファイルにGZIP圧縮を適用した状態を作成し、その影響を計測しました。CSSは215.2KBから35.4KBへ84%削減、JSは425.8KBから107.1KBへ75%削減されています。

シミュレーション結果 ​

GZIP圧縮の適用により FCP が0.1秒、LCP が0.2秒短縮される結果が得られました。サーバー設定のみで対応可能なテキスト圧縮が未適用であったことが、複数の指標に影響を与えていたことが確認できます。

まとめ ​

Billboard Japan（billboard-japan.com）の表示速度を観測したところ、総合スコア 70、CLS 0.530、SI 8.3秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

観測されたボトルネックとその影響は次のように整理できます。

• サードパーティータグ（54種類）の集合体: 除去によってリソース数が68%削減、転送サイズが45%削減。SI は8.3秒から1.1秒へ87%変化しました。
• 画像へのwidth/height属性未指定: 属性追加により CLS が0.721から0.002へ変化し、総合スコア が24ポイント上昇。最も影響の大きかったボトルネックです。
• JPEG/PNG画像の未WebP変換: WebP変換により LCP が0.7秒短縮。LCP画像単体で84.5%のファイルサイズ削減が観測されました。
• テキストリソースのGZIP未圧縮: 圧縮適用により FCP・LCP・SI のいずれも短縮が観測されました。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は70から100へ、CLS は0.530から0.002へ、SI は8.3秒から1.2秒へと変化しました。観測された各要素がそれぞれ独立して指標に与えていた影響の大きさが、この一連のシミュレーションによって確認できた形です。