Dokumen ini dibuat untuk membantu pengguna lokal yang belajar FramerFramer mengatasi kesulitan karena kurangnya materi dalam bahasa Indonesia, dengan menerjemahkan konten dari blog resmi ke dalam bahasa Korea dan menambahkan informasi yang berguna untuk praktik. Semoga membantu Anda yang menggunakan FramerFramer.

TLDR (Ringkasan)

FramerFramer sekarang mendukung AVIF, yang dapat mengurangi ukuran gambar sekitar 20% dibandingkan WebP. Namun, AVIF bukanlah sesuatu yang sempurna.

Karena kecepatan enkoding AVIF yang lambat, FramerFramer secara cerdik memanfaatkan metode caching stale-while-revalidate. Pada permintaan pertama, WebP disediakan untuk pemuatan cepat, dan selama permintaan berikutnya, konversi ke AVIF dilakukan sambil tetap menyediakan WebP. Selain itu, ada kalanya kualitas AVIF lebih rendah dari WebP, sehingga beberapa gambar tetap menggunakan WebP.

Dukungan AVIF: Gambar yang Lebih Kecil

Pada Mei 2024, FramerFramer mulai mendukung AVIF. Saat ini, semua gambar di FramerFramer secara default disediakan dalam format AVIF, yang rata-rata mencapai ukuran 20% lebih kecil. Namun, ada tantangan dalam integrasi format baru ini. Masalah terbesar adalah proses konversi ke AVIF sangat lambat.

Masalah: Enkoding AVIF yang Lambat

Di FramerFramer, ketika permintaan gambar diterima, optimasi segera dilakukan. Gambar yang telah dioptimasi lalu di-cache ke dalam CDN.

Cara ini efisien secara umum, namun memiliki kelemahan. Jika gambar yang tidak ada dalam cache diminta pertama kali, konversi dan pengubahan ukuran harus dilakukan secara bersamaan, sehingga butuh waktu lebih lama dibandingkan permintaan berikutnya. Untuk WebP, biasanya dibutuhkan tambahan 100~300ms, yang masih dapat diterima. Namun, AVIF memerlukan 1~2 detik.

Catatan: Anda mungkin berpikir, "Bukankah 1~2 detik sudah cukup cepat?" Namun, menurut penelitian pengalaman pengguna, jika lebih dari 100ms, itu dianggap tidak seketika.

Di FramerFramer, tingkat hit cache gambar sekitar 98%. Jika langsung beralih ke AVIF tanpa tindakan, setiap gambar yang ke-50 akan mengalami penundaan beberapa detik. Ini dinilai merugikan pengalaman pengguna, dan untuk mengatasinya, Jacob memberikan ide dan Piotr mengimplementasikan strategi stale-while-revalidate.

Solusi: Stale-While-Revalidate

stale-while-revalidate adalah salah satu opsi pengaturan caching yang ditambahkan ke header Cache-Control. Nilai ini mendefinisikan seberapa lama CDN bisa terus menyediakan sumber daya yang telah kedaluwarsa.

Cache-Control: max-age=3600, stale-while-revalidate=60
               ↑ how long a file can be cached for
                             ↑ how long a CDN can keep serving
                               the file after max-age expires

max-age=3600 → Waktu standar cache file
stale-while-revalidate=60 → Setelah kedaluwarsa, file lama masih bisa disajikan selama 60 detik
FramerFramer menggunakan metode ini untuk mengatasi masalah kecepatan konversi AVIF.

Langkah 1

Permintaan pertama (Penyediaan WebP)
Pada permintaan pertama, gambar WebP disediakan sebagai pengganti AVIF.
Dan header diatur seperti ini: Cache-Control: max-age=0, stale-while-revalidate=31536000

Langkah 2

WebP yang segera kedaluwarsa
Sebab max-age=0, gambar WebP ini segera kedaluwarsa. Ini menyebabkan CDN mengirim permintaan kedua ke server asal.

Langkah 3

Permintaan kedua (Konversi AVIF)

• Ketika permintaan kedua datang, server menyediakan gambar yang sudah dikonversi ke AVIF. Proses ini mungkin membutuhkan beberapa detik, namun dengan stale-while-revalidate, CDN (CloudFront) terus menyediakan gambar WebP sampai konversi selesai.

• Setelah konversi ke AVIF selesai, Cache-Control: max-age=31536000 diatur agar CDN bisa meng-cache dalam waktu lama.

Berkat cara ini, tidak perlu lagi membangun sistem antrian terpisah untuk penyediaan gambar di latar belakang. Infrastruktur sederhana ini menjaga kinerja tetap stabil tanpa munculnya bug.

Ketika Tidak Menggunakan AVIF

Saat ini sebagian besar gambar secara default disediakan dalam bentuk AVIF. Namun, masih digunakan WebP dalam situasi seperti berikut.

• Gambar Lossless
  Kompresi lossless AVIF tidak sepenuhnya lossless dan memiliki kualitas lebih rendah dari WebP. Oleh karena itu, gambar lossless tetap menggunakan WebP.

• Gambar Animasi
  Karena perpustakaan optimasi gambar yang digunakan FramerFramer tidak mendukung animasi AVIF, dalam kasus ini WebP tetap digunakan.

Artikel ini adalah konten terjemahan dan adaptasi dari ‘How FramerFramer does AVIF’ di blog resmi FramerFramer.