APA ITU GOOGLE AMP

0
140

GOOGLE AMP adalah salah satu persyaratan dari berbagai macam persyaratan agar Google suka situs anda.

Jika anda pernah membaca berbagai persyaratan Google agar situs anda masuk sebagai situs yang memiliki peringkat yang tinggi oleh Google, terutama jika google ingin menampilkan hasil suatu pencarian maka Google AMP adalah salah satu syarat penting dari ketentuan Google ini.

Google AMP seperti juga ketentuan dalam SEO yang dikeluarkan oleh Google menitikberatkan kepada pengalaman pembaca/pengunjung/visitor jika memasuki situs anda. Khusus Google AMP mensyaratkan kecepatan halaman dengan cara yang sedikit berbeda.

Dari berbagai macam cara dan trik untuk memenuhi ketentuan loading situs anda secara cepat ada banyak pilihan dan khusus tentang tulisan ini akan menguraikan bagaimana dan apa itu Google AMP.

Apa dan Bagaimana itu Google AMP?

Google AMP adalah singkatan dari Accelerated Mobile Pages yang digagas oleh Google pada tahun 2015.

Sejalan dengan itu, WordPress juga mengadopsi secara resmi dan mengeluarkan penguman penting terkait hal ini dalam situs resminya.

Perjalanan AMP, ketentuan AMP dan cara memenuhi persyaratan AMP akan dibahas secara ringkas pada posting ini.

Untuk memenuhi agar situs menggunakan ketentuan AMP sudah tentu ada persyaratan wajib yang harus dipenuhi. Persyaratannya akan dibahas ringkas sebagai contoh sebagaimana dipersyaratkan dalam situs resmi AMP.

Perjalanan Singakat AMP

Google mencetuskan open-source initiative pada Oktober 2015 dengan tujuan agar memperbaiki kinerja website terutama agar menjadi responsive (dan ringan) jika dibuka melalui ponsel pintar.

Poyek open source ini memiliki ketentuan dasar mengenai bagaimana HTML skrip sebaiknya dipergunakan sehingga memangkas waktu yang diperlukan untuk menampilkan situs yang dikunjungi tersebut.

Pada prinsipnya dari proyek AMP open source ini adalah agar situs menjadi terasa lebih ringan sehingga cepat tetapi disisi lain ada dukungan dari Google yang sangat kuat khusus untuk hal ini maka anda wajib harus pertimbangkan. Wajib dipertimbangkan tersebut karena Google mangindikasikan akan melakukan cache langsung bagi situs tersebut oleh Google (sudah tentu anda bisa saja memilih metoda atau alat untuk cache tersendiri atau juga menggunakan cache yang ada baik dari server atau plugin khusus dan tetap bisa menggunakan AMP dari Google).

Dalam perjalanannya, ketentuan AMP dari Google ini disambut secara positif oleh berbagai pihak terutama oleh WordPress.

Diambil dari situs WordPress:

Today we’re announcing support for Accelerated Mobile Pages for WordPress, a new open source initiative spearheaded by Google to dramatically improve performance of the mobile web.

WordPress saat ini sudah mencapai lebih dari 24% pengguna dari media publikasi yang ada di internet, tidak mengherankan jika WorPress dianggap berhasil dan menjadi barometer untuk menyediakan media yang responsif bagi pengguna internet.

Jika anda menggunakan ketentuan syarat dari AMP ini maka tidak hanya situs dilakukan cache oleh Google tetapi juga situs anda menjadi ringan, sudah tentu jika ada serach google dengan ponsel pintar maka halaman bisa menjadi prioritas (dibanding yang tidak menggunakan AMP).

Jika saja situs anda saat ini sudah di-optimized sesuai ketentuan google page speed insight maka kemungkin dari situs tersebut seolah tidak mendapatkan keuntungannya khusus karena memang situs anda sudah mendekati persyaratan dari Google AMP.

Bagaimana agar masuk kriteria Google AMP?

Pada dasarnya AMP ini memiliki framework atau ketentuan yang sangat terdefinisi dan mengunci.

Halaman yang akan terdefinisi menjadi masuk syarat AMP harus memenuhi beberapa ketentuan yang sangat spesifik dengan sendirinya ada beberapa ketentuan yang sebaiknya dihindari.

AMP pada dasarnya sangat bertumpu pada ketentuan CSS (tanpa terhubung dengan external CSS) sehingga anda sebaiknya hanya menggunakan inlline style CSS attribute. Adapun ketentuan yang akan terkena dampak ini adalah anda sebaiknya tindak menampilkan animasi pada halaman tersebut. Ditakutkan animasi akan menjadi penghambat dari kinerja sewaktu loading atau render halaman AMP ini.

Apa Persyaratan agar memenuhi kriteria Google AMP?

Prinsip dasar dari Google AMP adalah agar web page atau situs halaman anda menjadi cepat sewaktu ditayangkan (dilakukan render) khususnya bagi bagian static content. Terkait ketentuan ini ada tiga hal utama yang dipersyaratkan seperti: AMP HTML, AMP JS dan Google AMP Cache.

AMP HTML adalah ketentuan bagi HTML dengan beberapa pembatasan agar kinerja dan ekstension dalam membentuk suatu content yang lebih kompleks lebih dari sekedar HTML dasar.  AMP JS library dipakai harus memastikan bahwa render atau menampilkan halaman secara cepat. Google AMP Cache adalah fasilitas dari Google yang dapat dipergunakan untuk melakukan cache atas halaman yang sudah menggunakan  AMP HTML pages.

Sesudah menggunakan ketiga kriteria besar AMP tersebut, terutama ketentuan AMP HTML maka anda sudah sesuai dengan keperluan Google AMP.

Apa itu AMP HTML?

