WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
How to lazy load the background image of the cover block with WordPress

WordPressでカバーブロックの背景画像を遅延読み込み(Lazyload)させる方法

公開日: 使い方など

Google PageSpeed Insightsでのスコア改善にはいつも頭を悩ませます(困)。今回改善すべきと指摘されたのが、

オフスクリーン画像の遅延読み込み

という項目。Google PageSpeed Insightsの画面上ではこんな感じに表示されます。

え?WordPressのバージョン5.5以降、画像は自動で遅延読み込みになるんじゃなかったっけ??で、詳細画面の画像を見てみたら・・・

遅延されていないのはカバーブロックで背景に設定している画像

でした。普段カバーブロックもカバー画像も使わないので「へぇ~~そこはダメなんだねぇ」って感じでした。

きっと困ってる人多いだろうから、プラグイン探せば誰かがリリースしてくれてるんじゃないの?といろいろ試してみましたが、残念ながら背景画像に対して確実に遅延読み込みさせるプラグインってリリースされていないんですよね(2021年2月18日現在)。しかも、とあるプラグインのフォーラムでは言いがかり?と思われるようなやり取りもあったりしました。おーーーこわ。

たくさんのプラグインを試用した中、恐らく唯一この機能があると思われる【Lazy Loader】というプラグインを使ってみたところ、有効化したら「やったーーーーー」となるものの、一部のコンテンツではきちんと適用されず背景画像が表示されないこともあるので、ちょっと汎用には使えないかなという印象でした。

一度あきらめようかと思いましたが、やっぱり悔しい!!ということで、ちょっと力技ではあるものの、WordPressのカバーブロックで設定した背景画像を遅延読み込みさせる方法が見つかりましたので、備忘録を兼ね紹介しておきます。

本記事で紹介する方法は、【一括で】【簡単に】【コピペで】【自動で】という類のものではありません。そうしたものをご要望の方は時間の無駄になるかも知れませんので、他の記事を一生懸命お探しいただければ結構です。

そもそも何で背景画像は遅延読み込みされないのか?

対処方法を早速実装する前に、そもそも何で背景画像が遅延読み込みされないのかを知らないと、今回やっていることの理解も難しいですし、後々困ることもあると思うので、まずはこの件について簡単に触れておきます。

さらにその前に、遅延読み込み(Lazyload)ってなんぞや?について少し触れておきます。

遅延読み込みというのは、ブラウザ上で今みえていないものは読み込まない(インターネット上からダウンロードしない)ことを言います。今回の件では画像について、実際に表示される直前までダウンロードしないということになります。そうすることで、ダウンロードする容量が少なくなるので、最初にページを表示するまでの時間の短縮ができるって機能なんです。

遅延読み込み、画像(imgタグ)や埋め込み(iframe)タグに「loading=”lazy”」という属性を追加することで「この画像は直前まで読み込まないでね」という指示を出すようにし、多くのブラウザ(Google Chromeではバージョン75以降)でこの属性があるものは遅延読み込みをするようになっています。

そこで、Google PageSpeed Insightsでの評価でも「今見えていない部分の画像や埋め込みで遅延読み込みの指示が出されているか?」というのを基準の1つとしているのです。

WordPressでは、投稿や固定ページの本文内にある画像タグに対して、「高さ」と「幅」の指定があるものについては自動で「loading=”lazy”」属性が追加されるようになりましたから、この条件を満たしていれば何もしなくても遅延読み込みされているということになります。

興味のある方はソース表示して、画像タグに対して自身で指示した覚えのない「loading=”lazy”」属性が追加されているかを確認するといいでしょう。また、追加されていないものについては「高さ」と「幅」の属性を追加して確認するといいでしょう。

WordPressの遅延読み込みの仕組みや条件について詳しくは、公式サイトの5.5での画像の遅延読み込みを参照ください。

さて、話を戻して・・・ではなぜ背景画像を持つカバーブロックの背景画像は遅延読み込みされないのか?ここまで読めば分かりますね??本文内にあって、高さと幅が指定されていたとしても、

画像タグではない

からです。でもGoogle PageSpeed Insightsからは、結局画像なんだから遅延読み込みさせてよ!と提案されるのです。画像だけどWordPressで自動的に遅延読み込みの属性を追加してくれない背景画像をどうするの?が本記事のテーマになります。

ただ、スコアだけの話ではなく、転送量(最初にダウンロードする容量)が減ることで、確実に通常よりも速く表示されるのは間違いないわけですから、実装しておいて全く損はないものですから、カバーブロックで背景画像を使っている方はぜひ対応していってください。

前置きが長くなってしまいました。

