Catatan Editor: Postingan berikut ditulis oleh David Vogelpohl, VP of Web Strategy di WP Engine. WP Engine adalah platform pengalaman digital untuk WordPress.



Dalam dunia pengembangan web, kami sering menggunakan fitur untuk otomatisasi, membaca buku tentang efisiensi project, dan menerapkan berbagai teknik untuk menghadirkan inovasi dengan laju yang semakin cepat. Meskipun kita sering bertanya pada diri sendiri, “Bagaimana kita bisa menjadi pemancing yang lebih baik?” Banyak dari kita yang jarang bertanya pada diri sendiri “Bagaimana kita bisa memperlengkapi penjual dan pembuat konten dengan fitur yang mereka butuhkan untuk memancing sendiri?”.
Artikel ini menceritakan kisah tentang bagaimana dan mengapa WP Engine berinvestasi dalam memanfaatkan AMP untuk membantu developer membuat pengalaman yang berkinerja tinggi, indah, dan kaya fitur yang SANGAT DISUKAI pembuat konten.

Mengapa WP Engine peduli dengan efisiensi desain & pengembangan?

Pada pertengahan tahun 2018, WP Engine membeli Genesis, framework tema untuk WordPress dan plugin Atomic Blocks sebagai bagian dari strategi kami untuk memberikan solusi pengembangan dan desain yang intuitif dan andal. Atomic Blocks adalah plugin WordPress yang mencakup library komponen situs pra-desain yang dapat dikonfigurasi yang disebut “blok” dan pengaturan blok yang disebut “layout” yang memudahkan pembuat situs mendesain dan menerapkan pengalaman baru.
Pengguna Atomic Blocks sekarang bisa memanfaatkan kekuatan pembangunan halaman berbasis komponen sembari menciptakan pengalaman yang 100% tervalidasi AMP.
Ini sering dicapai dengan Genesis dan Atomic Blocks dengan memanfaatkan editor berbasis blok baru di WordPress yang diberi kode “Gutenberg” selama rilisnya ke WordPress #core pada akhir tahun 2018.
Pengguna bisa mendesain blok WordPress dengan berbagai model (Genesis membantu hal ini); menyediakan kontrol desain terkonfigurasi agar sesuai dengan branding, pra-muat blok dengan konten, dan mengintegrasikan blok dengan software atau sistem lain yang dapat diperluas.
Berikut adalah contoh editor blok yang digunakan dengan Atomic Blocks.
Berikut adalah contoh tema StudioPress yang menggunakan pendekatan blok-modular ini, sangat mudah dikonfigurasi oleh pembuat konten, diupdate untuk menggunakan AMP, dan mendapatkan skor luar biasa 95 pada Google Page Speed Insights (naik dari skor 54 pra-AMP). Pengguna Genesis juga bisa membuat tema khusus mereka sendiri. Berikut adalah contoh situs AMP menggunakan tema Genesis yang dibuat khusus. Terlepas dari pilihan tema pra-desain atau khusus, berkat AMP, pelanggan kami bisa membangun situs yang cepat menjadi semakin cepat dibandingkan sebelumnya!

Mengapa WP Engine memutuskan untuk menambahkan dukungan AMP ke Genesis & Atomic Blocks?

