サイトの表示速度チェッカーPageSpeed Insightsで「オフスクリーン画像での遅延読み込み」に引っ掛かってしまった。

しかし、使っているテーマで表示されるサムネイルがレスポンシブイメージ。
属性の付与をどうしていいか分からない…。

そんな悩みを解決できたので、改善策をシェアしたいと思います。

WordPressレスポンシブイメージのサムネイルにLazy Loaderを適用する方法

Lazy Loadを導入する際に必須なのが、画像データに「lazy」のclassを付与しなければなりません。

ですが、レスポンシブイメージのサムネイル「the_post_thumbnail()」にどうやって属性を付けるんだ・・・?ってなりますよね。
自分はなりました。

色々と調べた結果、こちらの記事を発見。

≫wordpressにおけるレスポンシブイメージに対するlazyload対策

これを読んで、「lazysizes」を導入することにしました。

「lazysizes」を導入する流れ

1.「https://github.com/aFarkas/lazysizes」からzipファイルをダウンロード。
解凍し「lazysizes.min.js」をFTPツールなどで導入。

2.HTMLのhead内で「lazysizes.min.js」を読み込む。

<script async src="<?php get_template_directory_uri ()?>/js/lazysizes.min.js"></script>

3.以下のコードを使用中のテーマのfunctions.phpに追記する。

// lazysizes imgにclass付与
function thumbnailForLazyload($html, $post_id, $post_image_id)
{
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '" >';
$html .= '<img src="' . get_stylesheet_directory_uri() . '/images/gray.gif" data-srcset="' .wp_get_attachment_image_srcset($post_image_id).'"';
$html .= 'data-sizes="'.wp_get_attachment_image_sizes($post_id) . '" class="lazyload wp-post-image">';
return $html;
}add_filter('post_thumbnail_html', 'thumbnailForLazyload', 3, 10);

補足

5行目のダミー画像のURLを自分で用意したものに差し替えました。

また、記事ページのアイキャッチの画質が落ちてしまうのを防ぐため、

6行目
「data-sizes="'.wp_get_attachment_image_sizes($post_image_id)」
→「data-sizes="'.wp_get_attachment_image_sizes($post_id)」

に変更しました。
(本ブログのテーマ「STINGER 8」、子テーマ「8beat Style」)

lazysizesの導入でPageSpeed Insightsの速度が60→87に

(C)Google

参考記事を見つけるまではかなり手こずってしまいましたが、結果的に苦労した甲斐がありました。

初心者としてはテーマ選定をマズった感もありますが、これも経験ということで良しとしておきます・・・。

「lazysizes」はjQueryが不要というメリットも大きいです。
CSSでエフェクト設定もできるようなのでいじってみようと思います。

※本ブログは現在Bloggerを利用しています。
※Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

「オフスクリーン画像での遅延読み込み」レスポンシブイメージでの対処法【PageSpeed Insights】

サイトの表示速度チェッカーPageSpeed Insightsで「オフスクリーン画像での遅延読み込み」に引っ掛かってしまった。

しかし、使っているテーマで表示されるサムネイルがレスポンシブイメージ。
属性の付与をどうしていいか分からない…。

そんな悩みを解決できたので、改善策をシェアしたいと思います。

WordPressレスポンシブイメージのサムネイルにLazy Loaderを適用する方法

Lazy Loadを導入する際に必須なのが、画像データに「lazy」のclassを付与しなければなりません。

ですが、レスポンシブイメージのサムネイル「the_post_thumbnail()」にどうやって属性を付けるんだ・・・?ってなりますよね。
自分はなりました。

色々と調べた結果、こちらの記事を発見。

≫wordpressにおけるレスポンシブイメージに対するlazyload対策

これを読んで、「lazysizes」を導入することにしました。

「lazysizes」を導入する流れ

1.「https://github.com/aFarkas/lazysizes」からzipファイルをダウンロード。
解凍し「lazysizes.min.js」をFTPツールなどで導入。

2.HTMLのhead内で「lazysizes.min.js」を読み込む。

<script async src="<?php get_template_directory_uri ()?>/js/lazysizes.min.js"></script>

3.以下のコードを使用中のテーマのfunctions.phpに追記する。

// lazysizes imgにclass付与
function thumbnailForLazyload($html, $post_id, $post_image_id)
{
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '" >';
$html .= '<img src="' . get_stylesheet_directory_uri() . '/images/gray.gif" data-srcset="' .wp_get_attachment_image_srcset($post_image_id).'"';
$html .= 'data-sizes="'.wp_get_attachment_image_sizes($post_id) . '" class="lazyload wp-post-image">';
return $html;
}add_filter('post_thumbnail_html', 'thumbnailForLazyload', 3, 10);

補足

5行目のダミー画像のURLを自分で用意したものに差し替えました。

また、記事ページのアイキャッチの画質が落ちてしまうのを防ぐため、

6行目
「data-sizes="'.wp_get_attachment_image_sizes($post_image_id)」
→「data-sizes="'.wp_get_attachment_image_sizes($post_id)」

に変更しました。
(本ブログのテーマ「STINGER 8」、子テーマ「8beat Style」)

lazysizesの導入でPageSpeed Insightsの速度が60→87に

(C)Google

参考記事を見つけるまではかなり手こずってしまいましたが、結果的に苦労した甲斐がありました。

初心者としてはテーマ選定をマズった感もありますが、これも経験ということで良しとしておきます・・・。

「lazysizes」はjQueryが不要というメリットも大きいです。
CSSでエフェクト設定もできるようなのでいじってみようと思います。

※本ブログは現在Bloggerを利用しています。
※Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。

次に読まれている記事