En el espíritu de rendimiento percibido y mejora progresiva, es la mejor práctica en AMP para proporcionar placeholders y fallbacks siempre que sea posible.

Algunos elementos incluso le recompensarán por hacerlo limitando las restricciones – por ejemplo, si proporciona un placeholder para <amp-iframe>, puede utilizarse cerca de la parte superior de la página (que no funcionará si no está).

Placeholders

El elemento marcado con el atributo placeholder actúa como marcador de posición para el elemento AMP principal. Si se especifica, un elemento placeholder debe ser un elemento secundario directo del elemento AMP. El elemento marcado como placeholder siempre será fill para el elemento AMP principal.

Show full code

Por defecto, el placeholder se muestra inmediatamente para el elemento AMP, incluso si no se han descargado o inicializado los recursos del elemento AMP. Una vez listo, el elemento AMP normalmente oculta su placeholder (o marcador de posición) y muestra el contenido.

Fallbacks

Utiliza el atributo fallback para indicar el comportamiento de respaldo de cualquier elemento que no sea compatible con el navegador, o si hay una falla al cargar el contenido (ej. un tweet borrado).

Por ejemplo, utiliza el atributo fallback para comunicar al usuario que el navegador no es compatible con una característica concreta:

Show full code

El atributo fallback se puede establecer en cualquier elemento HTML, no solo en los elementos AMP. Si se especifica, el elemento fallback debe ser un elemento secundario directo del elemento AMP.

Interacción de placeholders y fallbacks

Para los componentes AMP que obedecen a contenido dinámico (por ejemplo, amp-twitter, amp-list), la interacción de fallbacks y placeholders opera de la siguiente manera:

  1. Muestra el placeholder mientras el contenido está cargando.
  2. Si el contenido carga exitosamente, oculta el placeholder y muestra el contenido.
  3. Si el contenido falla al cargar:
    1. Si hay elemento fallback, muestra el fallback.
    2. Sino, sigue mostrando el placeholder.

Ocultar indicadores de carga

Muchos elementos AMP están incluidos en la lista blanca para mostrar un "indicador de carga", que es una animación básica que muestra que el elemento aún no se ha cargado completamente. Los elementos pueden excluirse de este comportamiento añadiendo el atributo noloading.