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

JINS（ジンズ）は、高品質なメガネ・サングラスを手頃な価格で提供するアイウエアブランドです。公式オンラインショップでは、度付きレンズ付きメガネのオンライン購入やバーチャル試着など、EC特有の機能を多数備えています。このトップページのモバイル表示速度について、どのようなボトルネックが存在するかを研究しました。

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

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

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

観測時点で 総合スコア 98と高い水準にあるサイトですが、SI（Speed Index = ビューの視覚的な表示進捗の速さ）が4.2秒と比較的大きな値を示していました。シミュレーションでは SI が0.7秒まで変化し、体感速度に直結する部分に複数のボトルネックが存在していたことが読み取れます。

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

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

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

詳細レポート

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

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

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

JINSオンラインショップのトップページでは、以下のサードパーティータグが確認されました。

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

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

段階的に除去した際の指標の推移は次のとおりです。

サードパーティータグを全て除去した状態では、総合スコア は98から100へ、SI は4.2秒から2.0秒へ変化し、リソース数は413件から235件へと178件（43%）減少する結果が得られました。特に GTM 経由で160件ものリソースがロードされていた点が目を引きます。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

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

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

ボトルネック1: CSSファイルが9つに分割配信されている ​

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

観察された状況 ​

同一ドメイン（www.jins.com）から配信されている CSS ファイルが9つに分割されており、それぞれが独立した <link rel="stylesheet"> として読み込まれている状態が観測されました。CSS はレンダリングブロックリソース（読み込みが完了するまでページの描画が停止するリソース）であるため、リクエスト数の多さが描画開始までの時間に影響を及ぼしていました。

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

9つの CSS ファイルを1つのファイルに結合し、HTMLからの参照を1つの <link> 要素に変更しました。

<!-- 変更前: 9つのCSS -->
<link rel="stylesheet" href="/css/style2.css">
<link rel="stylesheet" href="/css/notosansjp_subset.css">
<link rel="stylesheet" href="/css/top_renew.css">
<link rel="stylesheet" href="/css/common_renew.css">
<!-- ...他5ファイル -->

<!-- 変更後: 1ファイルに結合 -->
<link rel="stylesheet" href="/css/style2.css">

シミュレーション結果 ​

CSS ファイルの結合により SI が約1秒短縮されるという結果が得られました。9つの個別リクエストによるレンダリングブロックの累積が、SI に対して無視できないボトルネックとなっていたことがこの数値から読み取れます。

なお、CSSの統合・1ファイル化は、現在では HTTP/2 の普及などにより必ずしも有効なプラクティスとは限りません。今回のシミュレーションのように良好な結果が観測されることもありますが、参考程度にとどめてください。

ボトルネック2: JPEG/PNG画像がWebP未変換のまま配信されている ​

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

観察された状況 ​

サイト内の画像がJPEG/PNG形式で配信されており、より効率的な次世代フォーマット（WebP）への変換が行われていない状態でした。特に LCP（Largest Contentful Paint）対象であるトップバナー画像は337KBのJPEG形式で、帯域を大きく消費していました。

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

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

特に LCP 対象のトップバナー画像は337KBから82.4KBへと75.5%の削減となりました。

シミュレーション結果 ​

画像の転送サイズが合計1.09MB削減されたことで、LCP の短縮につながりました。LCP 対象画像の75.5%のサイズ削減が、描画速度の改善に直結していることがこの結果から読み取れます。

ボトルネック3: 日本語Webフォント（TazuganeGothic）の読み込み ​

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

観察された状況 ​

cdn.fonts.net 経由で日本語Webフォント TazuganeGothic が読み込まれており、2ファイル合計で約4.7MBという大きな転送量が発生していました。全リソースの転送量の中で最大であり、フォント関連転送量の97%を占めていました。日本語Webフォントは収録文字数の多さから英語フォントとは桁違いのデータサイズとなるため、その影響は小さくありません。

このシミュレーションはサイトのフォントの見た目が変わることを前提に行いました。

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

cdn.fonts.net からのフォント読み込みを除去し、CSS の font-family 指定をシステムフォント（sans-serif）にフォールバックする変更を加えました。CSS 内の TazuganeGothicStdN への参照105箇所を sans-serif に置換し、Noto Sans Japanese の @font-face ブロック12件も除去しています。

シミュレーション結果 ​

約4.7MBの転送サイズ削減によって LCP が0.5秒短縮されるという結果が得られました。日本語Webフォントは美しい書体表現を実現する一方、そのデータ量の大きさが表示速度に与える影響は、この数値から明確に読み取ることができます。

まとめ ​

JINS公式オンラインショップのトップページを観測したところ、総合スコア 98と高水準ながら、SI 4.2秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

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

• サードパーティータグの集合体: 19種類以上・178件のリソースが除去対象となり、SI が4.2秒から2.0秒へ変化。特に GTM 経由で160件のリソースがロードされていた影響が大きいことが確認されました。
• CSSファイルの分割配信: 9ファイルの結合により SI が約1秒短縮。レンダリングブロックの累積が体感速度に影響していました。
• JPEG/PNG画像の未最適化: WebP変換による画像サイズ60.3%削減で LCP が0.2秒短縮。LCP 対象画像は75.5%のサイズ削減でした。
• 日本語Webフォント（TazuganeGothic）: 約4.7MBのフォント除去により LCP が0.5秒短縮。全リソース中で最大の転送量を占めていました。

全ボトルネックの解消シミュレーションを重ねた結果、SI は4.2秒から0.7秒へと変化しました。総合スコア 98という高い水準のサイトであっても、体感速度の面ではこれだけの改善ポテンシャルが潜在していたことが、この一連のシミュレーションによって確認できた形です。