WP Rocket ve Botiga ile WooCommerce Nasıl Hızlandırılır

WooCommerce'i nasıl hızlandıracağınız ve hızlı yüklenen bir mağaza nasıl oluşturacağınız konusunda mücadele mi ediyorsunuz?

Hızlı bir mağazaya sahip olmak önemlidir çünkü mağazanızın yükleme süreleri alışveriş yapanların deneyimlerini, SEO sıralamalarınızı ve hatta mağazanızın dönüşüm oranlarını etkiler.

Ancak aynı zamanda, WooCommerce mağazalarını optimize etmek, mağazanızın yükleme sürelerinde hayal kırıklığına uğramanıza neden olabilecek normal WordPress sitelerinden daha zordur.

Birkaç neden var, ancak en büyük iki tanesi, WooCommerce mağazalarının normal WordPress sitelerinden çok daha fazla veritabanı yoğun olması ve mağazanızın tüm sayfalarını önbelleğe alamamanızdır.

Ancak bu, daha hızlı bir mağaza oluşturmak için seçenekleriniz olmadığı anlamına gelmez.

Doğru araçlar ile herhangi bir özel teknik bilgiye ihtiyaç duymadan mağazanızı hızlandırabilirsiniz.

Bu eğitimde, bildiğim en basit şekilde WooCommerce hız optimizasyonunu anlatacağım: WP Rocket eklentisi ve diğer birkaç araç ve ince ayar ile.

Bu arada, her ince ayarın mağazanın yükleme süresini nasıl etkilediğini görebilmeniz için gerçek performans testi verilerini paylaşacağım.

Sonunda, çok daha hızlı yüklenen bir mağazanız olmalı ve her şeyi ayarlamak için bir bilgisayar bilimi derecesine ihtiyacınız olmayacak .

Kulağa hoş gelmek? WooCommerce'i birlikte hızlandıralım.

WP Rocket'ten Önce İki Temel WooCommerce Hız Optimizasyon Taktiği

Bir sonraki bölümde, WooCommerce'i hızlandırmak ve daha hızlı yüklenen bir mağaza elde etmek için WP Rocket'i nasıl kullanabileceğinizi anlatacağım.

Ancak, hızlı yüklenen bir WooCommerce mağazası istiyorsanız, yine de güçlü bir performans temeline sahip olmanız gerekir. Aksi takdirde, WP Rocket kullanmak bir domuzun üzerine ruj sürmek gibidir.

Temel olarak, WP Rocket mağazanızı daha hızlı hale getirecektir. Ancak vakfınız başlamak için çok yavaşsa, yine de yavaş bir mağazanız olacak. Sadece biraz…” daha az yavaş olacak”.

Peki – WooCommerce performansı için güçlü bir temel nedir?

Bu iki ayrıntıyı çivilemeniz gerekir:

1. Daha Hızlı Bir WooCommerce Teması Seçin

Mağazanızın teması, ne kadar hızlı yüklendiği konusunda büyük rol oynayacaktır. Büyük, şişirilmiş temalar daha fazla kaynak yükleyecek ve bu da sitenizi yavaşlatacaktır.

Öte yandan, hızlı bir WooCommerce teması tam tersini yapacaktır: yalnızca iyi görünümlü, alışverişçi dostu bir mağaza oluşturmak için gereken minimum miktarı yükleyecektir.

En hızlı WooCommerce temalarını bulmak için bir dizi seçeneği test ettiğimiz özel bir yazımız var. Ancak zamandan tasarruf etmek istiyorsanız ücretsiz Botiga temamızı kullanabilirsiniz:

Botiga, sıfırdan performans için tasarlandı. Yalnızca vanilya JavaScript'i kullanır (jQuery bağımlılığı yoktur), kodunu otomatik olarak küçültür ve kutudan çıktığı haliyle 44,3 KB'nin altındadır.

Dahası, tüm demo siteleri yerel blok düzenleyici ile oluşturulmuştur; bu, sitenizi demo gibi göstermek için mağazanızı bir sayfa oluşturucu eklentisiyle ağırlaştırmanıza gerek olmadığı anlamına gelir.

Aynı zamanda Botiga, aşağıdakiler de dahil olmak üzere bir dizi kullanışlı e-ticaret özelliği sunar:

• Çoklu ödeme ve alışveriş sepeti sayfası stilleri
• Alışveriş yapanların ürünleri hızlı bir şekilde bulmasına yardımcı olmak için anında ürün arama
• Şık ürün önerileri
• Ürün varyasyonu renk örnekleri
• Çoklu ürün galerisi düzeni
• İstek listesi
• Yapışkan sepete ekleme çubuğu

Botiga, tamamen işlevsel ücretsiz bir sürümün yanı sıra daha fazla özellik ekleyen 69 dolarlık bir Pro sürümüne sahiptir.

Bu nedenlerle, mağazamızı hızlandırmak için örnek olarak Botiga'yı kullanacağız.

Botiga'yı buradan indirebilir veya bazı örnekleri görmek için demolara göz atabilirsiniz.

2. Performans İçin Optimize Edilmiş WooCommerce Hosting Kullanın

Hızlı bir tema kullanmanın ötesinde, performans açısından optimize edilmiş WordPress barındırmayı da seçmek isteyeceksiniz.

Mümkün olan en ucuz barındırmayı seçmek cazip gelse de, ucuz paylaşımlı barındırma genellikle WooCommerce'i idare edecek kaynaklara sahip değildir, bu da ne yaparsanız yapın cansız yükleme sürelerine ve performansa neden olur.

Burada yine, en hızlı WordPress barındırma hizmetini bulmak için bir grup barındırma sağlayıcısını test ettiğimiz bir makalemiz var. Aceleniz varsa, göz önünde bulundurmanız gereken bazı iyi seçenekler şunlardır:

• Kinsta – Kinsta incelememizin tamamını okuyun
• WP Motoru – Elasticsearch (mağazanızın ürün arama performansını büyük ölçüde artıracak) içeren özel e-Ticaret barındırma planlarını özellikle tavsiye ederim.
• Cloudways – Cloudways incelememin tamamını okuyun

WP Rocket ile WooCommerce Nasıl Hızlandırılır

Şimdi, güçlendiricileri bağlamak ve WooCommerce'in daha da hızlı yüklenmesini sağlamak için WP Rocket kullanmanın zamanı geldi.

Mağazamız için sağlam barındırma ve hızlı Botiga teması kullandığımız için, zaten kendi kendine oldukça hızlı bir şekilde yükleniyor. İşte ana sayfada nereden başladığımızı gösteren WebPageTest'in performans ölçümlerinin bir ekran görüntüsü:

Ancak WP Rocket ile hala daha hızlı yüklenmesini sağlayabiliriz. Çok sayıda harika WordPress performans optimizasyon eklentisi var, peki neden WooCommerce için WP Rocket'i öneriyorum?

Neden sevdiğimi öğrenmek için WP Rocket incelememin tamamını okuyabilirsiniz, ancak işte önemli noktaların kısa bir özeti:

1. Kullanıma hazır WooCommerce uyumluluğuna sahiptir . WP Rocket, WooCommerce kullandığınızı görürse, önbelleğe alma gibi temel özellikler söz konusu olduğunda kendini otomatik olarak en uygun şekilde yapılandırır. Bir WooCommerce mağazasında önbelleğe almayı yanlış yapılandırmak temel işlevleri bozabileceğinden, bu çok büyük bir avantajdır.
2. Kullanımı çok kolaydır . Yukarıdaki noktaya ek olarak, WP Rocket genellikle basit bir arayüze, ayrıntılı belgelere ve premium desteğe sahiptir.
3. Sitenizi çok daha hızlı hale getirir . En güzelini sona sakladım. WP Rocket sadece düz çalışır ve WooCommerce mağazalarının (ve diğer WordPress sitelerinin) daha hızlı yüklenmesini sağlamak için harika bir iş çıkarır. Ayrıca kullanılmayan CSS'yi kaldırma ve JavaScript yürütmesini geciktirme gibi benzersiz özelliklere de sahiptir.

WP Rocket premium bir eklentidir, ancak 49 $ ödemek daha hızlı bir WooCommerce mağazası için küçük bir bedeldir. Sayfa yükleme süreleri ve dönüşüm oranları arasında doğrudan bir ilişki vardır, bu nedenle mağazanızı hızlandırmak, artan dönüşüm oranları şeklinde paranızı kolayca geri kazanabilir.

Başlamak için WP Rocket'in bir kopyasını satın aldığınızdan emin olun. Ardından, WooCommerce için nasıl kuracağınız aşağıda açıklanmıştır.

1. Temel Optimizasyonları Etkinleştirmek için Eklentiyi Kurun