Dengan mempertimbangkan keinginan brand tertentu untuk mengadopsi AMP dan fakta bahwa agensi kami dan pelanggan developer merasa bahwa mereka tidak mendapatkan dukungan produk dari kami atau bahkan produk lain di ekosistem WordPress, kami merasa sangat perlu untuk mendukung mereka ketika membangun dengan AMP.
Tentu saja, sesuai dengan misi kami yaitu menyediakan developer dengan fitur yang mempermudah penciptaan pengalaman yang sangat disukai pembuat konten, kami harus melakukannya dengan cara yang tidak hanya mudah bagi developer untuk menciptakan pengalaman itu, tetapi juga untuk melakukannya dengan cara yang memungkinkan pembuat konten tidak perlu terlalu memikirkan kompatibilitas AMP saat membuat halaman landing atau web yang perlu mereka buat.
Pembuat konten SANGAT SUKA menciptakan pengalaman yang kompatibel dengan AMP untuk brand mereka.
Menambahkan fitur baru atau dukungan untuk standar tertentu seperti AMP adalah permintaan yang tidak mudah bagi fitur pengembangan dan desain populer seperti Genesis atau Atomic Block. Terdapat pertimbangan terhadap >600 ribu situs yang menggunakan produk-produk itu dan banyak developer di seluruh dunia yang mengandalkan produk-produk tersebut sebagai bagian dari alur kerja harian mereka.
Seperti Anda semua, kami sangat berhati-hati setiap kali kami mempertimbangkan untuk menambahkan sesuatu yang baru pada produk kami. Ketika berhubungan dengan dukungan AMP, kami memulainya dengan memperhatikan sinyal dari pelanggan tentang seberapa sering mereka menggunakan AMP, apa yang mereka sukai, dan apa yang tidak mereka sukai dari AMP.
Masukan yang kami terima sedikit tipikal dari apa yang diharapkan dari banyak audience developer web sehubungan dengan AMP. Sebagian besar mengatakan tidak pernah membangun situs dengan AMP dan mengklaim bahwa pelanggan downline mereka jarang meminta situs AMP. Artinya, banyak yang mengakui bahwa mereka memang memiliki pelanggan tertentu (khususnya dalam publikasi) yang meminta situs AMP dan bahwa permintaan tersebut sering kali berdasarkan keinginan untuk mendapatkan kinerja dan visibilitas penelusuran/sosial yang lebih baik dalam berbagai platform.
Kami kemudian bertanya, “Untuk pelanggan yang mengejar strategi AMP, fitur atau teknik apa yang Anda gunakan untuk memenuhi permintaan tersebut?” Jawabannya agak mengejutkan. Tanggapan luar biasanya adalah, “Kami tidak memilikinya!”

Bagaimana kami melakukan pendekatan dukungan AMP dalam Genesis & Atomic Blocks

Google dan kontributor lainnya merilis plugin AMP untuk WordPress pada tahun 2019. Plugin ini mengaktifkan banyak kemampuan kunci AMP untuk situs WordPress dan dioptimalkan untuk tema inti WordPress. Tema inti adalah tema yang disertakan dengan WordPress; meskipun demikian, sebagian besar situs WordPress didukung oleh tema khusus yang dibuat oleh developer atau tema premium yang dibuat oleh perusahaan seperti WP Engine.
Tema khusus dan tema premium (dibuat dengan Genesis atau lainnya) mengharuskan developer tema tersebut untuk mengoptimalkan kode mereka untuk memastikan kompatibilitas AMP bahkan ketika menggunakan plugin AMP untuk WordPress. Misalnya, beberapa tema premium WP Engine memasukkan elemen yang tidak kompatibel dengan AMP, sehingga setiap pengguna tema tersebut akan mengalami kegagalan ketika validasi AMP.
Selain itu, plugin yang menggerakkan pengalaman front end seperti plugin Atomic Blocks kami juga harus memastikan kode mereka dioptimalkan untuk memastikan validasi AMP 100%.
Plugin AMP untuk WordPress menangani banyak tugas dalam membuat situs WordPress mendukung AMP; meskipun demikian, beberapa aspek situs mungkin memerlukan pekerjaan tambahan seperti yang digambarkan di atas.
Karena persyaratan ini, kami memulai misi untuk menambahkan kemampuan ke Genesis bagi developer untuk membuat tema khusus dengan validasi AMP 100%, mengupdate tema premium kunci untuk kompatibilitas AMP, dan mengganti elemen Atomic Blocks yang tidak lulus validasi AMP.
Membangun tema AMP khusus dengan Genesis
Dalam rilis Genesis 3.0, kami menambahkan kemampuan yang memungkinkan developer untuk lebih mudah membuat tema khusus yang 100% tervalidasi AMP.
Membuat tema yang 100% tervalidasi AMP dengan Genesis dimulai dengan menginstal plugin AMP untuk WordPress. Tim kontributor pada plugin AMP melakukan tugas yang luar biasa, sehingga developer tema Genesis mendapatkan banyak keuntungan hanya dengan menjalankan plugin ini.
Berikut adalah screenshot dari apa yang dilihat pengguna WordPress saat menggunakan plugin AMP.
Dua keuntungan utama dalam dunia Genesis yang terkait dengan plugin AMP adalah fakta bahwa ia secara otomatis mengubah markup ke HTML AMP dan menangani CSS tree shaking untuk membantu developer tema selalu dalam batas CSS 50KB.
Artinya, Genesis itu sendiri dan tentu saja banyak tema yang dibuat dengan Genesis memiliki atau sudah memiliki dependensi Javascript yang tentu saja akan menyebabkan situs atau halaman tertentu gagal divalidasi. Terkait dengan Genesis itu sendiri (vs. “tema turunan” yang dibangun dengan Genesis), beberapa area kunci dari dependensi JavaScript adalah model sistem menu Genesis (khususnya “Superfish”), JavaScript yang terkait dengan komentar thread, dan skrip yang terkait dengan link lewati.
Di Genesis 3.0 kami mengganti dependensi ini atau menjadikannya opsional / nonaktif ketika berjalan dengan AMP.
Beberapa keuntungan bagi developer Genesis adalah bahwa tema turunan tidak perlu lagi menyertakan skrip responsive-menus.js atau melakukan pekerjaan apa pun untuk memprosesnya. Genesis sekarang menyertakan skrip ini dan menangani semua pekerjaan pemrosesannya, bila Anda menggunakan esponsive menus API yang baru.
Hasilnya adalah sekarang membangun tema yang 100% tervalidasi AMP dengan framework Genesis lebih mudah dilakukan daripada sebelumnya. Dengan menggunakan kemampuan ini, kami bisa dengan mudah mengupdate dua tema turunan premium agar kompatibel dengan AMP dan banyak tema turunan khusus lainnya dalam ekosistem Genesis juga telah diupdate atau dibuat dengan kompatibilitas AMP.
Sejak peluncuran Genesis 3.0, respons komunitas sangat positif dengan banyak developer yang tidak hanya mengadopsi AMP sebagai bagian dari situs yang mereka bangun, tetapi juga berbagi pengetahuan dan pengalaman mereka dengan orang lain seperti yang bisa dilihat dalam postingan sangat bagus ini yang berjudul “Building a Native AMP WordPress Site”.

