PageSpeed Insightsのスコアを90に上げた方法【基礎編】| コアウェブバイタル対策

PageSpeed Insights スコアアップ基礎編

PageSpeed Insightsスコアアップ対策【基礎編】
  1. キャッシュ系プラグインの導入
  2. 非同期処理プラグインの導入
  3. 画像縮小プラグインの導入
  4. リビジョン削除プラグインの導入
  5. Googleフォント削除
  6. 不要なプラグインの削除
2021年5月からコアウエブバイタル(Core Web Vitals)がGoogle検索に含まれると知り、焦りました。
というのもPageSpeed Insightsで9点という素敵なスコアを叩き出していたからです。
PageSpeed Insights モバイルで9点

2021年4月時点で9点!

参考 PageSpeed Insightsdevelopers.google.com こっ、これは何かの間違いだ!
しかし何度やり直しても大した変化なし!

知らんふりをしたいけど、超有名ブログサイトは高得点。
ウイバレみたいな超絶弱小サイトが9点となると、ゴミ以下ではないか・・・

現役Webプログラマーのくせに、このままでいいの?
というか、あなた本当にプログラマーですか?

ぜ、全然よくありません。。。

プログラマー名乗ってて、このスコアは恥ずかしい!
ということで本気になって対策した結果、90台になりました。

PageSpeed Insights モバイル92点

今は90点台!

ここではプラグインなどで簡単にできるPageSpeed Insightsスコアアップ対策を紹介します!

想定レベル:低め
WordPressテーマ「sango」とエックスサーバーでの対応例ですが、他のテーマでも応用できます。
WordPressをインストールし、日々の運用をされている方なら対応できる(であろう)内容に絞っています。

実際に動作確認した上で掲載していますが、あくまで自己責任の上でご対応ください!
MEMO
対象テーマはsango 2.5.3
子テーマはporipu tears 1.27です。

キャッシュを使う

スコアダウンの原因の多くは、cssとJavaScriptの描画速度。
これらをキャッシュに入れることで、速度改善を狙います。

Autoptimizeの導入

cssとJavaScriptファイルをキャッシュ化するために、Autoptimizeをインストールします。

Autoptimize

Autoptimize

設定は最初の部分だけで十分です。

インストール後、「設定」→「Autoptimize」を開きます。

autoptimize設定1

Autoptimize設定その1

autoptimize設定2

Autoptimize設定その2

autoptimize設定3

Autoptimize設定その3

autoptimize設定4

Autoptimize設定その4

設定後、HTMLのソースで「autoptimize」があれば成功です。

autoptimize動作チェック

Autoptimizeの導入に成功

WP Fastest Cacheの導入

Gzip圧縮をサクッとしてくれるWP Fastest Cacheをインストールします。

WP Fastest Cache

WP Fastest Cache

インストール後、「WP Fastest Cache」で設定画面を開きます。
Autoptimizeと重ならないようにしています。

WP Fastest Cache設定

WP Fastest Cache設定

【重要】変更したらキャッシュを削除!

これでキャッシュが有効になりました。
スコアも多少なり上がったと思います。

その代わりcssや画像、テーマの編集をした場合、キャッシュを削除する必要があります。
これをしないと「変えたはずなのに反映されない」ということになってしまいます。

削除方法は簡単で、管理画面上部のツールバーに「Autoptimize」と「Delete Cache」があるはずです。

Autoptimizeのキャッシュ削除

Autoptimize

WP Fastest Cacheのキャッシュ削除

WP Fastest Cache

Autoptimizeは「キャッシュを削除」、WP Fastest Cacheは「Clear All Cache」→「Delete Cache and Minified CSS/JS」をクリックすればOKです。

JavaScriptの非同期処理

JavaScriptを非同期処理にするために、Async JavaScriptをインストールします。

非同期処理って何?
JavaScriptはプログラムです。
プログラムが動くと終わるまで待つ必要があります。
この「待ち」が画面表示中に発生すると、表示時間が遅くなります。

そのような待ち時間を避けるために、
「終わるまで待たずにプログラムを動かしてしまえ!」
というのが、非同期処理です。
これによりJavaScript実行による表示速度の遅れを回避することができます。
Async JavaScript

Async JavaScript

「設定」→「Async JavaScript」で設定します。

基本はasyncで構いませんが、jQuery部分はExcludeにしています。

Async JavaScript設定1