ここまでお読みいただいて、何のために、何をしなければならないのかは理解いただけたと思いますので、それではここから先、具体的な対応方法を紹介していきます。

WordPressのカバーブロックで設定した背景画像を遅延読み込み(Lazyload)させる手順と方法

【前準備】背景画像を遅延読み込みさせるためのスクリプトを入手し、テーマへ適用させる

今回の背景画像の遅延読み込みを実現させるため、lazysizes.jsというスクリプトをWordPressへ読み込ませる必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" integrity="sha512-TmDwFLhg3UA4ZG0Eb4MIyT1O1Mb+Oww5kFG0uHqXsdbyZz9DcvYQhKpGgNkamAI6h2lGGZq2X8ftOJvF/XjTUg==" crossorigin="anonymous"></script>

というコードをテーマへ挿入して、都度外部から読み込むようにするのが一番簡単な方法なのですが、

  • 外部から読み込んでの動作となるため、多少なりとも表示速度に影響が出る可能性がある
  • スクリプトの提供元(アクセス先)が閉鎖などすれば即時に利用できなくなる

ことから、できれば以下の方法で導入し、できるだけ確実に動作するようにしましょう。

1.スクリプトの入手

こちらから提供元(Github内のページ)を開き、下図のように「Code」→「Download ZIP」とクリックして、パソコン上の適当な場所へダウンロード後、解凍してください。

2.テーマフォルダへアップロードする準備をする

解凍したフォルダの中で必要なのは「lazysizes.min.js」というファイルのみです。デスクトップなどに「js」というフォルダを作り、その中へ「lazysizes.min.js」をコピーしておきます
※本記事では「lazysizes.min.js」がjsというフォルダの中にある前提で解説していきます。すでに同名のフォルダがテーマフォルダ内にある場合は別名にし、以下は読み替えてください。

3.テーマフォルダへアップロードする

FTPやサーバーのファイルマネージャーなどを使って、現在有効化しているテーマのフォルダ内へ「js」フォルダをアップロードします

既に転送先のフォルダ内(テーマフォルダ内)に「js」というフォルダが存在する場合には「lazysizes.min.js」のみをアップロードするか、「lsjs」などの別のフォルダ名へ変更してからアップロードするようにしてください。
※安易に「上書きしますか?」→「はい」とクリックすると、現在の「js」フォルダ内にあるファイル・フォルダが消失し、サイトが表示されなくなる可能性がありますので慎重に行ってください。
※万が一この作業によって不具合が生じても、一切責任は負いません

FTPやサーバーのファイルマネージャーの代わりに「File Manager」というプラグインを使えば、サイトの管理画面からアップロードできますが、あくまでもFTPまたはサーバーのファイルマネージャーが使える環境で使用するようにしましょう

4.背景画像の遅延読み込みができるようにする(スクリプトの適用)

現在有効化しているテーマのfunctions.phpへ以下のコードを追記します。

/***** 背景画像を遅延読み込みさせるスクリプトの読み込み *****/
function ha_lazyloadjs_enqueue() {
	 wp_enqueue_script( 'ha-lazy', get_stylesheet_directory_uri() . '/js/lazysizes.min.js');	
}
add_action( 'wp_enqueue_scripts', 'ha_lazyloadjs_enqueue');

/***** ヘッダー背景の遅延読み込みをさせる追加スクリプトを出力 *****/
function ha_header_bg_lazy(){
?>
<script defer>
  document.addEventListener('lazybeforeunveil', function(e){
      var bg = e.target.getAttribute('data-bg');
      if(bg){
          e.target.style.backgroundImage = 'url(' + bg + ')';
      }
  });
</script>
<?php
};
add_action('wp_head', 'ha_header_bg_lazy');

上半分は先ほどアップロードした「js」フォルダ内の「lazysizes.min.js」を読み込ませるコード、下半分は背景画像に対して処理をするための追加コードを読み込ませる(出力させる)コードになります。

上記コードは子テーマが有効化されている場合のものになります。親テーマが有効化されている場合には、「get_stylesheet_directory_uri()」の部分を親テーマ用の「get_template_directory_uri()」へ書き換えてください。

以上で前準備は完了です。

背景画像のあるカバーブロックがある投稿の確認と変更

冒頭で力技と書いたのは、この部分になります。WordPressのほとんどのブロックは「HTMLとして編集」というオプションがあり、それを選択すれば今エディタに表示されているものをhtmlタグを使って編集できるようになっています。

