Menggunakan Google AMP untuk Membuat Halaman Seluler Situs WordPress Anda Memuat Lebih Cepat

Mengapa Kecepatan Halaman Penting

Jika seperti miliaran dari kami, Anda baru-baru ini menggunakan konten web di perangkat seluler, Anda menyadari bahwa pengalaman tersebut dapat ditingkatkan. Membaca artikel berita seringkali sangat lambat , dengan halaman yang membutuhkan waktu lama untuk dimuat. Bahkan setelah teks dimuat di halaman, halaman terus dimuat selama beberapa detik, saat iklan, javascript pelacakan, dan gambar diunduh.
Aplikasi seluler membuat kami terbiasa memuat konten dengan cepat , tampilan offline, dan antarmuka yang cepat. Tetapi situs seluler sering tertinggal, secara harfiah. Ini terutama berlaku untuk situs berita dan blog, yang menggunakan banyak widget untuk iklan, analitik, berbagi, dan berkomentar. Anda dapat menguji ini dengan mudah dengan memasang pemblokir konten pada perangkat iOS dan memperhatikan peningkatan kecepatan.
Tentu, Anda dapat menggunakan tema responsif untuk mengatasi beberapa masalah, tetapi desain responsif tidak berhubungan dengan kinerja pemuatan halaman. Sering kali, responsif adalah akar masalahnya : kami mendesain situs web yang dapat memuat tampilan dengan banyak resolusi berbeda dan kami gagal menciptakan pengalaman yang dioptimalkan untuk tampilan terkecil, kinerja CPU yang lebih rendah, dan koneksi paling lambat. Dengan desain responsif, semua aset dan fungsionalitas desktop akan tetap dimuat saat halaman dirender di perangkat seluler, yang sering kali menghasilkan performa yang buruk. Menurut Facebook, waktu pemuatan rata-rata artikel berita di ponsel adalah 8 detik.
Sementara beberapa dari kita cukup beruntung untuk memiliki koneksi jaringan 3G atau 4G di ponsel cerdas kita, Anda hanya perlu keluar dari pusat kota agar kecepatan jaringan turun drastis. Dan tentu saja ada "miliar berikutnya" orang dan perangkat yang terhubung dari negara berkembang di mana koneksi jaringan cepat belum tersedia.
Untungnya, segala sesuatunya bergerak ke arah yang benar, dengan semua pemain besar bekerja untuk mempercepat pemuatan konten di perangkat seluler. Facebook meluncurkan Artikel Instan, solusi untuk memuat konten web dengan cepat, meskipun terbatas pada taman bertembok mereka. Apple telah meluncurkan aplikasi Beritanya sendiri. Google meluncurkan AMP (Accelerated Mobile Pages), sebuah inisiatif dengan tujuan yang sama seperti Facebook tetapi dengan pendekatan standar terbuka.
WordPress baru-baru ini mengumumkan bahwa mereka menambahkan dukungan untuk Google's Accelerated Mobile Pages (AMP) ke WordPress.com dan ke situs WordPress.org dalam bentuk plugin gratis.
Jadi mari kita lihat bagaimana Anda dapat menambahkan AMP ke blog atau situs berita WordPress.org Anda dan memanfaatkan teknologi terbaru untuk mempercepat situs web Anda di perangkat seluler.

Apa itu GoogleAMP?

Janji AMP Google adalah membuat halaman Anda dimuat secara instan di perangkat seluler. Ini memperbaiki salah satu masalah terakhir yang tersisa dengan internet seluler. Meskipun semua orang menggunakannya, internet seluler sangat lambat. AMP menyiasatinya dengan membatasi jumlah fitur pada halaman, menghilangkan fitur desain untuk kecepatan. Google telah mengklaim bahwa kecepatan pemuatan AMP 85 persen lebih cepat daripada halaman web biasa.
AMP membuat tampilan seluler khusus untuk situs web Anda. Situs seluler baru ini menyempurnakan konten Anda untuk klien yang didukung seperti penelusuran seluler Google dan Chrome. Tampilan baru ini merupakan tambahan dari situs web reguler dan seluler yang sudah Anda miliki. Di bawah tampilan ini, halaman Anda terlihat seperti halaman web biasa tetapi dengan semua kecuali konten yang dilucuti. Karena itu, Anda perlu memastikan situs WordPress Anda siap untuk itu

