Lazy Load 画像遅延読込の導入とWordPress Popular Posts

PageSpeed Insights で「オフスクリーン画像の遅延読み込み」をせよとの警告が出たので Lazy Load を導入した。

PageSpeed Insights

developers.google.com

 

https://developers.google.com/speed/pagespeed/insights/

Lazy Load 系のプラグインをいくつか試してみた。

どれもWPP＝WordPress Popular Posts のサムネイル画像の表示に問題があった。

Jetpack のLazyload    WPP のサムネイル画像が表示されない。真っ白。

Lazy Load by  WP Rocket 全く機能しない

BJ Lazy Load   WPP の画像が表示されない

a3 Lazy Load   WPP の画像が表示されない

Lazy Load Optimizer  WPP の画像は表示されるが、Lazy Load にならない。一部のページで表示が乱れるので停止。

Lazy Loader  WPP の画像は表示されるが、Lazy Load にならない。

Autoptimize の Lazyload 機能を有効にする。これがWordPress Popular Posts 内のタグにも class="lazyload" を追加できていた。

WordPress Popular Posts にもLazyload を適用する方法

記事抜粋からURLを除去する方法: WordPress

記事リストのページには抜粋 excerpt が表示される。Wordpress Popular posts でも記事抜粋が表示される。そこにURLが混じっていると見にくいのでこれを除去する。 functions.php に次を追加する。//URLの正規表現define('URL_REG_STR', '(https?|ftp)(:\/\/+)');define('URL_REG', '/'.URL_REG_STR.'/');//本文部分の冒頭を綺麗に抜粋する echo get_content_excerpt( get_the_content(), 150 )function get_content_excerpt($content, $length = 70){ //_v($content); $con...

信旅

 

https://makotoiwasaki.com/記事抜粋からurlを除去.html

Autoptimize の Lazyload 機能 を使用すればいい。

警告が出なくなった。

と思ったら、iframe の google map や、 youtube 動画がLazyload にならないことが判明した。

それで、 iframe もLazyload できる Lazy Loader を改良して、WPPのサムネイル画像もLazyload でいるようにした。

lazy-loading-responsive-images/src/Plugin.php

の88行目に、次のように wpp_post にフィルターをかけるだけでよかった。

// Filter markup of the_content() calls to modify media markup for lazy loading.
add_filter( 'the_content', array( $this, 'filter_markup' ), 10001 );
add_filter( 'wpp_post', array( $this, 'filter_markup' ), 10001 );

タナカ売りの少女