ブログの表示速度を、9MB から 2.2MB まで減らしました。読み込むデータ量が4分の1になった計算です。
費用はかかっていません。サーバーも変えていません。テーマも同じままです。設定の見直しと、画像の整理だけでここまで来ました。
作業しながら、いくつも「知らなかった」に出会いました。この記事では、私が実際にたどった手順を最初から最後まで並べます。効果が大きかった順に並べてあるので、上から順に試していただければ、途中でやめても効果は出ます。
作業前の状態
まず、どれくらいひどかったかをお見せします。
| 項目 | 作業前 | 目安 |
|---|---|---|
| ページ全体のデータ量 | 約9MB | 1〜1.5MB |
| アイキャッチ画像1枚 | 約600KB | 100KB前後 |
| プログラムの読み込み | 1,281KB | — |
適正値の6倍以上でした。スマホで開いたら、なかなか表示されないのも当然です。
手順1 画像の保存形式を見直す（効果：最大）
いちばん効いたのはこれでした。アイキャッチ画像がPNGで保存されていたことが原因です。
PNGは画質が完璧ですが、写真やグラデーションのある画像には向きません。ファイルが何倍にも膨らみます。JPGに変換したところ、こうなりました。
| 変換前 | 変換後 | |
|---|---|---|
| 1枚あたり | 約600KB | 約108KB |
| 297枚の合計 | 182MB | 35MB |
80%減りました。見た目の違いは、並べて比べても分かりませんでした。
確認方法は簡単で、アイキャッチを右クリックして「名前を付けて画像を保存」を選び、ファイル名の末尾を見るだけです。.png なら改善の余地があります。
詳しい手順と、これから投稿する画像をJPGにする設定は、こちらにまとめています。
▶ ブログが重い原因は「写真の保存形式」だった【297枚の変換で80%軽くなった話】
手順2 効いていないプラグインを止める（効果：大）
画像を軽くするために入れていたプラグインが、無料枠を使い切ったまま動いていました。
厄介だったのは、上限を超えても停止せず、「軽くしないのに経由だけする」状態が残っていたことです。
| 取得方法 | かかる時間 |
|---|---|
| プラグイン経由 | 325〜743ミリ秒 |
| 直接取得 | 24〜29ミリ秒 |
10倍以上の差が、159箇所ありました。「なかなか表示されない」と感じていた正体です。
停止したら、1枚あたり300ミリ秒 → 60ミリ秒になりました。
▶ 「高速化プラグイン」が逆にサイトを遅くしていた話【無料枠を超えた後の落とし穴】
手順3 アクセス解析タグの重複を消す（効果：中）
解析タグが3つ入っていました。テーマの設定、プラグイン、タグ管理ツール——導入方法が違うだけで、やっていることは同じでした。
1つに整理したところ、読み込むデータが1,281KB → 862KBに。419KB減りました。解析の数字は途切れていません。
確認は Ctrl + U でページの中身を表示して、gtag/js?id= を検索し、件数を見るだけです。2件以上なら重複しています。
▶ アクセス解析タグを3つも入れていた話【同じアクセスを3回数えていました】
手順4 高速化プラグインの設定を見直す（効果：中）
これは少し専門的な話になります。
私が使っていた高速化プラグインに、「画像をURI化する」という設定がありました。デザインに使う小さな画像を、文字に変換してページに埋め込む機能です。
読み込む回数を減らせる仕組みなのですが、変換すると元より33%大きくなります。その結果、ページの本体が370KBまで膨らんでいました。
この設定をオフにしたところ、ページ本体が536KB → 163KBになりました。
あわせて、設定が中途半端なままの機能もオフにしました。「ここだけ先に読み込む」という指定をする機能で、肝心の指定欄が空のまま有効になっていました。中途半端に動いている機能は、オフのほうが速いことがあります。
手順5 広告のレイアウトずれを直す（効果：小、ただし重要）
広告は、ページが表示されたあとから挿入されます。そのため読もうとした瞬間に文章が下にずれることがあります。
これはGoogleの評価項目にも入っていて、検索順位に影響します。
広告が入る場所をあらかじめ確保しておくCSSを追加したところ、ずれの数値が0.114 → 0（良好）になりました。
使ったCSSは3行です。外観 → カスタマイズ → 追加CSS に貼り付けます。
ins.adsbygoogle { min-height: 280px; display: block; }
@media (max-width: 600px) { ins.adsbygoogle { min-height: 250px; } }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }3行目が大切です。これがないと、広告が配信されなかった場所に空白が残ります。
結果
| 項目 | 作業前 | 作業後 |
|---|---|---|
| ページ全体 | 約9MB | 約2.2MB |
| ページ本体 | 536KB | 163KB |
| アイキャッチ1枚 | 約600KB | 108KB |
| プログラム | 1,281KB | 862KB |
| レイアウトのずれ | 0.114 | 0（良好） |
正直に書いておきたいこと
ここまで改善しても、Googleの測定ツールでの表示速度は「悪い」判定のままです。
理由ははっきりしています。残った862KBのうち、解析タグ515KBと広告200KBで7割を占めているからです。これを削るには、アクセス解析をやめるか、広告収入を諦めるしかありません。
私はどちらも必要だと判断したので、ここが下限と考えています。
速度は大事ですが、そのために収入や記録を捨てるのは違うと思います。削れるものと削れないものを分けて、削れるほうだけをやる。それで十分だと考えています。
追記 この作業だけでは、体感が変わりませんでした
正直に書き足しておきます。
ここまでの作業で転送量は4分の1になりましたが、実際に開いたときの体感は、ほとんど変わりませんでした。
あらためて実際のブラウザで測り直したところ、まったく別の原因が見つかりました。テスト用に設定して忘れていたダミー画像1枚が20.9秒、そして絵文字27個の外部画像化が11.4秒かかっていたのです。
どちらもページのソースを見るだけでは分かりませんでした。この2つを直したところ、読み込み完了が22.7秒 → 1.27秒（18倍）になりました。
▶ データ量を4分の1にしても速くならなかった話【真犯人はダミー画像1枚でした】
この記事の作業も土台としては必要でしたが、先に実測すべきでした。順番を間違えた記録として残しておきます。
そして、速度より大事だったこと
作業を終えてから気づいたことがあります。
Googleの測定画面に「実際の読者のデータが足りません」と表示されていました。つまり速度を測れるほどのアクセスがなかったのです。
そこであらためて調べたところ、Googleに記事の一覧を伝えるサイトマップが存在していませんでした。405記事を書きながら、届ける仕組みが壊れたままだったのです。
速度改善より、こちらのほうがずっと大きな穴でした。
▶ 405記事書いてもアクセスが増えなかった本当の理由【サイトマップがなかった話】
まとめ
この順番で進めるのが効率的です。
- 画像をJPGにする（効果が最も大きい）
- 効いていないプラグインを止める
- 解析タグの重複を消す
- 高速化プラグインの設定を見直す
- 広告のレイアウトずれを直す
1だけでも、かなり変わります。
そして、もし「記事は書いているのにアクセスが増えない」と感じているなら、速度より先にサイトマップを確認してください。私はそこに405記事ぶんの時間をかけてから気づきました。
ブログを書く時間は、家事や仕事の合間に捻出した貴重な時間です。その記事が読まれないまま眠っているのは、あまりにもったいないと思います。