Bagaimana cara kerja AMP?

AMP HTML pada dasarnya adalah bagian dari HTML dengan hanya elemen JavaScript tertentu yang diizinkan. Fokusnya adalah mempercepat pemuatan untuk situs-situs berat konten seperti situs berita dan blog. Meskipun sangat membatasi Javascript, ini memungkinkan elemen Analytics dan Periklanan tertentu di halaman Anda, menjadikannya pilihan yang baik untuk penerbit berita.
Untuk membuat tampilan seluler barunya, AMP menggunakan tiga elemen utama:

• AMP HTML – Bagian dari HTML ini menambahkan beberapa tag dan properti khusus dengan banyak batasan yang memungkinkan klien AMP untuk merender konten Anda seperti yang Anda inginkan tanpa mengkhawatirkan kinerja. Plugin menambahkan tag baru ini ke halaman Anda secara otomatis, tetapi Anda dapat menggunakannya di template khusus AMP Anda sendiri jika Anda membutuhkannya.
• AMP JS – Kerangka kerja JavaScript ini dibuat untuk halaman seluler yang mengelola penanganan sumber daya dan pemuatan asinkron yang membuat proses AMP bekerja. Harap diperhatikan, Anda tidak dapat menggunakan JavaScript pihak ketiga mana pun di halaman AMP Anda.
• AMP CDN – AMP menyediakan jaringan pengiriman konten opsional yang dapat menyimpan cache dan mengoptimalkan halaman AMP Anda lebih jauh.

Memasang AMP

Anda perlu menginstal plugin sebelum Anda dapat menggunakan AMP di situs WordPress Anda. Jika Anda menggunakan WordPress.com, ini sudah tersedia untuk Anda.

Plugin Resmi

Meskipun Anda dapat menemukan plugin AMP resmi di toko plugin WordPress, Anda hanya akan menemukan versi terbaru di situs Github proyek tersebut . Dengan demikian, Anda memiliki pilihan untuk dibuat.
Menginstal plugin melalui WordPress adalah yang tercepat. Anda hanya perlu mencari amp-wp di bagian “Tambah Baru” di panel admin Plugin WordPress Anda. Anda kemudian cukup klik install lalu aktifkan untuk mulai menggunakan AMP di website Anda.
Jika Anda memerlukan versi terbaru untuk alasan apa pun, Anda harus menginstal plugin secara manual. Setelah mengunduh paket Github, Anda hanya perlu mengklik "Unggah plugin" saat berada di panel Plugin "Tambah Baru". Temukan saja file zip yang berisi paket, dan biarkan WordPress mengambil semuanya dari sana. Setelah pengunggahan selesai, Anda tinggal mengaktifkan plugin untuk mulai menggunakannya.

PageFrog dan Plugin AMP Lainnya

Plugin resmi datang langsung dari tim proyek AMP Google, menjadikannya versi AMP terbaru. Ini membuat versi /amp/ dari setiap halaman dan postingan yang Anda miliki. Anda hanya perlu menambahkan /amp/ ke akhir URL untuk melihatnya sendiri.
Namun, Anda tidak dapat mengedit halaman AMP ini. Jika Anda membutuhkan sesuatu yang lebih dari yang diberikan plugin dasar, Anda akan memerlukan salah satu plugin AMP lain di luar sana, seperti PageFrog.
PageFrog dibangun di atas plugin AMP inti dengan memungkinkan Anda mengedit beberapa perubahan yang dibuatnya. Bahkan Anda dapat menambahkan beberapa fitur gaya dan tema, serta protokol lain seperti Artikel Instan Facebook. Anda dapat menemukan PageFrog dan beberapa plugin AMP lainnya di toko plugin WordPress.

Mengonfigurasi situs WordPress Anda untuk AMP

Setelah Anda mengaktifkan plugin, Anda selesai. Untuk sebagian besar penginstalan, Anda hanya perlu membuat konten seperti yang biasa Anda lakukan, dan plugin akan mengurus sisanya. Namun, perhatikan, hal-hal seperti kode Google Analytics Anda tidak akan langsung berfungsi di halaman AMP Anda. Baca terus untuk mengetahui cara menambahkan fitur Analytics dan SEO ke halaman AMP baru Anda. .

