Cara Mencapai Skor Kinerja Tinggi di Google PageSpeed ​​Insights untuk WooCommerce

Kinerja situs web merupakan aspek penting dari desain web yang sering diabaikan oleh agensi. Jika situs Anda merespons dan mengirimkan konten dengan sangat cepat, Anda akan menerima banyak manfaat – termasuk peningkatan konversi dan peringkat yang lebih baik di Google.

Di Herdl, kami sepenuhnya menghargai manfaat yang dapat ditawarkan oleh kinerja tinggi di berbagai saluran pemasaran dan menganggap pengoptimalan kinerja sebagai bagian integral dari proses kami.

Mengapa Kecepatan Situs Web Penting?

Sebagai situs eCommerce, tingkat konversi adalah bagian penting dari data yang harus menjadi inti dari proses pelaporan Anda. Kecepatan situs memiliki efek mendasar pada tingkat konversi situs web, dan penelitian yang disajikan oleh Google menyoroti manfaat besar dari situs web yang cepat. Dalam laporan mereka, mudah untuk menemukan korelasi kuat antara kecepatan situs web dan tingkat konversi.

Google juga baru-baru ini menegaskan kembali pentingnya kecepatan situs web sebagai faktor peringkat: Sebelumnya pada tahun 2018, mereka mengumumkan Pembaruan Kecepatan sebagai bagian dari transisi mereka yang lebih luas ke indeks yang mengutamakan seluler. Pembaruan Kecepatan diluncurkan pada Juli 2018 dan dilaporkan hanya memengaruhi sebagian kecil situs yang bertanggung jawab atas pengalaman situs web paling lambat.

Sebagai situs eCommerce, tingkat konversi adalah bagian penting dari data yang harus menjadi inti dari proses pelaporan Anda.

Namun demikian, kecepatan situs web telah menjadi bagian dari algoritma mesin pencari Google sejak 2010 ketika Google PageSpeed ​​Insights pertama kali dirilis. Selama peluncuran, kecepatan situs secara resmi disebut sebagai salah satu sinyal peringkat Google, dan sejak itu diakui sebagai faktor peringkat SEO integral.

Pentingnya Perangkat Keras dan Pengaturan

Kinerja dimulai dengan perangkat keras, jadi jika server atau jaringan Anda terbatas, kinerja pasti akan menurun.

Platform hosting kami dirancang, dibangun, dan dikelola oleh pakar infrastruktur, John Arundel, dari Bitfield Consulting, dan menyediakan hosting WordPress berkinerja tinggi dengan pemulihan bencana tingkat pusat data. Kami mendistribusikan situs di seluruh Digital Ocean dan Linode, yang keduanya menyediakan server pribadi virtual yang andal dan dapat diskalakan yang berjalan pada perangkat keras cepat dengan drive SSD dan jaringan 40Gbit.

Untuk kinerja dan keamanan, kami selalu bekerja pada model satu situs per server dengan firewall per server . Hosting bersama sebaiknya dihindari untuk situs bisnis, dan harus dihindari untuk eCommerce. Dalam hal hosting dan keamanan, jadilah paranoid – “jangan ambil risiko” adalah pola pikir terbaik untuk diadopsi.

Hosting bersama sebaiknya dihindari untuk situs bisnis dan harus dihindari untuk eCommerce.

Server Herdl menjalankan tumpukan LEMP (Ubuntu LTS, Nginx, MySQL, PHP) dengan manajemen konfigurasi oleh Wayang. Wayang memungkinkan kami untuk mengotomatiskan pengaturan server, instalasi aplikasi, dan manajemen sistem kami, menghilangkan kesalahan manusia selama tugas berulang ini. Ini juga digunakan untuk mengotomatiskan pencadangan server harian, menyimpan basis data lengkap dan pencadangan situs tambahan ke Amazon S3. Dengan menyimpan cadangan di luar lokasi ke S3, kami memastikan bahwa cadangan tersebut dapat diakses bahkan jika pusat data mati.

Untuk arsitektur server tunggal, hambatan kinerja sering kali terjadi pada database, yang dapat menghabiskan banyak memori – pastikan Anda memiliki banyak RAM serta vCPU. Kinerja database dapat ditingkatkan lebih lanjut dengan menggunakan Redis untuk menyimpan hasil kueri.

Konfigurasi standar yang disertakan dengan MySQL ( my.cnf ) akan berfungsi, tetapi Anda mungkin ingin mengubahnya sedikit berdasarkan spesifikasi server Anda. Ada banyak artikel bagus tentang mengoptimalkan MySQL untuk WordPress yang menyertakan saran bermanfaat dan contoh file konfigurasi, tetapi opsi terbaik adalah menyesuaikannya dengan penggunaan situs Anda yang sebenarnya – untuk ini, kami menggunakan skrip Perl yang luar biasa ini.