しかし、なぜかカバーブロックだけはこのオプション項目がありません(何で??)。でもちょっと考えれば分かることですが、最終的にウェブページはhtmlで出力されるので、以下の手順でソースを取得します。

  • 背景画像を遅延読み込みさせたいカバーブロックのあるページのソースを表示させる
     ※ページを表示させて右クリック→「ソースを表示」で見ることができます
     ※htmlが縮小化されている場合には探すのが困難ですので、Google ChromeでQuick source viewerなどの拡張機能を使うとよいでしょう
  • 問題のカバーブロックがある箇所を探して、ソースをコピーする

全体のソース表示後、キーボードで「Ctrl」+「F」を入力し、出てきた検索窓に「wp-block-cove」と入力すると、そのページ(ページソース)でカバーブロックを使っている箇所が簡単に検索できます。

ソースが手に入れば、「カスタムhtml」ブロックを追加して貼り付ければ、エディタの「htmlとして編集」オプションと同じことになります。

ちなみに背景画像を使ったカバーブロックの構造はこんな感じになっています(ソース探しの参考に)

<div class="wp-block-cover" style="background-image:url(背景画像のURL)">
<div class="wp-block-cover__inner-container">
<p>中身のコンテンツ</p>
</div>
</div>

構造としては「wp-block-cover」というクラスのあるdivタグの入れ子に「wp-block-cover__inner-container」というdivタグに囲まれた、中身のコンテンツがあるという感じのソースになります。

中身の部分が複雑になればなるほどソースも長くなりますが、背景画像を示す部分は先頭と末尾のdivになりますから、入れ子の部分は特に気にしなくてよいでしょう。

元のカバーブロック(ビジュアル表示されているもの)はいつでも削除できますから、きちんと適用されるまで、元のカバーブロックは削除しないで作業した方がよいでしょう。

HTMLソースの変更

前項の方法でソースをカスタムhtmlブロックへ貼り付けたら、以下のようにコードを変更していきます。あえていろいろなクラスや設定の入っているソースを使って解説します。

編集前のコード(背景画像を表示する場合の画像部分)

<div class="wp-block-cover aligncenter has-background-dim is-position-center-center animate__animated animate__backInLeft" style="background-image:url(画像のURL);min-height:210px">

まず冒頭のclassには「wp-block-cover」の他、さまざまな設定を適用させるためのクラスが付与されていますので、それをそのまま残して「lazyload」属性を追加します。

上記の場合のclass部分の編集後のコードは以下のようにします(末尾にlazyload属性を追加します)

<div class="wp-block-cover aligncenter has-background-dim is-position-center-center animate__animated animate__backInLeft lazyload"

次に以下の部分を変更します

変更前のコード

style="background-image:url(画像のURL);min-height:210px;">

変更後のコード

data-bg="画像のURL" style="min-height:210px">

今回の場合はmin-height(カバー画像の最小高)が設定されているので上記のようにしますが、設定がなければ

data-bg="画像のURL">

とすれば大丈夫です。

上の例での完成形が以下になります

<div class="wp-block-cover aligncenter has-background-dim is-position-center-center animate__animated animate__backInLeft lazyload" data-bg="画像のURL" style="min-height:210px">

ここまで終わったら、投稿を新しいタブでプレビューして、確認してみましょう。

設定に問題がなく、元のカバーブロックとあわせて2か所、同じ背景画像付きのコンテンツが表示されれば、元のカバーブロックは削除してよいでしょう。

そのページにある背景画像付きのカバーブロックを使ったコンテンツをすべて変更し、最後にGoogle PageSpeed Insightsで、改善の提案が消えているかを確認したら完了です。

きちんと表示されないときは以下の確認を行ってください

本記事作成にあたって、背景画像の遅延読み込み(lazy load)をするlazysizes.jsを参考にさせていただきました。

今回の方法の発展形!?

冒頭で

本記事で紹介する方法は、【一括で】【簡単に】【コピペで】【自動で】という類のものではありません。そうしたものをご要望の方は時間の無駄になるかも知れませんので、他の記事を一生懸命お探しいただければ結構です。

と書きましたが、どの投稿や固定ページに背景画像付きカバーブロックの入っているのかも記憶にないですし、それらすべてを今回の方法でアナログ編集していくのもどうか?ということで、ソース内の文字置き換え(preg_replace)を使って何とかできないかと試行錯誤しましたが、ソースの内容がカバーブロックの設定によってかなり変わってしまうことと、私の技術不足から実装には至りませんでした。

また折を見て再チャレンジし、【一括で】【簡単に】【コピペで】【自動で】できるようにしてみたいと思っていますので、成功したらこの記事へ追記するなどして、また紹介したいと思います。

更新日更新内容
2021年 3月15日「WordPressでカバーブロックの背景画像を遅延読み込み(Lazyload)させる方法」を公開しました

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。