WP Rocket ile Woocommerce'de 100 Google PagePeed Mobile Puanına Nasıl Vurdum

Woocommerce mağazanızla Google'ın mobil cihazları için mükemmel bir 100 almayı mı hedefliyorsunuz?

Bu makalede, size tam olarak Magento'da koşan bir güzellik e-mağazası olan femme-fatale.gr ile nasıl başardığımızı göstereceğim. O zaman, mobil sayfa yükleri 5 ila 15 saniye sürdü ve 500 ürün kategorisi ve 450 ürün özelliğine sahip 35.000 ürün kataloğuna rağmen site satış kanıyordu.

Ben Oxford MetaRatalarının kurucusu Dimitris Vayenas. Son otuz yılda, her web performansının milisaniyesine takıntılı oldum. 2022'nin başlarında, arkadaşım Nikos Orfanos benden çevrimiçi mağazasına yardım etmemi istedi ve işe başladık.

WooCommerce'e göç ettikten ve tamamen hıza odaklandıktan sonra - WP roketini gizli silahımız olarak kullandı - 99 ila 100/100 skoru arasında tutarlı bir skorla mobil sayfa skorlarını parçaladık. Daha da önemlisi, site durgundan gelir makinesine gitti.

Okumaya devam edin ve bu tür sonuçları nasıl elde etmeyi başardığımızı ve WP Rocket'in 95+ puana ulaşmamıza nasıl yardımcı olduğunu ve bizi mükemmel bir 100'e iten son ayarlamaya nasıl yardımcı olduğunu öğreneceksiniz. Daha da önemlisi, site sadece 300 milisaniye yüklemeye başladığında izleyen iş etkisini öğreneceksiniz.

Neden performansa, özellikle mobil cihazlara odaklanın

Femme --fatale.gr'da satın alımların% 90'ından fazlası mobil cihazlarda gerçekleşir. Bu, mobil performansı ilk günden itibaren öncelikli hale getirdi.

Mobil cihazlar, herhangi bir web sitesi için nihai stres testidir. Sınırlı CPU, bellek ve kararsız bağlantılar, en yalın sayfaların bile masaüstünden 10 kat daha yavaş yüklenmesini sağlayabilir. Bu yüzden her optimizasyon önemlidir.

Hız verimlilik anlamına gelir. Temizleyici kodu, daha küçük varlıklar ve daha yalın bir DOM, özellikle mobil cihazlarda her ziyaretçi için daha yumuşak bir deneyime dönüşür.

Dediğim gibi: “Mobil deneyiminiz anlık değilse, her ekstra milisaniye ile gerçek para kaybediyorsunuz”.

Dönüm Noktası: Magento'dan WooCommerce'a Göçmek

Aralık 2021'de Nikos net bir zorlukla uzandı. “Mağazam kilitleme sırasında oturum başına 0,81 € 'dan zirveye çıktı. Sonra satışlar oturum başına 0,15 €' ya geri döndü. Yüksekleri kilitlemek için geri dönebilir miyiz?”

İlk adımın platformları değiştirdiğini biliyorduk.

Öncelikle, çevik, modern yığını için WooCommerce'i seçtik. Performans fikirli web mühendisleri topluluğunun yanı sıra, akla gelebilecek her işlevselliği kapsayan eklentiler ve tema yaratıcıları ekosistemini sundu.

Ürün verilerini değiştirmeden veya pazarlama harcamalarını artırmadan Mart 2022'de yayınlandık. Tek fark hızdı. Sayfa yüklerini 5 ila 10 saniye aşağı sadece 1 ila 2 saniyeye kestik.

Bu, Magento'dan geçmeden önce yükleme süresini gösteren GTMetrix ekran görüntüsü: Ana sayfa için 5.8 saniye ve kategori için 7,9 saniye, hala yeni web sitesini geliştirirken yakalandı.

Öte yandan, bu mevcut performans, tüm çekirdek web canlıları yeşil:

Bir Woocommerce için gerçek hız değeri nedir?

Performans üzerindeki iş etkisinin göz ardı edilmesi imkansızdı ve sayılar onu kristal netleştirdi.

Göçten önce, femme - fatale.gr bir performans rutuna sıkışmıştı. Magento'da, aylık ciro yaklaşık 40.000 seansla 7.000 € ile 10.000 € arasında değişiyordu ve oturum başına ortalama 0.15 € ila 0.20 €. Trafik 62.500 seansa yükseldiğinde, 2020'deki kilitleme zirvesi sırasında bile, en iyi performans seans başına 0,81 € 'ya çıktı.

