Wordpress

画面の大きさに応じた画像を遅延読み込みにする

srcsetは画面サイズに合わせた画像を読み込むことができるHTMLの新しいプロパティです。

WordPressはsrcsetを自動で作って表示してくれるのですが、スクロールによる遅延読み込みに対応していないので、srcset+遅延読み込み対応方法をメモしておきます。

面倒だ!って方は、ページ下部の「需要調査」のTwitterで「いいね」してれたらプラグイン化する確率が上がります。

srcset + lazysizes

用意するもの

まずsrcsetをレイジー(スクロールによる遅延読み込み)な感じでやってくれるJavascriptがこれです。

lazysizes(github)

これをまずDL。Wordpressに読み込ませて(function.php)

add_action( 'wp_enqueue_scripts', 'mb_scripts' );
function mb_scripts() {
wp_enqueue_script( 'lazysizes', get_template_directory_uri() . '/js/vendor/lazysizes.min.js', NULL, NULL, false );
}

これだけだと、はじめからWordpressの吐き出したimgにはsrcが設定されているので、上記JSを読み込む前にsrcの画像をブラウザが読みに行ってしまいます。

対応方法としては、srcを意味のない画像に設定し、[data-src][data-srcset]にそれぞれ適切な値を自動で入れるようにします。data-src,data-srcsetはJSが読み込まれた時点でsrcとsrcsetに置き換わるので、スクロールしないと表示しないことになります

function.php

/**
* lazysizes対応のattachment_image_attributes
*/
function lazysizes_attachment_image_attributes( $atts, $attachment ) {
if(!empty($atts['class'])){
if(strpos($atts['class'], 'lazyload') !== false){
$atts['data-src'] = $atts['src'];
$atts['src'] = 'data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7';
$atts['data-srcset'] = $atts['srcset'];
$atts['srcset'] = false;
}
}
return $atts;
}
function lazysizes_the_content( $content ) {
$pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
$result = preg_match_all($pattern, $content, $matches);
if($result > 0){
$src_pattern = "/src=\"(.*?)\"/i";
foreach ($matches[0] as $key => $match) {
// クラスにlazyloadがあったら
if(strpos($match, "lazyload") !== false){
preg_match($src_pattern, $match, $src);
$lazy_img = str_replace("src=", "data-src=", $match);
$lazy_img = str_replace("srcset=", "data-srcset=", $lazy_img);
$lazy_img = str_replace("sizes=", "data-sizes=", $lazy_img);
$lazy_img = str_replace("/>", "src='data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7' />", $lazy_img);
$content = str_replace($match, $lazy_img, $content);
}
}
}
return $content;
}
add_filter('the_content','lazysizes_the_content', 10, 2);
add_filter('wp_get_attachment_image_attributes', 'lazysizes_attachment_image_attributes', 10, 2 );

全部はlazyにならない仕様にしてます

(*関数名等はかなり適当につけちゃってます。導入する際は気をつけてね)

PHPでの使用例
<?php echo wp_get_attachment_image( $img_id, 'full', false, array('class' => "lazyload" )); ?>
通常の記事の仕様例

普通に画像を挿入して、クラスに「lazyload」をつけるとその画像は遅延読み込み+srcsetになります。
(メディアを追加-> 追加した画像を「編集」-> 画面追加)

どうです?srcsetなのにLazyな感じになってるでしょ?

検証動画

検証対象画像: hageIMGL0587_TP_V-768×512.jpg(25.9KB)
元画像: hageIMGL0587_TP_V.jpg(109KB)
srcsetで削減した容量: 83KBぐらい
スクロール遅延読み込みで削減した容量: 0~109KB(ユーザーの行動による)

動画の最後で画面サイズを大きくしています。すると画面サイズに合わせた画像が自動でダウンロードされるのがわかります。

srcsetだけでもかなりエコですが、スクロールに応じた自動ダウンロードを導入することによって、画像に関してはかなりエコになります。

ただし画像読み込みのタイミングが「HTML&JSの読み込み後」になるので、ヘッダー部分など確実に読み込まれる部分では遅延は使用しないほうが良いと思います。

需要調査

このツイートが「10いいね」ぐらい行ったら「プラグイン化」します。

たぶんプラグインしたら

  • 記事内の全てを遅延にするか管理画面から選択
  • wp_get_attachment_image_attributesに対しても全部するか選択

これぐらいのオプションはつけるつもりです。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コーディング代行

高品質なソースコードをお約束いたします。

詳しくはこちら
背景はFreepikによるデザイン

information

お問い合わせ