Teman-teman kami di WP Engine baru-baru ini meluncurkan beranda baru yang indah yang dibuat dengan Beaver Builder. Kami membagikan tautan ke halaman tersebut di Grup Facebook Beaver Builders dan beberapa orang mencatat bahwa waktu buka keseluruhan halaman tersebut cukup tinggi. Teman baik kami dan pengembang WordPress yang luar biasa, Jon Brown, datang membantu dengan penjelasan yang bagus.

Percakapan Facebook

Izinkan saya memparafrasekan percakapan di sini dengan sangat cepat:

Beaver Builder yang Bermasalah: Saya melakukan tes pemuatan halaman dengan alat pengujian XYZ dan butuh waktu hampir 10 detik untuk memuat!

Jon: Kecepatan dan kinerja adalah pilihan desain dan sangat penting untuk konversi penjualan, tetapi itu tidak berarti bahwa hal tersebut tidak sebanding dengan alat lain yang LEBIH berharga.

Saya sering melihat orang-orang melihat nilai huruf dan total waktu muat tanpa memahami maksudnya. Itu akan menyesatkan Anda kecuali Anda melihat situs yang sangat sederhana…

Nilai alat pengujian tersebut sangat kasar dan mengabaikan banyak kenyataan praktis. Mereka akan mengatakan untuk menghindari pengalihan jika itu untuk iklan, skrip pelacakan, dan hal-hal lain yang berfungsi seperti itu. Mereka sering mengabaikan HTTP/2 dan merekomendasikan pengurangan permintaan dan menggabungkan aset yang tidak penting dan bahkan dapat merugikan… Mereka tidak fokus pada indeks kecepatan dan rendering di paro atas…

Pemuatan halaman yang sebenarnya adalah <1,5 detik

Mari Menggali Lebih Dalam

Saya bertanya kepada Jon apakah dia mau mengajukan beberapa pertanyaan lagi mengenai masalah pertunjukan dan dia dengan senang hati menyetujuinya. Ini adalah pertanyaan saya (Robby) dengan jawaban Jon.

Oh, apakah saya sudah menyebutkan bahwa Jon menjalankan toko pengembangan khusus bernama 9seeds sehingga dia siap disewa untuk membantu Anda menyempurnakan kinerja situs WordPress Anda!

1. Anda menyebutkan “air terjun”. Bisakah Anda menjelaskan lebih banyak tentang apa itu air terjun?

Ada banyak alat di luar sana untuk mengevaluasi kinerja situs web. Banyak di antaranya yang memberikan laporan yang menyertakan nilai huruf yang mudah dipahami. Nilai huruf tersebut adalah alat yang cukup tumpul, dan meskipun bagus jika Anda mendapatkan semua nilai A, nilai tersebut tidak terlalu mendalam, apalagi membantu, jika Anda tidak melihat nilai A secara langsung. Satu-satunya tingkatan huruf yang menurut saya berguna adalah untuk kompresi gambar, yang merupakan perbaikan mudah, jalankan gambar Anda melalui pengoptimal.

Terlalu sering saya melihat pengembang awam dan pemula dibutakan oleh huruf-hurufnya. Ada banyak faktor yang mempengaruhi kinerja web frontend dan kita perlu melihat “air terjun” yang hanya berupa grafik yang menunjukkan semua permintaan HTTP, kapan dimulai, dan kapan selesai. Saya menggunakan WebPageTest.org untuk menghasilkan ini.

"Air terjun" adalah tempat Anda "melihat" aset tertentu yang membutuhkan waktu terlalu lama untuk dimuat dan/atau menghalangi pemuatan hal lain.

Terakhir, ketahuilah bahwa nilai A yang lurus mungkin memerlukan pilihan desain (seperti menghapus bilah geser) dan menghilangkan aset pihak ketiga (seperti Google Analytics, HotJar, dll) yang lebih berharga bagi pemilik situs daripada mendapatkan nilai A. Tidak semua situs dapat dibuat menjadi A. mendapatkan nilai A tanpa pengorbanan yang menyakitkan.

2. Anda merekomendasikan WebPageTest sebagai alat pengujian pilihan Anda. Mengapa Anda lebih menyukainya dan apa bedanya dengan alat seperti Pingdom, GTmetrix (dan/atau, Kecepatan Laman Google?)?

Secara pribadi, saya belum pernah menemukan sesuatu yang lebih baik dan lebih fleksibel dalam melakukan hal ini selain WebPageTest.org. Namun, saya juga pernah menggunakan GTMetrix, Pingdom, Google Page Speed, dan lainnya dan semuanya baik-baik saja. Beberapa yang baru seperti Lighthouse sangat keren untuk aplikasi web progresif (bukan 99% situs WordPress). Saya tentu saja tidak menyuruh orang untuk berpindah alat, gunakan alat yang Anda ketahui dan pahami. Jika Anda tidak mengetahui alat apa pun, WPT adalah alat gratis yang bagus untuk dipelajari. Melampaui nilai huruf tersebut dan mulailah memahami apa yang menyebabkan nilai huruf tersebut.

