Caractères de remplacement et solutions de secours

In the spirit of perceived performance and progressive enhancement, it's best practise in AMP to provide placeholders and fallbacks wherever possible.

Certains éléments vous récompenseront même si vous le faites en assouplissant les restrictions. Par exemple, si vous fournissez un caractère de remplacement pour amp-iframe, il peut être utilisé en haut de la page (ce qui ne fonctionnera pas sans).

Caractères de remplacement

L'élément marqué par l'attribut placeholder agit comme un caractère de remplacement pour l'élément AMP parent. S'il est spécifié, un élément placeholder doit être un enfant direct de l'élément AMP. Un élément marqué comme placeholder sera toujours fill l'élément AMP parent.

<amp-anim
  src="/static/inline-examples/images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300"
>
  <amp-img
    placeholder
    src="/static/inline-examples/images/wavepool.png"
    layout="fill"
  >
  </amp-img>
</amp-anim>

Par défaut, le caractère de remplacement est immédiatement affiché pour l'élément AMP, même si les ressources de l'élément AMP n'ont pas été téléchargées ou initialisées. Une fois prêt, l'élément AMP masque généralement son caractère de remplacement et affiche le contenu.

Solutions de secours

Vous pouvez spécifier l'attribut fallback sur un élément pour indiquer le comportement de secours:

• pour tout élément que le navigateur ne prend pas en charge
• si le contenu ne se charge pas (par exemple, Tweet supprimé)
• si le type d'image n'est pas pris en charge (par exemple, WebP n'est pas pris en charge sur tous les navigateurs)

Vous pouvez définir l'attribut fallback sur n'importe quel élément HTML, pas uniquement sur les éléments AMP. S'il est spécifié, l'élément fallback doit être un enfant direct de l'élément AMP.

Exemple: fonctionnalité non prise en charge

Dans l'exemple suivant, nous utilisons l'attribut fallback pour communiquer à l'utilisateur que le navigateur ne prend pas en charge une fonctionnalité particulière:

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Exemple: diffuser différents formats d'image

Dans l'exemple suivant, nous utilisons l'attribut fallback pour indiquer au navigateur d'utiliser le fichier JPEG si le format WebP n'est pas pris en charge.

<amp-img
  alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp"
>
  <amp-img
    alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"
  ></amp-img>
</amp-img>

Interaction des caractères de remplacement et des solutions de secours

Pour les composants AMP qui reposent sur du contenu dynamique (par exemple, amp-twitter et amp-list), l'interaction des solutions de secours et des caractères de remplacement fonctionne comme suit:

1. Afficher le caractère de remplacement pendant le chargement du contenu.
2. Si le contenu se charge correctement, masquer le caractère de remplacement et afficher le contenu.
3. Si le contenu ne se charge pas:
   1. S'il existe un élément de secours, afficher ce dernier.
   2. Sinon, continuer à afficher le caractère de remplacement.

Comment masquer les indicateurs de chargement

De nombreux éléments AMP sont autorisés à afficher un « indicateur de chargement », qui est une animation basique qui montre que l'élément n'est pas encore complètement chargé. Les éléments peuvent désactiver ce comportement en ajoutant l'attribut noloading.

• Written by @pbakaus
  with contributions from @bpaduch