AMP HTML seperti yang dijelaskan pada situs Github adalah rangkaian subset dari HTML yang dipergunakan pada bagian halaman seperti artikel berita yang menggunakan rangkaian metode yangmenjamin persyaratan dasar kinerja dalam menampilkan halaman tersebut.

Untuk keperluan membentuk subset HTML ini hanya dibentuk beberapa ketentuan lengkap mencankup rangkaian tag dan fungsi dengan menggunakan kode HTML dan untuk hal ini tidak diperlukan penggunaan HTML dari luar dengan menggunakan rangkaian yang ada bisa dilakukan sebagimana dokumen HTML lain yang dipasang pada server anda. Tidak diperlukan konfigurasi khusus didalam server anda, hanya konfigurasinya saja sehingga susunannya menjadi optimal.

Rangkaian Subset HTML untuk AMP HTML ini adalah untuk meng-optimalkan halaman menjadi lebih tepat seperti juga dapat dipergunakan sebagi contoh untuk:

  • mengganti referensi gambar dengan ukuran gambar yang lebih sesuai dengan perangkat yang dipergunakan oleh pengunjung;
  • memnampilkan gambar yang sesuai hanya pada bagian yang dilihat oleh pengunjung (above the fold);
  • menerpakan Inline CSS variables;
  • melakukan preload terlebih dahulu untuk komponen yang diperluas/yang diperdalam;
  • minify HTML dan CSS;

Kunci utama bagi tujuan AMP HTML adalah untuk mengurangi waktu loading/waktu untuk render/menampilkan bagian dari halaman bagipengunjung. Dalam hal ini, AMP HTML bertujuan untuk:

  • HTTP request utama untuk melakukan render/loading dan menampilkan bagian layout menyeluruh yang bisa diminimalisasi;
  • menampilkan pilihan bahwa iklan atau gambar yang harus ditampilkan/dimunculkan adalah bagian yang terlihat oleh pengguna/pengunjung;
  • media browser harus bisa memperkirakan bagian yang diperlukan bagi perangkat tanpa harus memanggil atau menampilkan bagian yang tidak perlu;

Contoh dari aplikasi tersebut sebagaimana diambil dari situs AMP:

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

Bagaimana cara realistisnya untuk memenuhi AMP?

Mudah.

WordPress memang secara khusus memberikan perhatian yang besar terkait persyaratan kecepatan bagi website agar bisa dinikmati pengunjung.

Memenuhi ketentuan AMP adalah pilihan terbaik dan satu-satunya yang harus diikuti oleh pengguna WordPress dan tidak usah berkeringat jika anda tidak mengerti detailnya.

Tim WordPress sangat mendukung proyek open-source karena memang mereka percaya bahwa pilihan open-source adalah yang terbaik bagi generasi sekarang dan akan datang.

Untuk saat ini, dalam bagian pengembangan awal sebagimana disebutkan oleh WordPress bahwa plugin yang ada sudah cukup untuk dipakai dalam situs WordPress anda.

Plugin tersebut bisa anda pergunakan dan dengan meng-install dan melakukan aktivasi maka secara umum sudah menggunakan ketentuan AMP. Plugin bisa di-download pada halaman plugin WordPress.

Bagaimana AMP Plugin merubah situs anda?

Tergantung setting permalinks anda yang diterapkan dalam setting secara umum AMP akan men-generate halaman yang sesuai dengan keperluan AMP dalam suatu URL tersendiri.

URL ini berbeda sedikit dan otomatis dikenali Google dan pengguna ponsel pintar sewaktu memasuki situs anda. Penambahan atau perubahan ini dengan menyediakan URL dengan tanda /amp/ pada URL halaman anda.

Enable Accelerated Mobile Pages (AMP) on your WordPress site logo

Plugin ini akan menyediakan bagian yang sesuai dengan AMP dan anda tidak usah pusing melakukannya secara manual.

Hanya saja anda juga perlu memastikan bahwa plugin AMP diatas bisa bekerja dengan baik dengan cara menambahkan informasi lain bagi plugin diatas bekerja lebih optimal.

Plugin yang perlu ditambahkan adalah Custom AMP dimana dalam plugin ini beberapa informasi perlu dimasukkan agar bisa menjadi input bagi ponsel mobile/ponsel pintar untuk diambil.

Sesudah anda melakukan instalasi plugin tersebut, maka anda akan diminta beberapa informasi untuk ditambahkan.

custom amp panel

Logo yang kecil yang cocok dengan ponsel mobile dan beberapa informasi seperti kode Google Analytic akan diminta.

Plugin terbaik saat ini dapat dipergunakan hanya dengan install dan aktivasi dan mengaplikasikan beberapa ketentuan sebagai berikut:

  • merubah setting untuk membuat logo yang cocok bagi perangkat ponsel pintar;
  • menambahkan fitus gambar pada posting;
  • terkait dengan Google Analytic terintegrasi;
  • memperlihatkan bagian comment (isian untuk komentar);
  • memperlihatkan bagian menu untuk menjelajahi situs anda;
  • memperlihatkan posting yang bertautan dengan posting yang sedang diakses;
  • memperlihatkan lebar yang bisa disesuaikan secara otomatis bagi penrangkat yang masuk situs anda;

Dengan sendirinya plugin ini sebetulnya mempersiapkan agar situs anda sebagian besar siap untuk memenuhi kriteria AMP hanya saja terkait aplikasi yang disebutkan diatas perlu halaman atau theme yang memang sudah sesuai dengan AMP Google.

Saat ini sudah banyak theme atau template yang sesuai dengan AMP seperti persyaratan responsive dan HTML Rich Content.

 

Berita diambil dari Google AMP, dari situs Github dan Blog resmi WordPress.