Optimalkan Halaman Blog Dengan Link rel="preload" - Setelah sebelumnya penulis membahas tentang mengenai langkah mengoptimalkan blog atau blog di zaman kecepatan ini, kini kita pasti membahas langkah lainnya untuk mengoptimalkan halaman blog atau blog yang menurut penulis penting untuk dilakukan yaitu penggunaan connect rel="preload".
Secara sederhana <link rel="preload"> berikut adalah tentang langkah memberitahu program untuk memuat dapat cepat sumber daya berbasis content tanpa penundaan.
Selain dengan 3 poin yang sudah penulis sebutkan pada postingan sebelumnya, trik yang satu berikut penting untuk dilakukan untuk semakin mengoptimalkan kecepatan pemuatan halaman, khususnya untuk ponsel.
Dengan <link rel="preload"> berikut kita memberitahu program bahwa sumber daya tersebut penting untuk halaman dan memerintahkan untuk segera memuatnya. Sumber daya yang dimuat melalui <link rel="preload"> disimpan secara lokal di program sehingga sudah tersedia ketika dibutuhkan saat peng-render-a halaman. Dengan begitu halaman dapat ditampilkan dapat cepat.
Jika Anda merasa bahwa blog Anda sudah cepat, mungkin belum tentu cepat kalau berhubungan dengan ponsel.
Mungkin pasti 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 versatile dengan bantuan Google store. Namun nggak semua pengunjung datang dari halaman pencarian portable. Pengunjung yang datang segera ke situs tentu saja nggak pasti dilayani dengan Google reserve. Hal itulah yang membuat halaman AMP masih perlu dioptimalkan juga, salah satunya dengan <link rel="preload"> ini.
Dan <link rel="preload"> berikut nggak hanya untuk halaman AMP saja, tapi berlaku juga untuk halaman NON AMP juga.
Penempatan <link rel="preload"> berikut 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, least 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-activity:- amp-start 8s steps(1, end) 0s 1 ordinary both;- moz-liveliness:- amp-start 8s steps(1, end) 0s 1 typical both;- ms-movement:- amp-start 8s steps(1, end) 0s 1 ordinary both;animation:- amp-start 8s steps(1, end) 0s 1 ordinary 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 dapat awal dengan ini
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js"/>Jika Anda menggunakan Google Font sepatutnya tambahkan ini
<link rel="preconnect dns-prefetch" href="https://fonts.gstatic.com/" crossorigin=""/>Jika Anda menggunakan gambar seperti thumbnail di atas artikel atau gambar saint di bawah header, atau gambar foundation blog, atau gambar logo blog sepatutnya tambahkan ini
<link rel="preload" as="image" href="URL IMAGE"/>Jika blog NON AMP Anda menggunakan Jquery Library, sepatutnya 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/aides and-instructional exercises/upgrade and-measure/optimize_amp
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
https://developers.google.com/web/refreshes/2016/03/connect rel-preload
https://www.smashingmagazine.com/2016/02/preload-what-is-it-useful for/