サイトを高速化する方法として、「Lazy Loadを実装する」という方法があります。「Lazy Load」では、画像を遅延読み込みさせることによりページの読み込みを高速化します。
この記事では、WordPressでLazy Loadを手軽に実装できる「Lazy Loader」というプラグインを紹介します。
インストール～有効化
プラグイン追加画面で「Lazy Loader」で検索すると、Lazy Loaderプラグインが出てくるかと思うので、それを「今すぐインストール」！
詳しいインストール方法は以下の記事をどうぞ。
WordPressのプラグインのインストール方法と有効化・停止・削除方法を解説！
この記事では、WordPressのプラグインのインストール方法と、プラグインを有効にする方法、停止にする方法、削除する方法を解説していきます。方法は複数ありますが、手軽な方法を説明します。
www.master-taku.com
2020.02.18
インストールが終了したら、早速「有効化」をクリックして有効化！
使い方
基本的に有効化するだけでOKです。それだけで、画像の遅延読み込みがされるようになります。ですが、以下で紹介する設定を行うことによって、より高度に使いこなせます。
設定
設定変更方法です。
プラグイン＞インストール済みプラグイン を開きます。
そして、「Lazy Loader」のところにある「設定」をクリック。
すると、設定画面が開かれます。各設定について書きます。
- CSS classes to exclude：遅延読み込みから除外するCSSクラス名を入力。複数指定する場合はコンマで区切ります。
- Additional filters：１行に１つずつ、処理する必要があるWordPressフィルターを入力します。
正直よくわからん、放置 - Enable lazy loading for iframes：iframeを遅延読み込みするか否か選択。
- Include lazysizes native loading plugin：ブラウザ側が遅延読み込み機能を実装していた場合、そのブラウザ側の機能を使うか否か選択。
- Include lazysizes unveilhooks plugin：追加プラグイン「unveilhooks」を有効化し、背景画像、スクリプト、スタイル、ビデオの遅延読み込みのサポートを追加。マークアップを手動で変更する必要があります。
よくわからん
- Enable lazy loading for inline background images：インライン背景画像を遅延読み込みするか否か選択。
- Enable lazy loading for videos：動画を遅延読み込みさせるか否か選択。
- Enable lazy loading for audios：音声を遅延読み込みさせるか否か選択。
- Include lazysizes aspectratio plugin：画像のアスペクト比を維持して遅延読み込みするか否か選択。チェックを入れることを特におすすめします。
- Display a loading spinner ：スピナーを表示するか否かの選択。スピナーというのは、画像読込中に表示される、くるくる回転するアニメーションです。
（説明の仕方いまいちわからｎ。） - Color of the spinner： スピナーの色を設定できます。
- Enable option to disable plugin per page/post：投稿画面の公開ボックス内に、遅延読み込みを無効化させることのできるチェックボックスを表示させるか否かの選択。
- Process the complete markup：
ごめんなさい全くわかりません誰かわかる人教えてくだされば嬉しいです - Modify the default config：lazysizesスクリプトの構成設定にカスタム値を追加できます。
これもよくわからん。
設定が終わったら、必ず「変更を保存」しておきましょう。
一言
英語（かな？）って難しいにゃあ
