• HOME > 
  • WordPress > 
  • ワードプレスで画像の遅延読み込みを行う方法【WP5.5から標...

ワードプレスで画像の遅延読み込みを行う方法【WP5.5から標準搭載された機能の使い方】

投稿日:

遅延読み込みとは?

ページの読み込みに時間が掛かると、せっかく訪問してくれたユーザーを待たせてしまい、最悪の場合待ちきれずに離脱されてしまいます。

このような事態を防ぐためにもページの読み込み速度は非常に重要視されており、画像の遅延読み込みは速度を左右する重要な改善策のひとつです。

テキストの部分と比べ、画像の読み込みにはどうしても時間が掛かってしまいます。

そこで、あえて意図的に画像の読み込みを遅らせることでページ全体の表示速度を改善させるという手段が「遅延読み込み」です。

読み込み速度を確認するには?

サイトの読み込み速度の確認や改善を行う際には「PageSpeed Insights」を活用しましょう。

「PageSpeed Insights」はサイトの読み込み速度を客観的に点数付けしてくれるだけでなく、読み込みを低下させる原因となっている項目をわかりやすく教えてくれます。

PageSpeed Insights【https://pagespeed.web.dev/】

画像の遅延読み込みを行う方法

以前までは、ワードプレスで画像の遅延読み込みを行うためにはプラグインなどを利用しなくてはなりませんでしたが、バージョン5.5以降のワードプレスであれば標準機能として遅延読み込みが搭載されているので、とても簡単に実装することが可能です。

imgタグにloading="lazy"を追記

遅延読み込みさせたい画像のimgタグ内に、loading="lazy"を追記するだけで、画像の遅延読み込みの実装は完了です。

imgタグにloading=lazyを追記

ビジュアルエディターを使用している場合は、一旦コードエディターに切り替えて追記してください。

リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。「ビジュアルエディター」と呼ばれるページ編集機能を使用することで専門知識がなくても画像の配置などを直感的に行いページを作成することができます...【もっと読む】

HTML

<img src="sample.jpg" alt="イメージ画像" loading="lazy">

まとめ

コードにひと手間加えるだけで遅延読み込みが実装でき、読み込み速度の改善が図れますのでワードプレスを利用している場合はぜひ活用しましょう。

関連する記事

サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年03月10日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。
サムネイル

ワードプレスで文字数のカウントを行う方法【エディター搭載の便……

2023年01月26日
最終更新日:2023年03月10日
ワードプレスにはページエディターに標準的に文字数カウントが搭載されています。外部のWebサイトを利用する必要なく、ダイレクトにチェックすることができるので是非活用してみてください。
サムネイル

ワードプレスでnoindexを設定する方法【サイト全体や特定……

2023年01月17日
最終更新日:2023年01月24日
ワードプレスのサイト全体(すべてのページ)にnoindexを設定する方法はとても簡単で、管理画面の「表示設定」にある「検索エンジンでの表示」にチェックを入れるだけです。
サムネイル

ワードプレスでリダイレクトを設定する手順【.htaccess……

2022年10月28日
最終更新日:2023年01月24日
ワードプレスで制作したページにリダイレクトによる転送処理を設定するには、.htaccessを使う方法とプラグインを使う方法の2通りがあります。