遅延ロードプラグイン「Lazy Load for Videos」はAMPでは使わない方が良い

※AMPの件は後述※

YouTubeなどの動画をブログに貼り付けると表示が遅い時がありますが「Lazy Load for Videos」を使うと、遅延読み込みを行うことができます。

プラグインの導入・設定

プラグインをインストールします(WordPressダッシュボード→プラグイン→新規作成→「Lazy Load for Videos」を検索→インストール→有効化)

「Lazy Load for Videos」を開いて、必要に応じて設定します。

  1. WordPressのダッシュボード
  2. 設定
  3. Lazy Load for Videos
  4. 「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氏はこのように語っています。

動画の読み込みの遅さは「Lazy Load for Videos」で解決したと思ったのですが、AMPには対応しておらずガッカリ。プラグインは削除しました。


タイトルとURLをコピーしました