知覚パフォーマンスとプログレッシブ エンハンスメントの観点から、AMP では可能な限りプレースホルダとフォールバックを設定することをおすすめします。

要素によっては、制限を緩和できるだけでも設定する価値があります。たとえば、<amp-iframe> のプレースホルダを設定すれば、ページの上部で使用できるようになります。このプレースホルダがないと動作しません。

プレースホルダ

placeholder 属性で指定された要素は、親 AMP 要素のプレースホルダとして機能します。 指定する場合、placeholder 要素は AMP 要素の直接の子にする必要があります。placeholder として指定された要素は常に親 AMP 要素の中に入ります(fill)。

Show full code

デフォルトでは、AMP 要素のリソースのダウンロードや初期化がまだ行われていない場合でも、プレースホルダが AMP 要素にすぐに表示されます。準備ができると、AMP 要素は通常はプレースホルダを非表示にして、コンテンツを表示します。

フォールバック

fallback 属性を使用して、ブラウザがサポートしていない要素に対する代わりの動作を指定します。たとえば、fallback 属性を使用して、ブラウザが特定の機能に対応していないことをユーザーに伝えます。

Show full code

fallback 属性は、AMP 要素だけでなく、どの HTML 要素でも設定できます。指定する場合、fallback 要素は AMP 要素の直接の子にする必要があります。

プレースホルダとフォールバックの相互関係

動的なコンテンツに依存する AMP コンポーネント(amp-twitteramp-list など)では、フォールバックとプレースホルダの相互関係は次のようになります:

  1. コンテンツが読み込まれている最中は、プレースホルダが表示されます。
  2. コンテンツが正常に読み込まれると、プレースホルダは非表示となり、コンテンツが表示されます。
  3. コンテンツの読み込みに失敗した場合:
    1. フォールバック要素がある場合は、フォールバックが表示されます。
    2. それ以外の場合は、引き続きプレースホルダが表示されます。

読み込みインジケータを非表示にする

ほとんどの AMP 要素は、「読み込みインジケータ」を表示するようホワイトリストに登録されています。読み込みインジケータとは、要素がまだ完全に読み込まれていないことを示す基本的なアニメーションです。要素に noloading 属性を追加して、この動作を無効にすることができます。