Bakal tempat & fallback

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

Beberapa elemen bahkan akan memberikan hadiah berupa kelonggaran pembatasan jika Anda menyediakan bakal tempat dan fallback - contohnya, jika Anda menyediakan bakal tempat untuk <amp-iframe>, elemen tersebut dapat digunakan di dekat bagian atas halaman (yang tidak akan berfungsi tanpa bakal tempat).

Bakal tempat (placeholder)

Elemen yang ditandai dengan atribut placeholder berfungsi sebagai bakal tempat untuk elemen AMP induk. Jika ditentukan, elemen placeholder harus merupakan anak langsung dari elemen AMP itu. Elemen yang ditandai sebagai placeholder akan selalu fill (mengisi) elemen AMP induk.

<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>

Sebagai standar, bakal tempat langsung ditampilkan untuk elemen AMP, meskipun sumber daya elemen AMP tersebut belum diunduh atau diawali. Setelah siap, elemen AMP biasanya menyembunyikan bakal tempatnya dan menampilkan kontennya.

Bakal tempat tidak harus berupa elemen AMP; elemen HTML apa pun dapat berfungsi sebagai bakal tempat.

Fallback

Anda dapat menentukan atribut fallback pada sebuah elemen untuk mengindikasikan perilaku fallback:

• for any element the browser doesn’t support
• jika konten gagal dimuat (cth.: tweet yang telah dihapus)
• if the image type is unsupported (e.g., WebP isn't supported in all browsers)

Anda dapat menetapkan atribut fallback pada elemen HTML apa pun, bukan hanya elemen AMP. Jika ditetapkan, elemen fallback harus merupakan anak (turunan) langsung dari elemen AMP.

Contoh: Fitur yang tidak didukung

Dalam contoh berikut ini, kita menggunakan atribut fallback untuk menyampaikan kepada pengguna bahwa browser tidak mendukung fitur tertentu:

<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>

Contoh: Menampilkan format gambar yang berbeda

Dalam contoh berikut ini, kita menggunakan atribut fallback untuk memberi tahu browser agar menggunakan berkas JPEG jika format WebP tidak didukung.

<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>

Interaksi bakal tempat dan fallback

Untuk komponen AMP yang mengandalkan konten dinamis (cth.: amp-twitter, amp-list), interaksi fallback dan bakal tempat terjadi sebagai berikut:

1. Tampilkan bakal tempat saat konten sedang dimuat.
2. Jika konten berhasil dimuat, sembunyikan bakal tempat dan tampilkan konten.
3. Jika konten gagal dimuat:
   1. Jika ada elemen fallback, tampilkan fallback.
   2. Jika tidak, lanjutkan menampilkan bakal tempat.

Menyembunyikan indikator pemuatan

Banyak elemen AMP yang masuk ke dalam daftar elemen yang diizinkan untuk menampilkan "indikator pemuatan", yaitu animasi dasar yang menunjukkan bahwa elemen belum dimuat sepenuhnya. Elemen dapat memilih menolak perilaku ini dengan menambahkan atribut noloading.

• Written by @pbakaus
  with contributions from @bpaduch