Bagaimana Saya Memukul 100 Google PageSpeed ​​Mobile Skor di WooCommerce dengan WP Rocket

Apakah Anda bertujuan untuk mendapatkan 100 yang sempurna di Google's Pagespeed Insights untuk seluler dengan toko WooCommerce Anda?

Dalam artikel ini, saya akan menunjukkan dengan tepat bagaimana kami mencapainya dengan femme-fatale.gr, sebuah e-shop kecantikan yang semula menjalankan Magento. Pada saat itu, beban halaman seluler memakan waktu antara 5 dan 15 detik, dan situs tersebut mengalami pendarahan, meskipun katalog 35.000-produk dengan 500 kategori produk dan 450 atribut produk.

Saya Dimitris Vayenas, pendiri Oxford Metadata. Selama tiga dekade terakhir, saya telah terobsesi dengan setiap milidetik kinerja web. Pada awal 2022, teman saya Nikos Orfanos meminta saya untuk membantu toko online -nya, dan kami mulai bekerja.

Setelah bermigrasi ke WooCommerce dan berfokus sepenuhnya pada kecepatan - menggunakan roket WP sebagai senjata rahasia kami - kami menghancurkan skor Mobile Pagespeed dengan skor yang konsisten antara skor 99 dan 100/100. Lebih penting lagi, situs tersebut beralih dari stagnan ke mesin pendapatan.

Terus membaca dan Anda akan belajar bagaimana kami berhasil mendapatkan hasil seperti itu dan bagaimana WP Rocket membantu kami mencapai skor 95+, ditambah tweak terakhir yang mendorong kami ke 100 yang sempurna. Yang lebih penting, Anda akan mengetahui dampak bisnis yang mengikuti setelah situs mulai memuat hanya dalam 300 milidetik.

Mengapa fokus pada kinerja, terutama di ponsel

Di femme -fatale.gr, lebih dari 90% pembelian terjadi di ponsel. Itu membuat kinerja seluler prioritas utama kami sejak hari pertama.

Perangkat seluler adalah tes stres utama untuk situs web mana pun. CPU, memori, dan koneksi yang tidak stabil dapat membuat halaman paling ramping memuat hingga 10 kali lebih lambat dari pada desktop. Itu sebabnya setiap optimasi penting.

Kecepatan berarti efisiensi. Kode pembersih, aset yang lebih kecil, dan dom yang lebih ramping diterjemahkan menjadi pengalaman yang lebih halus untuk setiap pengunjung, terutama di ponsel.

Seperti yang ingin saya katakan: "Jika pengalaman seluler Anda tidak instan, Anda kehilangan uang nyata dengan setiap milidetik tambahan".

Titik balik: Bermigrasi dari Magento ke WooCommerce

Pada bulan Desember 2021, Nikos menjangkau dengan tantangan yang jelas. “Toko saya memuncak selama penguncian pada € 0,81 per sesi. Kemudian penjualan turun kembali menjadi € 0,15 per sesi. Bisakah kita kembali ke tertinggi kuncian?"

Kami tahu langkah pertama adalah mengubah platform.

Pertama, kami memilih WooCommerce untuk tumpukannya yang gesit dan modern. Ini menawarkan ekosistem plugin dan pencipta tema yang mencakup setiap fungsi yang dapat dibayangkan, bersama dengan komunitas terbesar insinyur web yang berkinerja.

Kami ditayangkan pada bulan Maret 2022 tanpa mengubah data produk atau meningkatkan pengeluaran pemasaran. Satu -satunya perbedaan adalah kecepatan. Kami memotong muatan halaman dari 5 hingga 10 detik menjadi hanya 1 hingga 2 detik.

Ini adalah tangkapan layar GTMetrix yang menunjukkan hasil waktu pemuatan sebelum migrasi dari Magento: 5,8 detik untuk beranda dan 7,9 detik untuk kategori, ditangkap saat kami masih mengembangkan situs web baru.

Di sisi lain, ini adalah kinerja saat ini, dengan semua vital web inti berwarna hijau:

Apa nilai sebenarnya dari kecepatan untuk wooCommerce?

Dampak bisnis pada kinerja tidak mungkin diabaikan, dan angka -angka membuatnya jelas.

Sebelum migrasi, femme -fatale.gr telah terjebak dalam kebiasaan kinerja. Di Magento, omset bulanan berkisar dari € 7.000 hingga € 10.000 dengan sekitar 40.000 sesi, rata -rata hanya € 0,15 hingga € 0,20 per sesi. Bahkan selama puncak kuncian pada tahun 2020, ketika lalu lintas melonjak ke 62.500 sesi, kinerja terbaik mencapai € 0,81 per sesi.

