※AMPの件は後述※
YouTubeなどの動画をブログに貼り付けると表示が遅い時がありますが「Lazy Load for Videos」を使うと、遅延読み込みを行うことができます。
プラグインの導入・設定
プラグインをインストールします（WordPressダッシュボード→プラグイン→新規作成→「Lazy Load for Videos」を検索→インストール→有効化）
「Lazy Load for Videos」を開いて、必要に応じて設定します。
- WordPressのダッシュボード
- 設定
- Lazy Load for Videos
- 「YouTube」タグを開く
設定方法は次の通り（YouTubeの項目のみ）
- Disable Lazy Load for Youtube（YouTubeの遅延読み込み）
- Display Youtube title（タイトルを入れる）
- Pre-roll/post-roll ads（全ての動画を再生リスト）
- Thumbnail quality（サムネイルのクオリティ。Standard qualityもしくはmax resolution）
- Player colour（この項目は非推奨）
- Colour of progress bar （ブログレスバーの色）
- Hide annotations（Tip 注釈を非表示）
- Hide title/uploader（タイトルとアップロードの情報を非表示）
- Hide related videos（関連ビデオを非表示）
- Hide player controls （コントロールプレイヤーを非表示）
- Support for widgets（ウィジェットのサポート）
投稿ページ内に項目が作られますので、これも必要に応じて設定します。
- Default 初期値
- Standard quality 標準
- max resolution 最大解像度
使い方
YouTubeの動画のURLを投稿ページに貼り付けるだけ。
「Lazy Load for Videos」を使うと、まずは動画のサムネイルが表示されます。
画像をクリックすると通常の動画表示となり、もう1回クリックすると再生されます。
読者は2回クリックすることとなりますが「表示が遅い」現象はなくなります。
という訳で、一見すると良かったのですが、AMPではダメでした。
AMPページだとエラー
Google先生からエラー通知が届きました。
リンクされているAMPバージョンが無効です
許可されていない属性がHTMLタグ「a」にあります
AMPで開いたら表示されませんでした。
YouTube用の場合は、標準の埋め込みタグを使わないと、AMPでは動画は表示できないことになります。
<iframe src="https://www.youtube.com/embed/33eHJZpVuO8" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
後書き
AMPでは元々Lazy Load（レイジーロード：遅延読み込み）が組み込まれていますので、遅延ロード系のプラグインを使うのは難しいかも。ちなみに、遅延読み込みに関して、GoogleのJohn Mueller氏はこのように語っています。
There are various ways to lazy-load images, it’s certainly worth thinking about how the markup could work for image search indexing (some work fine, others don’t). We’re looking into making some clearer recommendations too.
— 🍌 John 🍌 (@JohnMu) 2018年2月28日
動画の読み込みの遅さは「Lazy Load for Videos」で解決したと思ったのですが、AMPには対応しておらずガッカリ。プラグインは削除しました。
