WordPressの高速化で効果のあった対策3選 LION BLOGでのLazy Loadは

以前はブロガー的なこともしていましたが、この様な形で記事を作成するのは久々です。おぼつかないところもありますが、是非ともこの記事で、WordPressの高速化についての、有益な情報を得てもらえたら幸いです。

まずWordPressの高速化対策で、行ったことについて書いていきます。

1. Compress JPEG & PNG imagesプラグインによる、画像の軽量化。
2. Autoptimizeプラグインの導入。
3. lazysizesプラグインによる、画像のオフスクリーン表示。
4. .htaccessへの、ブラウザキャッシュとGzip圧縮を有効にする記述の追加。
5. WP Fastest Cacheプラグインの導入。
6. Google AdSense自動広告の廃止。
7. function.phpへ、jsを遅延読み込みさせる記述の追加
8. CSSを読み込む記述の下にcssrelpreload.jsを追加しpreloadに。
9. CSSの非同期読込設定を一部有効に。

対策を行った後の結果としてはこの様な感じです。

この中で、特に効果があったものをピックアップして紹介します。

lazysizesプラグインによる、画像のオフスクリーン表示

ざっくり言って、画像を最初から一気に読み込ませるのでは無く、スクロールした段階で読み込ませようという技術がLazy Loadらしいです。スクロールする度にふわっと画像が表示されるサイトを見かけた場合、Lazy Loadが使われているかもしれません。

こうすることで、ページをより効率的に、早く表示出来ます。

このプラグインの導入、見つけ出すまでが大変でした。WordPressのプラグインには多くのLazy Load系プラグインがあります。有名なところだと、「Lazy Load」「a3 Lazy Load」「Lazy Load by WP Rocket」「Unveil Lazy load」「BJ Lazy Load」などでしょう。今回この中の全てを試しました。

ところが、ほぼ全てで、不具合が起きました。その内容としては、「画像が表示されない」というものです。これも一概には言えず、PCでは正常に表示され、iPhone（モバイル）のSafariのプライベートモードでも正常に表示されている。しかし、iPhone（モバイル）のSafariの通常モードでは、サムネイル画像が表示されてなかったり、所々表示されない画像がある。色々と設定を変えようと試みたり、調べたりしましたが、うまく行かず。

そんな中巡り合ったのが、「lazysizes」プラグインだったのです。このプラグインなら、画像に関してのSEO対策もされていて、クローラーが画像を認識しないなんてことも無いようです。

そして何より全ての画像が表示される。

ただし、プラグインの更新頻度的な観点からはおすすめしない方が良いのかもしれません。
lazysizes – WordPress plugin | WordPress.org

Lazy Load系プラグインは、テーマによる相性もあるようです。今回紹介したプラグインについては、「LION BLOG」のテーマと相性が良さそうで、逆にLION BLOGを使用しているならば、他のLazy Loadプラグインは相性が悪そうです。

追記：AMPページで画像が表示されないことに気が付きました。AMPではそもそもLazy Loadは使えませんでしたね。ただ、「Skip lazy loading on these classes:」の項目で、Lazy Loadを除外するclassを指定できたので、自分の場合「wp-image-1195」などを入力すると除外され、画像が表示される様になりました。

ただこれは応急的なもので、正直、AMPには向いていないところが唯一の欠点かもしれません。AMPページのみ除外する機能のある「a3 Lazy Load」もありますが、自分の場合は画像が真っ白になるのでNGです。

WP Fastest Cacheプラグインの導入

インストールをしてチェックを入れるだけの簡単操作で高速化が出来るプラグインです。スピード改善作業の終盤に導入をし、初めて90点台を出したものこのプラグインのおかげでした。
WP Fastest Cache

JavaScriptやCSSの最適化については、既にAutoptimizeの方で行っていて、Gzip 圧縮についても、.htaccessの記述で行っていたので、チェックを入れた部分はここだけです。

Google AdSense自動広告の廃止

最後に真打ちとなる対策です。当たり前なことだとは思いますが、自動広告を設定していると、重くなり、スピードも遅くなります。

ここに気づかず、スコアの25点から30点あたりをうろちょろしていた期間が長かったのですが、一旦自動広告を停止し、すぐにその反映を得るために、コードも削除しました。すると格段にPageSpeed Insightsのスコアが上昇しました。

自動広告を無くしても良いかという点に関しては、約1ヶ月のクリック数がたったの数回だったので、クリック数も少なく、加えて重くなるなら、自動広告を削除した方が得策だと判断しました。

まとめ

この解説以外にも、文頭にある通りやったことは沢山あるのですが、詳細の解説記事はまた後日としたいと思います。

作業の流れとしては、PageSpeed Insightsで改善出来る項目があった場合に、改善策を調べ、作業と改善を行い、またPageSpeed Insightsで確認する。更に改善出来る項目があった場合には、改善策を調べ、作業〜の繰り返しです。

WordPressを含む、WEBの勉強にもなりましたが、時間は費やしました。

まだ高速化対策は終わっていないつもりなので、引き続き行っていきます。