Latihan 1: Font Loading Strategies — Performance

Latihan 1 dari materi Font Loading Strategies di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Buat strategi font loading untuk halaman blog. Tambahkan di dalam <head>:

<link rel="preload"> untuk /fonts/inter.woff2 (as font, type font/woff2, dengan crossorigin).
<style> berisi @font-face untuk Inter dengan font-display: swap dan src: url("/fonts/inter.woff2") format("woff2").
body memakai font-family: Inter, system-ui, sans-serif sehingga ada fallback.

Gunakan font-display: swap agar text LCP tidak ditahan saat font masih download.

Hint

Perhatikan instruksi — metrik performance apa yang diukur dan apa threshold yang baik/buruk?
Pikirkan tentang rendering pipeline browser: Layout → Paint → Composite. Properti mana yang paling murah untuk di-animate?
Pastikan fungsi yang kamu buat mengembalikan nilai sesuai aturan yang diberikan di instruksi.

🔄

Memperbarui Aplikasi

Versi baru tersedia. Halaman akan dimuat ulang otomatis...

Masih kosong setelah muat ulang?

1. Tutup paksa aplikasi lalu buka lagi

2. Hapus cache: Pengaturan > Aplikasi > Hyper Sheets > Hapus Cache

3. Jika pakai browser: tekan Ctrl+Shift+R

Butuh bantuan?

Gabung Discord Laporkan Bug