Başlamak için WooCommerce mağazanıza gidin (veya henüz yoksa ilk önce onu kurun) ve WP Rocket'i kurun ve etkinleştirin:

WP Rocket eklentisini etkinleştirir etkinleştirmez, mağazanızı hızlandırmak için aşağıdaki özellikleri otomatik olarak etkinleştirecektir:

• Sayfa önbelleğe alma – WP Rocket, mümkün olduğunca fazla içeriği önbelleğe alırken sorunlardan kaçınmak için önemli WooCommerce içeriğini de otomatik olarak hariç tutacaktır. Örneğin, diğer uyumluluk ayarlarının yanı sıra alışveriş sepetinizi ve ödeme sayfalarınızı hariç tutacaktır.
• tarayıcı önbelleğe alma
• GZIP sıkıştırması
• Web yazı tipleri için Cross-Origin desteği
• Google Fonts dosyalarını optimize etme

Bir WooCommerce mağazasında, WP Rocket ayrıca get_refreshed_fragments AJAX isteğini otomatik olarak optimize eder. WooCommerce, bir alışverişçinin sepet içeriğini dinamik olarak güncellemek için bunu kullanır.

Yine, bu optimizasyonların tümü otomatik olarak gerçekleşir, bu nedenle mağazanız WP Rocket'i etkinleştirir etkinleştirmez zaten daha hızlı yükleniyor olmalıdır.

WP Rocket'te tek bir ayara dokunmadan mağazamızın ana sayfası şu şekilde yükleniyor:

