このブログ、9月30日にCocoonからオリジナルテーマに移しました。
ローカルで比べたら、トップページの重さが970KBから102KBに。
だいたい9分の1です。
🎥 この記事の内容は動画でも解説しています。
ただ、軽くしたくて移したわけじゃないんです。
きっかけは「見た目が微妙だな、もっとリッチにしたいな」でした。
軽さは、たなぼたでしたね。
ローカルで比べた数字
新しいテーマの実装と検証は、Claude Codeにやらせてます。
切り替える前に、ローカルのMAMP(Mac上のWordPress環境)で、CocoonとオリジナルテーマのHTML・CSS・JSの合計を比べています。
GA4やAdSense、Google Fontsみたいな外部の読み込みは入れていません。
| ページ | Cocoon | オリジナルテーマ |
|---|---|---|
| トップ | 970KB・HTML生成1.6秒 | 102KB・0.3秒 |
| 記事 | 986KB・1.5秒 | 106KB・0.2秒 |
| 記事一覧 | 887KB・1.3秒 | 約140KB・0.2秒 |
トップと記事は、だいたい9分の1。
記事一覧は6分の1くらいです。
HTMLを作る時間も、ページによって5分の1〜8分の1くらいになりました。
Cocoonは機能がとにかく多いテーマです。
今回のテーマは、このブログで使う部品だけで作ったので、そのぶん軽くなったんだと思います。
測っていませんが。
切り替えから2週間ちょっとたった10月17日に、本番でも同じ数え方で見てみました。
トップが106KB、記事が99KB。
ローカルとほぼ同じ重さのままです。
移す前に確認したこと
テーマを変えるとき、一番こわいのは本文が崩れることです。
なので、先にここを確認させてます。
- 本文に、Cocoon独自の装飾(ショートコードやボックス)が使われていないか。本番のDBで調べたら0件でした
- 記事ごとのメタディスクリプションなど、Cocoonの記事設定を新しいテーマでも読めるか。Cocoonの入力欄の値をそのまま読む作りにしました
- カテゴリのURLを変えた分は、古いURLから301(恒久的な転送)で飛ぶか
そのうえで、ローカルで171のURLを一括で確認しています。
h1が1つか、見出しの順番、メタ、OGP、構造化データ、スマホとiPad miniでの崩れ、くらいまで。
テーマが原因の問題は出ませんでした。
デザインの方向と切り替えのOKは自分、アイキャッチ138枚の作り直しはCodex、という分担です。
移したあとに残った落とし穴
テーマのせいじゃないのに、移したタイミングで見つかったものもありました。
- 本文のHTMLタグが崩れていた記事が7本(Cocoonのときから崩れていた)
- 昔の記事に、
`wp-config.php`みたいなバッククォートの書き方が、そのまま残っていた - 本文の猫のセリフ部分で、WordPressの自動整形(wpautop)が余計な
</p>を足していた。これはテーマ側で消すようにした - 本文のマスコット画像が、Cocoon子テーマのフォルダを直接参照していた。なので、子テーマのフォルダは今も消していません
最後のは、うっかり消すと画像が全部消えます。
危なかった・・・
軽くなっても、スマホの点数は低かった
ここ、ちょっと意外だったところです。
切り替えたあと、手元のLighthouse(Chromeの表示速度チェック)でスマホを測ったら、57〜62点でした。
HTML・CSS・JSは9分の1になったのに！
原因は、テーマ以外のところにもありました。
日本語のWebフォントと、GA4・AdSenseの読み込みです。
ほかにも、トップの組み上がる演出や、表示サイズより大きい画像が足を引っぱっていました。
Webフォントをやめて端末のフォントに。
GA4とAdSenseは、読み込み完了の2秒後か、最初に操作したときに読むように。
演出の見せ方と画像サイズ、文字のコントラストも直したら、89〜99点まで上がりました。
💡 2秒遅らせることの代わりに
GA4を2秒遅らせると、2秒以内に何もせず離れた人はアクセス解析に残りません。
速さと、数えられる人数のトレードオフです。
テーマを軽くしても、外から読み込むものが重ければ、スマホの表示はそこで止まります。
なので、Cocoonが重いと感じたら、この順番で見るのがいいかなーと思っています。
- Lighthouseで、Webフォント・広告や解析タグ・大きな画像のどれが指摘されているかを見る
- Webフォントや広告・解析タグが中心なら、テーマを替える前にその読み込みを見直す
- それでも乗り換えるなら、本文の独自装飾・記事ごとのSEO設定・古いURL・画像の参照先を先に確認する
まとめ
- Cocoonからオリジナルテーマに移したら、ローカル比較でトップと記事の重さが約9分の1、記事一覧が約6分の1になった
- 移す前に、本文のCocoon独自装飾・記事ごとのSEO設定・旧URLの転送を確認した
- 古い子テーマのフォルダは、本文の画像が参照していないか見てから消す
- スマホの点数を下げていたのは、テーマだけじゃなく、Webフォントや広告・解析タグの読み込みもだった
自分は見た目を変えたくて移しただけなので、軽さはおまけみたいなものです。
でも、おまけにしては大きかったなーと思っています。
