※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」を使うと、まずは動画のサムネイルのみが表示されます。
画像をクリックすると通常の動画表示となり、もう１回クリックすると再生されます。
読者は２回クリックすることとなりますが、「表示が遅い」現象はなくなります。
という訳で、一見すると良かったのですが、AMPではダメでした。
AMP
Google先生からエラー通知が届きました。
リンクされているAMPバージョンが無効です
許可されていない属性がHTMLタグ「a」にあります
モバイルから見たところ、異常はありませんでした。
ですが、PCからAMP画面を開いてみたらダメダメ。
↓こういったYouTube用の標準の埋め込みタグを使わないと、AMPでは動画は表示できないことになります。
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には対応しておらずガッカリ。プラグインは削除しました。
