Mengoptimalkan Halaman AMP Agar Lebih Cepat

Mengoptimalkan Halaman AMP Agar Lebih Cepat - Sebenarnya saya agak kebingungan tentang judul apa yang cocok dengan postingan kali ini. Postingan kali ini akan membahas tentang pengoptimalan kecepatan pemuatan halaman amp pada suatu blog. Sebenarnya amp secara default sudah memiliki kecepatan tinggi, namun disamping itu ada cara atau trik lagi agar blog amp tersebut dapat memiliki kecepatan yang maksimal.

Secara default, halaman AMP pada suatu website akan disimpan pada cache AMP, sehingga ketika kita melihat website kita melalui google search diponsel, maka akan ada tanda petir yang mengartikan website tersebut AMP. Jika kita klik, maka kita akan dialihkan ke alamat url cache AMP, bukan ke alamat website yang sebenarnya. Hal itu membuat pemuatan pada halaman tersebut akan sangat ringan, karena cache AMP membuat semua kebutuhan komponen website tersebut telah tersimpan.

Namun apa jadinya bila lalu lintas tersebut sebagian besar bukan dari google search, melain dari situs situs lain, misal seperti twitter, facebook, whatsapp, dll. Maka, bila ada orang berkunjung melalui situs situs tersebut, mereka akan mengunjungi alamat asli, dan bukan menuju alamat cache. Akibatnya website tersebut harus mengalami pemuatan biasa semua komponen, bukan pemuatan yang dilayani dengan cache AMP, sehingga website tersebut akan meminta banyak permintaan kepada server AMP yang membuat pemuatan blog sedikit terhambat.

Untuk mengatasi hal tersebut, kita membutuhkan teknik pemuatan blog, agar blog tersebut dapat memuat lebih cepat, sama halnya seperti pemuatan melalui cache AMP. Cara ini juga direkomendasikan oleh amproject untuk blog yang lalu lintasnya sebagian besar tidak melalui google search. Berikut Caranya...

1. Memberi Meta Tag DNS Prefect

Langkah ini merupakan inisiatif saya sendiri, karena dari pengalaman saya, halaman AMP cenderung lemah pada DNS Lookup. Script AMP dihosting pada alamat server yang berbeda beda, hal ini membuat permintaan DNS Lookup juga semakin banyak, sehingga akan mengakibatkan penundaan perenderan untuk merequst dns lookup tersebut. Untuk mengatasi hal tersebut kita dianjurkan untuk memasang Meta Tag DNS Prefect, agar browser mengenal domain apa saja yang akan direquest.

Caranya, anda tinggal memberikan meta tag dns prefect kepada setiap domain yang diminta, contoh meta tag dns prefect seperti dibawah ini

<!-- Meta Tag DNS Prefect Start-->
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//www.blogger.com' rel='dns-prefetch'/><link href='//fonts.googleapis.com' rel='dns-prefetch'/><link href='//resources.blogblog.com' rel='dns-prefetch'/><link href='//www.facebook.com' rel='dns-prefetch'/><link href='//plus.google.com' rel='dns-prefetch'/><link href='//twitter.com' rel='dns-prefetch'/><link href='//www.youtube.com' rel='dns-prefetch'/><link href='//feedburner.google.com' rel='dns-prefetch'/><link href='//feeds.feedburner.com' rel='dns-prefetch'/><link href='//platform.twitter.com' rel='dns-prefetch'/><link href='//apis.google.com' rel='dns-prefetch'/><link href='//connect.facebook.net' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/><link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/><link href='//www.gstatic.com' rel='dns-prefetch'/><link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//static.xx.fbcdn.net' rel='dns-prefetch'/><link href='//tpc.googlesyndication.com' rel='dns-prefetch'/><link href='//syndication.twitter.com' rel='dns-prefetch'/><link href='//fonts.gstatic.com' rel='dns-prefetch'/><link href='https://cdn.ampproject.org' rel='dns-prefetch'/><link href='https://3p.ampproject.net' rel='dns-prefetch'/><link href='https://lh3.googleusercontent.com' rel='dns-prefetch'/><link href='https://tpc.googlesyndication.com' rel='dns-prefetch'/><link href='https://i.ytimg.com' rel='dns-prefetch'/><link href='https://i3.ytimg.com' rel='dns-prefetch'/><link href='https://img.youtube.com' rel='dns-prefetch'/><link href='https://www.googletagmanager.com' rel='dns-prefetch'/><link href='https://adservice.google.co.id/' rel='dns-prefetch'/><link href='https://adservice.google.com/' rel='dns-prefetch'/><link href='https://cdn.staticaly.com' rel='dns-prefetch'/>
<!-- Meta Tag DNS Prefect Finish-->

