Zenn
💭

Google PageSpeed Insightsでスコア95以上を達成するまでにやったこと

に公開
JavaScript
WordPress
Cloudflare
webパフォーマンス
wprocket
idea

最初にウェブツールを作り始めたとき、Google PageSpeed Insightsのスコアなんてそこまで気にしていませんでした。でも、ある日ふとテストしてみたら、モバイルのスコアが60点台。
これはまずいと思い、本格的にパフォーマンス改善に取り組むことにしました。

結果として、今ではモバイル・デスクトップの両方で95点以上をキープしています。
この記事では、実際に行ったステップを詳しく紹介します。特別なことはしていません。WordPress、WP Rocket、Cloudflare、Kadenceテーマなどを使って、誰でもできることばかりです。

🔧 最初の状態（最適化前）
当初の構成はこんな感じでした：

WordPress + Kadenceテーマ

画像はJPEGやPNGのまま

JavaScriptでツールを実装

プラグインがいくつか（キャッシュなし）

この状態でのスコアは、モバイルが約60点。体感的にも重く感じました。

🛠️ 実際にやった最適化ステップ

  1. 💡 不要なものを徹底的に削除
    まずは不要なものを削除：

使っていないプラグイン

外部フォントやアイコン（Font Awesomeなど）

無意味なアニメーションやスクリプト

代わりに、必要最低限のバニラJS（純粋なJavaScript）とCSSで構成するようにしました。

  1. ⚡ WP Rocketの導入
    WordPress用の高速化プラグイン「WP Rocket」を導入しました。これは非常に効果的です：

ページキャッシュの有効化

JavaScriptの遅延読み込み（ユーザー操作まで）

CSS・JSの圧縮と結合

画像とiframeの遅延読み込み（Lazy Load）

preloadやpreconnectの最適化

結果、1.5秒以上の読み込み時間短縮につながりました。

  1. 🌐 Cloudflare + ページルール設定
    Cloudflareも大きな助けになりました。ただし、適切に設定する必要があります。

📋 ページルールの例：
→ キャッシュ対象：すべて（Cache Everything）
→ エッジキャッシュTTL：1ヶ月
→ ブラウザキャッシュ：既存のヘッダーを尊重
その他の設定：
Brotli圧縮：オン ✅

自動ミニファイ：HTML/CSS/JS ✅

Rocket Loader：オフ（JSツールで不具合が出たため）

  1. 🖼️ WebP画像への変換
    画像はすべてWebP形式に変更しました。JPEGやPNGよりも軽量で、表示も高速です。

使ったツール：

Squoosh（手動変換）

またはWordPressプラグインで自動変換（例：Imagify）

結果、画像サイズが400KB → 60KBに削減され、特にモバイルでの読み込みが大幅に改善しました。

  1. 🎨 Kadenceテーマの選定
    テーマはKadenceを使用しています。見た目も良く、パフォーマンスも非常に軽量（CSSは50KB未満）。

SEOスキーマ内蔵

無駄なコードが少ない

WP RocketやWebPとの相性も◎

  1. 📄 クリティカルCSSのインライン化 + 遅延読み込み
    WP Rocketの設定と少しの手作業で、次のことを実現：

最初に表示される部分のCSSだけをインライン化

それ以外のCSSは非同期で読み込み

HTML側の記述例：

html
Copy
Edit
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
これにより、レンダリングブロックを回避し、**FCP（First Contentful Paint）**が改善されました。

  1. 📱 実機 + モバイルネットワークでテスト
    最適化後、以下の方法で検証：

ChromeのDevTools（モバイル + 4Gシミュレーション）

スマホの実機（3G環境でテスト）

Google PageSpeed Insights & Core Web Vitals

一時的に高得点でも、安定して速いかを何度もテストしました。

最終スコア（Lighthouse結果）
指標 モバイル デスクトップ
パフォーマンス 99 100
アクセシビリティ 99 100
ベストプラクティス 99 100
SEO 92 92

💭 学んだこと・感じたこと
フレームワークなしでも、しっかり最適化すれば十分速くなる

WP RocketとCloudflareの組み合わせは非常に強力（設定が重要）

高スコア＝検索順位アップ、離脱率ダウン、ユーザー満足度アップ

最後に：速度は正義
ウェブツールやWebアプリを開発している方へ。
高速化は開発の最後ではなく、最初から意識すべきテーマです。

無駄を削る

軽いテーマを選ぶ

キャッシュとCDNを活用

ユーザー目線でのテストを忘れずに

もし、あなたもツールの高速化に挑戦しているなら、ぜひコメントで共有してください。ノウハウ交換しましょう！

Discussion