サイトが重いと言われても、何が重いのかが分からなければ手を付けられません。
画像を圧縮しても表示が速くならないときは、JavaScriptの処理やフォント、サーバー応答など、別の要因も確認する必要があります。
この記事では、ページの重さを測り、画像・JavaScript・CSS・フォントの内訳から直す場所を決める方法を紹介します。
この記事で使うページ重量診断は、当サイトと同じMOTOKI合同会社が作った「WEBツール箱」の1つです。
無料で、会員登録なしで使えます。
最終確認日：2026年9月28日
この記事で分かること
- ページの重さの目安と、ツールでの測り方
- 内訳を見て、直す場所を1つに絞る方法
- 種類ごとの直し方（画像・JavaScript・CSS・フォント）
- 日本語フォントを、実際にどこまで軽くできたか
最初の答え｜合計より内訳を見る
| ページの重さ | 目安 |
|---|---|
| 1.5MB以下 | 軽い |
| 1.5〜3MB | やや重い |
| 3MBを超える | 重い |
上の1.5MB・3MBはこの記事の大まかな目安です。速度やSEOの合否基準ではなく、集計対象・通信条件によって値は変わります。
画像が大きな割合を占めるページもありますが、比率はページごとに異なります。
ただし、いちばん重い種類はサイトによって違います。
容量の内訳は、改善候補を探す出発点です。いちばん大きいファイルが表示の遅さの主因とは限らないため、初期表示で使うか、不要な読み込みかも確認して優先順位を決めます。
ツールで測る手順
- ページ重量診断を開く
- 調べたいページのURLを入れて「重さを測る」を押す
- カードで、ページ全体の重さと読み込みファイル数を見る
- 「内訳」で、HTML・CSS・JavaScript・画像・フォントのどれが重いかを見る
- 「重いファイル ワースト10」で、直すファイルを決める
ツールはページのHTMLを取得し、読み込むファイルを洗い出して、最大60件の転送量を実際に合計します。
結果は100点満点の点数と、A〜Eの5段階でも表示されます。
実測｜内訳で原因がまったく違う3ページ
| ページ | 合計 | ファイル数 | いちばん重い種類 |
|---|---|---|---|
| このサイトのトップ | 7.52MB | 61 | フォント 6.32MB |
| wp-cocoon.com のトップ | 2.81MB | 61 | JavaScript 1.19MB |
| WEBツール箱のトップ | 183.4KB | 8 | HTML 117KB |
同じWordPressのサイトでも、重さの中身はまったく違いました。
3ページとも、画像はいちばん重い種類ではありません。
このサイトのトップ｜フォントが8割以上
7.52MBのうち、フォント2ファイルが6.32MBを占めていました。
画像は18ファイルで268KB、JavaScriptは24ファイルで546KBです。
原因は、日本語フォント（Noto Sans JP）の太字と細字を、OTF形式のまま、ページの先頭で先読み（preload）させていたことでした。
OTFはパソコンにインストールするための形式で、Web用に圧縮されていません。
preloadを指定すると、ブラウザーはほかのファイルより先に、2本合わせて6MBを超えるフォントを取りに行きます。
追記（同日）：この2本は、使われる文字の多い順に分けたWOFF2に置き換えました。
ページに出てくる文字を含むファイルだけを読み込むので、ツールで測り直すと7.51MBが1.68MBになり、点数は14点から60点に上がりました。
字形は元のフォントのままで、見た目は変わっていません。
wp-cocoon.com のトップ｜JavaScriptがいちばん重い
2.81MBのうち、JavaScriptが20ファイルで1.19MBでした。
1位は、ソースコードに色を付けて表示するためのJavaScriptで、1本で725KBありました。
JavaScriptが重いときは、このように特定の機能のためのファイルが、その機能を使わないページでも読み込まれていないかを確かめます。
このページを再診断することもできます。ただし、掲載値は2026年9月28日の記録で、現在の結果と一致するとは限りません。
種類ごとの直し方
| いちばん重い種類 | よくある原因 | 直し方 |
|---|---|---|
| 画像 | スマホで撮った大きな写真をそのまま載せている | 掲載幅に合わせて縮小し、WebPと元画像の画質・容量を比較する |
| JavaScript | プラグインが全ページで読み込んでいる | 使っていないプラグインを止め、必要なページだけで読み込む |
| CSS | プラグインごとにCSSが増えている | 未使用CSSと重複読み込みを調べ、必要なページへの限定・圧縮を検討する |
| フォント | 日本語フォントを丸ごと読み込んでいる | WOFF2にし、使う文字だけに絞り、preloadを見直す |
| HTML | 一覧に記事を並べすぎている・大きな埋め込みがある | 一覧の件数を減らし、埋め込みを見直す |
画像の変換とリサイズは「画像をWebPに変換・リサイズする方法」で実測つきで解説しています。
SWELLでCSSとJavaScriptを減らす方法は「読み込みファイル（CSS/JS）を極力減らす方法」をご覧ください。
キャッシュ系プラグインのファイル結合は、レイアウトが崩れる原因になることもあるので、有効にしたあとは表示を確かめてください。
変更は1つずつ行い、同じ条件で比較する
変更前にURL・測定日時・端末・キャッシュの条件と結果を記録し、改善候補を1つだけ変更して再測定します。転送量が減ってもメニューやフォームが動かなくなれば改善とはいえません。トップだけでなく、画像の多い記事や問い合わせページも確認します。
ブラウザーで実際に取得したファイルを確認する場合は、Chrome DevToolsのNetworkパネルを使えます。記録を開始してから再読み込みし、キャッシュの有無をそろえて比較してください。このツールと取得範囲が違うため、合計値が一致することを合格条件にはしません。
CSSやフォントの設定を変更する前に元の設定を控え、1項目ずつ変更します。PC・スマホで本文、メニュー、フォーム、文字欠けを確認し、不具合が出たら元の設定へ戻してキャッシュを削除します。重量診断の点数は独自指標であり、Core Web Vitalsの合格を意味しません。
日本語フォントを軽くする3つの方法
このサイトで使っていた太字のフォント（3.25MB）を、実際に変換して大きさを測りました。
変換には、Pythonのフォント用ライブラリ fontTools を使いました。
| 形式・収録する文字 | 大きさ | 元との比較 |
|---|---|---|
| OTF（すべての文字） | 3.25MB | ― |
| WOFF2（すべての文字） | 2.20MB | 32%減 |
| WOFF2（JIS第1水準の漢字・かな・記号・英数字 3,584字） | 1.27MB | 61%減 |
| WOFF2（トップページで使う文字・かな・英数字 462字） | 117KB | 96%減 |
1｜WOFF2に変える
WOFF2は、Web用に圧縮されたフォントの形式で、主要なブラウザーはすべて対応しています。
形式を変えるだけで、収録する文字はそのままに、3分の2ほどの大きさになりました。
2｜使う文字だけに絞る（サブセット化）
日本語フォントは収録文字が多いので、使う文字だけに絞ると大きく減ります。
JIS第1水準の漢字（2,965字）まで残しても、元の4割ほどになりました。
トップページで使っている文字だけに絞ると117KBですが、記事を増やすと足りない文字が出てくるので、固定の見出しやロゴに使うフォント向けの方法です。
fontTools に入っている pyftsubset というコマンドでは、次のように書きます。
pyftsubset NotoSansJP-Bold.otf \
--text-file=chars.txt \
--flavor=woff2 \
--output-file=bold.woff2chars.txt には、残したい文字を並べておきます。
変換前に、使用するフォントの改変・Web配信の許諾を確認します。元ファイルを残し、出力名が既存ファイルと重ならないようにしてください。上の複数行コマンドはMac/Linuxのシェル向けで、Windowsのコマンドプロンプトではバックスラッシュと改行を除いて1行にまとめます。
WOFF2で書き出すには、brotli というライブラリも入れておく必要があります。
3｜preloadを見直す
preloadは、そのページを開いてすぐに使うファイルを、早めに取りに行かせる指定です。
大きなフォントを2本preloadすると、画像やCSSより先にフォントの取得が始まり、回線を占めてしまいます。
初期表示で実際に使うフォントを確認し、不要なpreloadを外します。残す本数は1本固定ではなく、ネットワークの計測結果から決めます。
残す場合も、WOFF2に変えたファイルを指定します。
<link rel="preload" as="font"
type="font/woff2"
href="/fonts/bold.woff2" crossorigin>Google Fontsから読み込む方法でのサブセットの考え方は「SWELL│Noto Sans JPのリクエスト数を下げて高速化する方法」で解説しています。
Google Fontsは、文字の範囲ごとに分けたWOFF2を配信するので、ページで使う範囲のファイルだけが読み込まれます。
デザイン上こだわりが無ければ、端末に入っているフォントを使い、Webフォントを読み込まないのがいちばん軽くなります。
このツールの限界
- ブラウザーではないので、JavaScriptで後から読み込まれるファイルは数えない
- CSSの中で指定された背景画像や、後から追加で読み込まれるWebフォントは数えない
- HTMLから洗い出したファイルへのリクエストは最大60件まで。HTML本体を含む合計の表示件数とは集計範囲を分けて確認する
- LCPやCLSなどの体感速度（Core Web Vitals）は測らない
掲載例は2026年9月28日の診断とフォント変換の記録です。今回、再測定や全ページの字形確認は行っていません。「最大60ファイル」と掲載結果の「61ファイル」では、HTMLを含むかなど集計対象の違いを確認できていません。結果の件数をブラウザーが実際に取得した全ファイル数とは扱わず、含まれるファイルと上限を確かめてください。
実際のページは、ツールの数字より重くなることがあります。
転送量で重いファイルを見つけて直したあとに、PageSpeed Insightsで体感速度を確かめる、という順番が効率的です。
サーバーの応答の速さは高速化診断で測れ、読み方は「WordPressのTTFBを改善する方法」で解説しています。
よくある質問
Q. PageSpeed Insightsの点数とは何が違いますか？
PageSpeed Insightsには、Lighthouseによるテスト環境の診断と、取得できる場合に表示される実ユーザーの過去28日間のデータがあります。両者は別の測定なので、更新直後の効果を過去28日間の値だけで判断しません。詳しくはGoogleの公式説明をご覧ください。
このツールは転送量そのものを測るので、どのファイルが何KBあるかがファイル単位で分かります。
点数が低い理由を探すときに、あわせて使うと原因を絞りやすくなります。
Q. 「読み込みファイル数が多めです」と出ました。
プラグインによってはCSSやJavaScriptを追加しますが、件数だけでは遅さや不要な機能を判断できません。ファイルの用途と読み込むページを確認します。
停止を試す場合は依存する機能がないか確認し、検証環境で1つずつ変更します。フォームやメニューなどの動作を確認してから本番へ反映してください。
プラグインの選び方は「入れるべきWordPressプラグイン／入れてはいけないプラグイン」でまとめています。
Q. トップページ以外も測ったほうがいいですか？
よく読まれている記事も測ってください。
記事ページは画像や埋め込みが多く、トップページと内訳が違うことがよくあります。
まとめ
- ページの重さはページ重量診断で測り、合計より内訳を見る
- 1.5MB・3MBは本記事の大まかな目安で、表示速度の合否基準ではない
- このサイトはフォント、wp-cocoon.comはJavaScript、というように、重い種類はサイトごとに違う
- 日本語フォントは、WOFF2化とサブセット化で、3.25MBが1.27MB〜117KBになった
- 初期表示に必要なフォントだけをpreloadし、変更前後の表示と読み込みを比較する
表示速度の改善の順番は、「ホームページ表示速度改善の手順と優先順位」でも整理しています。
ほかの項目もまとめて点検するなら、「WordPressサイトを自分で点検する手順」で順番と使い分けを解説しています。
ツールの一覧はWEBツール箱にあります。
