Beaver Builder ne kadar hızlı ve nasıl hızlandırılır
Bir sonraki geliştirme projeniz için Beaver Builder’ı seçerseniz WordPress siteniz hızlı olacak mı?Bizimle kalın ve sorularınıza cevap alacaksınız!İster basit ister karmaşık bir web sitesi oluşturuyor olun, Beaver Builder pazardaki en iyi çerçevelerden biridir.Bununla birlikte, gelişmiş özellikler aynı zamanda birkaç olası performans problemini gündeme getiren ağır içerik anlamına gelir.Sitenizin hızı, sitenizin boyutu ve karmaşıklığı ve web sitenizi içeren daha fazla dosya da dahil olmak üzere çeşitli faktörlerden etkilenir, daha yavaş ziyaretçiler içeriğinize erişir.
Bu yüzden Beaver Builder ile inşa edilen sitenin hızını test ediyoruz. Ardından, performanslarını biraz artırmak için uygulayabileceğiniz bazı teknik ipuçlarını paylaşacağız. Kısacası, bu makale şu soruları cevaplayacaktır: Beaver Builder ne kadar hızlı? Beaver Builder siteyi yavaşlatıyor mu? Bunu hızlandırmanın kolay bir yolu var mı? KPI’nın performansını keşfetmeden önce, Beaver Builder’ın ana ürününün kısa bir resmini verelim. – Beaver Builder Lite: WordPress.org adresinde, sayfanızdaki içeriği modüllerle kontrol eden ücretsiz sayfa yapımcıları (metin, html, başlık, simge, düğme. – Beaver Builder Pro eklentisi: Sayfada daha karmaşık içeriği kontrol eden premium sayfa yapımcısı You (Kaydırıcı, İletişim Formları, Sekmeler, Fiyat Tabloları, vb.) İnşaatçı, özel posta düzeni, arşiv üreticisi ve wooocommerce sayfa üreticisi ile tamamen dinamik bir site üreticisi haline gelir. Builder? Performans denetimimizde, Hücresel’de Beaver Builder sayfasının üreticisini (Pro eklentisi) ve Beaver Builder temasını test ediyoruz. referanslar, metinler, görüntüler, sınıflar olarak G numarası, davet düğmesi hareketleri ve görüntüleri ile eksiksiz bir ekip sunumu.
Beaver Demo Ajansı Performans Araçları: Google PagePeed Insights Cellular ve WebPagetest.org (Paris’te bulunan sunucularla iPhone X). Tam bir hücresel yaklaşım izledik. KPI ölçülür: PagePeed Insights’daki genel değer ve altı metrik. Verilerin gerçek kullanıcılara dayandığı için ilk giriş gecikmesinin (FID) ölçülemeyeceğini lütfen unutmayın. Bununla birlikte, FID ile güçlü bir şekilde ilişkili olan toplam engelleme süremiz (TBT). Ayrıca tam ücretli süreyi ve http.ayo için talep sayısını da ölçüyoruz. Denetimi çalıştırın! Beaver Builder’ın cep telefonundaki performans sonuçları oldukça iyi. Google PagePeed Insights’ta 87/100 var – puan kötü değildi, aynı zamanda yeşil alanda da değil.
lcp
/td> cls 3.0 saniye (turuncu) S tr>
tti
3.0 saniye
0
tam zamanlı
td>
istek http
44
Tüm göstergeler İyi durumda, yine de artırılabilen en büyük içerikli boya (LCP) ve ilk içerikli boya (FCP) hariç.
"Fırsatlar" ve "teşhis" bölümünü inceleyerek, oluşturmayı engelleyen kaynakları ortadan kaldırmak, kullanılmayan CSS'yi azaltmak, kullanılmayan JS'yi azaltmak ve ekran dışındaki görüntüleri geciktirmek gibi bazı optimizasyon yapabileceğimizi görüyoruz.
Sing Arayüzü - Kaynak: Beaver Builder Kullanılmayan modüller yüklenmez: Beaver Builder yalnızca belirli sayfalar için gereken varlıkları içerir ve oluşturur. Örneğin, sayfada slayt şovları kullanmazsanız, ilgili CSS/JS'yi yüklemezler. Bu, kanca ihtiyacı olmadan otomatik olarak yapılır.
Sık sık güncellenen kodlar ve eklentiler: kodları çok hafiftir ve temel performans için optimize edilmiştir. WP Rocket gibi uzmanlara daha fazla performans özelliği sunarlar. Düşük uyumluluk sorunları: Beaver Builder varsayılan bir optimizasyon özelliği sunmaz, bu nedenle tüm işlemle örtüşecek "çift optimizasyon" yoktur. Bunun yerine, Beaver Builder statik bir HTML, CSS ve JavaScript yayınladı, böylece yüklü önbellek eklentisi ile daha hızlı yüklendi.
Hücresel öncelik veren yaklaşım: Sitenizin hücresel olarak düzgün bir şekilde oluşturulması gerekir. Beaver Builder, yanıt veren düzenleme modunu kullanarak tüm siteleri tasarlamanıza olanak tanır. Bu, hücresel sitenizin yalnızca önemli unsurları içermesini sağlar - sayfa hızını ve yüksek sıralamayı korumak için ana strateji. Düzenleme modu - Beaver Builder Beaver Builder varsayılan olarak hızlı bir çerçeve haline gelmiştir. Çeşitli teknikler ve optimizasyon araçlarıyla birleştiğinde, ışık hızında içerik gönderebilirsiniz. Bakalım nasıl.
10 Performans İpucu Kod, sunucu ve görüntü optimizasyonu için herhangi bir Beaver Builder'ı hızlandırmak için Beaver Builder'ı hızlandıracaktır. Beaver Builder'ın performansını iyileştirmenin etkili yolu, metrik çekirdek web canlılarını optimize etmek ve Google PagePeed Insights önerilerini uygulamaktır. Aşağıdaki bölümde, Beaver Builder sitenizi daha hızlı oluşturmak için kullanabileceğiniz optimizasyon tekniklerinin bir listesini bulacaksınız. Her optimizasyon ipucu için, optimize edeceğiniz performans metriğini ve buna göre ele alacağınız sayfa içgörü önerilerini inceleyeceksiniz.
1. JS Performansını Optimize Edin WordPress sitenizi nasıl optimize edebilirsiniz JavaScript Kod? Kullanılmayan JS'yi silin ve gerekli olmayan JS'yi geciktirir (tüm işlevler aynı anda kullanılamaz olmalıdır). Komut dosyasının eşzamansız yüklenmesini veya JS'nizi yalnızca sayfa yüklendikten sonra oluşturmasını veya oluşturulmasını istiyorsanız async veya erteleme özniteliklerini kullanın: // örnek.js işlevi, sayfa oluşturma // // örnek.js işlevi sayfa bittikten sonra
Aşağıda, senkron ve eşzamansız varlıklar arasındaki farkı görebilirsiniz. JS senkronize önceki varlıkların yüklenmesini beklemelidir, ancak JS Asenkron komut dosyasını aynı anda yükleyebilir. Sycron ve Asenkron - Kaynak: Son Keycdn, ana konuyu uzun süre tekelleştiren uzun JS görevlerinden kaçınmalısınız. donma "ekran. Çekirdek Web Veri Metrikleri artar:
En büyük içerikli kedi (LCP) - "Render engelleme kaynaklarını ortadan kaldır", "Kullanılmayan JavaScript'i Azaltın". İlk Giriş Gecikmesi (FID) - "JavaScript Yürütme Süresini Azalt".
Metrik deniz feneri artar: Toplam engelleme süresi (TBT). 2. Kullanılmayan CSS'yi silin veya stil sayfasında kullanılmayan kuralları kaldırarak CSS teslimatını optimize eder ve üst gaga içeriği için kullanılmayan CSS'yi geciktirerek, sayfa yüklemesinde bayt atan ağ etkinliğini azaltabilirsiniz. CSS teslimatının optimize edilmesi, önemli CSS teknikleri ile oluşturma süresinin arttırılması ve oluşturulmayı engelleyen CSS hatalarını ortadan kaldırmak anlamına gelir. Bu tekniğe, Beaver Builder ile web sitenizin açılış saatini hızlandırmak için önemli sayfa öğelerinde "CSS Inlining" denir. Basit İngilizce'de, önemli CSS'nizi sayfanın başında HTML ile karıştırırsınız: CSS Hizalama CSS metrik çekirdek web canlılarının artırılmasını optimize etmek için önemlidir: en büyük içerik boya (LCP) - "Oluşturma engelleme kaynaklarını ortadan kaldır",, "Kullanılmayan CSS'yi azaltın". Metrik Deniz Feneri Arttı: İlk İçerik Boya (FCP) - "Web yazı tipi yüklemesi sırasında metnin görünür kaldığından emin olun", "Kullanılmayan CSS'yi azaltın". 3. Kodunuzu küçük ve birleştirin Kod dosyanızı en aza indirgemek, web sitesi içeriğinizin boyutunu azaltabilir ve bu da yükleme süresini hızlandırır. CSS ve JS dosyalarını artırma ve birleştirme Beaver Builder'ı daha hızlı hale getireceksiniz. Kodunuzu birleştirerek Birkaç farklı CSS dosyasını yalnızca bir CSS dosyasıyla değiştirerek tarayıcı tarafından yapılan HTTP isteklerinin sayısını azaltmaya çalışın.
CSS ve JS dosyalarınızı manuel olarak düzenlemekte rahatsanız, minifycode.com gibi çevrimiçi araçları kullanabilirsiniz. En kolay ve en güvenli yol, CSS ve JS'yi sizin için birleştirerek, daralarak ve sıkıştırarak sitenizi hızlandıran WP roketini, WordPress eklentilerini kullanmaktır. Metrik Çekirdek Web Citals Arttı: En Büyük İçerik Boya (LCP). Metrik Deniz Feneri Arttı: İlk İçerik Boya (FCP) - "CSS", "JS". 4. CSS ve JS'nin arşiv sayfasına yüklenmesini önleyin En uygun performansı sağlamak için arşiv sayfasına (eski blog yayınları, özel yayın şablonları vb.) Yüklü CSS ve JavaScript dosyalarını önlemelisiniz. Bunu yapmak için, aşağıdaki metin satırını kopyalayarak/yapıştırarak bu kodu function.php file.php kunduz güzelliğine ekleyin: if (is_assip ()) {remove_action ('wp_enqueue_scripts', 'flBuilder :: layout_styles_scripts'); } 5. Görüntünüzü Optimize Etme Görüntünüzü optimize etmek, kaliteyi düşürmeden ve WebP gibi yeni nesil formatı kullanarak en küçük dosya boyutunu elde etmek anlamına gelir. Image eklentileri, Beaver Builder sitesinde kullanılan resimlerinizi sizin için otomatik olarak optimize edebilir. Ardından, bir genişlik ve yükseklik özelliği eklemeniz ve her cihaz için doğru görüntü boyutunu sunmanız gerekir. Optimize edilmiş görüntüler daha hızlı yüklenir ve daha az hücresel veri kullanır. Beaver Builder ile bir sayfa oluşturduğunuzda, "Duyarlı Düzenleme" moduna geçin ve aşağıda gösterildiği gibi hücresel olarak doğru boyutu (360 px) gönderdiğinizden emin olun:
Beaver Builder ile görüntüleri optimize etmek - Kaynak: Beaver Builder Page Oluşturucu Metrik Çekirdek Web Verileri Artırdı: Kümülatif Düzen Değişimi (CLS). Metrik Deniz Feneri Arttı: En Büyük İçerik Boyası (LCP) - "Yeni nesil formatta görüntüleri göster", "Görüntü Boyutu Doğru", "Görüntü öğeleri açık genişlik ve yükseklik" ve "Verimli Görüntü Kodlama" .6. Tembel Yükleme Görüntünüzü yavaş yükleme uygulamak, Beaver Builder'daki görüntünüzü optimize etmek için atabileceğiniz başka bir adımdır. Kullanıcıların web sitenizin yavaş olduğunu varsaymaması için PARO'daki görüntüleri öncelikli olarak oluşturmayı seçin.
Tembel yükleme açıklanır - Kaynak: WebDev, WordPress kitaplığınızdaki her ortama manuel olarak yavaş yükleme komut dosyaları uygulayabilir veya ekran dışındaki görüntüleri geciktirme olanağı sağlayan yavaş bir WordPress eklentisi yüklemeyi seçebilirsiniz. Çekirdek Web Veri Metrikleri Artırılır: İlk İçerik Boya (FCP). Metrik Deniz Feneri Arttı: Etkileşimli Zaman (TTI) - "Ekran dışındaki görüntüleri erteleyin", "En büyük içerik boya görüntüsü tembelce yüklenmez". 7. CDN'yi kullanın İçeriğinizi hızlı bir şekilde göndermenin en iyi yolu içerik dağıtım ağıdır. CDN, kullanıcılara daha yakın dosyalar sunan ve indirme süresini azaltan bir ağdır. Sonuç olarak, ilk bayt için metrik zaman artacak ve kullanıcınız daha hızlı içerik elde edecektir. WP Rocket ayrıca paralaks dahil Beaver Builder'a CDN uygular. Bu, RocketCDN ile tek bir tıklamayla ayarlayabileceğiniz tam bir uyumluluk olduğu anlamına gelir.
LCP, CDN sayesinde dünyaya daha hızlı gönderilir - Kaynak: WP Roket CDN Metrik Metrikleri Kaldırılması: Cat Contecul En Büyük (LCP) ve İlk Bayt (TTFB) - "Sunucu Yanıt Süresini Azalt".8. Metin sıkıştırmanızı etkinleştir GZIP seçeneğini kullanarak metninizi sıkıştırabilir: Bu, dosyanızın boyutunu azaltır ve ziyaretçiler daha hızlı performansın tadını çıkarır.Amaç, aktivasyondan sonra GZIP sıkıştırmasını otomatik olarak etkinleştiren WP roket gibi eklentilerle toplam ağ baytlarını en aza indirmektir.GZIP WP roket sıkıştırması, HTML, CSS ve JS içeriğinin sıkıştırılmasına izin verir, böylece sunucudan tarayıcıya gönderilen dosyalar daha küçük olur.Çekirdek Web Veri Metrikleri Artırılır: İlk İçerik Boya (FCP).Metrik Deniz Feneri Artırdı: En Büyük İçerik Boyası (LCP) - "Metin sıkıştırmasını etkinleştir" . 9. Azalt TTFB TTFB, web sunucusunun tepkisini belirlemek için bir metriktir ve bu, sayfanızın bir bütün olarak hızına katkıda bulunur. TTFB ve sunucu yanıt süresini azaltmak için, sunucu sorgusu veritabanınızı optimize etmelisiniz veya daha hızlı bir veritabanı sistemine taşımalısınız. Ek bir kayıt olarak, tarayıcı 600 ms'den fazla beklediğinde bu denetim başarısız oldu. TTFB'yi optimize etmek için, önbellekleme kullanarak hızlı ve güçlü bir barındırma sağlayıcısı kullanmanız ve veritabanınızı optimize etmeniz gerekir. Bir veritabanı performansı ayarlamanın amacı, sistem kaynaklarınızı iyi kullanılarak sorgularınızın oluşturulması için gereken süreyi en aza indirmektir. WP Rocket gibi içeriğinizi önbelleğe alabilen, temizleyebilen ve veritabanınızı farklı seviyelerde optimize edebilen eklentileri seçin: yayın, yorumlar ve hatta geçici. Metrik Çekirdek Web Vitalleri Arttı: İlk İçerik Boya (FCP) - "İlk sunucu yanıtının süresini azaltın", "Statik Varlıklarda Verimli Önbellek Politikası sunma". 10. Beaver Beaver Builder Duyarlı Tasarım Duyarlı Özelliği, mobil cihazlarda kullanıcı dostu ve verimli web siteleri sunmanın en iyi yoludur. Hücresel misafirperverliğin, en son SEO sıralama faktörü olan Google Page Experience'ın yenilenmesinde yer alan sinyallerden biri olduğunu unutmayın.
Duyarlı Düzenleme Modu - Kaynak: Beaver Builder WP Rocket WP Roket ile Beaver Builder, Beaver Builder ile oluşturulan web sitelerinde daha iyi hücresel performans elde etmenize kolayca yardımcı olabilir. Hız testinden önce nasıl! , Hız endeksi, toplam engelleme süresi, ilk içerikli kedi ve etkileşimli zaman)
WebPagetest (yüklendiğinde ve hücreseldeki HTTP isteklerinin sayısı)
WP Rocket, Beaver Maker ile varsayılan bir uyumluluğa sahiptir: Beaver Builder düzeni her güncellendiğinde önbelleğimizi siliyoruz. Senaryo
Senaryo #1 - Test sitemin hücresel performansı - WP roket yok (ilk bölümün sonuçları)Genel performans değeri cep telefonlarında (turuncu aralıklar) 87/100, yani Deniz Feneri'ne göre iyileştirme için yer var. Senaryo #2 - Test sitemin hücresel performansı - WP Roket ile: PagePeed Insights Skoru Hücresel: 99/100 WP Rocket sayesinde deniz feneri performans puanlarımızı artırıyoruz ve hücreselde 99/100 puan alıyoruz.
99/100
fcp
3.0 dtk (turuncu)
saniye
>
Tr>
/tablo> Tabii ki, denetim bölümümüz daha iyi koşullarda geçti. Örneğin, CSS ve JS'yi optimize ederek nöbeti engelleyen kaynakları ortadan kaldırırız. Ve resimde kullanılan yavaş yükleme özelliği, üst yarıda bulunan görüntülerin önceliklendirilmesine yardımcı olur. PagePeed Insights - Buradaki denetimi geçmek, Mobile'da 99/100 puan almak için kullandığımız WP roket seçeneğidir:
Mobil cihazlar için önbellek seçeneğini etkinleştiriyoruz:
JS kodunu JS'yi daraltarak ve yürütmesini erteleyip geciktirerek optimize ediyoruz:
JS - WP roket kodunu en aza indirin
JS - WP Rocket'i erteleme ve erteleme
CSS dosyalarımızı küçülterek/birleştirerek ve BM kullanım CSS'yi silerek CSS teslimatını optimize ediyoruz:
CSS - WP roket dosyalarını en aza indirin ve birleştirin
CSS Teslimatını Optimize Etme - WP Roket Şekil için yavaş yükleme komut dosyaları uyguluyoruz: Yavaş Yükleme Seçeneği - WP Roket Veritabanını temizliyoruz:
Veritabanını Optimize Etme - WP Roket Aktivasyondan hemen sonra ne olduğu hakkında bazı notlar: WP Roket GZIP sıkıştırma kullanır. Beaver Beaver Builder ile oluşturulan WordPress sitenizde GZIP sıkıştırmanın etkinleştirilip etkinleştirilmediğini kontrol etmek istiyorsanız, GZIP sıkıştırmanızı kontrol edin ve sitenizi orada tarayın. Son olarak, dünyadaki tüm kullanıcılar için site hızını artırmak için RocketCDN'yi kullanabiliriz: Rocketcdn Wrapping Beaver Builder, dijital projenize yardımcı olacak geniş bir sofistike ürünlere sahiptir - ve kullanırken büyük bir hız yoktur. Varsayılan optimizasyon menüsüyle gelmediler çünkü ekip WP Rocket gibi Pro'ya gelişmiş performansı optimize etmesine izin veriyor. Güçlü bir önbellek eklentisi kullanmak, diğerlerinin yanı sıra kod, veritabanı ve görüntü arasında optimize ederek WordPress sitenizi hızlandırmanıza yardımcı olabilir. Projenizde Beaver Builder'ı kullanıyor musunuz? Sitenizin performansını kolayca artırmak istiyorsanız WP Rocket'i deneyin! Endişelenmenize gerek yok: Sizin için 14 günlük para iade garantisi sağlıyoruz.