Pada Februari 2022, tepat sebelum kami bermigrasi ke WooCommerce, situs tersebut telah meningkat sedikit menjadi € 0,29 per sesi, tetapi masih jauh dari potensinya.

Dampak kinerja yang lebih cepat segera. Pada bulan Maret 2022, bulan penuh pertama setelah migrasi, pendapatan per sesi berlipat ganda menjadi € 0,58, meskipun ada penurunan sementara dalam sesi sementara bot menghangatkan cache.

Keuntungan tidak berhenti di situ. Pada Desember 2023, kami mencocokkan puncak kuncian € 0,81 per sesi. Hari ini, jumlah itu telah naik lebih tinggi: situs web sekarang menghasilkan € 1,11 per sesi dengan 40.000 kunjungan bulanan.

Nikos, pemilik femme -fatale.gr, yang terbaik:

Dengan mencocokkan dan sekarang melebihi puncak Covid kami, kami membuktikan kecepatan adalah tuas tunggal terbesar di bisnis kami.

Yayasan Kinerja yang dibutuhkan setiap situs WooCommerce

Sebelum WP Rocket dapat memberikan potensi kinerja penuhnya, fondasi yang solid perlu ada. Keputusan awal ini memiliki dampak besar pada hasil kami, dan ini juga yang sangat saya rekomendasikan kepada siapa pun yang menjalankan toko WooCommerce:

1. Pilih tema pertama kinerja: Kami menguji lusinan tema sebelum memilih opsi terbaik. Botiga (berbasis Gutenberg) oleh Athemes dan Ray Theme (berbasis Elementor) keduanya mencetak 90+ dalam demo vendor. Ada di bawah 70? Kami menghindarinya.

2. Pilih host yang benar -benar cepat: kami menggunakan Cloudways , didukung oleh Linode, Vultr, dan DigitalOcean di seluruh wilayah utama Eropa seperti London, Frankfurt, Amsterdam, Milan, dan Stockholm. Ini memberi kita satu klik PHP dan peningkatan basis data, varnish dan redis bawaan, ditambah deteksi perangkat seluler yang mulus. Itu memastikan panggilan API yang tidak terkena selalu mencapai konten yang dioptimalkan. Kami memiliki nol downtime dalam tiga tahun, dan tim pendukung mereka luar biasa.
   
   Dalam e -commerce, kedekatan dengan pelanggan Anda tidak dapat dinegosiasikan: setiap permintaan produk, pembaruan keranjang, dan pemeriksaan inventaris menyentuh asal Anda. Dengan pembeli di Athena atau Kepulauan Yunani, dan Cloudways tidak memiliki simpul lokal, kita harus menggunakan Fastpath . Ini mengintip langsung dengan semua operator seluler Yunani utama dan cloudflare, memberikan TTFBS sub -50 MS dan pengalaman yang benar -benar lokal.

3. Bermitra dengan vendor yang mendukung: Kami memilih vendor yang menawarkan dukungan yang andal dan cepat untuk menjawab pertanyaan dan memecahkan masalah di sisi Anda, dari Athemes dan Fibosearch hingga Welaunch , Pixel situs Anda , bentuk gravitasi , AIOSEO , dan WP Rocket sendiri.

4. Optimalkan konten Anda: Kami mengonversi semua gambar ke Webp dan mengaturnya menjadi folder berbasis tanggal, memastikan setiap folder berisi kurang dari 10.000 file. Untuk font, kami menjadi file woff2 yang di-host sendiri dan mengganti mereka untuk memasukkan hanya karakter yang dibutuhkan audiens kami. Itu mengurangi ukuran file font sebesar 70 hingga 80 persen. Melayani mereka secara lokal dan preloading lebih awal membantu menghilangkan pencarian eksternal dan menghindari pergeseran tata letak.

5. Gunakan Plugin Bedah Memuat dan Pertahankan Kebersihan Basis Data: Kami menggunakan Plugin Organizer dan manual filter untuk memuat hanya plugin yang dibutuhkan per halaman. Kami juga membersihkan transien mingguan dan autoload dinonaktifkan untuk entri WP_OPTIONS besar.

Fitur roket WP yang membawa kami ke 99/100 di PageSpeed

