ブログサイトをリニューアルして「Page Speed Insight対応」してみた
2025年の半ば頃に「バイブコーディング」という言葉が一般化してきたころに、このブログのリニューアルを考え始めました。実際、トップページと記事詳細ページはリニューアル版テンプレートを静的なHTMLで作っていました。
ただ、なかなか時間がそこから取ることができなくなり、どうやってa-blog cmsに組み込もうかなぁ…と考えてたら、a-blog cmsの開発元である「アップルップル」の山本 一道さんが相談に乗っていただけました。
2025年末〜2026年の頭までは、今自分が注力している「AR系」のイベントのために海外出張も多かったころからしばらく停滞したものの、2026年4月20日、一旦リニューアルをすることができました。
ちなみに、僕のブログは2005年当時からアップルップルさんの「a-blog」で始め、その次世代版となった「a-blog cms」でずっと運用させていただいています。
どうせリニューアルしたんだから、生成AI使って最適化してみたら…？
これでも一応まだWeb屋ですので、サイトを作ったらGoogle PageSpeed Insightを通す訳です。正確にはリニューアル前に通して調べていました。その時の数字がこちらです。
リニューアル前のデスクトップ版の結果
リニューアル前のスマホ版の結果
まぁ、長らくHTMLとかには全く手を入れていなかったので、そりゃそうだよなぁ…という感じでした。特にモバイル版はなかなか壊滅的な結果です。
先に結論をいうと、対策をしたらこうなりました
先にどう変わったのかをお伝えしておきますね…
リニューアル後のデスクトップ版の結果
リニューアル後のスマホ版の結果
まぁ、かなり良くなったのではないかな、とは思っています。これでどれぐらいのいわゆるSEO的な結果がでるのかは分からないのですが、ちゃんと追い込めば形になるのは達成感があって嬉しいです。
リニューアルで変わった大きな違い
リニューアルをした時に以下のことをしました。
サーバーを「さくらインターネット」から「X Server」の載せ替えた
PHPのバージョンを7.4.33→8.3系に上げた
a-blog cms のバージョンは最新まで上げた
a-blog cmsのテンプレートは全部ゼロから刷新した
これらの結果としての速度向上もあるとは思いますが、上記をした時点では、パフォーマンスは「80点ぐらい」でした。
Claudeが調べて、Claude Codeが実装支援
最近のバイブコーディングブームに乗って、名村も2026年2月ごろからもうほぼ毎日Claude Codeで何かを作っています。
やり方として、Claudeで「調査、や実装方法の検討をして、Claude Codeに引き渡す資料作成」、それを受けてClaude Codeで「実装自体の支援や実施を」をする、流れが名村は多いです。
Claudeに調査依頼をしてみました
ということで、今回の対応依頼、まずClaudeにこんな風に聞いてみました。
Xサーバーのレンタルサーバーで運用しているa-blog cmsの表示速度を極限まで早くしたいです。
Web上の事例や、HTMLの書き方的なアプローチを含めて、最善手となる方法を調査してください。
途中で細かい質問などをやり取りしながら、最終的にClaude Codeに引き渡す依頼書を作成してくれました。
Claude Codeに引き継ぎ
Claudeが作ってくれた指示書をマシンのClaude Code管理のこのブログ改修に関するプロジェクトディレクトリの /document/ディレクトリ配下に入れて、初回に読み込みをしてもらいました。そこから数時間、Claude Codeとの二人三脚が始まります。
Claude Codeにやってもらったこと
実際にClaude Codeと一緒に実施した表示速度の最適化のサマリーは以下でした。
Tailwind CSS CDN の本番ビルド化
LCP 画像の修正
Google Analytics の遅延読み込み化
Apple Podcast iframe の遅延読み込み
埋め込みリンクカード画像の CLS 修正
bundle.css の preload 追加
a-blog CMS キャッシュ設定の最大化
Xserver パネル「XPageSpeed」設定
.htaccess によるキャッシュ・ETag 最適化
Cloudflare Free の導入
member.csv のクリティカルパス外し
管理画面用 CSS のログイン時限定化
Alpine.js の自前ホスト化
LCP 画像の srcset + resizeImg 対応
AVIF 画像変換対応
それぞれでやってきたことをざっくりと記載しておきます。
Tailwind CSS CDN の本番ビルド化
諸事情で構築時にTailwind CSSを入れたのが僕ではなかったのですが、開発時に利用していた cdn.tailwindcss.com がそのままにしちゃっていました。このままだとブラウザで JIT コンパイルが走り、レンダーブロッキングと TBT 悪化の最大要因になるので、本番用に変更しました。
LCP 画像の修正
記事詳細ページのヒーロー画像に当たる部分に loading="lazy" が付与されていて、ブラウザが意図的に読み込みを遅延が起こっていたので解除。
loading="lazy" を削除して、代わりに fetchpriority="high" を追加。
<head> 内に <link rel="preload" as="image"> を追加して、2 枚目以降には loading="lazy" を維持するように設定。
Google Analytics の遅延読み込み化
表示速度を最優先したので、運用性を考えたらa-blog cmsの管理画面からタグは登録するのですが、GA の gtag() 初期化がインライン記述で、HTML パース中にメインスレッドをブロックするで、footer側に持っていきました。
Apple Podcast iframe の遅延読み込み
ポッドキャスト紹介ページでは外部コンテンツをiframeで埋め込んでいるので、loading="lazy" したり、<head> へ <link rel="preconnect" href="https://embed.podcasts.apple.com"> を追加したりしました。
埋め込みリンクカード画像の CLS 修正
本文内の埋め込みリンクカード（.quoteImageContainer）に width / height が無く、画像読み込み時にレイアウトシフトが発生していたので、 .quoteImageContainer { aspect-ratio: 1200 / 630; } を設定。
bundle.css の preload 追加
<link rel="preload" href="/dest/bundle.css" as="style"> を追加して、メイン CSS の取得開始タイミングの前倒し。
a-blog cms キャッシュ設定の最大化
これはa-blog cms周りの設定の話です。
Xserver パネル「XPageSpeed」設定
CSS／JS 圧縮 ON
CSS/JS/画像の統合 ON
小ファイルのインライン化 ON
ブラウザキャッシュ設定「全ての静的ファイル」ON
画像最適化はあえて OFF（後述の WebP／AVIF 対応と競合するため）
JS 遅延読み込みも OFF（acms.js と競合してエラーが出るため）
.htaccess によるキャッシュ・ETag 最適化
静的アセット（画像・CSS・JS・フォント）に Cache-Control: public, max-age=31536000, immutable を設定したりしています。
Cloudflare Free の導入
CDNのCloudflare に登録をしました。アクセス数的には無料枠でいけると思うのと、今回は表示速度はできるところまで追い込む実験も兼ねていたので、導入。
member.csv のクリティカルパス外し
この「member.csv」はこのサイトの会員番号を処理しているものですが、読み込み場所が限られていたので、そこを細かく制御掛けました。これが地味に効果が高かったので、一般的なナレッジにはならないのですが、すんません…
管理画面用 CSS のログイン時限定化
ゲスト閲覧時にも acms-admin.min.css（70KB）が無条件読み込みされていたのを分岐処理をしました。
Alpine.js の自前ホスト化
jsdelivr CDN から読み込んでおり、キャッシュ TTL は 7 日。リピートアクセスでも再取得が頻発していたので以下を対応
Alpine.js 公式から v3.15.11（
alpine.min.js/focus.min.js）をダウンロードtailwind-blog/js/vendor/alpinejs/に配置.htaccessの静的アセット 1 年 immutable キャッシュが自動適用
LCP 画像の srcset + resizeImg 対応
記事ヒーロー画像が原寸 1280×720 のまま配信され、モバイル表示枠（665×374 相当）に対して過大だったのを制御を加えました。
AVIF 画像変換対応
a-blog cmsのエントリー時にはPNG/JPEG/GIF等をアップしているのですが、リニューアルのだいぶ前から自作したバッチ処理をCronで回して、アップされた画像を自動的にWebP画像を作る処理をくみこんでいました。
HTMLからのリクエストが当初のPNG/JPEG/GIFでも、同じファイル名でWebP画像があれば、それを吐き出すように.htaccessで処理していました。
今回そのバッチ処理にAVIF画像も生成する処理を加えて、同じファイル名で存在していれば…という優先順位を「AVIF→WebP→実体」となるようにしています。
物によってはWebPの方が軽くなることもあるけど、サイト全体としてはAVIFの方が軽くなっているのも調べたので、効果はあったかな？と思います。
やってみて成果がでてよかった
一般的な静的サイトやフレームワーク直書きのサイトなら「フルコントロール」で最適化ができますが、CMS の上に乗ったサイトはコアを触れないという前提で戦う必要があります。
その制約下で何ができて何ができないかを明確に切り分け、できる範囲を漏れなく潰していくアプローチが重要だなぁ…と改めて実感しました。またあくまで個人ブログなので、開発環境を用意していなかったのもあり、バックアップは結構細かく取って、何かあってもロールバックできるようにしたり、サーバーへのデプロイはGithub Actionsにしたり、ということで事故らないようには気をつけてやっていました。
本記事が同じように a-blog CMS や他の CMS 製サイトの速度改善に取り組んでいる方の参考になれば幸いです。
