AFFINGERの専用プラグインであるAffinger LazyLoadは画像読み込み遅延機能です。
以前は「Lazy Load SEO」という名前のAFFINGER5に向けたプラグインでしたが、アップデートにより変更されています。
こういう画像や動画、スクリプトを遅延読込させる機能はたくさんありますが、注意点もあります。
今回はAffinger LazyLoadで起こる不具合と使用時の注意点を解説していきます。
当記事は過去記事をリライトして掲載しています。
Affinger LazyLoad
Affinger LazyLoadはAFFINGER専用の遅延プラグインです。
当サイトではAFFINGER5の頃から導入しており、Lazy Load SEOという名前でした。
「AFFINGER5｜Lazy Load SEOのレビュー」ではLazy Load SEOについてレビューしています。
Lazy Loadの機能は画像遅延読み込み機能で、現在ではWordPressに標準で搭載されている機能です。
AFFINGER専用のプラグインでは画像、動画、スクリプト遅延やタグの配置を変換する機能も一緒になっています。
Affinger LazyLoadでできる事
- 画像の遅延読み込み
- 動画の遅延読み込み
- スクリプト（TwitterやInstagram）の遅延読み込み
- タグ配置でクロールボットに画像を知らせる
- 遅延対象にフェードイン付与
遅延読み込み機能を実装するとサイトの表示速度が上昇します。
画像や動画などのデータが重いものをスクロールに合わせて表示してくれます。
また、遅延対象も全体設定や記事ごとから選択することもできます。
YouTube動画埋め込みが再生できない
YouTubeの動画は遅延読み込みを適用させると再生できなくなることがあります。
再生ボタンをクリックしようとするとこのような画面が表示されてしまいます。
この場合は遅延読み込みが関係しており、読み込みが遅延している結果再生ができなくなります。
これはAffinger LazyLoadに限らず、すべての遅延読み込みが対象です。
YouTube埋め込み動画再生できない時の対策
結論的には遅延読み込みをオフにすれば解決します。
Affinger LazyLoadの場合はプラグインを使わず、WordPress標準機能もオフにすれば表示速度は遅くなりますが、再生できるようになります。
簡単に対策するならオフで大丈夫なんですが、表示スピードを上げるために導入した遅延表示機能なので、できれば使いたいですよね。
Affinger LazyLoadでは個別設定ができるので、いくつか対策して効果があったものを解説していきます。
簡単に説明すると動画に遅延読み込みを付与しないということです。
以下で詳しく解説します。
画像のみ有効にして動画だけを遅延読み込みさせない
全体設定の中で画像のみ遅延読み込みして動画はさせない方法です。
サイト全体の対象になりますが、動画が再生されなくなるよりはいいかなと思います。
画像には遅延読み込みを付与できるので、表示速度もアップします。
正直この設定が1番楽でおすすめです！
個別設定で動画を遅延読み込みさせない
この設定は記事ごとに遅延読み込みをさせない設定です。
1記事単位になるので、動画が再生されなくて困っている時には一度試すと良いと思います。
画像や動画問わずに選択した記事の遅延読み込みをオフにしています。
遅延読み込みを除外するコードを付与
画像個別に遅延読み込みコードを付与する方法です。
コードは以下を付与してください。
<img src="画像URL/hoge.jpg" data-st-lazy-load="false">ショートコードの付与でも除外することができます。
個別に設定しないといけないのでかなり手間になるのであまりおすすめはしません。
AFFINGERの機能で画像表示にする
AFFINGER限定ですが、通常YouTubeを埋め込むと動画プレイヤーが埋め込まれますが、サムネイル画像を表示させて、読者が再生ボタンを押すとYouTubeサイトが開き飛ばしてくれる機能があります。
「クラシックブロック」→「タグ」→「その他パーツ」→「YouTube」で設置できます。
動画再生ができない場合は試してみて下さい。