Setelah fondasi sudah ada, WP Rocket membantu kami meningkatkan kecepatan dan mencapai hasil kinerja yang luar biasa dengan cepat. Fitur -fitur ini memainkan peran kunci dalam membawa kami ke skor 95+ di Google Pagespeed di ponsel:

• Mobile Cache dan Sitemap Preload: WP Rocket secara otomatis mendeteksi perangkat seluler dan membangun cache khusus untuk mereka. Itu berarti pengguna ponsel cerdas selalu mendapatkan snapshot HTML yang dimuat sebelumnya. Preloader berbasis sitemap juga merangkak halaman Anda tepat setelah pembersihan cache, yang menghilangkan penundaan yang sering terjadi pada kunjungan pertama.
  
• Minifikasi CSS dan JS : WP Rocket Strips Out Whitespace dan Komentar untuk menyusut ukuran file. Ini juga dapat menggabungkan file JavaScript menjadi satu, mengurangi jumlah permintaan HTTP. Itu sangat penting bagi pengguna seluler di jaringan yang lebih lambat.  
  
• Hapus CSS yang tidak digunakan (RUCS): Tidak seperti minifikasi sederhana, RUCSS menganalisis HTML halaman Anda dan menghilangkan setiap aturan CSS yang tidak pernah digunakan di ujung depan. Deklutter stylesheet ini sering memotong puluhan kilobyte, sehingga browser membuat lebih cepat dengan byte lebih sedikit. Kami melihat secara langsung yang memungkinkan RUCS saja mencukur 200 kb dari muatan beranda kami, menghasilkan halaman pemuatan yang lebih cepat.
  
• Tunda eksekusi JavaScript : skrip seperti analitik, alat obrolan, atau widget pihak ketiga biasanya tidak perlu segera berjalan. WP Rocket menunda mereka sampai pengguna menggulir, mengetuk, atau klik. Ini membuat halaman interaktif lebih cepat dan meningkatkan interaksi ke cat berikutnya dan responsif keseluruhan Page terhadap interaksi pengguna.

Setelah mengaktifkan fitur -fitur ini, kami mendapat 99 Mobile PageSpeed ​​Performance Skor:

Bonus: WP Rocket Add -Ons untuk Kasus Khusus

Terkadang pengaturan di luar kotak membutuhkan sedikit dorongan. Untuk pengaturan tertentu seperti kami - dengan penjadwal kompleks, aturan font khusus, atau deteksi perangkat yang tidak biasa - kami memasang lima add -on roket WP gratis setelah berkonsultasi dengan insinyur senior WP Rocket:

• Ubah Parameter RUCS: Kami menyesuaikan seberapa sering dan seberapa dalam roket WP berjalan menghapus CSS yang tidak digunakan. Ini penting untuk kompatibilitas dengan plugin seperti AutomateWoo, yang dapat membebani penjadwal tugas.
• Nonaktifkan fragmen kereta WooCommerce: Karena basis data kami sudah dioptimalkan, kami menonaktifkan cache keranjang-keranjang WP Rocket untuk mempercepat panggilan checkout lebih jauh.
• Nonaktifkan CSS Font Preload: Kami menggunakan font WOFF2 yang diselenggarakan sendiri dengan aturan preload manual. Add-on ini memastikan aturan-aturan tersebut tidak ditimpa oleh preload font otomatis WP Rocket.
• Hapus aturan HTML kedaluwarsa: CDN dan server kami sudah menangani header cache, jadi kami menghapus aturan HTML default WP Rocket kedaluwarsa untuk menghindari konflik.
• Atur tablet sebagai seluler: Kami memperlakukan tablet seperti perangkat seluler untuk memastikan mereka mendapat manfaat dari caching seluler dan optimisasi responsif. Ini penting untuk fungsionalitas khusus mengandalkan periksa wp_is_mobile ().

Selain plugin tablet, sebagian besar add-on ini hanya diperlukan di toko kompleksitas tinggi. Untuk pengaturan eCommerce yang khas, WP Rocket bekerja dengan baik di luar kotak.

The 100/100 Secret: Perfecting Lazyloading dan gambar LCP itu

Mencapai 99 di Google's Pagespeed Insights adalah tonggak besar, tapi kami tidak puas. Satu poin berdiri di antara kita dan kesempurnaan.

Pertama, kami menangani elemen kembung, yang berarti mengurangi jumlah elemen HTML pada halaman. Google menghukum halaman dengan lebih dari 810 elemen DOM, dan menu, slider, dan footer kami sendiri mendorong kami melewati 1.000.

