WordPressで画像の遅延読み込み(Lazyload)をプラグインなしで実装する


Webページで載せる画像が多いと、画像の数だけ読み込み処理が発生するので、表示速度に大きな影響を与えます。画像のファイルサイズの大きさもそうですが。
ファーストビュー(above the fold)の可視範囲だけでも素早く表示するために、スクロールコンテンツ範囲(below the fold)の画像の遅延読み込み(Lazyload)を実装する手法をよくとるかと思います。

通常のWebサイトのコンテンツ内では、img要素にloding属性を設定していけばいいですが、WordPressで構築しているブログサイトなどでループ処理内で動的に画像を出力する場合は、スムーズにLazyloadを実装することができません。

Lazyloadに関するWrodPressのプラグインはいくつかありますが、プラグインを多用してもサイトは重くなったり、別のプラグインとの相性が悪い場合もあったりするので、なるべくプラグインを利用せずにいろいろ実装したいところです。

ここでは、プラグインを利用せずに画像の遅延読み込み(Lazyload)を実装する方法をご紹介します。

「the_content();」で出力される投稿では、投稿内のimgタグを編集するような複雑なプログラムが必要になってきて、またWordPressの仕様が変わってくると影響を受けそうな部分ですのでここではお話しませんが、記事内に関連記事や最新記事を何件かサムネイル付きで表示させている部分は、意外と手軽に対応することができます。
トップページやアーカイブページでも対応できます。

ループ処理でサムネイルを取得している部分に、少しプログラムを加えるといった内容です。

作業前は必ず、編集するファイルのバックアップを取っておいてください。
それでは見ていきましょう。


プラグインなしでLazyloadを実装


記事の最後やサイドバーなどに数件表示している、関連記事や最新記事のサムネイルも、毎回読み込みが行われます。ブログサイトなどではよくあるデザインでしょう。

ループ処理のプログラムにもよりますが、「get_the_post_thumbnail();」や「the_post_thumbnail();」でサムネイルを取得しているでしょう。

例えば、以下のようにサムネイルを取得しているとしましょう。

<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>



サムネイルのサイズの他にカンマで区切ってオプションが設定でき、get_the_post_thumbnail()関数のパラメーターに「array(‘loading’ =>’lazy’)」を追加します。

<?php echo get_the_post_thumbnail($post->ID, 'thumb110', array('loading' =>'lazy')); ?>



これでサムネイルのimg要素にloading属性が追加され、lazyの値が設定されます。


これは、トップページの記事一覧やアーカイブページ等でも同じです。
以下のようなプログラムでサムネイルを表示しているとします。

<?php $title= get_the_title(); the_post_thumbnail('thumb800', array('alt' =>$title, 'title' => $title); ?>



トップページの記事一覧やアーカイブでは、ページのタイトルをalt属性やtitle属性に設定することが多いので、ここでは「get_the_title();」を使って属性値を設定しています。

配列で設定しているalt属性やtitle属性のオプションと一緒に、loading属性も追加します。

<?php $title= get_the_title(); the_post_thumbnail('thumb800', array('alt' =>$title, 'title' => $title, 'loading' =>'lazy')); ?>



これでループ処理で表示しているサムネイルに、Lazyloadの設定をすることができます。

ほんの少しプログラムを追加するだけで実装できます。