Solusi untuk Firefox Tidak Mendukung Preload

Ketika Anda mengunjungi halaman posts di website saya menggunakan browser Firefox maka hasil render tidak berjalan dengan mulus. Maksudnya? Jadi, di halaman post menampilkan daftar artikel yang saya tulis dan pagination dengan bantuan tag html ul alias unordered list. Tampilannya seperti gambar di bawah.

Firefox doesn't support preload in my posts page

Mengapa ini bisa terjadi? Karena saya menggunakan fitur preload. Apa itu preload? Berdasarkan situs Mozilla Developer Network, Preload adalah

It lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance.

Yang intinya adalah atribut ini akan mendeklarasikan permintaan di tag head HTML, menentukan sumber daya apa yang dibutuhkan segera oleh halamanmu, yang mana ingin dimuat lebih awal di siklus halaman sebelum mesin render utama browser bekerja. Ini memastikan mereka tersedia lebih awal dan kecil kemungkinannya untuk memblokir render halaman yang berakibat bagus untuk peningkatan performa.

Sinktaksnya sederhana cukup mengganti nilai dari atribut rel="stylesheet" menjadi rel="preload". Umumnya atribut rel berada di dalam tag link HTML.

Sedangkan di blog saya implementasinya seperti Gist di bawah.

Tetapi, ternyata Firefox hingga versi 71 tidak mendukung preload berdasarkan caniuse.com. Solusinya gimana? Ngga perlu pakai preload? Oh tidak Fernando/Esmeralda.

Kita cukup tambahkan tag link dengan atribute rel="stylesheet" di bawah tag link beratribut rel="preload". Jadi, jika browser tidak mengenal atribut bernilai preload maka dia akan menuju ke baris bawah yakni tag link beratribut rel="stylesheet" seperti Gist di bawah.

Hasilnya, Firefox berhasil merender halaman post dengan mulus seperti gambar di bawah. ๐ŸŽ‰

Fix firefox doesn't support preload in my posts page

Kalian bisa mencarinya di commit repo blog pribadi saya berjudul: fix: firefox doesn't support preload yet!.

Jika kalian ingin belajar preload dan cara implementasinya bisa menuju referensi di bawah.

  1. Preloading content with rel="preload” - MDN
  2. Defer non-critical CSS

Semoga bermanfaat. :)