Apa itu AMP Google, dan Cara Menggunakannya di Wordpress-oleh-indotutorial

Apa itu AMP Google, dan Cara Menggunakannya di WordPress

Apa itu AMP Google :

AMP (Accelerated Mobile Pages) merupakah suatu project open source google yang bertujuan untuk membuat halaman web pada mobile lebih baik dengan menyediakan kerangka kerja untuk membangun halaman konten yang secara konsisten berfungsi lebih cepat. Open source AMP Google ini dibuat untuk menangani loading page yang lama pada web mobile.

AMP ini sendiri berfungsi dengan meminimalisir teknologi webpage (seperti animasi yang memberatkan) sehingga ketika diakses melalui mobile webpage, akan dengan cepat dibuka. Hal ini juga yang membuat AMP adalah sebuah projek masa depan secara open source yang dikembangkan oleh developer-developer dunia. Saya menggunakan AMP pada website saya dalam skala besar dan yang tidak membutuhkan design yang menarik, namun berperforma pada konten/isi website itu sendiri.

WordPress merupakan sebuah platform yang mendukung projek google ini, dengan berkonstribusi mengaplikasikan teknologi AMP pada wordpress. Plugin yang menurut saya sangat simple dan powerfull dalam pengaplikasi AMP Google ke wordpress adalah AMP for WP – Accelerated Mobile Pages. Okay langsung saja berikut cara menggunakan AMP Google di WordPress :

 

Step 1 : Login ke dashboard wordpress anda, dan pergi ke plugin, add new kemudian cari plugin  AMP for WP – Accelerated Mobile Pages.

Apa itu AMP Google, dan Cara Menggunakannya di WordPress plugin


Step 2
: Setelah sudah terinstall AMP dan aktif pluginnya, maka sekarang ada menu AMP disebelah kiri bawa, maka secara teknis kita sudah menggunakan AMP teknologi dalam wordpres kita sekarang.

Apa itu AMP Google, dan Cara Menggunakannya di WordPress Setting


Step 3
: Untuk tampilan AMP ada Menu Settings dan Design yang sangat penting untuk kita jelajahi.

Apa itu AMP Google, dan Cara Menggunakannya di WordPress AMP Setup


Step 4
: Untuk menu Extensions, ini adalah tambahan-tambahan fungsi dari AMP itu sendiri (Seperti plugin tambahan lagi buat wordpress AMP kita) dan berbayar. Saya pikir untuk AMPforWP versi 0.9.97.32 vitur gratisnya sudah cukup bagus untuk memulai wordpress berita atau tutorial seperti indotutorial.com. Pengembangannya akan kita lihat kedepannya.


Step 5
: Check permalink wordpress anda pada Pengaturan -> Permalink. Menurut SEO friendly analyze, Permalink yang paling bagus untuk diterapkan dari sebuah wordpress url adalah Nama Tulisan / Post Name, Yaitu seperti https://indotutorial.com/contoh-tulisan/

Apa itu AMP Google, dan Cara Menggunakannya di WordPress Permalink


Step 6
: Pilih permalink diatas, kemudian kita akan testing apakah website kita sudah berefolusi ke AMP atau belum, yaitu dengan menambahkan /amp di web browser desktop pada url website kita (bebas bisa dengan home url ataupun posting url).

Apa itu AMP Google, dan Cara Menggunakannya di WordPress Testing


Step 7
: Jika tampilan pada browser desktop sudah berubah ke AMP (Tampilan default yaitu menu dari wordpress kita akan diminimize). Atau bisa anda Test dengan menggunakan Google AMP Test dengan pergi ke link ini dan masukkan url website anda kemudian klik Run Test.


Step 8
: Jika Website anda sudah Berhasil menggunakan AMP Google, maka akan ada Valid AMP Page keterangan.

Apa itu AMP Google, dan Cara Menggunakannya di WordPress AMP Google TESTING

Sampai disini semua sudah berjalan dengan normal. Untuk costomize wordpress kita bisa pada Settingan AMP kita dengan menambahkan footer, sitebar, share button, fb komentar dan lain sebagainya.

 

Catatan :
Sebenarnya dengan menggunakan AMP Google pada wordpress kita secara otomatis, semua settingan plugin dan style yang telah kita buat pada wordpress yang lama dinonaktifkan. Ini merupakah salah satu point yang membuat kecepatan loading web mobile menjadi lebih kencang/cepat. Point yang lain yaitu :
Hanya memperbolehkan skrip asinkron
Menyatakan ukuran semua sumber daya secara statis
Tidak memperbolehkan mekanisme ekstensi memblokir perenderan
Mempertahankan semua JavaScript pihak ketiga di luar jalur penting
Semua CSS harus sebaris dan dibatasi ukurannya
Pemicuan font harus efisien
Meminimalkan rekalkulasi gaya
Hanya menjalankan animasi yang diakselerasi GPU
Memprioritaskan pemuatan sumber daya
Memuat halaman seketika
Semua ini dapat anda pelajari lebih detail dan dapat berkontribusi dalam pengembangan AMP projek pada website https://www.ampproject.org/.

#AMP #mobile #speed #google #wordpress #AMPforWP #tutorial

Bagikan :

Komentar

avatar
  Subscribe  
Notify of
Tag: , , , , ,