ブログのPage Speed insghtスコアが低いので無料ですぐに出来る対策でスコアを改善

このブログのPage Speed insghtが気になったので久しぶりに測定してみた。

点数低すぎてビビりました。

WordPressなのでSEO対策済みテーマ入れて満足してしまって放置していたのがよくなかったのでしょう。技術は進化しているので、Googleが推奨する実装・設定方法も変わっています

パッと直せたところを記載しておきますので、WordPress触っている人は、参考になればと思います。

WordPressの高速化するのに変更した作業

基本的にはPage Speed insghtで指摘された点を修正すれば高速化します。

そもそもレスポンスの悪いサーバ使っているので直しようがないところもありますが、乗り換え面倒だし高いので直せるところを直していきます。

• 画像ファイルのファイル形式変更
• キャッシュを利用する
• フォントの変更

WebPに変更する手順

ダッシュボードの「プラグイン」項目から「EWWW Image Optimizer」のプラグインをインストールします。

EWWW Image Optimizer

Smaller Images, Faster Sites, Happier Visitors. Comprehensive image optimization that doesn't require a degree in rocket science.

ja.wordpress.org

WordPress側での作業

1. WordPressのダッシュボードにある「設定」から「EWWW Image Optimizer」を開く。
2. 「WebP設定」のタブにある「JPG、PNGからWebP」のオプション項目をオンにして設定を保存

サーバー側での作業

画像をWebPで読み込むように変更します。

1. 「WebP設定」タブの下部にあった「.htaccess」用のテキストをコピーします。
2. 自分のサーバにある「.htaccess」を開いて、コピペします。

これで設定は終わりです。

「WebP設定」タブに「リライトルールを挿入」というボタンがありますが、「.htaccess」書き換えが出来ない場合があるので、面倒でも直接コピペ作業を行います。

あとはWordPressのダッシュボードにある「メディア」項目から一括最適化で再度最適化を行えば終了です。

すでにEWWW Image Optimizerを使っていて最適化済みだとしても、ファイルはJPGからPNGに変更されたものがWordPress内のメディアフォルダに入っているので、PNGをWebP化する作業が再度必要です。

あとは作業が終わるまで待つだけ。画像数が多いとそれなりに時間がかかるので放置しておきます。

プラグインでページキャッシュを利用する

Webページは読み込みを高速化するためにキャッシュ（一時保存）されます。

サーバ側とブラウザ側でキャッシュがされますが、読み出しが遅い場合はサーバ側にキャッシュが生成されていない場合が多いです。

キャッシュ用プラグインを利用する

Jetpackやテーマでキャッシュ出来るものもあり、Jetpackでパフォーマンス設定していましたが、スコアが良くないのでプラグインに変更しました。

Apacheを利用しているサーバでは「WP Fastest Cache」、Litespeedを利用しているサーバであれば、LiteSpeed 「Cache」を利用しましょう。

WP Fastest Cache

最もシンプルで速いWP キャッシュシステム

ja.wordpress.org

このブログはApacheを利用しているので、「WP Fastest Cache」を入れました。

WP Fast Cacheの設定方法

ダッシュボードメニューの「WP Fastest Cache」を選択します。

設定タブが表示されますが、LanguageがEnglishになっているので、日本語に変更して保存しましょう。保存されると日本語化されるので、必要な項目にチェックを入れていきます。

設定した項目

• キャッシュを有効にする
• Create the cache of all the site automatically（自動的にキャッシュを作成）
• ログインユーザーにキャッシュを表示しない
• 新しい投稿時のキャッシュ削除（古いものが残らないようにする）
• 更新時のキャッシュ削除（古いものが残らないようにする）
• Gzip圧縮の利用
• ブラウザキャッシュを利用してロード時間を短縮する
• You can remove the emoji inline css and wp-emoji-release.min.js（絵文字のキャッシュ）

絵文字は利用していませんが念の為特殊文字扱いになってるテキストがあったときのために設定を有効化しておきました。

HTMLやCSSファイルの圧縮などもありましたが、私の使っているテーマ側で対応できているのでWP Fastest Cacheでは有効化しませんでした。テーマで対応していない場合はチェックを入れて、有効化しておきましょう。

キャッシュの有効期限が明記されていないとスコアが落ちたり、評価が下がる恐れがるので「キャッシュの有効期限」タブで有効期限をサイト全体のキャッシュで「月に1回」に設定しました。

WordPressサイトで利用するフォントの変更

このページでは利用しているWordPressテーマ、Cocoonが対応している「游ゴシック体、ヒラギノ角ゴ」を利用していました。

以前からGoogleが表示速度の早いWebフォントを利用するように推奨していたのは知っていましたが、そこまで気にしていなかったのでそのままにしていました。

今回スコアが低かったことで「游ゴシック体、ヒラギノ角ゴ」→「源ノ角ゴシック（Webフォント）」に変更しました。Webフォントにすることで、iPhoneでもAndroidでも、PC、Macでも共通のフォントになり表示速度が高速化します。

Cocoonでは、ダッシュボードの「Cocoon設定」から、「全体」タブのフォントでWebフォントと書かれているから選択して保存するだけです。

テーマが対応して居ない場合はプラグインでWebフォントにする

CocoonのようにWebフォントをサポートしてないテーマを使っている場合は、自分で対応作業をするよりもプラグインを利用してしまいましょう。

Easy Google Fontsというプラグインがあります。

Easy Google Fonts

Adds google fonts to any theme without coding and integrates with the WordPress Customizer automatically for a realtime live preview.

wordpress.org

他のプラグインと同様にインストールして、有効化する。

ダッシュボードの「外観」からカスタマイズ画面を表示して、「Default Typography」を選ぶと細かく設定できるので好きなWebフォントを設定することで対応できる。

Page Speed Insightに対応してみてのスコア

今回はWordPress側で簡単に対応できる対策を施してみました。

再計測したスコアはこちら

PCで96点がとれました。

作業前38点だったスマホのスコアですが

点数が下がってる…

計測時にレンタルサーバーが緊急メンテナンスしていたの影響もあってレスポンスが遅いのかもしれませんが、よーくスコアの中身を見てみると、Googleから読み込んでいるものが影響しているようです。サイトの評価しているGoogleが、サイトの評価を下げてしまうタグはどうにもなりません。

とはいえ、体感での読み込みはかなり早くなっていると思います。スコアはあくまでも目安ですので、気になる人はプラグインやタグを無効化して計測してみてください。

WordPressサイトを始める方や追加のドメイン取得はこちらがオススメです。

1円からドメインが買えちゃうお名前

WordPressレンタルサーバー

このブログもこの2つで運用しています。