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, definisi preload sebagai berikut

The preload value of the element's rel attribute 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.

Artinya, nilai preload di rel atribut pada elemen <link> akan menentukan aset yang dibutuhkan halaman web secepatnya sebelum mesin render utama browser bekerja. Preload memastikan aset tersedia lebih awal dan kecil kemungkinannya untuk memblokir render halaman serta meningkatkan performa halaman.

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. :)