Latihan 1 dari materi Resource Hints di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Tambahkan empat resource hint di dalam <head>, di bawah komentar <!-- Tambahkan resource hints di sini -->. <title>My App</title> dan <h1>Hello World</h1> sudah ada, biarkan begitu.
preload untuk font /fonts/inter.woff2, dengan as="font", type="font/woff2" dan crossorigin: <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>.preconnect ke satu origin pihak ketiga yang pasti dipakai halaman ini, misalnya https://api.tokoku.id.prefetch untuk satu file yang mungkin dibutuhkan halaman berikutnya, misalnya /produk.html.dns-prefetch untuk satu origin lain yang baru dipakai belakangan, misalnya https://stats.analitik.com.Yang dinilai: ada <link rel="preload"> dan salah satunya punya as="font", lalu ada <link rel="preconnect">, <link rel="prefetch"> dan <link rel="dns-prefetch">. Nilai rel harus persis begitu. Preload font-nya menunjuk file .woff2 dengan type="font/woff2" dan crossorigin (tanpa crossorigin, font-nya diunduh dua kali). preconnect dan dns-prefetch menunjuk origin lengkap yang diawali https://, dan prefetch punya href. Alamatnya sendiri bebas.
