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

 

※AMPの件は後述※

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

 

プラグインの導入・設定

 

  1. WordPressのダッシュボード
  2. プラグイン
  3. 新規作成
  4. 「Lazy Load for Videos」を検索
  5. インストール
  6. 有効可

 

 

「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」にあります

 

 

モバイルから見たところ、異常はありませんでした。

 

 

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