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.
VIDEO
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
thanks for this great article, its really help me hehehe
ReplyDeletelocation-montagne-la-ruchere.com
Ilmu Judi Online
Ular Kita
Thanks a lot for your help it is really going to be really helpfup for my projects like https://casinority.com/za/. Good luck!
ReplyDeletejasa backlink terbaik, berkualitas dan paling murah se Indonesia.
ReplyDeleteIt's a great article that help to work in a better way on site. The detailed article is really helpful. I got some keypoints to learn here which i will surely execute where i could. Please do share the analytics betterment ideas as well.
ReplyDeleteThanks from Rezeem
jual blog zombie high DA PA berkualitas spam score 1%
ReplyDeleteit is very helpful article. thanks a lot.
ReplyDeleteDealsma
coupons
codes
deals
offers
Very good website. You have here but I was curious about if you knew of any forums that cover the same topics discussed here. I'd really love to be a part of online community where I can get advice from other experienced individuals that share the same interest. If you have any recommendations, please let me know.
DeleteNow in 2020 we have a more impact articel about World conspiration, world financial, and some articel about world health at here :
ReplyDeleteVia4D
Via4D Slot
via4d slot Online
Via4d togel
via4d slot
via4d Togel Online
Thanks For Readsin Some of my articel here.
ReplyDeleteerkek siken strapon kadın videosu olgun porno göt siktiren adamlar, erkek sikme videosu izle gerçek
CRYPTOROBOTICS MASTER FRANCHISE
ReplyDeleteWe invite companies from all over the world to become our exclusive franchisee partners and offer our terminal to users in their country.
Really helpful article to work on mobile website pages.
ReplyDeleteThanks from CouponKudos
This comment has been removed by the author.
ReplyDeleteReally helpful article. Peter England coupon code
ReplyDeleteReally helpful article. Couponpin.in
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks for The Article.Informative!. Try Mufti Coupons
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteWorthy writeup for a Dev Claimea
ReplyDeleteFinding ways to incorporate purpose into your daily life can lead to a more fulfilling and meaningful existence. Nexus Slot
ReplyDeleteThis could be through simple acts of kindness, pursuing a hobby that brings you joy, or volunteering for a cause close to your heart.
ReplyDeleteTokyo77
Take time to reflect on how you can make a positive impact in both small and significant ways. idn play
ReplyDeleteEngage in activities that resonate with your sense of purpose, whether it's connecting with loved ones, working towards personal growth, or contributing to something larger than yourself.
ReplyDeleteRoulette Online
By consciously infusing each day with purpose-driven choices and actions, you create a profound shift towards living authentically and meaningfully. judi bola
ReplyDeleteIn the vast tapestry of life, there are individuals who have navigated their way to discovering their purpose. Judi Roulette Online
ReplyDeleteTake Sarah, a once-burnt-out corporate executive who found fulfillment in volunteering at animal shelters. Tokyo77
ReplyDeleteThrough sharing his own journey with anxiety and depression, he has become a beacon of hope for others facing similar challenges.
ReplyDeleteslot gacor hari ini server luar
Each journey is unique, but they all share one common thread – the courage to follow one's heart and unlock the power of purpose.
ReplyDeleteslot deposit 1000 qris
Conclusion: Embracing Your Journey towards a Meaning
ReplyDeleteZeus Slot Login
As we navigate through the twists and turns of life, embracing our journey towards a meaningful existence becomes paramount. slot pulsa
ReplyDeleteEach step we take, each decision we make, contributes to the tapestry of our purpose. bonus new member 100
ReplyDeleteBy living intentionally and aligning our actions with our values, we create a sense of purpose that fuels us forward. Garansi Kekalahan 100
ReplyDeleteEmbracing this journey means acknowledging both the challenges and triumphs as opportunities for personal development. Sbobet
ReplyDeleteThank you very much for this helpful article.
ReplyDeletehttps://srhblog.com/
Visit us marriage biodata maker online at to explore our Invitation Templates. Let's enhance your online presence and create memorable moments together!
ReplyDeleteI've been using AMP for a while now and I'm really impressed with how it can improve the speed and performance of my WordPress site. My users are definitely noticing the difference, and I've seen a significant increase in engagement as a result.
ReplyDeleteI'm also a big fan of the Noon discount code. It's a great way to save money on AMP plugins and themes. I highly recommend checking it out if you're looking for ways to improve your WordPress site. https://ae.paylesser.com/noon-coupon-codes.html