fbpx

Cara Mempercepat Loading Website Anda hingga 85% Menggunakan AMP

Cara Mempercepat Loading Website – Kita semua memiliki pengalaman memuat situs sumber daya intensif di jaringan tambal sulam. Yang benar adalah, halaman butuh waktu selama untuk memuat! Ini telah menjadi masalah besar bagi para developer web terutama jika negara sasaran situs web tersebut memiliki kecepatan internet keseluruhan yang lambat. Olehnya berikut ulasan dari tim teknoiot cara mempercepat loading website yang membantu Anda mencapai kecepatan maksimal.

Ini Tips Cara Mempercepat Loading Website Anda hingga 85% Menggunakan AMP

Para insinyur di Google menghasilkan solusi unik yang disebut Accelerated Mobile Pages (AMP). Menggunakan AMP, halaman dimuat hanya dalam sekejap. Pada artikel ini, kita akan melihat cara mengaktifkan AMP untuk situs Anda, tetapi pertama-tama, mari kita lihat bagaimana AMP bekerja.

cara-mempercepat-loading-website-dengan-amp Cara Mempercepat Loading Website Anda hingga 85% Menggunakan AMP
images credits: teknoiot

Cara Kerja AMP:

Cara mempercepat loading website dengan menyimak poin-poin berikut yangmenggambarkan mekanisme di balik kerja halaman AMP.

  • Block native JS of the page   – Javascript adalah biang kerok utama untuk tetap menggunakan DOM situs web. AMP memodifikasi ini dengan skrip asinkron khusus yang tidak memperlambat proses rendering.
  • Extension mechanisms can’t block page rendering   – ekstensi seperti lightboxes, Instagram embed, tweet, dll. Memerlukan permintaan HTTP tambahan. AMP memiliki tag skrip khusus untuk ekstensi ini seperti amp-iframesehingga DOM menyadari bahwa ada iframe di halaman dan membuat kotak iframe bahkan sebelum iframe dimuat.
  • Pre-defined size for external resources  – Banyak perhitungan ulang style terjadi ketika halaman diberikan saat CSS berubah secara dinamis saat memuat. Untuk menghindarinya, ukuran sumber daya eksternal seperti iklan, gambar, video ditentukan secara eksplisit sebelum diunduh.
  • Sandboxing third-party external javascript   – AMP memberikan akses ke JS pihak ketiga hanya dalam iframe sandbox sehingga mereka tidak mengganggu DOM utama.
  • Inline CSS  – Memiliki file CSS eksternal meningkatkan permintaan HTTP yang memperlambat proses rendering. AMP hanya memungkinkan inline CSS untuk meminimalkan jumlah permintaan HTTP dari jalur rendering kritis, sehingga meningkatkan kecepatan.
  • Font Optimisations  – Secara umum, font dimuat setelah sebagian besar file CSS dan JS dimuat. AMP menjadikan permintaan font sebagai permintaan HTTP pertama sebelum permintaan lainnya segera setelah halaman mulai memuat. Jadi font dimuat sebelum skrip lainnya.
  • Handling Animations  – Animasi dibatasi hanya untuk dua metode: transform dan opacity. Ini memastikan bahwa browser tidak memerlukan tata letak halaman, dan animasi ditangani oleh GPU itu sendiri sehingga meningkatkan kinerja.
  • The three Ps  – Preconnect, Prerender dan Prefetch digunakan dengan cara yang cerdas oleh AMP untuk menghemat bandwidth dan siklus CPU dengan hanya mengunduh sumber daya di atas flip. Dengan menggunakan ini, halaman diberikan sebelum pengguna mengunjungi halaman. Jadi, ketika pengguna mengunjungi halaman, itu langsung memuat!
  • Progressive loading of resources – AMP hanya memuat sumber daya yang diperlukan untuk menghilangkan banyak hambatan yang tidak perlu. AMP juga mengambil sumber daya yang dimuat malas ketika jaringan dan CPU menganggur. Ini membuat konten tersedia bagi pengguna dengan sangat cepat dan efisien.
Baca Juga:  Cara Menggunakan Fitur Kamera AI di Android Anda

Poin-poin di atas disajikan dengan indah oleh Malte Ubl di Google IO 2016 dalam video berikut.

Cukup dengan prinsip kerja. Sekarang mari kita lihat bagaimana menggunakan AMP untuk website Anda.

Postingan dibagi menjadi dua bagian: Bagian pertama akan menunjukkan cara menggunakan AMP di situs WordPress dan di bagian kedua kita akan melihat bagaimana menulis situs web ramah AMP dari awal.

Langkah 1: AMP untuk website WordPress

Menggunakan AMP di WordPress semudah pie. Berikut langkah-langkahnya:

  1. Instal plugin AMP  oleh Automattic.
  2. (Opsional)  Instal glue for Yoast SEO & AMP jika Anda menggunakan plugin Yoast SEO. Ini juga memiliki fitur lain seperti menyesuaikan pilihan warna default untuk halaman AMP.

