Ditulis oleh: Ditulis pada: 5/01/2019
Optimalkan Halaman Blog Dengan Link rel="preload" - Setelah sebelumnya saya membahas tentang bagaimana cara mengoptimalkan web atau blog di zaman kecepatan ini, kini kita akan membahas cara lainnya untuk mengoptimalkan halaman web atau blog yang menurut saya penting untuk dilakukan yaitu penggunaan link rel="preload".
Secara sederhana <link rel="preload"> ini adalah tentang cara memberitahu browser untuk memuat lebih cepat sumber daya berbasis script tanpa penundaan.
Selain dengan 3 poin yang sudah saya sebutkan pada postingan sebelumnya, trik yang satu ini penting untuk dilakukan untuk semakin mengoptimalkan kecepatan pemuatan halaman, khususnya untuk ponsel.
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>JS utama AMP v0.js harus dimuat lebih awal dengan ini
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>Jika Anda menggunakan Google Font maka tambahkan ini
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin=""/>Jika Anda menggunakan gambar seperti thumbnail di atas postingan atau gambar hero di bawah header, atau gambar background blog, atau gambar logo blog maka tambahkan ini
<link rel="preload" as="image" href="URL IMAGE"/>Jika blog NON AMP Anda menggunakan Jquery Library, maka tambahkan dengan <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"/>Kebutuhan tiap blog kadang berbeda-beda, jadi silahkan sesuaikan dengan kebutuhan blog Anda untuk setiap JS yang digunakan.
Referensi:
https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
https://developers.google.com/web/updates/2016/03/link-rel-preload
https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/