Async JavaScript設定その1

Async JavaScript設定2

Async JavaScript設定その2

アドセンス使うならjQueryをExcludeに設定

「使用していないJavaScriptを削除して、…」の中に「…jqyery/jquery.min.js」があります。

PageSpeed Insights 使用してないJavaScript

これは無視!

このjquery.min.jsをキャッシュに入れたり、async、deferなどにすると、アドセンスの自動広告でエラーが出るようになります。
どうやらheadに明示されていないと、アドセンスの自動広告でjQueryが動いてくれないみたい。

ということで自動広告を活かしたいのであれば、jquery.min.jsはそのままにしておきましょう。
ということで、Async JavaScriptでのjQueryは「Exclude」にしました。

Async JavaScript jQuery設定

jQueryはExcludeで!

MEMO
「使用してないJavaScript」にjquery.min.jsが残っていても、90点以上は狙えるのでご安心を!

画像を縮小

画像サイズが大きいと表示速度に影響します。
キャッシュを入れたとしても、元の画像ファイルが小さい方が良いに決まっています。

EWWW Image Optimizer

画像のファイルサイズを縮小するEWWW Image Optimizerをインストール。

EWWW Image Optimizer

EWWW Image Optimizer

「設定」→「EWWW Image Optimizer」で設定。

EWWW Image Optimizer設定

EWWW Image Optimizer設定

設定後、画像変換。
「メディア」→「一括最適化」

EWWW Image Optimizer メニュー

メニューから一括最適化

この最適化、画像が多いと時間かかります。

EWWW Image Optimizer 最適化

一括最適化

TinyPNGを使う

png、jpgファイルの場合、TinyPNGを使って縮小させます。
ドラッグ&ドロップで縮小してくれるので、簡単です。
参考 TinyPNG

記事の画像はこちらで縮小してからアップしましょう。

MEMO
ヒマな時、これまでTinyPNGを使っていなかった画像を変換して入れ替えたりもしています。

Googleフォントを無効化

sangoはGoogleフォントを使用しています。
Googleフォントは外部参照のため、どうしても読み込みに時間がかかるため、削除します。

MEMO
sangoのフォントが変わるので、嫌な場合は避けてください。
私は変化を感じませんでしたが(←デザインセンス0のたわごと)

ここではAutoptimizeで対応します。

autoptimize設定5

Googleフォント削除

リビジョン削除

記事にはリビジョンが付いています。
これがあると過去に書いた記事に戻すことができますが、データが多くなると表示速度が遅くなります。

Simple Revisions Deleteでリビジョンを削除します。

Simple Revisions Delete

Simple Revisions Delete

インストールしたら「投稿一覧」に「リビジョンを削除」が出てきます。
リビジョンを削除したい記事にチェックして「適用」すればOK。

投稿一覧にリビジョン削除

投稿一覧でリビジョン削除

記事の編集にもあります。

編集画面でのリビジョン削除

編集画面でリビジョン削除

プラグインの見直し

プラグインが遅延の原因ということもしばしば。
表現を広げる系のプラグインは思い切って削除しました。

「どれも必要なプラグインだからインストールしています!」
と言いたくなるでしょう。

参考として、ウイバレで入れているプラグインを紹介します。

インストールしているプラグイン
※表示に影響を与えるプラグインのみ紹介しています
  • Async JavaScript
  • Autoptimize
  • Contact Form 7
  • Easy Table of Contents
  • EWWW Image Optimizer
  • Jetpack by WordPress.com
  • Simple Revisions Delete
  • WP Fastest Cache

sangoの高速化はチェック済み?

sangoにある高速化はチェックしていますか?
「外観」→「カスタマイズ」→「高速化」
できれば全てチェックしておきたいところです。

sangoの高速化

できれば全チェック

ここに加えて詳細設定も変えています。
「外観」→「カスタマイズ」→「詳細設定」

sangoの詳細設定

ここは参考にどうぞ

さいごに

ここまでの対策でも十分にスコアアップが狙えるはずです。
多少なりスコアアップのお手伝いができれば幸いです。

しかし9点を叩きだしたウイバレではこの対策だけでは不十分でした。
そのためテーマ編集含めて、頑張りました。
その内容は以下でどうぞ。
PageSpeed Insights スコアアップ中上級編 PageSpeed Insightsのスコアを90に上げた方法【中上級編】| コアウェブバイタル対策