Menambahkan Google Analytics ke halaman AMP Anda

Jika Anda memerlukan fitur ini di halaman seluler Anda juga, Anda harus menambahkannya secara manual ke template halaman single.php plugin.
Untuk melakukannya, Anda harus mengklik opsi edit di sebelah nama plugin AMP di daftar Plugin Anda. Dari sana, Anda cukup mengklik tautan single.php untuk mulai mengeditnya. Harap dicatat bahwa Anda mungkin harus mengulangi ini setiap kali Anda memperbarui plugin.

Plugin SEO dan AMP

Karena halaman AMP Anda tidak akan menyertakan fitur SEO apa pun, Anda akan memerlukan plugin SEO baru yang kompatibel dengan AMP.
Untungnya, sebagian besar pengembang plugin SEO memiliki atau akan memiliki ekstensi AMP yang dapat Anda gunakan . Anda harus menginstalnya secara terpisah, tetapi Anda membutuhkannya untuk memastikan semua halaman Anda bekerja untuk meningkatkan SEO situs Anda.
Pada artikel ini, hanya tiga Plugin SEO WordPress yang merilis ekstensi atau pembaruan AMP.

• Lem untuk Yoast SEO – Menambahkan dukungan AMP ke plugin Yoast SEO WordPress
• Data Terstruktur Aplikasi Skema – Plugin skema SEO dengan AMP dari schema.org
• WP SEO Structured Data Schema – plugin skema SEO dengan AMP dari Kansas City SEO

Memperbaiki Kesalahan Apa Pun

Seperti halnya penambahan apa pun ke situs web Anda, Anda ingin menguji halaman AMP Anda untuk kesalahan dan inkonsistensi , dan memperbaikinya.
AMP masih berkembang, dan banyak fitur yang mungkin masih memiliki bug. Anda harus memperbaiki kesalahan ini secara manual di file template sebelum membuat halaman AMP menjadi publik. Ingatlah, bahwa Anda mungkin harus mengulang pengeditan Anda setiap kali Anda memperbarui plugin jika ada perubahan.

Beriklan di halaman AMP Anda

HTML AMP tidak mengizinkan JavaScript sehingga iklan tidak dapat langsung disematkan – iklan tersebut hidup di iframe sandbox tanpa akses ke konten artikel utama.
Google merancang AMP untuk memungkinkan beberapa jenis iklan melalui. Anda hanya memerlukan versi plugin iklan yang kompatibel dengan AMP. Anda dapat menemukan daftar lengkap plugin yang kompatibel ini di halaman AMP Github .
Penyedia iklan yang saat ini didukung meliputi:

• A9
• Reaktor Iklan
• AdSense
• Teknologi Iklan
• Klik dua kali

AMP atau Aplikasi Seluler?

Meskipun AMP dapat membantu mempercepat halaman artikel situs Anda dalam beberapa kondisi, AMP tidak akan berfungsi di setiap situasi dan di semua perangkat. Tidak hanya itu, ia juga hadir dengan batasan besar pada jenis analitik (tanpa js!) dan iklan apa yang dapat Anda jalankan di halaman Anda.
AMP dapat menjadi solusi efektif untuk lalu lintas yang berasal dari penelusuran, tetapi bagaimana dengan pembaca Anda yang paling setia?
Bagi mereka, saya yakin sebuah aplikasi masih masuk akal, tergantung pada jenis dan ukuran audiens Anda. Sebuah aplikasi masih dapat memberikan banyak manfaat bahkan AMP atau Artikel Instan gagal memberikan : pengiriman konten dan aktivasi ulang dengan pemberitahuan push, cache konten dan penggunaan offline, kehadiran di toko aplikasi dan, yang lebih penting, layar beranda pengguna.
Jadi, jika Anda mencari platform yang akan membantu Anda mendorong pertumbuhan dari waktu ke waktu, sambil tetap mengontrol konten dan opsi khusus seluler untuk periklanan dan analitik, maka pertimbangkan untuk memublikasikan aplikasi Anda sendiri. Jika Anda menggunakan WordPress di situs berita atau blog Anda, kami mungkin memiliki solusi yang tepat untuk Anda di MobiLoud .