このブログのPage Speed insghtが気になったので久しぶりに測定してみた。
点数低すぎてビビりました。
WordPressなのでSEO対策済みテーマ入れて満足してしまって放置していたのがよくなかったのでしょう。技術は進化しているので、Googleが推奨する実装・設定方法も変わっています
パッと直せたところを記載しておきますので、WordPress触っている人は、参考になればと思います。
WordPressの高速化するのに変更した作業
基本的にはPage Speed insghtで指摘された点を修正すれば高速化します。
そもそもレスポンスの悪いサーバ使っているので直しようがないところもありますが、乗り換え面倒だし高いので直せるところを直していきます。
- 画像ファイルのファイル形式変更
- キャッシュを利用する
- フォントの変更
このあたりはパッと作業出来るのでやってしまいましょう。
掲載済みの画像ファイルをEWWW Image Optimizeで一括最適化
画像ファイルは以前はPNGが推奨されていましたが、最近はWebPなどの新しいファイル形式が推奨されています。
ひとつひとつファイル形式を手作業で変更するのは面倒ですし、WordPressの記事数が多ければ画像の量も多いと思うので、メディアライブラリに入っている画像をすべて一括で変更できるプラグイン「EWWW Image Optimizer」を使います。
WebPに変更する手順
ダッシュボードの「プラグイン」項目から「EWWW Image Optimizer」のプラグインをインストールします。
WordPress側での作業
- WordPressのダッシュボードにある「設定」から「EWWW Image Optimizer」を開く。
- 「WebP設定」のタブにある「JPG、PNGからWebP」のオプション項目をオンにして設定を保存
サーバー側での作業
画像をWebPで読み込むように変更します。
- 「WebP設定」タブの下部にあった「.htaccess」用のテキストをコピーします。
- 自分のサーバにある「.htaccess」を開いて、コピペします。
これで設定は終わりです。
「WebP設定」タブに「リライトルールを挿入」というボタンがありますが、「.htaccess」書き換えが出来ない場合があるので、面倒でも直接コピペ作業を行います。
あとはWordPressのダッシュボードにある「メディア」項目から一括最適化で再度最適化を行えば終了です。
すでにEWWW Image Optimizerを使っていて最適化済みだとしても、ファイルはJPGからPNGに変更されたものがWordPress内のメディアフォルダに入っているので、PNGをWebP化する作業が再度必要です。
あとは作業が終わるまで待つだけ。画像数が多いとそれなりに時間がかかるので放置しておきます。
プラグインでページキャッシュを利用する
Webページは読み込みを高速化するためにキャッシュ（一時保存）されます。
サーバ側とブラウザ側でキャッシュがされますが、読み出しが遅い場合はサーバ側にキャッシュが生成されていない場合が多いです。
キャッシュ用プラグインを利用する
Jetpackやテーマでキャッシュ出来るものもあり、Jetpackでパフォーマンス設定していましたが、スコアが良くないのでプラグインに変更しました。
Apacheを利用しているサーバでは「WP Fastest Cache」、Litespeedを利用しているサーバであれば、LiteSpeed 「Cache」を利用しましょう。
このブログはApacheを利用しているので、「WP Fastest Cache」を入れました。
WP Fast Cacheの設定方法
ダッシュボードメニューの「WP Fastest Cache」を選択します。
設定タブが表示されますが、LanguageがEnglishになっているので、日本語に変更して保存しましょう。保存されると日本語化されるので、必要な項目にチェックを入れていきます。
設定した項目
- キャッシュを有効にする
- ログインユーザーにキャッシュを表示しない
- 新しい投稿時のキャッシュ削除（古いものが残らないようにする）
- 更新時のキャッシュ削除（古いものが残らないようにする）
- Gzip圧縮の利用
絵文字は利用していませんが念の為特殊文字扱いになってるテキストがあったときのために設定を有効化しておきました。
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というプラグインがあります。
他のプラグインと同様にインストールして、有効化する。
ダッシュボードの「外観」からカスタマイズ画面を表示して、「Default Typography」を選ぶと細かく設定できるので好きなWebフォントを設定することで対応できる。
Page Speed Insightに対応してみてのスコア
今回はWordPress側で簡単に対応できる対策を施してみました。
再計測したスコアはこちら
PCで96点がとれました。
作業前38点だったスマホのスコアですが
点数が下がってる…
計測時にレンタルサーバーが緊急メンテナンスしていたの影響もあってレスポンスが遅いのかもしれませんが、よーくスコアの中身を見てみると、Googleから読み込んでいるものが影響しているようです。サイトの評価しているGoogleが、サイトの評価を下げてしまうタグはどうにもなりません。
とはいえ、体感での読み込みはかなり早くなっていると思います。スコアはあくまでも目安ですので、気になる人はプラグインやタグを無効化して計測してみてください。
WordPressサイトを始める方や追加のドメイン取得はこちらがオススメです。
1円からドメインが買えちゃうお名前
WordPressレンタルサーバー
このブログもこの2つで運用しています。
コメント