Inilah yang kami lakukan:

• Konten statis yang dimuat malas : Kami menunda elemen non-kritis seperti menu header, slider kategori produk, korsel merek, dan footer sampai setelah cat awal.

• Elemen yang tidak perlu dihapus : Kami memangkas level menu yang dalam dan menonaktifkan area widget yang tidak aktif di ponsel. Itu membantu kami mendapatkan jumlah total DOM di bawah ambang penalti Google.

Bahkan dengan halaman yang lebih bersih, kami masih tidak bisa memecahkan 100. Masalah terakhir adalah citra pahlawan.

Awalnya, itu adalah gambar 350 × 622 px dengan overlay, bayangan, dan teks - terlalu rumit untuk dimuat dengan cepat. Kami menyederhanakannya menjadi webp 350 × 350 px dan preloaded dengan prioritas tinggi menggunakan kode berikut:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

Dan itulah caranya, dengan menyederhanakan dan memuat gambar pahlawan, kami mencapai skor PSI 100/100 yang sempurna dari seluler.

Dampak Bisnis: Kecepatan sebagai mesin pertumbuhan

Seperti yang saya jelaskan, Speed ​​tidak hanya meningkatkan skor Pagespeed kami. Itu langsung meningkatkan laba kami.

Setelah mengoptimalkan kinerja dan memanfaatkan fitur roket WP, kami melihat keuntungan yang terukur dalam hasil:

• Tingkat konversi melonjak 33%.

• Pendapatan per sesi meningkat lebih dari lima kali , dari € 0,20 menjadi € 1,11.

Hasil tersebut diterjemahkan ke dalam pendapatan tambahan € 384.000 selama 18 bulan pertama setelah migrasi .

Ini bukan perbaikan kecil. Mereka mencocokkan dan akhirnya melampaui kinerja penguncian puncak kami, membuktikan bahwa kecepatan situs adalah tuas kunci untuk pertumbuhan .

Seperti yang saya suka katakan: "Setiap milidetik dicukur menambahkan euro nyata ke garis bawah."

3 tips praktis untuk pemilik bisnis

Jika Anda menjalankan toko e -commerce, saya ingin berbagi beberapa tips praktis tambahan dapat membantu Anda mendapatkan hasil maksimal dari upaya kinerja Anda - apakah Anda teknis atau tidak.

1. Lacak Pengguna Nyata: Gunakan Pemantauan Pengguna Nyata (RUM) untuk mengawasi data lapangan. Skor lab bermanfaat, tetapi yang benar -benar diperhitungkan adalah bagaimana kinerja situs Anda untuk pengunjung yang sebenarnya. Pastikan untuk menonaktifkannya saat menjalankan tes wawasan halaman untuk menghindari hasil yang miring.
2. Geolocate Origin Anda: Host situs Anda dekat dengan pelanggan Anda. Ketika server asal Anda dekat audiens Anda, semuanya mulai dari pencarian produk hingga checkout menjadi lebih cepat dan lebih dapat diandalkan.
3. Lean On WP Rocket: Mulailah dengan pengaturan default. Mereka secara otomatis menangani sebagian besar masalah kinerja segera. Setelah baseline Anda solid, Anda dapat menyempurnakan dengan mengaktifkan beberapa fitur tambahan, misalnya untuk mengoptimalkan file CSS dan JS. Dan jika Anda tidak memahami teknologi, ingat: "Situs yang lebih cepat berarti lebih sedikit frustrasi, lebih banyak penjualan, dan pelanggan yang lebih bahagia."

Membungkus

Kami pindah dari Magento ke WooCommerce, menaikkan skor pagespeed seluler kami dari 55 menjadi 100 yang sempurna, dan meningkatkan pendapatan per sesi dari € 0,20 menjadi € 1,11. Perjalanan itu membuktikan satu hal dengan jelas: Kecepatan lebih dari sekadar tonggak teknis. Ini adalah pendorong nyata pertumbuhan bisnis.

Kami fokus pada kinerja, membangun fondasi teknis yang kuat, dan menggunakan WP Rocket untuk membuka hasil dengan cepat. Jika toko WooCommerce Anda terasa lambat atau berkinerja buruk, sekarang saatnya untuk mengambil tindakan. Situs yang lebih cepat berarti pengalaman yang lebih halus bagi pengunjung Anda dan keuntungan nyata untuk bisnis Anda.