Link rel Preload dan cara menggunakannya - Ramai Beud

Hari ini kita akan belajar tentang cara hebat lain untuk meningkatkan kinerja di situs web atau aplikasi web Anda. Anda mungkin pernah mendengar tentang link rel preload. Apa itu Link rel Preload dan Bagaimana cara menggunakan itu ?.

Beberapa keuntungan yang dapat di ambil adalah bahwa link rel preload memungkinkan pengembang web untuk mengoptimalkan pengiriman sumber daya, mengurangi perjalanan pulang-pergi, dan mengambil sumber daya untuk mengirimkan konten lebih cepat ketika pengguna merayapi halaman.

Apa itu Link rel Preload ?

Preload adalah standar web baru yang menawarkan kontrol lebih pada bagaimana sumber daya tertentu diambil untuk melakukannavigasi. Ini adalah versi terbaru dari subresource prefetching yang sudah ditinggalkan pada Januari 2016. Arahan ini dapat didefinisikan dalam elemen misalnya sebagai . Umumnya yang terbaik adalah melakukan pramuat sumber daya paling penting seperti gambar, CSS, JavaScript, dan file font.

Preload berbeda dari prefetch karena fokusnya pada navigasi dan menjemput sumber daya dengan prioritas tinggi. Prefetch berfokus pada mengambil sumber daya untuk navigasi berikutnya yang merupakan prioritas rendah. Penting juga untuk dicatat bahwa preload tidak memblokir acara onload pada jendela baru.

Beberapa manfaat Preload untuk Website anda :

1. Memungkinkan browser untuk menetapkan prioritas sumber daya sehingga memungkinkan pengembang web untuk mengoptimalkan pengiriman sumber daya tertentu.
2. Memberi browser kemampuan untuk menentukan jenis sumber daya untuk dapat mengetahui apakah sumber daya yang sama dapat digunakan kembali di masa depan.
3. Browser dapat menentukan apakah permintaan sesuai dengan kebijakan keamanan konten dengan merujuk apa yang didefinisikan dalam atribut.

Bagaimana cara menggunakan link rel Preload ?

Berikut ini adalah beberapa contoh penggunaan link rel preload untuk jenis gambar, font, css dan juga javascript.

Contoh penggunaan link rel preload untuk image atau gambar :

<link rel="preload" href="image.png">

Selanjutnya adalah contoh penggunaan link preload untuk jenis font. Catatan: Jika Anda melakukan pramuat tautan dengan sumber daya yang diaktifkan CORS Anda juga harus menyertakan atribut crossorigin.

<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>

Dan ini adalah contoh penggunaan link preload untuk CSS stylesheet menggunakan Markup dan JavaScript.

<!-- Via markup -->
<link rel="preload" href="/css/mystyles.css" as="style">

<!-- Via JavaScript --> 
<script> 
var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style"; 
res.href = "css/mystyles.css"; 
document.head.appendChild(res); 
</script>

Sudah bisa di pahami belum ? Ini adalah salah satu tips dan trik yang juga di terapkan untuk blognya Ramai Beud. Sehingga kecepatan blog Ramai Beud meskipun menggunakan hosting blogspot tidak kalah dengan yang premium.

Demikianlah sedikit penjelasan tentang Apa itu link rel preload yang bisa anda jadikan sebagai cara mudah untuk mempercepat loading situs web anda. Semoga bermanfaat dan sampai ketemu lagi di kelanjutan artikel tentan Optimasi kecepatan situs web versi Ramai Beud.