Secara sederhana
<link rel="preload"> ini adalah tentang cara memberitahu browser untuk memuat lebih cepat sumber daya berbasis script tanpa penundaan.Dengan
<link rel="preload"> ini kita memberitahu browser bahwa sumber daya tersebut penting untuk halaman dan memerintahkan untuk segera memuatnya. Sumber daya yang dimuat melalui <link rel="preload"> disimpan secara lokal di browser sehingga sudah tersedia ketika dibutuhkan saat peng-render-an halaman. Dengan begitu halaman dapat ditampilkan lebih cepat.Jika Anda merasa bahwa blog Anda sudah cepat, mungkin belum tentu cepat jika berhubungan dengan ponsel.
Mungkin akan ada yang bertanya, "Halaman AMP sudah cepat, apakan masih memerlukan rel="preload" ini?"
Betul, halaman AMP itu sudah cepat "jika" halaman diakses dari halaman hasil pencarian mobile dengan bantuan Google cache. Namun tidak semua pengunjung datang dari halaman pencarian mobile. Pengunjung yang datang langsung ke situs tentu saja tidak akan dilayani oleh Google cache. Hal itulah yang membuat halaman AMP masih perlu dioptimalkan juga, salah satunya dengan
<link rel="preload"> ini.Dan
<link rel="preload"> ini tidak hanya untuk halaman AMP saja, tapi berlaku juga untuk halaman NON AMP juga.Penempatan
<link rel="preload"> ini pada bagian <head> setelah meta viewport. Seperti contoh berikut untuk halaman AMP.
<!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>
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin=""/>
<link rel="preload" as="image" href="URL IMAGE"/><link rel="preload"> seperti JS utama AMP di atas seperti berikut sebagai contoh.
<link rel="preload" as="script" href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>