Pastikan untuk selalu menguji perubahan konfigurasi apa pun di situs pementasan Anda terlebih dahulu, dan tolok ukur hasil Anda menggunakan mysqlslap (yang dikirimkan bersama MySQL). Sebaiknya aktifkan log kueri lambat MySQL di server pementasan Anda juga, karena ini dapat menyoroti kueri bermasalah yang harus diselidiki (dan juga dapat berguna untuk menyediakan kueri uji untuk pembandingan Anda).

Jika Anda menerbitkan konten secara teratur, database WordPress bisa menjadi sangat membengkak karena semua halaman dan revisi posting yang disimpan secara otomatis. Secara default, tidak ada batasan berapa banyak revisi yang disimpan WordPress – kami membatasi jumlah ini menjadi lima dengan menambahkan baris berikut ke file konfigurasi WordPress ( wp-config.php ):

define( 'WP_POST_REVISIONS', 5 );

Terakhir, ada baiknya juga mengoptimalkan database Anda dari waktu ke waktu, tetapi pastikan untuk mencadangkannya terlebih dahulu. WP Rocket, plugin caching WordPress, menyediakan semua alat yang Anda butuhkan untuk ini. Saya akan berbicara lebih banyak tentang WP Rocket nanti.

Alat pengembangan

Untuk pengembangan WordPress, kami mengandalkan "rasa" khusus kami dari WordPress menggunakan tema pemula Sage (dan alur kerja) oleh tim Roots. Ini termasuk Gulp untuk tugas pembuatan otomatis lanjutan, Komposer untuk mengontrol dependensi, termasuk penggunaan plugin WordPress pihak ketiga (dan pembuatan versi), dan npm untuk manajemen paket.

Seperti yang dapat Anda bayangkan, alur kerja kami terus berkembang dan kami selalu mencari alat dan layanan baru untuk dimasukkan ke dalam proses kami. Tim kami berusaha untuk menjaga kode kami KERING dan mengikuti prinsip-prinsip BEM semaksimal mungkin. Cara kami menyusun file tema diatur untuk memfasilitasi ini dengan memecah fungsionalitas tema, templat, dan aset.

Untuk kontrol versi, kami menggunakan Git melalui Bitbucket, mengikuti alur kerja NVIE git. Kode dibuat dan diterapkan secara otomatis melalui DeployHQ, yang mudah disiapkan dan menyediakan semua opsi yang diperlukan untuk pengembangan WordPress. Plus, dukungan mereka adalah kelas satu.

Setelah aplikasi Anda aktif dan berjalan, saatnya untuk mengukur dan membandingkan statistik vital sehingga Anda dapat menyempurnakan dan mengoptimalkan kinerja. Untuk ini, kami menggunakan kombinasi Alat Pingdom, GT Metrix dan Google PageSpeed ​​Insights. Ada banyak metrik yang harus dilihat dalam laporan yang dihasilkan layanan ini – pada akhirnya, Waktu Muat dan Ukuran Halaman adalah yang menjadi fokus, dengan tujuan untuk mendapatkan keduanya serendah mungkin. Ini memastikan bahwa semua pengguna di semua perangkat (dan koneksi jaringan) memiliki pengalaman terbaik.

Ketika datang ke pengujian lintas-browser dan perangkat, kami memilih LambdaTest. Ini mudah digunakan, menawarkan rangkaian pengujian yang komprehensif, dan memiliki rencana yang sesuai dengan semua anggaran. Itu juga terintegrasi dengan Trello dan Slack, membentuk bagian penting dari alur kerja kami.

WP Rocket adalah plugin caching WordPress pilihan kami, dan akan secara dramatis meningkatkan kinerja di situs mana pun. Sangat mudah untuk mengonfigurasi dan menyediakan kontrol yang sangat terperinci untuk pengguna yang lebih mahir, artinya Anda dapat menyempurnakan konfigurasi cache Anda. WP Rocket terintegrasi dengan baik dengan CDN, dan model lisensinya sangat cocok untuk agensi.

Bergantung pada anggaran dan situs klien, aset statis dilayani langsung oleh server web, dari CDN (seperti Beluga dan BunnyCDN), atau melalui layanan pengoptimalan gambar waktu nyata (Piio dan Imagekit). Untuk kinerja seluler, Piio (diucapkan pie-o) adalah pilihan yang sangat baik karena mendeteksi, mengoptimalkan, dan mengubah ukuran gambar dengan cepat sebelum memuatnya lambat – ini berarti bahwa setiap perangkat menerima gambar yang dioptimalkan dan diubah ukurannya dengan benar (tanpa penskalaan di browser).

Jika kami tidak menggunakan layanan pengoptimalan gambar, maka Short Pixel adalah plugin yang kami rekomendasikan. Ini memberikan pengoptimalan gambar yang sangat baik menggunakan kompresi lossy, glossy, atau lossless dan juga dapat mengonversi gambar ke format WebP. Itu juga dapat mengoptimalkan seluruh perpustakaan media Anda secara massal, dan harganya juga sangat kompetitif.