3. Terkait dengan “pengurangan permintaan dan penggabungan aset,” apakah ini bukan lagi praktik terbaik? Mengapa?

Dulu ketika sebagian besar situs menggunakan HTTP, bukan HTTPS, dan semua server web menggunakan protokol HTTP/1.1, server web hanya dapat mengirim begitu banyak aset secara paralel. Setiap aset (gambar, skrip, stylesheet) dikirim secara terpisah dan masing-masing memiliki overhead sendiri yang memperlambat segalanya. Menggabungkan segala sesuatu yang mungkin dilakukan akan mengurangi jumlah permintaan HTTP dan memberikan manfaat kinerja yang besar.

Dalam beberapa tahun terakhir, ada dorongan besar terhadap HTTPS di mana-mana, dan server web mulai mendukung protokol HTTP/2 yang baru. HTTP/2 memiliki manfaat besar seperti pra-pengambilan dan pramuat, tetapi juga dapat mengirim semua aset kecil tersebut secara paralel, sehingga tidak perlu menggabungkannya. Faktanya, lebih baik tidak melakukan hal ini sehingga setiap aset kecil dapat di-cache secara terpisah.

Penting untuk diingat bahwa ini hanya berlaku jika server web Anda mendukung HTTP/2 dan itu hanya mungkin jika situs Anda HTTPS.

Meskipun demikian, semua situs yang kami kerjakan saat ini adalah HTTPS dan dijalankan pada server berkemampuan HTTP/2, jadi pada titik ini saya bahkan tidak berpikir untuk menggabungkan aset lagi, dan tentu saja saya tidak akan melewatkannya!

4. Apakah ada “mitos” lain atau rekomendasi kinerja usang yang sebaiknya Anda tolak?

Hal terbesarnya adalah setiap situs bisa mendapatkan nilai A tanpa membuat konsesi yang menyakitkan seperti perubahan desain atau menghilangkan aset pihak ketiga yang tidak Anda kendalikan. Namun, tidak apa-apa karena Anda harus mulai melihat sesuatu yang disebut Indeks Kecepatan! WPT mempunyai tulisan yang bagus mengenai hal ini, namun pada dasarnya mempertimbangkan kapan “paro atas” dianggap terisi penuh oleh pengguna. Ini tentang kecepatan pengalaman pengguna, bukan halaman yang benar-benar lengkap. Ini adalah salah satu hal tentang desain halaman depan WP Engine yang baru, indeks kecepatannya luar biasa. Itu adalah skrip yang ditangguhkan yang membutuhkan waktu lama untuk dimuat dan diselesaikan.

5. Apakah Anda memiliki alat, tip, atau trik kinerja lain yang dapat Anda rekomendasikan kepada seseorang?

Alat yang saya andalkan selama bertahun-tahun:

• WebPageTest.org – Favorit saya!
• ImageOptim – aplikasi desktop untuk mengompresi JPG/PNG
• ImageAlpha – aplikasi desktop untuk mengompresi PNG (kebanyakan dengan mengurangi jumlah warna)
• CloudFlare – gratis sebagai CDN global besar dan WAF dasar. Ditambah fitur pro berbayar yang mengesankan seperti pengoptimalan gambar saat itu juga, pengoptimalan rute, dan banyak lagi.

Plugin:

• WP Rocket – Bahkan di WP Engine, kami menggunakan WP Rocket, itu hanya berfungsi.
• Imagify.io – Pengoptimalan gambar berbasis WordPress/Cloud.
• BeaverBuilder – Saya tidak dibayar untuk mengatakan ini! Kami dipanggil untuk melakukan audit kinerja di banyak situs dan sering kali melihat masalah besar frontend dan backend dengan pembuat halaman populer lainnya. Saya tidak akan menyebutkan namanya, tetapi tidak dengan Beaver Builder, itulah sebabnya kami menggunakannya di situs kami sendiri sebagai Sehat!

Sekali lagi terima kasih, Jon, karena telah meluangkan waktu untuk memandu kami melalui pendekatan kinerja yang lebih modern. Saya ingin memberikan satu konektor terakhir ke agensi Jon, 9seeds. Jika Anda mencari bantuan dengan segala jenis pengembangan WordPress khusus, hubungi mereka!

Tentang Jon Brown

Pengembara. Pengembang WordPress. Fotografer. Hati Kehidupan.