Latihan 1: Critical Rendering Path — Performance

Latihan 1 dari materi Critical Rendering Path di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Optimasi <head> di bawah agar CRP lebih pendek:

  1. Tambahkan <link rel="preload"> untuk font /fonts/hero.woff2 (gunakan as="font", type="font/woff2", dan crossorigin).
  2. Tambahkan atribut defer pada <script> yang me-load app.js.
  3. Tambahkan atribut media="print" onload="this.media='all'" pada <link> stylesheet non-critical.css agar tidak render-blocking.

Pastikan elemen tetap di dalam <head> dan urutan tidak rusak.

Hint