Lazyload」がGoogleからリリースされていましたので早速当サイト使用してみます。このプラグインの使い方は非常にシンプルで、プラグインのインストール後、有効化するだけで機能します。LazyloadのダウンロードはこちらLoading属性はChrome76からサポートされた機能でHTMLにloading="lazy"を追加するだけで画像とiframeを遅延ロードさせることができます。ブラウザの機能なので対応ブラウザ(Chrome76以降のみ:2019年9月時点)はJavaScriptを利用しなくても遅延ロードが可能になります。個人的には他のブラウザにもサポートしていただけたらと思います。Lazyloadを利用した場合の<img>タグのソースです。loading="lazy"が追加されていますね。APIを利用した遅延ロードになります。このJavaScriptを使用せず、loading属性のみで使用したい場合はfunctions.phpに以下のコードを追加してください。LazyLoadを適用したくない画像やiframeにはclassにskip-lazyを追加するとその画像やiframeには適応されません。自分は投稿内の画像のみ遅延ロードさせたいと思ったので、アイキャッチの画像やヘッダー画像にはLazyLoadを適用させていません。この辺りはサイトの管理者によって考え方があるかと思いますので適時対応してください。最後に注意点として、loading="lazy"を直書きしている画像では画像がロードされないということがありました。(自分の環境だけ?)その場合は直書きのloading="lazy"を削除て対応しました。他にも、スライダー系のScriptを使用している際、画像に遅延ロードを適用させると、スライダーが動作するたびに画像が一瞬消えてから表示されるという現象が起きました。この場合は遅延ロードを適用させないようclassにskip-lazyを追加し対応しました。この辺りの症状もプラグインのアップデートで解消されていくとありがたいですね。Yamamoto広島県広島市育ち、現在岡山でWeb制作の仕事をしています。「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。「font-family」で游ゴシックを指定したWordPressサイトをWindowsのChromeで表示すると、フォントが細く見える場合の対処法WebサイトのSEO・Speed・Securityを検証できるChrome拡張機能「Checkbot」が素敵!他にもこんなおすすめ記事がありますPREVWordPressのサイト内検索でカスタムタクソノミーの特定のタームを除外する方法NEXT便利だ!投稿タイプテンプレート!投稿やカスタム投稿でテンプレートが使用できるぞ!コメントはこちらコメントをキャンセルコメント名前メールアドレス次回コメントで使用するためブラウザに自分の名前、メールアドレスを保存する。JunJunWeb.Net。