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

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

プレースホルダ

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

Show full code

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

フォールバック

要素で fallback 属性を使うことで代わりの動作を指定できます。

  • ブラウザがサポートしていない要素
  • コンテンツを読み込めなかった場合(削除されたツイートなど)
  • 画像の種類がサポートされていない場合(WebP はすべてのブラウザでサポートされていないなど)

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

例: サポートされていない機能の場合

次の例では、fallback 属性を使用して、ブラウザが特定の機能に対応していないことをユーザーに伝えます。

コードをすべて表示
例: 異なる画像形式を配信する場合

次の例では、fallback 属性を使用して、WebP フォーマットがサポートされていない場合は JPEG ファイルを使用するようにブラウザに指示します。

コードをすべて表示

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

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

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

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

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