サイトが重いと言われても、何が重いのかが分からなければ手を付けられません。
画像を圧縮しても速くならなかった、という相談の多くは、重いのが画像ではなかったケースです。
この記事では、ページの重さを測り、画像・JavaScript・CSS・フォントの内訳から直す場所を決める方法を紹介します。
この記事で使うページ重量診断は、当サイトと同じMOTOKI合同会社が作った「WEBツール箱」の1つです。
無料で、会員登録なしで使えます。
最終確認日：2026年9月28日
この記事で分かること
- ページの重さの目安と、ツールでの測り方
- 内訳を見て、直す場所を1つに絞る方法
- 種類ごとの直し方（画像・JavaScript・CSS・フォント）
- 日本語フォントを、実際にどこまで軽くできたか
最初の答え｜合計より内訳を見る
| ページの重さ | 目安 |
|---|---|
| 1.5MB以下 | 軽い |
| 1.5〜3MB | やや重い |
| 3MBを超える | 重い |
画像が大きな割合を占めるページもありますが、比率はページごとに異なります。
ただし、いちばん重い種類はサイトによって違います。
合計の数字を見て画像から手を付けるのではなく、内訳でいちばん大きい種類を確かめてから直すと、無駄な作業が減ります。
ツールで測る手順
- ページ重量診断を開く
- 調べたいページの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が重いときは、このように特定の機能のためのファイルが、その機能を使わないページでも読み込まれていないかを確かめます。
同じ結果はこの診断をいま開くと確かめられます。
種類ごとの直し方
| いちばん重い種類 | よくある原因 | 直し方 |
|---|---|---|
| 画像 | スマホで撮った大きな写真をそのまま載せている | WebPに変換し、幅を1200〜1600pxに縮める |
| JavaScript | プラグインが全ページで読み込んでいる | 使っていないプラグインを止め、必要なページだけで読み込む |
| CSS | プラグインごとにCSSが増えている | 未使用CSSと重複読み込みを調べ、必要なページへの限定・圧縮を検討する |
| フォント | 日本語フォントを丸ごと読み込んでいる | WOFF2にし、使う文字だけに絞り、preloadを見直す |
| HTML | 一覧に記事を並べすぎている・大きな埋め込みがある | 一覧の件数を減らし、埋め込みを見直す |
画像の変換とリサイズは「画像をWebPに変換・リサイズする方法」で実測つきで解説しています。
SWELLでCSSとJavaScriptを減らす方法は「読み込みファイル（CSS/JS）を極力減らす方法」をご覧ください。
キャッシュ系プラグインのファイル結合は、レイアウトが崩れる原因になることもあるので、有効にしたあとは表示を確かめてください。
日本語フォントを軽くする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 には、残したい文字を並べておきます。
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フォントは数えない
- 数えるのは最大60ファイルまで
- LCPやCLSなどの体感速度（Core Web Vitals）は測らない
実際のページは、ツールの数字より重くなることがあります。
転送量で重いファイルを見つけて直したあとに、PageSpeed Insightsで体感速度を確かめる、という順番が効率的です。
サーバーの応答の速さは高速化診断で測れ、読み方は「WordPressのTTFBを改善する方法」で解説しています。
よくある質問
Q. PageSpeed Insightsの点数とは何が違いますか？
PageSpeed Insightsは、ブラウザーで実際に描画して体感速度を測ります。
このツールは転送量そのものを測るので、どのファイルが何KBあるかがファイル単位で分かります。
点数が低い理由を探すときに、あわせて使うと原因を絞りやすくなります。
Q. 「読み込みファイル数が多めです」と出ました。
プラグインを入れるたびに、そのプラグイン用のCSSやJavaScriptが増えていきます。
使っていないプラグインを止めるだけでも減ります。
プラグインの選び方は「入れるべきWordPressプラグイン／入れてはいけないプラグイン」でまとめています。
Q. トップページ以外も測ったほうがいいですか？
よく読まれている記事も測ってください。
記事ページは画像や埋め込みが多く、トップページと内訳が違うことがよくあります。
まとめ
- ページの重さはページ重量診断で測り、合計より内訳を見る
- 1.5MB・3MBは本記事の大まかな目安で、表示速度の合否基準ではない
- このサイトはフォント、wp-cocoon.comはJavaScript、というように、重い種類はサイトごとに違う
- 日本語フォントは、WOFF2化とサブセット化で、3.25MBが1.27MB〜117KBになった
- 初期表示に必要なフォントだけをpreloadし、変更前後の表示と読み込みを比較する
表示速度の改善の順番は、「ホームページ表示速度改善の手順と優先順位」でも整理しています。
ほかの項目もまとめて点検するなら、「WordPressサイトを自分で点検する手順」で順番と使い分けを解説しています。
ツールの一覧はWEBツール箱にあります。
CSSやフォントの設定を変更する前に元の設定を控え、1項目ずつ変更します。PC・スマホで本文、メニュー、フォーム、文字欠けを確認し、不具合が出たら元の設定へ戻してキャッシュを削除します。重量診断の点数は独自指標であり、Core Web Vitalsの合格を意味しません。