Itu dia! Anda telah menyiapkan AMP di situs web Anda. Untuk memeriksa apakah itu berfungsi, navigasikan ke sembarang postingan di situs Anda dan tambahkan /ampdi akhir URL.

Baca Juga:  SDDM vs. GDM - Desktop Display Manager mana yang Terbaik dan cocok untuk Anda?

Untuk misalnya, Jika posting Anda memiliki URL seperti https://example.com/blog/article lalu ganti dengan https://example.com/blog/article/amp
Seperti itulah tampilan versi halaman AMP.

Untuk validasi lihat langkah 3 dari bagian 2 di bawah ini.

CATATAN : Halaman AMP tidak akan berfungsi untuk domain root situs WordPress Anda. Ini hanya akan berfungsi untuk halaman posting karena AMP dirancang untuk blog atau situs web berita yang mengandung banyak konten dan tidak dimaksudkan untuk digunakan untuk halaman promosi yang menampilkan produk, situs web perusahaan, atau situs web portofolio pribadi.

photo_2019-04-06_09-17-39-576x1024 Cara Mempercepat Loading Website Anda hingga 85% Menggunakan AMP

Langkah 2: Membangun website ramah AMP dari awal

Kami akan mengikuti sepanjang panduan resmi Google . Untuk lebih jelasnya, Anda dapat mengunjungi tautan yang diberikan. Anda harus terbiasa dengan HTML. Pengetahuan tentang CSS dan Javascript juga membantu.

  • Langkah 1 : Buat file HTML dan tambahkan kode berikut ke dalamnya. Ini membentuk dasar untuk situs web AMP kami.
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Basic AMP Boilerplate</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>This ia a heading</h1>
    <p>This is a paragraph</p>
  </body>
</html>
Langkah 2 : Untuk menambahkan gambar ke situs Anda, gunakan tag berikut: 
<amp-img src="image.jpg" alt="alternate-text" height="500" width="800"></amp-img>
  • Anda mungkin telah memperhatikan bahwa <img>tag konvensional telah diganti dengan tag <amp-img>. Banyak tag konvensional diganti dengan tag amp kustom, dan banyak yang tidak diizinkan dalam AMP. Alasan untuk ini adalah preloading dan memprioritaskan sumber daya Untuk daftar tag yang diganti atau dilarang kunjungi di sini .
  • Langkah 3 : Validasikan kode Anda – Sekarang, setelah file HTML dibuat, kita perlu melihat apakah ada kesalahan dalam kode tersebut. Salin seluruh kode dan kunjungi https://validator.ampproject.org . Hapus konten area teks dan tempel kode Anda di sana. Kemudian klik Validasi, dan itu akan segera menampilkan detail untuk setiap kesalahan. Atau, jika Anda sudah menerbitkan halaman Anda, Anda dapat langsung memasukkan URL di bidang yang diberikan.
Baca Juga:  Cara Membuka Rekening Jenius Tanpa ke Bank
amp-validator-teknoiot Cara Mempercepat Loading Website Anda hingga 85% Menggunakan AMP
  • Langkah 4 : Penemuan halaman AMP – Ini adalah salah satu langkah paling penting yang memungkinkan Google bot untuk menemukan halaman AMP dan menunjukkannya di hasil pencarian.
    • Jika Anda memiliki satu versi AMP dan satu versi non-AMP dari halaman yang sama, Anda harus menautkan keduanya. Dalam versi non-AMP halaman tambahkan baris kode berikut: <link rel="amphtml" href="https://www.example.com/ampversion.html">Ganti URL example.com untuk menambahkan alamat versi non-AMP halaman Anda. Sekarang, dalam versi AMP halaman Anda tambahkan baris berikut dari kode: <link rel="canonical" href="https://www.example.com/fullversion.html">Demikian pula, ganti URL example.com untuk menambahkan alamat versi non-AMP halaman Anda.
    • Jika Anda hanya membuat satu versi halaman dan itu adalah versi AMP, tambahkan baris kode berikut:<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
    Sekarang lakukan langkah validasi sebelumnya lagi untuk memeriksa kesalahan. Halaman AMP sekarang siap untuk diterbitkan dan harus dapat ditemukan oleh Google.

Untuk penyesuaian lebih lanjut, kunjungi panduan resmi AMP .

halaman-amp-teknoiot-1-576x1024 Cara Mempercepat Loading Website Anda hingga 85% Menggunakan AMP
Kesimpulan

Setiap detik website memuat waktu penting. Keterlibatan pengguna meningkat secara signifikan jika waktu pemuatan di bawah 3 detik. Pada pengujian awal, Google telah melaporkan peningkatan kinerja dari 15% hingga 85% ( sumber ). 

Itu bahkan mengarah pada peningkatan visibilitas seluler karena Google menampilkan hasil AMP dalam daftar pencarian organik dan membuatnya terlihat menarik berbeda dengan daftar non-AMP. Ini memiliki beberapa batasan, tetapi kelebihannya secara luas mengalahkan mereka. Mengoptimalkan cara mempercepat loading website dalam hal ini pemuatan halaman dengan AMP tentunya harus ada dalam daftar periksa setiap penerbit konten.