Divi vs Elementor Performance 2021: Hangi WordPress sayfa üreticisi daha hızlı?
Divi ile Elementor arasında WordPress siteniz için görsel yapımcı olarak karar vermeye mi çalışıyorsunuz? Özellikler ve tasarım esnekliği açısından, bunlar orada en iyi iki sayfalık yapımcı/temadır ve her ikisi de tek bir kod satırı yazmadan inanılmaz bir web sitesi oluşturmanıza izin verir. Ancak, tasarımlarının faydalarını dikkate almak için burada değiliz. Bunun yerine, diğer önemli karşılaştırmalara odaklanıyoruz – Divi ve Elementor Performansı. Basitçe söylemek gerekirse, hızlı yüklü bir WordPress sitesi oluşturmanıza yardımcı olmak için Divi veya Elementor daha mı iyi? Sonuçta, harika görünen bir web sitesine sahip olmak savaşın sadece yarısıdır – daha iyi kullanıcı deneyimleri sunmak, dönüşüm seviyenizi artırmak ve SEO sıralamalarınızı en üst düzeye çıkarmak için hızlı bir şekilde yüklenmeniz gerekir.
Bu soruyu cevaplamanıza yardımcı olmak için, Divi ve Elementor kullanarak birkaç doğrudan performans testi yapacağız. Her aracı birkaç testten test edeceğiz ve hızlarını tek tek karşılaştırmaya çalışacağız. Daha sonra, diğer birkaç karşılaştırma noktasını da tartışacağız ve daha sonra hem eklentileri nasıl hızlandırabileceğiniz ve yükleme sürenizi ikiye nasıl kesebileceğinizle ilgili birkaç ipucu ile bitireceğiz. Notlar – Bu karşılaştırmayı başlangıçta Ocak 2021’de yayınladık. Ancak Divi ve Elementor, Google sayfası deneyiminin yenilenmesini dikkate almak için performanslarını artırmak için birçok geliştirme çalışmasına odaklandılar.
Sonuç olarak, iki yapımcı “ağırlarını” azaltmak ve yükleme süresini hızlandırmak için iyi bir iş çıkardı, bu yüzden testlerimizi tamamen yeniden değerlendiriyoruz ve bu gönderiyi tamamen Kasım 2021’de güncelliyoruz. Divi ve Elementor Site hızı açısından Divi ve Elementor’u test ederken birçok değişken vardır. Bu nedenle, gerçek verileri almadan önce, görüşümüze göre, önce testlerin nasıl çalıştırılacağını hazırlamak daha iyidir. Toplamda, her aracı dört farklı senaryoda test edeceğiz. Neden dört? Çünkü bunun bize bu değişkenleri yakalamak ve Divi ve elementlerin performans açısından nasıl karşılaştırıldığını anlamanıza yardımcı olmak için en iyi fırsatları verdiğini düşünüyoruz. Fikir, herhangi bir widget/modül eklemeden önce bile her eklentinin “ağırlığını” görmektir. Hem Elementor hem de Divi, 2021 güncellemelerinde gereksiz yükleme varlıklarından kaçınmayı vurguladı, bu nedenle bu sayfanın oldukça hafif olması bekleniyor. Senaryo #2 İkinci senaryoda, modülleri/widget’ları kullanarak bazı gerçek içerikler ekleyeceğiz. Bu zor bir kısımdır çünkü her araç farklı içerik öğeleri koleksiyonuna sahiptir.
İşleri olabildiğince adil tutmaya çalışmak için, her yapımcıda eşdeğer bir widget kullanacağız. Eğer merak ediyorsanız, ekleyeceğimiz şey budur:
Acordon (iki parça)
Top
Sayı sayımı
İletişim Formu
Fiyat Tablo (Bir Paket)
Yukarıdaki iki senaryo için WP Rocket vs WP roket yok, iki test seti çalıştıracağız: performans optimizasyonu olmadan bir test. Yani, sadece sayfa yapımcılarını yüklüyoruz.
WP roketli bir test etkinleştirilir ve etkin dosya optimizasyonu özelliği.
WP Rocket 3.9’da, sayfa üreticisi tarafından üretilen CSS ve JavaScript’i optimize etmek için mükemmel işler yapabilecek birkaç yeni özellik ve iyileştirme yayınladık:
Kullanılmayan CSS’yi silin – Bu, sayfa sayfasına göre gereksiz CSS’yi silmenizi sağlar. Sayfa Maker eklentisi, varsayılan olarak gerekli olmayan çok sayıda CSS ekleyebilir, bu nedenle bu iki yapımı azaltmanın iyi bir yoludur.
JavaScript Yürütme işlemini erteleyin – Bu, tüm JavaScript dosyalarını kullanıcı etkileşimlerine geciktirmenizi sağlar, bu da ilk yükleme sürenizi (ve dolayısıyla en büyük içerik boya sürenizi) hızlandırır.
Aşağıdaki verilerde göreceksiniz, ancak bu özellikler, Rocket WP önbellekleme ve diğer optimizasyon özellikleri ile birlikte elementlerde ve divi’de büyük bir artış sağlayabilir.
Diğer hanehalkı, verilerinizi göstermeden önce Tata Graha’nın diğer ayrıntılarını detaylandırıyor! İlk olarak, sayfanın kendisinin yapımcısı bir konfigürasyon vardır. Test edeceğiz:
Elementor (sürüm 3.4.7) + Elementor Pro (sürüm 3.4.2), temamızın stilini devralın (Elementor’un varsayılan kuvvetini kullanmak yerine). Divi özelliğine uyacak bir Elementor Pro’ya ihtiyacınız olduğu için, yükleyecek kadar adil hissediyoruz.
Divi Builder eklenti sürümü (sürüm 4.12). Birçok kişi divi temaları kullanırken, görüşümüze göre, eklentileri ve eklentileri karşılaştırmak adildir, çünkü ilk temel değilse aynı olmayacaktır. Temayı kullanmak istiyorsanız, Divi temamızın performans analizini görebilirsiniz. Elementor hız deneylerini de etkinleştiririz (çıktı DOM’ları optimize edilir, yükseltilen varlıkların yüklenmesi ve artan CSS yüklenmesi ), Elementor ile yeni bir site oluşturursanız yapılmalıdır. Elementor → Ayarlar → Deneylerini açarak etkinleştirebilirsiniz. Bu, bu yazıyı yazdığımızda teknik olarak hala bir alfa/beta özelliğidir, ancak yeni bir sitede kullanırken sorun yaşamamalısınız.
Ayrıca, test sitemiz:
En hızlı WordPress temalarından biri olan GeneratePress temasının ücretsiz versiyonunu kullanarak
Nginx’in tüm yığınlarını kullanarak DigitalOcean Damlacıkları ile aylık 5 $ barındırıldı
Ve performans verilerini toplamak için WebPagetest’i aşağıdaki yapılandırma ile kullanacağız:
İPhone 8 olarak test edin – Google hücresel endekse taşındığından, hücresel performans sonuçlarına odaklanacağız.
Sınırlı bir LTE bağlantısı kullanın (12 Mbps, 70 ms RTT) – Gerçek dünyada, kullanıcı WiFi’ye bağlıysa yükleme süresinin daha hızlı olması muhtemeldir.
Dokuz ayrı test çalıştırın ve tek test değişkenliğini ortadan kaldırmak için medyan değeri alın.
Referans olarak, bir sayfa üreticisi veya roket WP yüklemeden önce, test sitemiz aşağıdaki ayrıntılara sahiptir:
İlk bayta 0.283 saniye süresi
Medyan 0.444 s en büyük içerikli boya.
0.586 S Ortalama süre tamamen şarj edildi
HTTP için 7 istek
Dosya Boyutu 28 KB
Divi vs Elementor Performansı Şimdiye kadar, verilere gidelim! Senaryo #1: Yalnızca bu ilk test metni, her bir yapımcının metin widget’ını kullanarak sadece bir satır metin eklediğimizdir. Bu sayfa çok temeldir – bir kez daha, bu sadece her araç için bir tür “temel ağırlık” elde etmek içindir. Bu sayfa ekranıdır: yalnızca bir sayfa yapımcısı eklentisi kullanırken verileri takip eden birkaç metin (WP roketi olmadan):
>>
>
> Yapabilirsin Şimdi ikisi arasında küçük bir fark olduğunu görün. Önbellekleri uygulamak ve CSS ve JavaScript’i optimize etmek için WP Roket kullanıyorsanız, her ikisinin de hala eşit olduğunu göreceksiniz. Bununla birlikte, WP roketi sayfanın boyutunu büyük ölçüde azaltabilir ve iki yapımcıdan en büyük boya süresini ikiye ayırabilir.
/td>
Senaryo #2: İçerik Sayfası Şimdi, biraz içerik ekledikten sonra testi çalıştıralım. Bir kez daha, her üreticiye eklediğimiz şey budur:
Acordon (iki parça)
Top
İletişim Formu
Tanıklık
Fiyat Tablo (Bir Paket)
Bu, Elementor sürümünün görünümüdür:
Bazı içeriğe sahip elementler ve Divi: Divi’de görülen şeydir: Bazı içeriklerle, sayfalardan birinin herhangi bir tasarım ödülünü kazanacağından şüpheliyiz, ancak her ikisi de kullandığımız modüller açısından neredeyse aynıdır.Yalnızca bir sayfa yapımcısı eklentisi kullanırken aşağıdaki veriler (WP roketi olmadan):
Bir kez daha, bu turdaki elementten en büyük ağrılı divi oluşturucu zamanına rağmen, önceki test sayfasıyla aynı temel eğilimi görebilirsiniz. eleman
1.034 saniye
0.342 s
Td>
158 kb
Bölüm
0.768 saniye
0.377 saniye
td>
149 KB
Ancak, her iki sayfayı da WP roketiyle optimize ederken, her iki sayfada da dosya boyutlarında aynı büyük düşüşü görebilirsiniz. Dahası, içerik içeriğinin en büyük içeriği WP roketiyle neredeyse aynıdır. Elementorlardaki düşüş çok önemlidir çünkü WP roketi ile LCP süresi ~ WP roketi olmadan zamanın üçte biri:
lcp
ttfb
istek http
dosya boyutu
elementor + roket wp
0.373 saniye
0.248 saniye
5
23 kb
divi + roket wp
0.377 saniye
Sonuç: Elementor divi'den daha hızlı mı? Bu yazıyı ilk yazdığımızda ve Testlerimizi Ocak 2021'de gerçekleştirdiğimizde, Elementor'un performans açısından Divi'ye kıyasla çok az avantajı vardı. Bununla birlikte, Fretend Divi'nin performansında büyük bir artış sağlayan Divi 4.10 Ağustos 2021'in piyasaya sürülmesi sonucunda birçok şey değişti. Şimdi, Divi, yalnızca her tasarım için gereken minimum kaynakları yükleyerek çok daha iyidir, bu da çok daha hafif bir sayfa boyutu üretir. Elementor ayrıca Elementor Hız Deneyi ile Elementor'da etkinleştirdiğimiz bu dinamik varlığın yüklenmesi/optimize edilmesi türünü denedi. Öyleyse iyileşmenin sonuçları nelerdir?
Üç sonuç çıkarabiliriz: İlk sonuç - hem Elementor hem de Divi 2021'de büyük bir performans iyileştirmesi yaptı, bu da çok iyi.Her iki eklenti de Ocak 2021'den önemli ölçüde daha hafiftir. Farkı görmenize yardımcı olmak için, Ocak 2021 testinden ve Kasım 2021 testinden optimize edilmeyen temel metin sayfası dosyasının boyutu:
Elementor (Ocak 2021)
Elementor (Kas 2021)
divi (Ocak 2021)
divi (Kas 2021)
130 KB
Bir bütün olarak, her iki eklenti de övgüyü hak ediyor şişkinliği ortadan kaldırmak ve sayfa boyutunu azaltmak için. İkinci sonuç, Kasım 2021'de Elementor ile Divi arasındaki önemli performans farkını belirlemenin zor olduğudur. Her iki üretici de eşdeğer sayfalar için neredeyse aynı dosya boyutuna sahiptir. Divi Builder biraz daha küçüktür ve içerik sayfasında biraz daha iyi olan en büyük boya içeriğine sahiptir. Genel olarak, çarpıcı performans farklılıkları olduğunu söylemek zor. Üçüncü Sonuç - WP roketi, özellikle sayfaya göre kullanılmayan CSS'yi silmenizi ve JavaScript yürütmesini geciktiren WP roket özelliği sayesinde her iki sayfada da büyük bir artış yapabilir. Elementler ve Divi, yalnızca her tasarım için gereken kaynakları yükleyerek daha iyi olsa da, hala silinebilen veya ertelenebilen birçok komut dosyası/kod vardır. Bu özellik ile WP Rocket, ikinci sayfa oluşturucunun boyutunu ~ 150 kb'den sadece ~ 25 kb'ye düşürebilir. Daha da önemlisi, performanstaki bu gelişme, tüm testlerde en büyük eşleştirme boyası süresini de büyük ölçüde etkiler. Örneğin, içerik sayfasını test ederken, WP roket en büyük Elementor içerik boyasının süresini 1.034 saniyeden 0.373 saniyeye ve Divi süresini 0.768 saniyeden sadece 0,377 saniyeye indirdi.
Divi ile Elementor arasında seçim: Ana özellikler, SEO ve fiyat, görüşümüze göre performansı bir WordPress sitesi oluştururken en önemli hususlardan biri olmasına rağmen, bu tek kişi bu değildir. Aşağıda, bu yazıyı tamamlamadan önce diğer bazı önemli farklılıkların kısa bir özetidir. Divi ve Elementor'ın daha önce ana özelliği, bunun özellikler hakkında bir yazı değil, performans hakkında daha fazla bilgi olduğunu söylüyoruz. Bununla birlikte, bu, yüksek seviyeli özelliklerde denklemlerin ve farklılıkların hızlı bir şekilde özetidir. Bu iki araç arasında aynıdır: görsel arayüz, sürükleme ve gevşek Satır metninde düzenlemeÇok ayrıntılı stil/tasarım seçeneği - her ikisi de tasarım esnekliği açısından ilk iki sayfa üreticisi olabilir
Destek oluşturma tam temaları
Dinamik içerik desteği (özel alanlar dahil)
Tema yapımı için woocommerce desteği
Elementor daha büyük olmasına rağmen canlı üçüncü taraf genişletme piyasası
Divi şablon kütüphanesi daha büyük olmasına rağmen, daha önce yapılan kütüphane şablonları
Ve işte bazı üst düzey farklılıklar:
Elementor Pro varsayılan açılır üreticiyi içerir ve Divi değildir (Sembulan binasını Divi'ye eklemek için üçüncü taraf bir aracı kullanabilirsiniz)
Divi tema ve eklenti sürümünde gelir. Elementor kendi merhaba temasını sunuyor.
Divi, tasarımınızı optimize etmek için varsayılan A/B testi sunar (A/B elementini üçüncü taraf eklentisi/aracıyla test edebilirsiniz)
Divi, Elementor yalnızca ön uç düzenleme sunarken ön uç ve arka uç düzenleme sunar - bazı insanlar belirli durumlarda arka uç seçeneklerine sahip olmayı sever.
Divi ve Elementor SEO için iyi mi? Divi ve Elementor arasındaki SEO etkileri açısından, pek çok fark görmeyeceksiniz. Bu araçların her ikisi de popüler SEO eklentileri aracılığıyla SEO ayarlarını kontrol etmenize izin verecek ve her ikisi de sayfaların ve SEO'nun yükleme süresi ile ilgili sorunlar yaşamayacaksınız. Konforda bazı farklılıklar vardır. Örneğin, Yoast SEO, Elementor Arayüzünden Yoast SEO ayarlarını/analizini görmenizi/düzenlemenizi sağlayan özelliklere sahiptir. Bu, özellikleri değiştirmez (önceki Elementor ile kullanabileceğiniz) - sadece daha rahat hale getirir, çünkü artık Elementor'daki Yoast SEO ayarlarını kontrol etmek için olağan düzenleyiciye dönmenize gerek yoktur. Ancak, genel olarak, Divi ile oluşturulan WordPress sitesini sıralayabilirsiniz ve aynı zamanda oluşturulan siteyi de endişelendirmeniz gerekmez. SEO WordPress için seçtiğiniz sayfanın eklenti üreticisinden çok daha önemli faktörler vardır. Elementor ve Divi'nin maliyeti nedir? Elementor, ücretsiz bir sürüm sunan tek seçenektir, bu da sıfır bütçeniz varsa hemen daha iyi bir seçenek haline getirir. Ücretsiz sürümle bile, hala çok esnektir. Elementor Pro vs Divi'nin fiyatını karşılaştırma açısından (zarif temalar üyeliği ile): Pro Elementor, yalnızca bir sitede kullanmanız gerekiyorsa daha uygun fiyatlıdır. Sadece 49 $ 'dan başlıyor.
Birçok sitede kullanmanız gerekiyorsa Divi daha uygun fiyatlıdır. 89 $ ile sınırsız web sitelerinde kullanabilirsiniz. 99 $ Pro Elementor paketi yalnızca üç sitede kullanıma izin verir ve daha yüksek bir site sınırı, 1.000 sitede kullanılmak üzere 999 $ 'a ulaşabilir. Buna ek olarak, Divi ömür boyu bir lisans sunarken, Pro Elementor sadece bir tane olarak gelir - Yıllık Lisans. Bir kez 249 dolarlık bir ödeme için, Divi'yi sınırsız sitelerde kullanmak için ömür boyu destek / yenileme elde edersiniz, bu da değer perspektifinden yenilmesi zordur. 2021'deki bir dizi performans iyileştirmesi sayesinde öğeler ve divi nasıl hızlandırılır, elementler ve divi varsayılan durumlarında çok daha hızlı hale gelir. Her ikisi de önemli ölçüde "daha yalın"
ve her ikisi de sadece gereken yerlere varlık yükleyerek daha iyi iş çıkarır. Bununla birlikte, diğer WordPress performansının en iyi uygulamasını uygulayarak her iki eklentiyi daha hızlı hale getirebilirsiniz. Divi ve elementleri hızlandırmanın en kolay yolu için WP roketini kullanabilirsiniz. Test verilerinde görebileceğiniz gibi, WP roket, elementler veya divi kullansanız da büyük bir artış yapabilir. WP Rocket'in yeni özelliği, çekirdek web canlılarını artırmaya odaklanmıştır ve divi ve elementleri optimize etmek için çok yararlıdır, çünkü bu özellikler gerekli olmayan CSS ve JavaScript'i silmenize veya geciktirmenize olanak tanır. Özet için bu, her iki test senaryosunda WP roketinden önce ve sonra verilerdir:
