allyoucanshared.com, RD – Cara Mengoptimalkan Halaman Website Menggunakan Link Rel Preload. Hallo sobat setia allyoucanshared, bertemu lagi dengan admin disini. Admin kali ini akan membahas sesuatu tips untuk mempermudahkan kalian dalam mengelola website sendiri. Oke tanpa perlu panjang lebar lagi basabasinya, yuk simak ulasannya dibawah ini.
Dalam kode sederhana <link rel=”preload”> ini memberitahu browser untuk memuat halaman skrip atau sumber daya lebih cepat tanpa penundaan. Kemudian ia memberi tahu browser bahwa sumber daya halaman sangat penting dan memintanya untuk memuatnya dengan cepat. Sumber daya yang dimuat secara otomatis disimpan di browser sehingga tersedia saat halaman dirender saat dibutuhkan. Ini memungkinkan halaman ditampilkan lebih cepat.
Nah untuk kalian yang belum mengetahui apa itu Link Rel Preload, kalian bisa membaca pengertiannya dibawah ini sobat readers.
Apa Link Rel Preload itu?
Preload merupakan standar web baru yang memberi Anda kontrol lebih besar atas bagaimana sumber daya tertentu diambil untuk navigasi. Ini adalah versi terbaru dari subresource prefetch, yang tidak digunakan lagi pada Januari 2016.
Arahan ini dapat didefinisikan, misalnya, pada suatu elemen. Secara umum, yang terbaik adalah memuat sumber daya utama seperti gambar, CSS, JavaScript, dan file font. Preload berbeda dari prefetch karena berfokus pada navigasi dan pengambilan sumber daya berprioritas tinggi. Prefetching berfokus pada pengambilan sumber daya untuk navigasi prioritas rendah berikutnya. Penting juga untuk dicatat bahwa preloading tidak memblokir event onload untuk windows baru.
Baca Juga : Kumpulan Kata Yang Dilarang Google Adsense
Cara Memasang Lazy Load Adsense Dan Breadcrumb Dengan Benar
Pastinya masih banyak orang – orang yang bertanya mengenai halaman AMP yang sudah cepat, tapi apakah masih memerlukan Link Rel Preload tersebut? Yaa, halaman AMP tentu sangat cepat ketika mengakses halaman AMP dari hasil pencarian seluler menggunakan Google Cache. Namun, tidak semua pengunjung mengaksesnya dari halaman pencarian seluler, tetapi juga dari hasil pencarian desktop (komputer).
Tentu saja, cache Google tidak diberikan kepada pengunjung yang mengunjungi situs tersebut secara langsung. Untuk itu, halaman AMP juga perlu dioptimalkan. Secara khusus Anda harus menggunakan kode <link rel=”preload”> ini. Ini tidak hanya berlaku untuk halaman terstruktur AMP, tetapi juga untuk halaman non-AMP. Cara mengoptimalkan halaman blog Anda dengan tautan rel yang dimuat sebelumnya
Cara Mengoptimalkan Halaman Website Menggunakan Link Rel Preload
Masukkan <link rel=”preload”> Ini ada di <head> Setelah Metaviewport. Seperti contoh pada halaman AMP berikut.
<!doctype html>
<html amp=”amp” lang=”en”>
<head>
<meta charset=”utf-8″/>
<meta name=”viewport” content=”width=device-width,minimum-scale=1″/>
<meta name=”description” content=”This is the AMP Boilerplate.”/>
<link rel=”preload” as=”script” href=”https://cdn.ampproject.org/v0.js”/>
<link rel=”preconnect dns-prefetch” href=”https://fonts.gstatic.com/” crossorigin=””/>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
<!– Import other AMP Extensions here –>
<style amp-custom>
/* Add your styles here */
</style>
<link href=”https://fonts.googleapis.com/css?family=Inconsolata” rel=”stylesheet”/>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel=”canonical” href=”.”/>
<title>My AMP Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Baca Juga : Cara Menggunakan Google Family Link Dengan Benar
Apa Itu Google Scholar dan Bagaimana Manfaatnya? Simak Penjelasannya
JS utama AMP v0.js harus dimuat lebih awal dengan kode dibawah ini :
<link rel=”preload” as=”script” href=”https://cdn.ampproject.org/v0.js”/>
Jika Anda menggunakan Google Font pada situs anda maka tambahkan script seperti dibawah ini :
<link rel=”preconnect dns-prefetch” href=”https://fonts.gstatic.com/” crossorigin=””/>
Jika situs web Anda menggunakan gambar seperti thumbnail di atas posting, gambar pahlawan di bawah header, gambar latar belakang blog, gambar logo blog, dll, tambahkan :
<link rel=”preload” as=”image” href=”URL IMAGE”/>
Jika blog Anda bukan AMP, gunakan library jquery dan tambahkan <link rel=”preload”> . Seperti JS utama AMP di atas, berikut contohnya :
<link rel=”preload” as=”script” href=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”/>
Akhir kata
Oke sobat readers, Kebutuhan setiap blog mungkin berbeda, jadi silahkan sesuaikan kebutuhan blog anda dengan masing-masing JS yang anda gunakan. Demikanlah yang dapat admin sampaikan terkait topik utama kali ini, semoga dapat membantu kalian semua sobat readers.
Terima Kasih
Baca Juga : Invalid Trafic Pada Google Adsense? Ini Penyebabnya
Apa Penyebab Saldo Google Adsense Minus?