今回は、Cocoon対応の方法とその他のテーマの方法でWordpressのLazy loadをファーストビューだけ無効化した方法をお伝えしたいと思います。Lazy loadとは画像遅延読み込みのことで、画像の読み込みを遅らせることでページの表示速度が向上します。Wordpressでは5.5からは標準で画像の遅延読み込みタグが挿入されるようになったみたいでPC版Chromeでも対応しているみたいです。
一昔前までは、プラグインを入れて対応していたりしたんですが、次々と大御所たちが標準でLazy loadに対応してっています、と一安心しているとPageSpeed InsightsがLPCが悪化していました。
オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むようにして、操作可能になるまでの時間を短縮することをご検討ください。
どういうことかというと、LPCはユーザーがページを開いてから最初に見える最も大きなコンテンツの描写時間を示しています。同じページでもトップ画像が最大コンテンツと判断されたり、見出し部分だったりとまちまちだったりもしますが、僕のブログでは記事の一枚目までは最大コンテンツと認識される場合があるようです。
僕の別のブログの場合だと、トップ画像だと思っていましたが、どうやら一枚目の記事に使われている画像も何度か計測してみると最大コンテンツと認識されているようです。
この一枚目の画像まで遅延してしまいLPCを悪化させているようです。なので、ファーストビューに入る画像以外を遅延読み込みする必要があります。
Cocoonでなければ、Autoptimizeを使った方法が簡単そうです。Litespeedcacheにもこの遅延ロード機能は付いていますが、Litespeedcacheにはクラス名などでファーストビューを除外することができなかったからです。
Autoptimizeの使用
画像の遅延読み込みにチェックします。二つ下の項目には何枚目から遅延読み込みするかという数字を入力することができます。
ただし、このAutoptimizeはCocoonと相性が悪いらしく、過去のフォーラムでも不具合が報告されているそうで、この機能を使うと画像が真っ白になってしまいましたので同じような機能をPHPで置き換えてみました。
EWWWを使用
EWWWでも同様の機能がありました「設定」→「基本」から選択できる「遅延読み込み」にチェックを入れるだけで使えます。
「除外」の項目に、クラス名やURLを入れると除外できそうですが、僕の環境では、除外したワードを含まない箇所は画像が表示されなくなりました。
PHPによる置き換え
どうやらCocoonではプラグインで遅延ロードするのは相性が良くなさそうなので仕方なくfunctions.phpに追記することで対応しました。
add_filter( 'wp_lazy_loading_enabled' , '__return_false' );//自動で挿入されるlazyloadを無効化
function change_the_content($the_content) {
$the_content = preg_replace("/<img/", "<img loading=\"lazy\"", $the_content);
$the_content = preg_replace("/<img loading=\"lazy\" class=\"alignnone/", "<img class=\"alignnone", $the_content);
return $the_content;
}
add_filter('the_content','change_the_content');
Cocoonの子テーマ内にあるfunctions.phpに上記のような記述をすることで、ファーストビューにあるLazy Loadを消しました。
まず、WordPressで勝手に挿入されているLazyloadをオフに、PHP上でLazy Loadを挿入します。
結局同じことのように見えますが、標準の機能はオフにしておかないと、PHPで置き換えた後でも、自動挿入してしまうみたいです(‘Д’)
WordPressでは、「alignnone」というクラス名が、imgタグには挿入されるみたいなんですが、このクラス名は画像URLで記事に書き込んだ場合のみ挿入されて、テキストエディタで書いた場合は挿入されないみたいです。
僕の場合、最初に使っている画像は、使いまわしていますので画像URLを書いていますが、記事内は直接タグを書いています。
今回はこれを利用して最初に使われている画像のみ遅延読み込みを削除しました。
まとめ
今回は、Cocoonを使っている場合と他のテーマの場合のファーストビューの遅延読み込みをオフにする方法について記事にしました。
最初の画像をURLで入れている場合という特殊な場合にしか使えませんがｗなにか役に立つこともあるかもなーと思って記事にしました( ;∀;)
参考程度にしていただければと思います。
コメント