Oksijen Performansı ve Elementor 2022 (Hız Testi ve Ana Özellikler)
Bir sonraki WordPress sitenizi oluşturmak için oksijen ve element arasında şüpheli misiniz? Bizimle kalın: Karar vermenize yardımcı olacağız. Herhangi bir web sitesinin amacı, mümkün olan en kısa sürede hoş bir keşfetme deneyimi sunmaktır. Ve optimum kullanıcı deneyimi sağladığınızdan emin olmak için, performansı etkilemeyecek doğru WordPress sayfa üreticisini seçmek çok önemlidir. Oksijen genellikle bir temaya ihtiyaç duymayan geliştiriciler için eksiksiz bir site düzenleme aracı olarak görülür. Kullandığınız temayı “devre dışı bırakma” bile. Geliştiriciler için yapıldı ve eklenti arayüzü boyunca göreceksiniz.
Elementorlar daha arkadaş canlısıdır, ancak başlıklar ve altbilgiler de dahil olmak üzere tüm sitelerinizi organize etme imkanı da olacaktır. Birçok tema geliştiricisi demetler sunuyor çünkü elementleri gösterileri için sütun olarak kullanıyorlar ve bu da onu dünyanın en yaygın kullanılan sayfa yapımcılarından biri haline getiriyor. Elementor yaklaşık 7 milyon WordPress sitesini destekliyor. Bu yazıda, gerçek bir vaka senaryosuna dayalı bir performans denetimi yapacağız. Ayrıca ana özellikleri tartışacağız ve her sayfa üreticisini hızlandırmak için takip edebileceğiniz bazı yüksek seviyeli teknikleri paylaşacağız.
Pekala, hangi sayfa yapımcılarının WordPress sitenizi daha hızlı çalıştıracağını öğrenmenin zamanı geldi: oksijen mi yoksa element mi? Bölünelim! Oksijen ve element (hücresel yaklaşım) için performans testi senaryoları, cep telefonlarındaki performans açısından oksijen ve elementlerin nasıl karşılaştırıldığını göstermek için üç ayrı denetim yapacaktır. Neden özellikle mobil cihazlarda? Çünkü daha kolay masaüstü optimizasyonu için hücresel optimizasyon genellikle göz ardı edilir. Duyarlı tasarım için yüksek bir bütçe harcarsanız, ziyaretçilerinize mümkün olduğunca çabuk deneyim sunmak mantıklıdır. Dahası, daha düşük fiyatlar birçok kullanıcının bilgisayarlara değil sadece cep telefonlarına sahip olmasına neden oldu. Kimsenin pazarlama stratejinizden çıkmasına izin vermeyin. Test edeceğimiz temalar ve eklentiler: Tema: Elementor (v 3.7.6) tarafından Hello Tema Ücretsiz WordPress için ücretsiz ve hızlı temalarımızın listesine başarılı bir şekilde girdi. ÖNEMLİ NOT: Oksijen WordPress Tema Sistemleri: Aktif Temalar hiç yüklenmemiştir ve sitenizin performansı veya görünümü üzerinde hiçbir etkisi yoktur. Oksijenin temayı içermediğini görmek, her şeyi adil tutmak için Elementor tarafından geliştirilen “Merhaba” Süper Işık temasını kullanıyoruz. Eklenti:
Oksijen (v.3.9)
Elementor Pro (V.3.5.2) – Elementor ücretsiz bir sürüm ve Pro ile birlikte gelir.
Karşılaştırmamızın her ikisinin de sunduğu özellikler açısından adil kalması için, oksijeni tam bir site düzenleme (FSE) içeren Elementor’un Pro sürümü ile karşılaştıracağız.
Elementor’un sitenizin hızını nasıl artırabileceğini bilmek istiyorsanız, özel makalemizi görmenizi öneririz. Hücresel KPI ve Kagoogle Pagespeed Insights (Hayati Web Çekirdeği, Hız Dizini, Total Cat Consultful ve Etkileşimli Zaman Endeksi)
WebPagetest (Tam Yüklü Zaman, Sayfa Boyutu ve Mobiller’de HTTP İsteklerinin Sayısı – Fransa’daki sunucularla iPhone X)
Makalemizde, her sayfa üreticisi aynı içerik ve senaryo ile karşılaştırılacaktır, böylece aynı karşılaştırma olabilir.
Senaryo #1 – Yalnızca bir metin satırı ile sayfa üreticisi
Modüller veya diğer diğer tasarımlar gibi her türlü ağır içerik eklemeden önce her eklenti için performans puanını göreceğiz. Sitemizdeki oksijen ve Elementor eklentilerini bir metin satırıyla etkinleştireceğiz. Sonuçların iyi olduğunu umuyoruz çünkü neredeyse hiç içerik yok.
Senaryo #2 – Biraz içerik ekleyin
İşleri olabildiğince adil ve dengeli tutmak için, iki yapımcı için kullanılabilir aynı inşa öncesi modülünü ekleyeceğiz. Not: Elementor “widget” modülünden bahsederken, oksijen “kompozit eleman” terimini kullanır. Denetimimiz için, yalnızca genel unsurları kullandığımız bir test sitesi oluşturuyoruz:
Kahramanlar (250 kb ağırlıklı aynı resim ile)
Düğme (bir bağlantı ile harekete geçme davetiyesi)
“Hakkında” bölüm için 1 metin modülü (aynı içeriğe sahip)
İki resim (her biri 189 kb ağırlığındadır)
Simgelerin Listesi (metin satırları olan 4 simge)
Bir Chordeon (3 soru ve cevap içeren SSS)
3 müşteri incelemesi (her biri 116, 104 ve 108 kb ağırlığına eşit 3 görüntü ile
Fiyat Tablosu (İki Paket)
Senaryo #3 – Bazı İçerik + WP Roket
Bulgularımıza bakalım:
KPI’yı görsel olarak aşağıdaki tabloda özetledim:
Hız Endeksi
0.8 saniye
1.0 saniye
Cat Contentful En Büyük
0.8 saniye
1.1 saniye
td>
http
Yalnızca metin, oksijen oluşturucu ve element ile performans açısından oldukça benzerdir. Elementors, oksijenden daha fazla HTTP isteği yapar (oksijen için sadece 7'ye karşı elementler için 13 istek). Daha fazla içerik eklemek ve denetimin gelişeceği görünümlü olacaktır. Senaryo #2 - Biraz içerik ekleyerek hatırlatma olarak, modüle benzer iki sayfa iki sayfa yaptık. Bir kez daha, iki URL'imizi Google PagePeed Insights ve WebPagetest'e koyduk. Aşağıdaki sonuçlar:
Test sitelerimizin her ikisi de yavaşladı, bu da biraz içerik eklediğimiz için tahmin edilebilir. Google PagesPeed Insights, oksijen (77/100) ve Elementor (55/100) için turuncu değer verir. Metrik oksijen performansı elementten daha iyidir ve aşağıdaki tablodaki ana metriği özetledim:
Genel değer
77/100
55/100
>
>
İçeriğin en büyük içeriği
4.6 s (kırmızı çekirdek web)
10.5 s (kırmızı çekirdek web)
</s
6.5 saniye
Toplam engelleme süresi
30 mdtk
80 ms
Kümülatif Düzen Değiştirme
0.008
0
2.989 saniye
> Sonuç Birincisi: Oksijen elementten daha hızlı mı? Kısa cevap evet, oksijen elementten daha hızlı. Elementor sayfasının yüklenmesi daha uzun sürer: oksijen sayfası için 3 saniye karşısında neredeyse 4 saniye.
Çekirdek Web canlıları ile ilgili olarak, oksijen de elementörden daha iyi performans gösterir.Oksijen en büyük içerikli boya (LCP) 4.6 saniyedir (kırmızı), ancak element daha da kötüdür: 10.5 saniye (kırmızı).Test sürecimizin son adımına, güçlü önbellek eklentimizin kurulumuyla 3. senaryoya geçmenin zamanı geldi: WP Rocket.Senaryo #3 - Bazı İçerik + WP Roket WP Roketi etkinleştirirken, iki test sitem Mobile'da Yeşil Bölgeye taşındı!En önemli artışlardan biri tam yükleme süresi metriktir: oksijen için 2.899 saniye ila 0,77 saniye ve element için 3.998 saniyeden 0.896 saniye.Ve daha az önemli değil: Hayati web çekirdeğim Rocket WP ile kırmızıdan yeşile değişir. Td>
İşte WP roketi olan ve olmayan inşaatçıyı gösteren son karşılaştırma tablosu:
</s
Td>
İlk açlık boyası
3.1 saniye
1.0 saniye
6.3 saniye
1.6 saniye
İçeriğin en büyük içeriği
3.7 saniye
>
4.6 saniye
1.2 saniye (yeşil hayati web çekirdeği!)
10.5 saniye
1.6 saniye (yeşil hayati web çekirdeği!)
İnteraktif için toplam süre
1.0 saniye
6.5 saniye
3, 5 saniye
Toplam engelleme süresi
30 mdtk
0 ms
80 ms
0 ms
Tam zamanlı doldurulur
2,989 saniye
0.770 saniye
3.998 saniye
0.896s
İstek Http
23
4
21
7
Sonuç Ana Performans WP Roketini kullanırken: WP roketi sayesinde, oksijen ve elementler için önemli bir performans iyileştirmesi gördük, yani: biz: Oksijen için 100/100 ve Google PagePeed Insights'daki Elementor için 99/100 puan aldı
Deniz Feneri ile işaretlenen tüm sorunlar, aşağıda görebileceğiniz gibi "dereceli denetim" bölümünde yer almaktadır.
Ekran görüntüleri nasıl okunur?
WP Rocket ve Imagy #Penafian'ı Görüntü Performansı Hakkında Kullanarak Olağanüstü Performans: Google PageSpeed Insights'da "Yeni Nesil Formatında Görüntüler Sunmak", "Görüntüleri Verimli Kodlama" ve "Görüntüleri Doğru ile Ölçme" için sadece üç sorunum var. Görüntülerimi WebP'ye sıkıştırmak ve dönüştürmek için Imagify eklentisini etkinleştiriyorum: sorunu eksik hale getiriyor. Çekirdek Web Vitalleri Google PagePeed Insights'ta yeşil olursunuz. .
Oksijen ve Elementor ile oluşturulan herhangi bir web sitesini hızlandırmak için WP roketli oksijen ve elementleri nasıl hızlandırır, Lighthouse kodunuzu ve resminizi optimize etmek için güçlü önbellek eklentilerinin kullanılmasını önerir:
Diyagnostik "Verimli Önbellek Politikası ile Statik Varlıklar Sunmak" - Kaynak: PSI Neyse ki, WP Rocket, performansı iyileştirmek için Deniz Feneri ile işaretlenen neredeyse tüm kutuları kontrol eder. Performans denetimimizde görüldüğü gibi, WP Rocket test sitelerimizi önemli ölçüde hızlandırıyor (PSI'da elementler ve oksijen ile 99/100 ve 100/100'e yükseldik). Aslında, WP Rocket Web performansının en iyi uygulamalarının% 80'ini otomatik olarak uygular. Daha ileri gitmek için, oksijeni ve elementleri hızlandırmaya yardımcı olan en güçlü özellikler şunlardır: önbellekleme ve GZIP - WP roket sıkıştırması, hücresel ziyaretçiler de dahil olmak üzere tüm sayfaları önbelleğe alınarak güçlü bir önbellek eklentisidir. Ayrıca, aktivasyon sırasında otomatik GZIP sıkıştırması sayesinde bant genişliği kullanımını azaltır.
Mobil cihazlar için önbellekleme özellikleri - Kaynak: WP Roket Eklentisi
Lazyload - Medya sekmesinde, tüm resimlerimize (referanslar, kahraman başlıkları vb.) Yavaş yükleme uyguluyoruz. Bu optimizasyon tekniği, yalnızca kullanıcı tarafından gerçekten görülen görüntüleri yüklemeyi amaçlamaktadır.
Tembel Yükleme Özellikleri ve Görüntü Boyutları - Kaynak: WP Roket Eklentisi Not: Deniz Feneri, görüntünüz için yeni nesil formatın (WebP gibi) kullanılmasını önerir. Görüntünüzü sıkıştırmak ve bunları WebP'ye dönüştürmek isteyip istemediğinizi hayal edin.
Oksijen üreticisi, felsefe ile inşa edilmiştir, sadece ihtiyaç duyulan şeyleri içerir.
Bu, şişmiş kodları önlemek için çok temiz bir HTML kodu oluşturur. Diğer inşaatçılar, örneğin H1, H2 başlığı gibi basit unsurlar için bile çok sayıda div yuvalama yaparlar. Oksijen düzenlemesinde bir "şişkinlik" sekmesi vardır:Şişkin Kaldırma - Kaynak: Oksijen CSS önbellek özelliği de varsayılan olarak etkinleştirilir:
Önbellek CSS - Kaynak: Oksijen Varsayılan Performans Özelliği (Elementor) Elementor ayrıca, gereksiz kod olmadan dinamik varlıkları yükleme ile web sitenizi daha hızlı yüklemek için özelliklerle birlikte gelir. Elementor 3.0'dan bu yana, dinamik CSS yükleme ve oluşturma mekanizması arttırılmıştır.
Sayfa ilk kez yapıldığında ve ziyaret edildiğinde, Elementor tüm öğeleri dinamik değerlerle yaptı. Bu, örneğin çok fazla içerik ve dinamik stil yüklemesi gereken ACF ile inşa edilmiş web siteleri için iyidir. Benzer Ana Özellikler
Görsel sayfa yapımcıları, sezgisel bir arayüze kolayca sahiptir. İki yapımcı için solda özel unsurlar (widget ve modül) bulunur:
Herhangi bir kodlama olmadan yayınlar ve WordPress sayfaları tasarlama yeteneği - her iki üretici, CSS seçeneği ile "Devam" sekmesi dahil her modül için güçlü bir stil sunar.
Oksijen Düzenleme Arayüzü
İçeriğinizi yükleyebileceğiniz ve değiştirebileceğiniz etkileyici duyarlı şablonlar kütüphanesi.
Kanopi, kayar çubuğu, harekete geçmek için davet düğmesi, formlar, referanslar, referanslar ve daha fazlasını WordPress sitenize eklemek için tam olarak ayarlanabilen önceden yapılmış kısım.
Her iki kütüphanenin de kullanımı kolaydır. Örneğin, oksijen ile önce endüstriyi seçmelisiniz. Ardından, bir tam sayfa veya bir kısmı içe aktarmayı seçebilirsiniz:
Daha önce oksijenle yapılmış sayfalar ve parçalar - Kaynak: Oksijen Sayfa Oluşturucu
Woocommerce, sayfa 404 ve tek ürün düzeni gibi özel türler ve arşivler için özel şablonlar yapma yeteneği.
SEO - Oxyjen, içeriğinizin her bir parçası için SEO puanları almak için Yoast ve Seopress ile doğuştan bir entegrasyona sahiptir (ayrıca üçüncü Party Premium entegrasyonu ile RankMation ile birlikte çalışır). Bir element kullanmak, Yoast veya RankMath ile tam entegrasyon sayesinde teknik ve sayfa içi SEO'nuzu geliştirmenize yardımcı olabilir.
WooCommerce Entegrasyonu - Bu ayar, mağaza sayfasının başlangıcından, ürün türü sayfasının, ürün kategorisinin, alışveriş sepetinin, müşteri hesabı vb. Kısacası, özel bir WooCommerce bloğu ile dükkanınızla ilgili her şey. Bu özellikler Pro Elementors ile birlikte gelir, ancak oksijen için premium bir WooCommerce eklentisine ihtiyacınız vardır. Ana özellikler farklıdır
Kullanıcının hedefi biraz farklıdır - Oxygen Builder daha fazla geliştirici seçenekleri sunar, yönetilmesi çok daha kolay ve web geliştiricileri için daha ucuzdur. Elementorlar ve profesyonel öğeler, web sitelerini eğlenceli bir şekilde oluşturmak isteyen ve HTML ve CSS kodlaması hakkında çok az veya bilgiye sahip olmayan kullanıcılar için yapılır.
Not: Oksijeni "geliştiriciler için çerçeve" olarak sunuyoruz, ancak gelişmiş bir geliştiriciyseniz, bir sonraki projeniz için Pro Elementor'u kullanabilirsiniz. Tüm özellikler iyidir ve tasarımı istediğiniz şekilde değiştirebilirsiniz. İlk farkın fiyatı, oksijenle ömür boyu lisansa sahip olabilmenizdir, ancak sadece yıllık üyelik sunan bir elementle. Elementor ile fiyat, yapacağınız web sitelerinin sayısına, beklediğiniz destek seviyesine ve uzman ağ profillerinde olmak isteyip istemediğinize bağlıdır. İlk paket bir web sitesi için 49 $ ve 1000 web sitesi için 999 $ / yıl başlar. Elementor Fiyat - Kaynak: Resmi Elementor Sitesi Daha önce de belirtildiği gibi, oksijen daha fazla zaman ödeme sistemi hakkında. WooCommerce özelliğinin, Gutenberg entegrasyonunun ve kompozit öğelerin (kütüphane erişimi) kilidini açmak için nihai bir paket almanız gerekir: ömür boyu hesabı için 349 $.
