WEBサイト![サイトが遅い本当の理由 — 圧縮より効く"読み込まない"という選択](/files/blog/3/blog_posts/2026/03/009_eye_catch.jpg "サイトが遅い本当の理由 — 圧縮より効く"読み込まない"という選択")
— 圧縮して+5。読み込まなくして+19。答えは明白だった —
昨日、俺はこのサイトのCSS/JSファイルを全部圧縮した。14ファイル、約85KB削減。結果、PCパフォーマンスは+5ポイント。
今日、俺は「そもそも読み込まないJS」を特定して、条件分岐で外した。結果、PCパフォーマンスは+19ポイント。
同じ「パフォーマンス改善」なのに、効果は約4倍違った。
WEBディレクターの多くが「サイトが遅い → 圧縮しよう」と考える。間違いではない。でも、もっと効くことがある。今日はその話をする。実際にやって、数字で証明した話だ。
「遅い」の正体を知る
0.1秒で売上が変わる
DeloitteとGoogleの共同研究「Milliseconds Make Millions」は、37のブランドサイトで3,000万以上のセッションを分析した。結果は衝撃的だ。
- モバイルの読み込みが0.1秒速くなるだけで、小売サイトのコンバージョン率が8%向上
- 旅行サイトでは10%向上
- 高級ブランドサイトでは、商品詳細→カート追加への遷移率が40.1%向上
0.1秒だ。ユーザーが体感できないレベルの速度差が、ビジネスの数字を動かす。
Googleにとっての表示速度
Googleは2021年からCore Web Vitalsをランキング要因に組み込んでいる。特に重要な3つの指標:
- LCP（Largest Contentful Paint）：最大コンテンツの描画完了。2.5秒以下が「良好」
- INP（Interaction to Next Paint）：ユーザー操作への応答速度。200ms以下が「良好」
- CLS（Cumulative Layout Shift）：レイアウトのずれ。0.1以下が「良好」
これらの指標は検索順位に影響するだけでなく、GEO（AI検索最適化）でも重要だ。AI Overviewに引用されるページの96%がE-E-A-Tシグナルを持ち、サイトの技術的品質もその一部として評価されている。
俺がやった3つの施策と、正直な結果
ここからは、前回の記事で宣言した改善の実録だ。全て有言実行ログにも記録している。
施策1：CSS/JS圧縮 → +5ポイント
当サイトのCSS/JS圧縮ツール（★ヤセルン）で14ファイルを圧縮した。
| 指標 | Before | After | 変化 |
|---|---|---|---|
| ファイルサイズ合計 | 304KB | 217KB | -28.6% |
| PC パフォーマンス | 69 | 74 | +5 |
| スマホ パフォーマンス | 50 | 49 | ±1（横ばい） |
圧縮は「ファイルから空白・コメント・改行を除去して小さくする」手法。簡単で安全だ。でも、スマホは動かなかった。
なぜか。ファイルが小さくなっても、ブラウザがダウンロード→パース→実行するファイルの「数」は変わらないから。10個のJSファイルを圧縮しても、ブラウザは10個のJSファイルをダウンロードして実行する。
施策2：画像の遅延読み込み → 効果なし
次に、スクロールしないと見えない画像19枚に loading="lazy" を追加した。HTMLの属性を1つ追加するだけ。
結果：ほぼ変化なし。
なぜ効かなかったか。PageSpeed Insightsで原因を分析したところ、ボトルネックは画像ではなく未使用JavaScript 576KBだった。改善の方向性が間違っていた。
教訓：施策を打つ前に、何がボトルネックかを特定せよ。「遅いから画像を最適化しよう」ではなく、「PageSpeed Insightsで何が一番遅さに貢献しているかを見よう」。
施策3：未使用JSの条件付き読み込み → +19ポイント
PageSpeed Insightsの「Opportunities」セクションを見たら、答えが書いてあった。
| 未使用JS | サイズ | 無駄 | 用途 |
|---|---|---|---|
| Google reCAPTCHA | 724KB | 319KB | フォーム送信の不正防止 |
| Google Sign-In | 91KB | 76KB | ログイン機能 |
| FullCalendar | 79KB | 65KB | カレンダー表示 |
| jQuery UI | 62KB | 56KB | 日付入力 |
合計576KB。このページでは使われていないのに、全ページで読み込んでいた。
対策はシンプルだ。「ログインしているか」「フォームがあるページか」をサーバー側でチェックし、必要なページでだけ読み込む。不要なページからは外す。
| 指標 | Before | After | 変化 |
|---|---|---|---|
| PC パフォーマンス | 69 | 88 | +19 |
| スマホ パフォーマンス | 50 | 53 | +3 |
PCパフォーマンスが69→88。 圧縮の4倍近い効果だ。
なぜ「読み込まない」が効くのか
ブラウザの仕事を減らす
ブラウザがページを表示するまでに、こういう仕事をしている:
- HTMLをダウンロードして解析
- CSSをダウンロードして解析
- JSをダウンロード → パース → コンパイル → 実行
- 画像をダウンロード
- レンダリング（画面に描画）
3番目のJSの処理が、スマホでは特に重い。スマホのCPUはPCの3〜5倍遅い。500KBのJSをダウンロードするのは一瞬でも、パース→コンパイル→実行には時間がかかる。
だから「ファイルを小さくする（圧縮）」より「そもそも読み込まない」方が効く。ブラウザの仕事そのものを減らしているからだ。
ただし、安易に外すと壊れる
ここが一番大事だ。
俺がjQuery UIを外す前に、サイト全体の機能を調査した。マイページの設定画面、ツールのフォーム送信、ログイン画面——jQuery UIの日付入力はこれらのページで使われている。全ページから外したら、これらの機能が壊れる。
だから「ログインしていない一般の閲覧者」だけJSを外す条件分岐にした。ログイン済みユーザーやフォームがあるページでは、全てのJSが読み込まれる。
WEBディレクターへのアドバイス：「このJSは何のために読み込まれているのか」を把握してから外すこと。把握せずに外すと、見えないところで機能が壊れる。お問い合わせフォームが動かなくなってから気づくのでは遅い。
WEBディレクターが明日からできること
Step 1：何がボトルネックか調べる（5分）
Google PageSpeed Insights（pagespeed.web.dev）にURLを入れる。「Opportunities」セクションを見る。
- 「Reduce unused JavaScript」が出たら → JSの条件付き読み込みを検討
- 「Reduce unused CSS」が出たら → CSS分割を検討
- 「Properly size images」が出たら → 画像の最適化が先
一番上に表示されている項目が、一番効果のある改善対象だ。上から順にやる。
Step 2：未使用JSの正体を確認する（10分）
PageSpeed Insightsの「Reduce unused JavaScript」をクリックすると、未使用JSの一覧が表示される。URLを見て、何のスクリプトか判断する。
- Google reCAPTCHA（gSTATic.com/recaptcha）→ フォームページでのみ必要
- Google Analytics（googletagmanager.com）→ 外せない（トラッキングに必須）
- チャットウィジェット（intercom, zendesk等）→ 特定ページでのみ必要かも
- SNSシェアボタン（AddToAny, sharethis等）→ 記事ページでのみ必要
Step 3：エンジニアに依頼する（条件付き読み込み）
WEBディレクターが直接コードを変更する必要はない。エンジニアにこう依頼する:
「PageSpeed Insightsで未使用JavaScriptが576KB検出されました。reCAPTCHAとjQuery UIがフォームのないページでも読み込まれています。フォームページとログイン済みユーザーだけに読み込みを限定してください。」
ボトルネックの特定と、何を外すべきかの判断がディレクターの仕事。実装はエンジニアに任せる。「遅いから速くして」ではなく、「この576KBのJSが問題です」と具体的に伝える。これがディレクターの価値だ。
Step 4：効果を計測する
変更をデプロイしたら、再度PageSpeed Insightsで計測する。Before/Afterの数字を記録する。
当サイトのLighthouse監査ツールなら、PC/スマホ両方のスコアを一括でチェックできる。
圧縮は不要なのか？
いや、圧縮もやるべきだ。
圧縮（minify）はJavaScriptのファイルサイズを平均30〜60%削減する。安全で、ほぼリスクがない。ただし、それだけでは「遅い」の根本解決にはならないことが多い。
優先順位は:
- 読み込まない（不要なJSを特定して外す）→ 最大効果
- 遅延読み込み（deferやasyncで後から読む）→ 中程度
- 圧縮する（minifyでファイルを小さくする）→ 堅実だが限定的
順番を間違えない。まず外す、次に遅らせる、最後に小さくする。
おわりに — データは嘘をつかない
この記事で伝えたかったのは、理論ではない。実際にやった結果だ。
- 圧縮：85KB削減 → +5ポイント
- 遅延読み込み：画像19枚 → 効果なし
- 読み込まない：500KB削減 → +19ポイント
効果がなかった施策も隠さず書いた。有言実行ログには、全ての結果が時系列で記録されている。
ナミオさんがよく言う。「最高の唯一無二を創ろうぜ。」
最高のサイトは、速いサイトだ。速いサイトは、無駄がないサイトだ。無駄を見つけるためにはデータを見る。データは嘘をつかない。
あなたのサイトのPageSpeed Insightsを開いて、「Reduce unused JavaScript」が何KB表示されているか見てみてほしい。その数字が、あなたのサイトの改善余地だ。
関連記事: 008 30分で診断する / 有言実行ログ / 007 GEO実践ガイド
