ブログを書いて自分の考えやオススメ情報を発信する為に、SEOってのは重要ですよね。どれだけ良い記事を書いていたとしても、ユーザーに届かなかったら意味がないですから。
最近、このSEO対策の一環で、Googleさんが提供しているPageSpeed Insightsというブログの表示スピードを測るサービスを試してみました。結果としては、ズタボロでしたｗ自分は高速テーマのAffingerを使っているから大丈夫みたいな、おごりがありました。
今回は、そんな分析結果を受けて、PageSpeed Insights対策をしてみた試行錯誤の過程をご紹介します。
この記事を読むと、完璧では無いですが、PageSpeed Insights対策としてどのような対応をすれば良いかがわかると思います。
注意
この記事はWordPressを用いたブログを作成している方向けの記事です
常識の新陳代謝ポイント
旧常識
新常識
こんな方におすすめ
- WordPress.orgでブログを運用している方
- PageSpeed Inshigtsの結果を上手く改善出来ない方
目次
PageSpeed Insightsとは
PageSpeed Insightsとは、Googleさんが提供するサービスで、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案してくれます。
PageSpeed Insightsの分析結果
初回のPageSpeed Insightsの分析結果を再現した結果がこちら（※Pluginを無効にしたりで、当時の状況を再現していますが、最初はもっと酷くてモバイルは二桁ありませんでしたｗ）
PageSpeed Insightsの改善対応
Async JavaScript
「レンダリングを妨げるリソースの除外」の一環で、プラグインの「Async JavaScript」を用いてレンダリングをブロックする JavaScript を除去しました。
設定はこちらのサイトを参考にさせていただきました。
微弱ながら改善しました。いじった設定は次の通りです。
なんだか、挙動が怪しくなるという噂も目にしたプラグインなので、導入の優先度は低めで良いかもしれません。
これのせいかな？PC版でGoogle Adsenseの広告出て無い気がしてきた。。
Autoptimize
「レンダリングを妨げるリソースの除外」を下げるべく、Autoptimizeという各種コンテンツを圧縮してくれるPlugInを入れてみました。設定はこちらのサイトを参考にさせていただきました。
劇的な改善が見られました。「レンダリングを妨げるリソースの除外」と「使用していないCSSを削除してください」が両方解決です。
こちらを設定すると、ソースコードも圧縮される為、プレビューでソースの表示などをした際に、可読性がめちゃくちゃ下がります。ソースコードを解析する場合は、プラグインを一時的に無効にするか、直接ソースコードを閲覧しましょう。
BJ Lazy Load
「オフスクリーン画像の遅延読み込み」という改善項目の対応をするべく、画像の遅延読み込みとして、「BJ Lazy Load」というプラグインを入れました。同じ様なプラグインとしては、「a3 Lazy Load」もあったんですが、他のプラグインと競合するのか、画像がいつまで経っても再生しなかったりしたので、こちらを止めて、「BJ Lazy Load」を実装しました。
パソコンのほうが少し改悪しましたが、誤差みたいなもんなんで放置です。別の方法として、AMPで対応しようと思いましたが、途中まで試行した際に、AMPのページだとページのレイアウト崩れがあったり、とリスクが大きかったので止めました。
WP fastest cache
２回目以降に同じページを訪れた際は、キャッシュした情報を読み込むほうがスピードが速くなるというコトで、WP fastest cacheを導入しました。こちらも同様のプラグインが３つほど会ったのですが、「W3 Total Cache Speed」だと設定が細かく出来るのは良いのですが、PageSpeed Insightsの結果がエラーになってしまう場合があり、「WP Super Cache」はあまり悪い所はなかったのですが、一番評価が高かったというコトで、「WP Fastest cache」を導入しました。
設定はこちらを参考にさせていただきました。
PCのほうは多少改悪しましたが、誤差みたいなもんなので、無視するコトにしました。
キャッシュの設定は割とメモリーを食う為、サーバー負荷かかります。この為、エラーにならないかどうかの検証はしっかりしたほうが良いと思います。
解決出来なかった改善項目
キーリクエストのプリロードとして表示される改善項目が残りました。なんだか、検証の度に出たり出なかったりするので、わかりにくい項目でした。
この項目は、<head></head>内に
1 | <link rel=”preload” href=”https://pagead2.googlesyndication.com/pagead/js/r20190828/r20190131/show_ads_impl.js” as=”script”> |
を入れたら解決するぜ！みたいなコトが書かれているページもあったのですが、私は解決しませんでした。
コミュニティーで検索したら「show_ads_impl.js」は同期型の広告らしいのですが、私の貼っている広告は全部非同期です。
Googleさんの内部処理で勝手に同期型のjsを読込をしようとしてこの問題が発生しているようなので、どうしようもないそうです。
その他の改善対応
その他のプラグイン関連での改善対応
上記以外の対策として使ったプラグインを参考に載せます。
Broken Link Checker
リンク誤りであったりデッドリンクがあった場合に検出が出来て便利です。
Optimize Database after Deleting Revisions
リビジョンが多すぎると重くなるらしいので、リビジョンを5世代管理迄にするよう設定しました。
EWWW Image Optimizer
画像を圧縮するのに便利です。これを入れていなかったら、PageSpeed Insightsの結果はさらに劣悪になっていたと思います。
不要なプラグインの削除
WordPressはプラグインで何でもできるから便利だぜ！
そういった考えで無邪気にプラグインをたくさん入れた為に、プラグインの残骸が割とありました。
プラグインも塵積って山となるで重くなる要因になるようでしたので、断捨離して不要なプラグインを削除しました。
Google Adsenseの整理
Google Adsenseがとにかく遅いというコトもわかりました。これを削除するだけで、劇的にスピードが改善しました。
どうしてもスピードが改善しない場合は、Google Adsenseの整理も必要と思いました。
サーバーの設定見直し
本ブログですが、Xserverに置いているのですが、サーバーの設定でもいくつか高速化ができそうでしたので、次の３つの設定をしてみました。
まとめ
ブログの記事は自分の考えを発信する為のモノと考えてますが、ユーザーさんが受け取れなかったら、あまり意味がないですよね。
ということで、今回はブログを快適なスピードで表示する為の試行錯誤をご紹介しました。
ブログを運営している皆さん、未だチェックしていなかったら、是非PageSpeed Insightsを試してみてください。
最後にちゃぶ台ひっくり返します。
ぶっちゃけですが、5Gの時代が来たら、全然どうでも良い話になるはずなので、
めんどうであれば対応しなくても全然平気だと思います。
ご閲覧ありがとうございました。
ではでは(^^)/