Şubat 2022'ye kadar, WooCommerce'e göç etmeden hemen önce, site oturum başına hafifçe 0,29 € 'ya yükseldi, ancak yine de potansiyelinden uzaktı.

Daha hızlı performansın etkisi hemen oldu. Mart 2022'de, göçten sonraki ilk ay, oturum başına gelir, oturumlardaki geçici bir düşüşe rağmen, önbellekleri ısıtırken 0,58 € 'ya iki katına çıktı.

Kazançlar burada bitmedi. Aralık 2023'e kadar, oturum başına 0,81 € kilitleme zirvesiyle eşleştik. Bugün, bu sayı daha da yükseldi: Web sitesi artık 40.000 aylık ziyaretle oturum başına 1.11 € kazanıyor.

Femme - fatale.gr'ın sahibi Nikos, en iyi şekilde koy:

Covid Peak'ımızı eşleştirerek ve şimdi aşarak, hızın işimizdeki en büyük kol olduğunu kanıtladık.

Performans Vakfı Her Woocommerce sitesinin ihtiyaç duyduğu

WP Rocket tam performans potansiyelini sunmadan önce, sağlam bir temelin mevcut olması gerekir. Bu erken kararların sonuçlarımız üzerinde büyük bir etkisi oldu ve aynı zamanda bir WooCommerce mağazası çalıştıran herkese tavsiye ettiğim şey budur:

1. Birinci performans seçin: En iyi seçeneklere yerleşmeden önce düzinelerce temayı test ettik. Botiga (Gutenberg merkezli) tarafından Athemes ve Ray Tham (Elementor tabanlı) satıcı demolarında 90+ puan aldı. 70'in altında bir şey var mı? Bundan kaçındık.

2. Gerçekten hızlı bir ev sahibi seçin: Londra, Frankfurt, Amsterdam, Milan ve Stockholm gibi kilit Avrupa bölgelerinde Linode, Vultr ve DigitalOcean tarafından desteklenen Cloudways'i kullanıyoruz. Bize tek tıklamayla PHP ve veritabanı yükseltmeleri, yerleşik vernik ve redis, artı sorunsuz mobil cihaz algılama verir. Bu, çekilmemiş API çağrılarının her zaman optimize edilmiş içeriğe çarpmasını sağlar. Üç yıl içinde sıfır kesinti yaşadık ve destek ekibi olağanüstü.
   
   E -ticarette, müşterilerinize yakınlık duyarsız değildir: her ürün sorgusu, sepet güncellemesi ve envanter kontrolü kökeninize dokunur. Atina veya Yunan Adaları'ndaki alışveriş yapanlar ve Cloudways'in yerel bir düğümü olmadığı için FastPath dağıtmak zorundayız. Doğrudan tüm büyük Yunan mobil operatörleri ve Cloudflare ile aktarıyor, 50 MS MS TTFBS ve gerçekten yerel bir deneyim sunuyor.

3. Destekleyici satıcılarla ortak olun: Soruları cevaplamak ve yanınızda, Athemes ve Fibosearch'ten Wellaunch'a , sitenizi , yerçekimi formlarını , AIOSEO'ya ve WP roketini kendisi için güvenilir ve hızlı destek sunan satıcıları seçtik.

4. İçeriğinizi optimize edin: Tüm görüntüleri WebP'ye dönüştürdük ve bunları tarih tabanlı klasörlere dönüştürdük, her klasörün 10.000'den az dosya içermesini sağladık. Yazı tipleri için, WOFF2 dosyalarını kendi kendine barındırdık ve bunları yalnızca kitlenizin ihtiyaç duyduğu karakterleri ekleyecek şekilde alt k. Bu, yazı tipi dosya boyutlarını yüzde 70 ila 80 oranında azalttı. Onlara yerel olarak hizmet etmek ve erken ön yükleme, harici arama ve mizanpaj kaymalarından kaçınmaya yardımcı oldu.

5. Cerrahi eklenti yüklemesini kullanın ve veritabanı hijyenini koruyun: Sayfa başına sadece gereken eklentileri yüklemek için eklenti organizatörü ve manuel filtreler kullandık. Ayrıca, büyük wp_options girişleri için geçici ve devre dışı Autoload'ı temizledik.

Bizi PagesPeed'de 99.0100'e götüren WP roket özellikleri

Vakıf mevcut olduğunda, WP Roket hızı artırmamıza ve olağanüstü performans sonuçlarını hızlı bir şekilde elde etmemize yardımcı oldu. Bu özellikler bizi Google PagePeed'de mobil cihazlarda 95+ puan almada önemli bir rol oynadı:

• Mobil önbellek ve site haritası ön yükü: WP Rocket, mobil cihazları otomatik olarak algılar ve onlar için özel bir önbellek oluşturur. Bu, akıllı telefon kullanıcılarının her zaman önceden yüklenmiş bir HTML anlık görüntüsü aldığı anlamına gelir. Site haritası tabanlı ön yükleyici, ilk ziyaretlerde sıklıkla meydana gelen gecikmeyi kaldıran herhangi bir önbellek temizlemesinden hemen sonra sayfalarınızı tarar.
  
• CSS ve JS Minifikasyonu : WP Roket, dosya boyutlarını küçültmek için Whitespace'i ve yorumları çıkarır. Ayrıca, JavaScript dosyalarını bir olarak birleştirerek HTTP isteklerinin sayısını azaltabilir. Bu, daha yavaş ağlardaki mobil kullanıcılar için özellikle önemlidir.  
  
• Kullanılmayan CSS'yi (RUCSS) kaldırın: Basit minifikasyondan farklı olarak, RUCSS sayfalarınızın HTML'sini analiz eder ve ön uçta hiç kullanılmayan her CSS kuralını çıkarır. Bu, stil sayfaları genellikle onlarca kilobayt keser, böylece tarayıcı daha az baytla daha hızlı oluşturur. RUCSS'nin tek başına etkinleştirmenin ana sayfa yükümüzden 200 kb traş ettiğini ve daha hızlı yükleme sayfalarına neden olduğunu gördük.
  
• Gecikme JavaScript Yürütme : Analytics, sohbet araçları veya üçüncü taraf widget'ları gibi komut dosyalarının genellikle hemen çalışmasına gerek yoktur. WP Roket, kullanıcı kaydırana, musluklara veya tıklamalara kadar onları geciktirir. Bu, sayfaları daha hızlı etkileşimli hale getirir ve bir sonraki boya ve Page'ın kullanıcı etkileşimlerine genel duyarlılığıyla etkileşimi geliştirir.

Bu özellikleri etkinleştirdikten sonra, 99 mobil sayfa planı performans puanı aldık:

Bonus: özel durumlar için WP roket eklentileri

Bazen boktan çıkışların dışında biraz artışa ihtiyacı vardır. Bizimki gibi belirli kurulumlar için - karmaşık zamanlayıcılar, özel yazı tipi kuralları veya olağandışı cihaz algılama ile - WP roket kıdemli mühendislerine danıştıktan sonra beş ücretsiz WP roket eklenti yükledik:

• RUCSS Parametrelerini Değiştir: WP roketinin ne sıklıkta ve ne kadar derin çalıştığını ayarladık, kullanılmayan CSS'yi kaldırdı. Bu, görev zamanlayıcısını aşırı yükleyebilen AutomateWoo gibi eklentilerle uyumluluk için şarttı.
• WooCommerce Sepet Parçalarını Deactivate: Veritabanımız zaten optimize edildiğinden, ödeme çağrılarını daha da hızlandırmak için WP Rocket'in sepet kırma önbelleğini devre dışı bıraktık.
• Kullanılmış CSS yazı tipi ön yükünü devre dışı bırakın: Manuel ön yük kurallarıyla özel kendi kendine barındırılan WOFF2 yazı tiplerini kullandık. Bu eklenti, bu kuralların WP Rocket'in otomatik yazı tipi ön yükü tarafından geçersiz kalmamasını sağladı.
• HTML'yi Kaldır Kurallar: CDN ve Sunucumuz zaten işlenmiş önbellek başlıklarımız, bu nedenle WP Rocket'in varsayılan HTML'sini Çatışmaları önlemek için süresi sona erdirir.
• Tabletleri mobil olarak ayarlayın: Mobil önbellek ve duyarlı optimizasyonlardan yararlandıklarından emin olmak için mobil cihazlar gibi tabletleri işledik. Bu, wp_is_mobile () kontrolüne dayanan özel işlevsellik için önemliydi.

Tablet eklentisinin yanı sıra, bu eklentilerin çoğu sadece yüksek karmaşıklık mağazalarında gereklidir. Tipik e -ticaret kurulumları için, WP roket kutudan çıkıştan çıkıyor.

100/100 sırrı: tembel yüklemeyi mükemmelleştirmek ve bu LCP görüntüsü

Google'ın PagesPeed Insights'a 99'a ulaşmak büyük bir kilometre taşıydı, ancak memnun değildik. Aramızda bir nokta ve mükemmellik vardı.