İlk bayta kadar geçen sürenin yaklaşık 450 ms (0,509'dan 0,043 saniyeye) azaldığını ve bunun da En Büyük İçerikli Boyama (LCP) dahil olmak üzere neredeyse tüm diğer metriklerde benzer bir azalmaya yol açtığını görebilirsiniz. En Büyük İçerikli Boyama süresi ~1.1 saniyeden ~0.7 saniyeye düştü.

Bu azalma, esas olarak, diğer tweaks'lerin de yardımcı olmasına rağmen, WP Rocket'in uyguladığı WooCommerce dostu sayfa önbelleğe alma işleminin bir sonucudur.

2. Dosya Optimizasyonlarını Ayarlayın

WP Rocket varsayılan olarak birçok kullanışlı özelliği etkinleştirirken, manuel olarak etkinleştirmeniz gereken bazı önemli özellikler de vardır.

Başlamak için WP Rocket ayarları alanındaki Dosya Optimizasyonu sekmesine gidin ( Ayarlar → WP Rocket ).

Burası, mağazanızın performansında (özellikle Önemli Web Verileri ve Lighthouse performans puanı söz konusu olduğunda) büyük bir fark yaratabilecek mağazanızın CSS ve JavaScript kodunu optimize edebileceğiniz yerdir.

İşte önerdiğim ayarlar:

CSS Dosyaları :

• CSS dosyalarını küçültün – Botiga teması, kodunu varsayılan olarak zaten küçültür, ancak bu, kullandığınız eklentilerdeki kodu küçültmek için yardımcı olabilir.
• CSS dağıtımını optimize edin → Kullanılmayan CSS'yi kaldırın - Bu, her sayfanın dosya boyutunu küçültmek için gereksiz CSS'yi sayfa sayfa kaldırır.

Çoğu kaliteli ana bilgisayar HTTP/2 kullandığı için bu gerçekten yardımcı olmadığı için CSS dosyalarını birleştirmeyi önermiyorum.

JavaScript dosyaları :

• JavaScript dosyalarını küçült
• Ertelenmiş JS yükle
• JavaScript yürütmeyi geciktirme

CSS'de olduğu gibi, JavaScript dosyalarını birleştirmenizi önermiyorum.

Mağazanızın çalışmasını sağlamak için JavaScript yürütmeyi geciktirme ayarına bazı istisnalar eklemek isteyebilirsiniz. Bu, bir kullanıcı sitenizle etkileşime girene kadar (ör. tıklamalar veya kaydırmalar) tüm JavaScript'in yüklenmesini geciktirir.

Bu, En Büyük İçerikli Boyama sürenizi iyileştirmek için harikadır , ancak izleme komut dosyaları (örn. Google Analytics veya Google Etiket Yöneticisi) veya kullanıyor olabileceğiniz bazı eklentiler gibi hemen yüklemek istediğiniz bazı JavaScript'leriniz olabilir.

WP Rocket, tüm olası hariç tutmaların ayrıntılı bir sayfasını tutar, böylece kendinizi hariç tutmak için komut dosyalarını çözmenize gerek kalmaz. Bunları bu WP Rocket yardım makalesinden kolayca kopyalayabilir ve Hariç Tutulan JavaScript Dosyaları alanına yapıştırabilirsiniz.

Örneğin, Google Analytics'i hariç tutmak istiyorsanız, onu şu şekilde yapılandırırsınız:

Bu ince ayarları yaptıktan sonra, daha da fazla iyileştirme görebilirsiniz. Ana sayfamızın sayfa boyutu yaklaşık 80 KB küçültüldü ve En Büyük İçerikli Boyama süresi ~0.7 saniyeden ~0.5 saniyeye daha da düştü.

3. Medyanızı Optimize Edin

Bu noktada, performans değerinin çoğunu WP Rocket'ten sıkıştırdınız. Ancak, bazı ek ince ayarlar yapmak için keşfetmek isteyebileceğiniz birkaç ayar alanı daha var.

Medya sekmesinde, tembel yüklemeyi ve eksik resim boyutlarını etkinleştirmenizi öneririm. İlki, performans konusunda size yardımcı olacak ve ikincisi, Önemli Web Verileri performansınızı daha da iyileştirmek için Kümülatif Düzen Kaydırma (CLS) ile ilgili sorunları azaltabilir:

4. Bir İçerik Dağıtım Ağı Ekleyin (Küresel Mağazalar için)

İçerik dağıtım ağı (CDN), görseller ve komut dosyaları gibi statik varlıkları bir global sunucular ağında önbelleğe alarak mağazanızın yükleme sürelerini hızlandırmanıza olanak tanır.

Ardından, ziyaretçiler bu statik dosyaları fiziksel olarak kendilerine en yakın olan sunucudan indirebilir, bu da indirme sürelerini azaltır ve mağazanızı hızlandırır.

Mağazanız yalnızca belirli bir coğrafi bölgedeki müşterileri hedefliyorsa, örneğin Birleşik Krallık'ta, muhtemelen bir CDN'den fazla fayda görmeyeceksiniz.

Ancak, örneğin Birleşik Krallık ve ABD'deki dünya çapındaki müşterileri hedefliyorsanız, bir CDN, WooCommerce'i hızlandırmak için başka bir harika seçenektir.

CDN bölümünde, WP Rocket, mağazanıza bir CDN eklemek için size iki seçenek sunar:

1. Sınırsız bant genişliği için ayda yalnızca 7,99 ABD dolarına mal olan resmi RocketCDN hizmetini kullanabilirsiniz. StackPath'in küresel ağına dayanmaktadır. Bu, otomatik bir yapılandırma sunduğu için en basit seçenektir.
2. WP Rocket'in URL'lerinizi yeniden yazmasını sağlayarak herhangi bir üçüncü taraf CDN ile entegre edebilirsiniz. Popüler seçenekler StackPath, KeyCDN, Bunny CDN, CloudFront ve diğerleridir.

Kendi CDN'nizi kurma konusunda kendinize güvenmiyorsanız, sabit bir fiyata sınırsız bant genişliği elde ettiğiniz için oldukça iyi bir değer sunduğundan RocketCDN hizmetini kullanmanızı öneririm:

WooCommerce'de WP Rocket ile İlgili Sorunları Giderme

Yukarıdaki talimatları takip etmek, herhangi bir sorun olmadan daha hızlı bir WooCommerce mağazasına yol açsa da, küçük sorunlarla karşılaşabileceğiniz bazı nadir senaryolar vardır.

En yaygın örnek, kullanıcı istek listeleri, son görüntülenen öğeler veya konuma özgü içerik (örneğin, farklı ülkeler için farklı fiyatlar) gibi bazı dinamik içerik türleriyle ilgili sorunlar olabilir.

Örneğin, bir kullanıcı istek listesine eklediği bir ürünü ziyaret ederse, bunu ürün sayfasında göstermek isteyebilirsiniz. Ancak bazı durumlarda, önbelleğe alma burada hatalı davranışlara yol açabilir.

Peki - bunu nasıl düzeltebilirsin? Bazı ipuçlarını gözden geçirelim.

Öncelikle, önbellek uyumlu bir şekilde kodlanmış dinamik içerik eklentilerini kullanmayı deneyin. Esasen bu, eklentinin dinamik içeriğini PHP yerine JavaScript veya AJAX kullanarak oluşturduğu anlamına gelir.

Emin değilseniz, sorun yaşadığınız eklentinin geliştiricisine ulaşabilirsiniz. Bazı eklentiler, yerleşik uyumluluk araçları içerir. Örneğin, YITH WooCommerce İstek Listesi eklentisinin, önbelleğe alma ile ilgili sorunları çözecek olan AJAX yüklemesini etkinleştirecek bir ayarı vardır.

WP Rocket ekibi, popüler WooCommerce eklentileri için sorunlara neden olabilecek bazı uyumluluk eklentileri/araçları da oluşturmuştur:

• YITH WooCommerce İstek Listesi eklentisi
• Yerel WooCommerce Son Görüntülenen Ürünler widget'ı
• YITH WooCommerce Son Görüntülenen Ürünler eklentisi

Yukarıdaki düzeltmeler bir seçenek değilse, başka bir olası düzeltme, eklentinin ayarladığı çerezi hedefleyen bir önbellek hariç tutma kuralı eklemektir. Bu daha gelişmiş, ancak dinamik içeriği görmesi gereken kullanıcılar için önbelleği atlamanıza izin verecek.

Eklenti belgelerinden çerez bilgilerini bulmaya çalışabilir veya sizin için bulması için bir geliştirici kiralayabilirsiniz. Ardından, WP Rocket'in Gelişmiş Kurallar alanında çerez önbelleği hariç tutma kurallarını ayarlayabilirsiniz:

WP Rocket'in Ötesinde Diğer Faydalı WooCommerce Hız Optimizasyon Eklentileri

WP Rocket, WooCommerce performans optimizasyonu için ihtiyacınız olan hemen hemen her şeyi yapabilir. Ancak bir ana istisna var:

Görüntüler!

Mağazanızda muhtemelen bir ton ürün resmi olacaktır. Ve dikkatli olmazsanız, bu ürün resimleri mağazanızı (özellikle ürün ve mağaza sayfalarınızı) yavaşlatabilir.

Çözüm, sitenizin resimlerini sıkıştırarak ve yeniden boyutlandırarak optimize etmektir. Bunu bir görüntü optimizasyon eklentisi kullanarak otomatik olarak başarabilirsiniz.

En iyi WordPress görüntü optimizasyon eklentileri hakkında bir yazımız var, ancak işte en iyi seçeneklerden bazıları:

• Imagify – bu eklenti, WP Rocket ile aynı geliştiriciden gelir
• ShortPixel – kendi sitelerimde kullandığım eklenti bu
• WP Sıkıştırma – başka bir yüksek kaliteli seçenek; WP Sıkıştırma incelememizde daha fazla bilgi edinin

Görsellerin ötesinde, büyük mağazalar için bir başka kullanışlı araç da bir tür ürün arama çözümüdür.

Çok fazla ürününüz varsa, ürün arama çok yoğun veritabanı sorgularına neden olduğundan kaynak açısından çok yoğun olabilir.

Bunu, Elasticsearch (ElasticPress eklentisi aracılığıyla) veya Jetpack Search (aynı zamanda Elasticsearch'e dayalıdır, ancak uygulanması daha basit) gibi sunucu dışı arama çözümlerini kullanarak düzeltebilirsiniz.

WooCommerce Mağazanızı Bugün Hızlandırın

WooCommerce mağazanızın başarılı olmasını istiyorsanız, hızlı bir şekilde yüklenmesi önemlidir.

Mağazanızı başarıya hazırlamak için öncelikle sağlam bir temel oluşturmanız önemlidir:

1. Ücretsiz Botiga teması gibi hızlı yüklenen bir WooCommerce teması seçin.
2. Kinsta veya WP Engine gibi performans açısından optimize edilmiş WordPress barındırma kullanın.
3. E-Ticaret sitenizin temelini oluşturun.

Oradan, WP Rocket, WooCommerce uyumlu önbelleğe alma, CSS ve JavaScript optimizasyonu ve daha fazlası dahil olmak üzere bir dizi WooCommerce performans optimizasyonunu uygulamanıza yardımcı olabilir.

Ürün resimlerinizi optimize etmek için bir resim optimizasyonu eklentisi de eklerseniz, hafif, hızlı bir WooCommerce mağazası ile başlamanız gerekir.

WP Rocket ve Botiga ile WooCommerce'i nasıl hızlandıracağınız hakkında hala sorularınız mı var? Yorumlarda bize bildirin!