Keamanan adalah komponen penting dari kinerja situs web. Jika situs Anda rusak, terinfeksi malware, atau offline karena serangan, maka kinerjanya tidak maksimal. Menjadi sangat populer membuat WordPress menjadi target yang jelas bagi peretas, jadi keamanan tingkat aplikasi sangat penting. Kami menggunakan dan sangat merekomendasikan WordFence yang merupakan plugin keamanan WordPress terbaik yang tersedia. Untuk situs eCommerce, pilih Lisensi Pro berbayar – data pelanggan bukanlah sesuatu yang harus Anda ambil risiko.

Ketersediaan adalah kuncinya juga. Tidak ada gunanya memiliki situs tercepat di planet ini jika saat ini sedang down dan Anda tidak mengetahuinya. Untuk pemantauan tingkat server, kami menggunakan Icinga untuk mengawasi semua layanan yang berjalan di setiap server. Kami juga menggunakan Robot Waktu Aktif untuk menambah ketenangan pikiran – bersama-sama, keduanya memastikan kami selalu segera diberitahu tentang masalah apa pun.

Mabl, Sentry, dan Fluxguard menangani pemantauan aplikasi, memberi tahu kami tentang masalah level aplikasi apa pun. Mereka juga dapat mendeteksi perubahan pada tingkat konten – indikator yang baik dari masalah tingkat kode yang mendasari setelah pembaruan. Mabl juga melakukan banyak hal keren lainnya, termasuk pengujian otomatis. Ini adalah salah satu layanan favorit kami, dan pasti salah satu yang harus dicoba.

Saat lalu lintas dan beban meningkat melampaui kapasitas satu server, arsitektur multi-server ikut bermain. Pada titik ini, kami sangat menyarankan untuk menyewa konsultan operasi pengembang atau anggota tim Anda yang berdedikasi.

Jadikan Kinerja Bagian dari Proses Desain dan Pengembangan Anda

Kinerja adalah pertimbangan selama proses kami, mulai dari perencanaan hingga desain dan pengembangan. Ada dialog berkelanjutan antara tim desain kami dan pengembang mengenai cara terbaik untuk mendekati proyek – atau bahkan elemen tertentu – untuk menciptakan pengalaman online terbaik.

Selama tahap perencanaan, kami memiliki gagasan yang kuat tentang fungsionalitas apa yang akan diperlukan di situs. Menggunakan WooCommerce adalah contoh yang sangat baik untuk hal ini, karena persyaratan hosting berbeda ketika kami menyediakan elemen eCommerce. Klien menyadari hal ini sejak awal dan diberikan serangkaian opsi hosting yang berbeda.

Pemikiran yang sama dibawa ke fase desain, di mana kita akan membuat gambar rangka, konsep, dan bahkan animasi, untuk mewakili halaman dan elemen di situs. Di sinilah sebagian besar efek front-end disusun, dan tim kami bekerja sama untuk merancang sesuatu yang memberikan pengalaman luar biasa di mana kinerja memainkan bagian integral.

Kami merasa penting untuk mempertimbangkan semua perangkat sebagai bagian dari proses ini, dengan mempertimbangkan perbedaan pengalaman seluler dan desktop.

Kami mengambil pendekatan berulang untuk pengujian di seluruh pengembangan, dengan elemen terus-menerus di-tweak. Kami mengikuti proses degradasi yang anggun, dimulai dengan konsep ideal kami dan menghapus lapisan dengan tepat untuk masing-masing perangkat dan browser. Selain itu, kami akan menyisihkan waktu khusus untuk pengoptimalan kinerja, memperkenalkan caching dan pengoptimalan file, serta perubahan level kode. Selama langkah ini, kami akan menguji dan menguji ulang elemen di beberapa perangkat hingga kami puas dengan performa terbaiknya.

Berfokus pada kinerja di seluruh tahapan pekerjaan kami telah membantu memastikan bahwa situs yang kami berikan diterima dengan baik selama peluncuran, dan telah menghasilkan banyak penghargaan bagi kami. Ini termasuk sejumlah penghargaan khusus pengembangan, seperti Penghargaan Pengembang Awwwards, Penghargaan Keunggulan Seluler, dan Situs Seluler Minggu Ini (antara lain).

Tingkatkan Kecepatan dan Keamanan Situs WooCommerce Anda

Kami berharap, dengan membagikan beberapa latar belakang tentang kinerja situs web dan detail seputar penyiapan dan proses kami, kami dapat membantu manajer WooCommerce meningkatkan kecepatan dan keamanan situs mereka. Untuk menjalankan situs web eCommerce secara efektif, kinerja harus menjadi prioritas utama, dan kami merasa itu hanya akan menjadi lebih penting dengan prevalensi perangkat seluler.

Jika Anda memiliki pertanyaan atau komentar tentang pengaturan kami, tinggalkan komentar atau hubungi kami.