İlk olarak, element şişmesi ile mücadele ettik, bu da sayfadaki HTML öğelerinin sayısını azaltmak anlamına geliyor. Google, sayfaları 810'dan fazla DOM öğesi ile cezalandırır ve menülerimiz, kaydırıcılarımız ve altbilgimiz bizi 1000'i geçti.

İşte yaptığımız şey:

• Tembel yüklü statik içerik : Başlık menüleri, ürün kategorisi kaydırıcıları, marka karuselleri ve altbilgi gibi kritik olmayan öğeleri ilk boyadan sonraya kadar erteledik.

• Gereksiz unsurlar kaldırıldı : Derin menü seviyelerini budandık ve mobil cihazlarda aktif olmayan widget alanlarını devre dışı bıraktık. Bu, Google'ın ceza eşiğinin altındaki toplam DOM sayımını almamıza yardımcı oldu.

Daha temiz bir sayfada bile 100'ü kıramadık. Son sayı kahraman imajıydı.

Başlangıçta, kaplamalar, gölgeler ve metin içeren 350 × 622 piksel bir görüntüdü - hızlı yüklenemeyecek kadar karmaşık. 350 × 350 piksel bir webp'e kadar basitleştirdik ve aşağıdaki kodu kullanarak yüksek öncelikle önceden yükledik:

 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">'; }

Ve bu şekilde kahraman görüntüsünü basitleştirip önceden yükleyerek, mobilden mükemmel bir 100/100 psi puanı elde ettik.

İş Etkisi: Büyüme Motoru Olarak Hız

Açıkladığım gibi, hız sadece sayfa skorumuzu iyileştirmedi. Alt satırımızı doğrudan artırdı.

Performansı optimize ettikten ve WP roket özelliklerinden yararlandıktan sonra, sonuçlarda ölçülebilir kazançlar gördük:

• Dönüşüm oranları%33 arttı.

• Oturum başına gelir, 0.20 € 'dan 1.11 €' dan beş kattan fazla arttı .

Bu sonuçlar, göçten sonraki ilk 18 ay boyunca 384.000 € 'luk bir gelire dönüştü .

Bunlar küçük gelişmeler değildi. Pik kilitleme performansımızı eşleştirdiler ve sonunda aştılar, site hızının büyüme için anahtar kol olduğunu kanıtladılar .

Dediğim gibi: “Her milisaniye tıraşlı gerçek Euro ekledi.”

İşletme sahipleri için 3 pratik ipucu

Bir e -ticaret mağazası işletiyorsanız, teknik olsanız da olmasanız da, performans çabalarınızdan en iyi şekilde yararlanmanıza yardımcı olabilir bazı ek pratik ipuçlarını paylaşmak istiyorum.

1. Gerçek Kullanıcıları İzleyin: Saha verilerine dikkat etmek için gerçek kullanıcı izleme (ROM) kullanın. Laboratuvar puanları yararlıdır, ancak gerçekten önemli olan, sitenizin gerçek ziyaretçiler için nasıl performans gösterdiğidir. Çarpık sonuçları önlemek için PagePeed Insights testleri çalıştırırken devre dışı bıraktığınızdan emin olun.
2. Menşe: Sitenizi müşterilerinize yakın ağırlayın. Origin sunucunuz kitlenize yaklaştığında, ürün aramalarından kasaya kadar her şey daha hızlı ve daha güvenilir hale gelir.
3. WP Roketine Yalın: Varsayılan ayarlarla başlayın. Çoğu performans sorununu hemen otomatik olarak ele alırlar. Taban çizginiz sağlam olduğunda, örneğin CSS ve JS dosyalarını optimize etmek için bazı ek özellikleri etkinleştirerek ince ayar yapabilirsiniz. Ve eğer teknoloji meraklısı değilseniz, unutmayın: “Daha hızlı siteler daha az hayal kırıklığı, daha fazla satış ve daha mutlu müşteriler anlamına gelir.”

Sarma

Magento'dan WooCommerce'e taşındık, mobil sayfa skorumuzu 55'ten mükemmel bir 100'e yükselttik ve seans başına 0,20 € 'dan 1.11 €' dan artar. Bu yolculuk bir şeyi açıkça kanıtladı: hız teknik bir kilometre taşından daha fazlası. İş büyümesinin gerçek bir itici gücüdür.

Performansa odaklandık, güçlü bir teknik temel oluşturduk ve sonuçların kilidini hızla açmak için WP roketini kullandık. WooCommerce mağazanız yavaş veya düşük performanslı hissediyorsa, şimdi harekete geçme zamanı. Daha hızlı bir site, ziyaretçileriniz için daha yumuşak bir deneyim ve işletmeniz için gerçek kazançlar anlamına gelir.