Latihan 1 dari materi Critical Rendering Path di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Rapikan <head> di kode awal supaya font penting di-download lebih awal dan gak ada lagi yang menahan render.
Di tempat komentar, tambahkan <link rel="preload" href="/fonts/hero.woff2" as="font" type="font/woff2" crossorigin>. Yang dicek: ada link dengan rel="preload" dan as="font", dan link preload itu punya atribut crossorigin.
Tambahkan atribut defer ke <script src="app.js">. src="app.js"-nya jangan dihapus.
Di tag <link rel="stylesheet" href="non-critical.css"> yang sama, tambahkan media="print" dan onload="this.media='all'".
Tepat di bawah <title>, tambahkan <style> berisi CSS kritis untuk bagian atas halaman, misalnya <style>body { margin: 0; font-family: system-ui, sans-serif; }</style>. Isinya CSS sungguhan, bukan cuma komentar: tanpa itu, halaman tampil polos selagi non-critical.css dimuat.
<title> tetap di tempatnya, dan semua tag tetap di dalam <head>.