Anda tinggal menaruh kode tersebut pada bagian head, namun lebih tepatnya dibawah kode meta viewport, sehingga hasilnya seperti dibawah ini

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
<!-- Meta Tag DNS Prefect Start-->
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//www.blogger.com' rel='dns-prefetch'/><link href='//fonts.googleapis.com' rel='dns-prefetch'/><link href='//resources.blogblog.com' rel='dns-prefetch'/><link href='//www.facebook.com' rel='dns-prefetch'/><link href='//plus.google.com' rel='dns-prefetch'/><link href='//twitter.com' rel='dns-prefetch'/><link href='//www.youtube.com' rel='dns-prefetch'/><link href='//feedburner.google.com' rel='dns-prefetch'/><link href='//feeds.feedburner.com' rel='dns-prefetch'/><link href='//platform.twitter.com' rel='dns-prefetch'/><link href='//apis.google.com' rel='dns-prefetch'/><link href='//connect.facebook.net' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/><link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/><link href='//www.gstatic.com' rel='dns-prefetch'/><link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//static.xx.fbcdn.net' rel='dns-prefetch'/><link href='//tpc.googlesyndication.com' rel='dns-prefetch'/><link href='//syndication.twitter.com' rel='dns-prefetch'/><link href='//fonts.gstatic.com' rel='dns-prefetch'/><link href='https://cdn.ampproject.org' rel='dns-prefetch'/><link href='https://3p.ampproject.net' rel='dns-prefetch'/><link href='https://lh3.googleusercontent.com' rel='dns-prefetch'/><link href='https://tpc.googlesyndication.com' rel='dns-prefetch'/><link href='https://i.ytimg.com' rel='dns-prefetch'/><link href='https://i3.ytimg.com' rel='dns-prefetch'/><link href='https://img.youtube.com' rel='dns-prefetch'/><link href='https://www.googletagmanager.com' rel='dns-prefetch'/><link href='https://adservice.google.co.id/' rel='dns-prefetch'/><link href='https://adservice.google.com/' rel='dns-prefetch'/><link href='https://cdn.staticaly.com' rel='dns-prefetch'/>
<!-- Meta Tag DNS Prefect Finish-->

Dengan demikian, browser akan sesegera mungkin merequest dns lookup sesuai daftar yang tersedia sehingga tidak akan terjadi penundaan perenderan.

2. Pengoptimalan Runtime AMP

Runtime merupakan urutan dalam pemuatan semua komponen hingga blog tersebut sudah siap ditampilkan. Dalam AMP, hal ini perlu di atur agar pemuatan blog semakin optimal dan cepat. Kuncinya adalah menyusun semeua script prioritas yang ada di bagian <head> sehingga render-blocking dan font kustom dapat memuat secepat mungkin. Berikut caranya...

Setelah meta tag dns prefect yang telah kita pasang tadi, dibawahnya kita harus memberikan tag preload pada v0.js,  sehingga ia akan menjadi prioritas tinggi untuk sesegera mungkin memulai pengunduhan. Lalu dibawah tag preload tersebut, langsung saja tambahkan semua script amp yang anda pakai, agar setelah v0.js selesai dimuat, script amp lainya juga segera diunduh. Lebih jelasnya seperti dibawah ini...

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
<!-- Meta Tag DNS Prefect Start -->
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//www.blogger.com' rel='dns-prefetch'/><link href='//fonts.googleapis.com' rel='dns-prefetch'/><link href='//resources.blogblog.com' rel='dns-prefetch'/><link href='//www.facebook.com' rel='dns-prefetch'/><link href='//plus.google.com' rel='dns-prefetch'/><link href='//twitter.com' rel='dns-prefetch'/><link href='//www.youtube.com' rel='dns-prefetch'/><link href='//feedburner.google.com' rel='dns-prefetch'/><link href='//feeds.feedburner.com' rel='dns-prefetch'/><link href='//platform.twitter.com' rel='dns-prefetch'/><link href='//apis.google.com' rel='dns-prefetch'/><link href='//connect.facebook.net' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/><link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/><link href='//www.gstatic.com' rel='dns-prefetch'/><link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//static.xx.fbcdn.net' rel='dns-prefetch'/><link href='//tpc.googlesyndication.com' rel='dns-prefetch'/><link href='//syndication.twitter.com' rel='dns-prefetch'/><link href='//fonts.gstatic.com' rel='dns-prefetch'/><link href='https://cdn.ampproject.org' rel='dns-prefetch'/><link href='https://3p.ampproject.net' rel='dns-prefetch'/><link href='https://lh3.googleusercontent.com' rel='dns-prefetch'/><link href='https://tpc.googlesyndication.com' rel='dns-prefetch'/><link href='https://i.ytimg.com' rel='dns-prefetch'/><link href='https://i3.ytimg.com' rel='dns-prefetch'/><link href='https://img.youtube.com' rel='dns-prefetch'/><link href='https://www.googletagmanager.com' rel='dns-prefetch'/><link href='https://adservice.google.co.id/' rel='dns-prefetch'/><link href='https://adservice.google.com/' rel='dns-prefetch'/><link href='https://cdn.staticaly.com' rel='dns-prefetch'/>
<!-- Meta Tag DNS Prefect Finish -->
<!-- Preload v0.js Start -->
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<!-- Preload v0.js Finish-->
<!-- AMP Script Start -->
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'></script>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script>
<script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'></script>
<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'></script>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
<!-- AMP Script Finish-->

Berikut hasil data prioritas setelah anda membarikan preload...
Gambar tersebut diambil dari ampproject.org

Sehingga dengan ini semua pemuatan script pada AMP dapat dioptimalkan dan semakin cepat. Langkah terikhir yang harus anda lakukan adalah menempatkan kode boilerplate AMP pada akhir, atau diatas kode </head>.

Sekian dahulu pembahasan tentang cara Mengoptimalkan Halaman AMP Agar Lebih Cepat. Selamat mencoba...