Metode inilah yang akan memberikan konten yang bisa digunakan untuk pengunjung lebih cepat dibandingkan dengan metode pemuatan css/font secara sinkron lainnya.
Trik untuk memicu stylesheet dimuat secara asinkron adalah dengan menggunakan elemen <link> dan menetapkan nilai yang tidak valid untuk atribut media (Saya menggunakan media="none"). Ketika permintaan media yang bernilai false, browser masih akan men-download stylesheet, tapi tidak akan menunggu untuk konten akan tersedia sebelum render halaman.
<link rel="stylesheet" href="css.css" media="none"></link>
Setelah stylesheet selesai men-download, atribut media harus diset ke nilai yang valid sehingga aturan gaya akan diterapkan langsung ke dokumen. ,metode onload event lah yang digunakan untuk mengeset properti media menjadi all :
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"></link>
Hasil Akhir
Berikut ini ialah hasil akhir yang langsung dapat anda gunakan, cara menggunakannya salin html berikut ini dan tempelkan diatas kode </head> dan ganti atribut href nya menjadi url link css/font anda:
<link rel="stylesheet" href="your-link-the.css" media="none" onload="if(media!='all')media='all'"></link>
Beberapa Kekurangan dari trik ini
- Metode ini tidak bekerja di Android <4.4.
- Beberapa browser tampaknya masih memblokir CSS meskipun atribut medianya diset tidak valid. Ini berarti CSS akan dimuat seperti biasa.
Sumber Referensi ⇒ Loading CSS without blocking render