HOME
本記事は執筆時点（2022年08月09日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
遅延読み込みとは？
ページの読み込みに時間が掛かると、せっかく訪問してくれたユーザーを待たせてしまい、最悪の場合待ちきれずに離脱されてしまいます。
このような事態を防ぐためにもページの読み込み速度は非常に重要視されており、画像の遅延読み込みは速度を左右する重要な改善策のひとつです。
テキストの部分と比べ、画像の読み込みにはどうしても時間が掛かってしまいます。
そこで、あえて意図的に画像の読み込みを遅らせることでページ全体の表示速度を改善させるという手段が「遅延読み込み」です。
読み込み速度を確認するには？
サイトの読み込み速度の確認や改善を行う際には「PageSpeed Insights」を活用しましょう。
「PageSpeed Insights」はサイトの読み込み速度を客観的に点数付けしてくれるだけでなく、読み込みを低下させる原因となっている項目をわかりやすく教えてくれます。
「PageSpeed Insights」はこちら
PageSpeed Insights【https://pagespeed.web.dev/】画像の遅延読み込みを行う方法
以前までは、ワードプレスで画像の遅延読み込みを行うためにはプラグインなどを利用しなくてはなりませんでしたが、バージョン5.5以降のワードプレスであれば標準機能として遅延読み込みが搭載されているので、とても簡単に実装することが可能です。
imgタグにloading="lazy"を追記
遅延読み込みさせたい画像のimgタグ内に、loading="lazy"を追記するだけで、画像の遅延読み込みの実装は完了です。
ビジュアルエディターを使用している場合は、一旦コードエディターに切り替えて追記してください。
ワードプレスのエディターの使い方
ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。「ビジュアルエディター」と呼ばれるページ編集機能を使用することで専門知識がなくても画像の配置などを直感的に行いページを作成することができます...【もっと読む】
HTML
<img src="sample.jpg" alt="イメージ画像" loading="lazy">
まとめ
コードにひと手間加えるだけで遅延読み込みが実装でき、読み込み速度の改善が図れますのでワードプレスを利用している場合はぜひ活用しましょう。