Pengoptimalan AMP editor blok WordPress dengan Atomic Blocks

Sama seperti tema khusus yang mengharuskan developer untuk mengoptimalkan kodenya untuk AMP, plugin yang mengontrol pengalaman front end juga harus melakukan hal yang sama. Dalam kasus kami, plugin Atomic Blocks memberikan pengalaman yang kaya bagi pembuat situs untuk menggunakan komponen situs yang disebut “blok” untuk menciptakan pengalaman baru terlepas dari tema yang mereka gunakan.
Membuat Atomic Blocks kompatibel dengan AMP sebenarnya merupakan pekerjaan yang mudah karena hanya beberapa elemen dari blok tersebut yang tidak tervalidasi AMP. Bagi saya, ini adalah contoh bagus tentang seberapa banyak fitur pengembangan dan desain bawaan yang bisa langsung kompatibel dengan AMP tanpa memerlukan refactor komplet.
Dalam kasus Atomic Blocks, kami bisa melakukan refactor bagian-bagian blok dan layout yang diaktifkan plugin agar kompatibel dengan AMP. Pekerjaannya sangat ringan, kami bisa mengerjakannya hanya dalam sekali sprint!
Dalam contoh di bawah ini, Anda bisa melihat betapa mudahnya bagi pembuat konten untuk membuat pengalaman AMP yang indah, berkinerja, dan fungsional tanpa menyadari bahwa pengalaman tersebut sudah 100% tervalidasi AMP.

Inilah jenis pengalaman mulus yang memberikan nilai tambah besar bagi tim marketing dan membantu menuntaskan roadmap dan halaman landing yang kompleks dari tugas-tugas yang harus diselesaikan tim developer. Dengan cara ini, brand bisa memanfaatkan kekuatan AMP sembari menciptakan pengalaman baru dalam hitungan jam vs. hari atau minggu.

Masa depan AMP untuk produk pengembangan dan desain WP Engine

Untuk framework tema Genesis, tim engineering kami terus mengikuti evolusi AMP untuk memastikan bahwa pelanggan kami dibekali dengan kemampuan terbaru dalam tema yang mereka bangun dengan Genesis. Kami juga berencana memperluas dukungan AMP di seluruh inventori tema Genesis premium sehingga pelanggan memiliki lebih banyak pilihan ketika memanfaatkan tema premium dan AMP.
Untuk plugin Atomic Blocks (yang juga digunakan dalam tema AMP premium), kami melanjutkan pendekatan 100% validasi AMP sehingga pengguna Atomic Blocks bisa menikmati set fitur lengkap Atomic Blocks dalam konteks AMP.
Meskipun kami menyadari bahwa beberapa pelanggan atau brand downline yang mereka layani mungkin tidak memilih untuk menerapkan strategi yang berfokus pada AMP, penting bagi kami bahwa ketika mereka melakukannya, kami mempersenjatai mereka dengan fitur yang memungkinkan tim developer untuk dapat menciptakan pengalaman yang indah, berkinerja, dan fungsional yang SANGAT DISUKAI pembuat konten.
Ditulis oleh David Vogelpohl, VP of Web Strategy di WP Engine