※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には対応しておらずガッカリ。プラグインは削除しました。