Ne kadar hızlı divi teması?(Ve nasıl hızlandırılır)

Divi kısa süre önce “Divi’yi her köşeden hızlandırdıkları” etkileyici performans güncellemeleri yayınladı. Zarif temalara göre, yeni sürümleri şişkinliği ortadan kaldırır ve Google PagePeed Insights’da size iyi notlar verir. Bugün, bu ifadeyi doğrulayacağız ve Divi’nin ne kadar hızlı olduğunu kontrol edeceğiz. Ardından, Divi temasıyla oluşturulan WordPress sitenizin hızını artırmak için izleyebileceğiniz optimizasyon tekniklerinin bir listesini paylaşacağız.

Divi ve WP Rocket, Divi’nin performansını test etti. Divi kütüphanesinden “Studio Yoga” adlı bir gösteri kurdum. Test sitemin birkaç resim, yoga dersleri, referansları ve sosyal medyaya bağlantıları var.
Kullanılan Performans Araçları: Google PagesPeed Insights Cellular ve WebPagetest.org (Fransa’da bulunan bir sunucuya sahip iPhone X) – Tam bir hücresel yaklaşım kullanıyoruz. KPI ölçülür: PSI’daki performans seviyesi, temel web’den ikisi, hız dizin, toplam engelleme süresi, ilk içerik içeriği, etkileşimli zaman, tam yükleme süresi ve HTTP isteklerinin sayısı. Not: Veriler gerçek kullanıcılara dayandığı için FID ölçülemez. Ancak, FID’ye benzer toplam engelleme süremiz var. Denetimi çalıştıralım!

Test sitem Divi: Yoga sınıfına sahip e-öğrenme sitesi ile oluşturuldu, Hücresel KPI puanımıza bakalım:

KPI (hücresel performans) skor

td> İlk oruç boyası 2.5 saniye (turuncu)

td> 4.7 saniye

Cat Congful En Büyük 2.8 saniye (turuncu)

> interaktif için süresi 5.4 saniye

Toplam engelleme süresi 200 ms

td> Kümülatifte kayma Düzen 0.01

Tam zamanlı 2.669 saniye istek http 24

Hız Sonuçları: Ne Kadar Hızlı Divi? Divi'nin tam yükleme süresi, birçok site için iyi bir hız sonucu olan hücreselden 2,6 saniyedir. Lighthouse'a göre, Divi bir cep telefonu üzerinde 84/100 performans puanı aldı, bu da tatmin edici bir performans puanı. Tüm sayılar, Divi gibi görsel sürükle ve bırak editörleri kullanılarak yapılan sayfalar için sağlamdır. Sayfa üreticileri için bu performansı nasıl açıklanır. Basit: En son Divi sürümünde, zarif temalar, sitenizi daha hızlı yükleyebilecek bazı ciddi varsayılan hız optimizasyon özellikleri ekler. Bu yüzden hücresel performans seviyemiz (84/100) oldukça iyi: Divi ve animasyon modüllerini kullanarak yaptığımız içerik miktarını dikkate almalıyız. Cep telefonlarında genel performans - Kaynak: PSI Ancak, onarım için hala yer var. Yeşil skoru (90+) hedeflemeliyiz. Deniz Feneri, performans puanlarımızı artırmak için birkaç sorunun üstesinden gelmenizi önerir. Öneriler esas olarak önbellekleme, metin sıkıştırma ve kullanılmayan azaltılmış kodla ilgilidir.

Divi sitem için denetim bölümü - Kaynak: PSI Takeaways Anahtar Performansı - Divi temaları Divi 4.14'ten çok daha hızlıdır - Sigara içmeden sigara içmeden deneyimin tadını çıkarıyorum - mobil cihazlarda 84/100 alıyorum Hangisi harika bir sayfa üreticisi için çok iyi - tam yükleme süresi 2.6 saniyedir, bu da performans için iyi bir başlangıç noktası divi ve wp roket? Doğrudan son bölüme! 5 Divi Yeni Divi Performans Özellikleri 5 ana hız optimizasyonu özelliği ekleyerek ağır temalardan hafif temalara divi anahtarı: Yeni Dinamik PHP çerçevesi - sadece divi modülüne, animasyon, emoji veya simgeye göre ihtiyaç duyulan yükleme ve işleme Sitenizde. Divi'nin toplam CSS boyutu% 94 azaldı ve JavaScript% 50 kesildi (Divi'nin gereksiz kaynakları kaldırdığı ve renderlemeyi engelleme taleplerini geciktirdiği anlamına geliyor). Divi şimdi stil sayfasını kaplıyor ve sadece başkalarını geciktirecek önemli CSS (üstte olan) içeriyor. Google yazı tipi artık önbellek. JQuery'nin süspansiyonu üstbilgiden taşınır ve şimdi altbilgide senkronize edilmez (yalnızca başlıkta gerekmiyorsa). Performans için özel bir sekme bile bulacaksınız, WordPress kontrol panelinizden Divi Tema Seçenekleri> Genel> Performance'dan erişilebilir. Performans sekmesi Divi ekibi tarafından uygulanır - Kaynak: WordPress Gösterge Tablosu Divi Hızlı ve bunun yanı sıra, daha hızlı hale getirmek için uygulayabileceğiniz bir optimizasyon teknikleri listesi topladık. Divi nasıl daha hızlı yapılır Divi, denetimimizden tatmin edici bir hız puanı ile iyi performans gösterdi. Bununla birlikte, Divi'nin performansını optimize etmek için izleyebileceğiniz bazı kolay teknikler vardır, yani: Doğru barındırma seçin TTFB'yi azaltın JS performansını optimize et Kullanılmayan CSS'yi sil veya CSS teslimatını optimize edin Kodunuzu azalttı ve birleştirdi Görüntünüzü optimize et Resim ve video yüklemek için tembel CDN kullanın Metin sıkıştırma Katlama ve kompozisyon olmayan animasyonlarda kaydırıcılar kullanmaktan kaçının Divi sitenize uygulayabilmeniz ve hızınızı artırabilmeniz için her tekniği tartışalım. 1. Sunucu ve ağ bağlantısı açısından sabit ve hızlı güvenilir bir ana bilgisayara ihtiyacınız vardır. Birçok farklı barındırma türü vardır, ancak WordPress'te uzmanlaşmış sağlayıcılar seçmenizi öneririz. Hostinginizi seçerken neye bakacağınız hakkında ayrıntılı yönergeler yazıyoruz ve ayrıca piyasadaki en iyi WordPress barındırma listesini birleştiriyoruz. Kısacası: Barındırma sağlayıcınıza para kazanmayın. Bunu bir öncelik haline getirin. Divi kurucusu barındırma ortamınızı denetmenizi önerir. Divi'nin "web sitenizin hızı açısından bulmacanın sadece bir parçası olduğunu" söyledi. Divi Kurucusu Doğru barındırmayı seçme konusunda 2. TTFB'yi Azaltma Divi ile yapılan WordPress siteniz için ilk bayta (TTFB) zamanını azaltmanın en iyi yolu önbellek eklentisini kullanmaktır. Önbellekleme, sunucu işlem süresini azaltmaya yardımcı olarak TTFB'yi azaltmaya yardımcı olur, daha hızlı web sayfaları üretir. Ayrıca WordPress veritabanınızı optimize etmeniz, PHP'nin en son sürümünü kullanmanız ve CDN kullanmanız gerekir. TTFB ölçüm - Kaynak: GTMetrix WP roket, önbellek özellikleri ve veritabanı optimizasyonu sayesinde sizin için TTFB'yi azaltmaya yardımcı olabilir. 3. JS JavaScript'in performansını, ziyaretçiler ve web siteniz arasındaki doğrulama işlevlerine ve etkileşimlerine yardımcı olur. En son sürümde Divi, JavaScript dosya boyutunu azaltır, kullanıcıların yalnızca her modül için ihtiyaç duyduklarını yüklemesine izin verir. Buna ek olarak, Divi'nin tema seçeneğinde sayfa başına kullanılmayan JavaScript'i silme seçeneği vardır → Genel → Performans. Burada, dinamik modül çerçevesini ve Dinamik JavaScript kitaplık ayarlarını etkinleştirmelisiniz. JS İstendiği gibi - Kaynak: Divi Optimizasyon sekmesi Ayrıca, Divi tarafından yapılmayan JS kodunu optimize etmek için WP Rocket gibi eklentileri de kullanabilirsiniz. JS'mi Optimize Etmek - Kaynak: WP Roket 4. Kullanılmayan CSS'yi silin veya Divi ekibinin CSS teslimatını optimize eder, önemli CSS'yi (Top Paro) otomatik olarak tanımlayarak ve CSS teslimatını optimize ederek akıllı bir tema oluşturur. Divi, Divi üreticisi CSS ve yükleme süresinin çıktısını azaltan kritik olmayan kuvveti geciktirir. JS optimizasyonu gibi, Divi yalnızca belirli modüller veya sayfalar için ihtiyacınız olan CSS'yi içerir. Performans sekmesinden aşağıdaki ayarların etkinleştirildiğinden emin olun: CSS Optimizasyonu Etkinleştirme Ayarları-Source: Divi Builder Kritik CSS, Dinamik CSS ve sıralı stil sayfası seçenekleri etkinleştirildiğinde, Divi ile ilgili bloke oluşturmayı engelleyen tüm CSS talepleri silinir. Kullanılmayan CSS'yi azaltmak için "Divi önceden ayarlanmış" seçeneğini kullanmayı unutmayın. Bu, daha hafif bir sayfa oluşturmanıza izin verir, çünkü aynı ön ayar kullanan her modülün tüm tasarım blokları serisine sahip olması gerekmez. Tüm düğmeler için küresel tasarım düzenleyin: Divi'deki varsayılan JS ve CSS yalnızca Divi tarafından kullanılmayan CSS ve JavaScript'i silecektir. Kullanılmayan kalan CSS ve JS'yi kaldırmak için WP roket gibi bir eklentiye ihtiyacınız var: 5. Kodunuzu Smarting ve Birleştirme Minifikasyonu, CSS, JS ve HTML dosya boyutlarınızın boyutunu azaltan bir optimizasyon tekniğidir. Bu, şişmiş tüm içeriği silmek anlamına gelir ve noktalama işaretleri, geliştirici yorumları vb. Dosyalarınızı küçültmek ve sıkıştırmak için birkaç araç kullanabilirsiniz. En iyi ücretsiz CSS ve JavaScript minifikasyon araçları hakkında bir eğitim yazıyoruz. Kodunuzu birkaç tıklamada optimize etmeyi tercih ediyorsanız, GZIP sıkıştırmasına izin veren ve kodunuzu birkaç saniye içinde en aza indiren WP roket eklentisine bakın: CSS dosyamı WP roketiyle artırmak ve birleştirmek (not: kaydırma yaparsanız, JS için aynı parçaya sahipsiniz) 6. Resim resimlerinizi optimize et, içerik stratejinizin temel bileşenleridir, ancak optimize edilmezse performansınıza zarar verir. Her cihaz için doğru görüntü biçimini seçtiğinizden, doğru sıkıştırma seviyesini seçtiğinizden, görüntüyü doğru boyutlarla birlikte sayın ve yeni nesil WebP biçimini kullanın. En iyi uygulamayı manuel olarak uygulamak istemiyorsanız, Imagify gibi bir WordPress görüntü optimizasyonu eklentisi kullanmalısınız. Bu eklenti, kalitesini azaltmadan görüntünüzü daha hafif hale getirebilir. Neden denemiyorsun? Ücretsiz bir deneme var. Sayfa hızının optimizasyonu hakkındaki özel kılavuzumuzu okuyun. Kısacası, kullanıcının görünüm sunumunda bulunan resimleri veya koda öncelik verirsiniz. Aşağıdaki komut dosyasını ekleyerek resme ve videoya yavaş yükleme uygulayabilirsiniz: Tembel yüklemeyi uygulamak için daha kolay (ve daha hızlı) bir yol istiyorsanız, WP Rocket gibi özel bir Lazyload sekmesine sahip eklentileri kullanabilirsiniz: WP Roket 8 ile tembel yükleme 8 CDN İçerik Dağıtım Ağı'nı (CDN) kullanın, hızlı web içeriği dağıtımını sağlamak için birlikte çalışan coğrafi dağıtılmış bir sunucu grubudur. Bu, özellikle uluslararası ziyaretçileriniz varsa gerçekten gereklidir. CDN'yi seçerken, sınırsız bant genişliğine erişiminiz olduğundan ve tüm dosyalarınızın HTTPS (SSL trafiği dahil) aracılığıyla sunulduğundan emin olun. Piyasada birçok CDN mevcuttur, ancak 35+ pazarda ve 50'den fazla Edge konumunda otomatik olarak sunulan resminizi, JS ve CSS dosyalarınızı istiyorsanız RocketCDN'yi Divi ile kullanabilirsiniz. Sunucu CDN 9. Metin Sıkıştırma Metin Sıkıştırma GZIP Sıkıştırma olarak da bilinen HTML, CSS ve JS içeriğinin sıkıştırılmasına izin verir, böylece sunucudan gönderilen dosyaların daha küçük (ve daha hafif). Fikir, hızını artırmak için tüm WordPress site içeriğinizi sıkıştırmaktır. Tüm ana CDN'ler metin sıkıştırmasına izin verir ve WP Rocket gibi eklentiler de aktivasyondan hemen sonra sitenizi sıkıştırabilir. Bu, dosyanızı sunucu tarafında sıkıştıran ve ziyaretçinin tarayıcısında sıkıştıran birdir. 10. Üst yarı yarıya kaydırıcının katlama ve kompozisyon olmayan animasyonlarında kaydırıcılar kullanmaktan kaçının, genellikle en büyük sayfa içeriğini (LCP), çekirdek hayati web'i içerir. Bu yüzden verandanın tepesinde "kahraman kaydırıcısı" nı göstermekten kaçınmalısınız. Kompozisyon olmayan animasyon psi başlık kaynaklarında atlıkarınca js ağırlığı olan test siteleri, JScript JS veya CSS değişikliklerinin sayfalarınızdaki ani değişiklikleri tetikleyeceği, kümülatif düzen (CLS) kaydırma metriğinizi etkileyeceği herhangi bir animasyona atıfta bulunur. İki temel hayati web siteniz (CLS ve LCP) optimize edilmezse Google size iyi bir performans değeri vermez. WP roket eklentisinden Divi ile inşa edilmiş WordPress siteleri için bir performans çözümü olarak bahsettik. Bizi bir sonraki bölüme getiriyor ve WP Rocket'in deniz feneri performans puanlarını nasıl arttırdığını gösteriyor. Divi ile Divi'yi hızlandırın Divi, zarif temaların kurucusu Nick Roach, performans eklentisini kullanmaya devam etmeyi öneriyor. Ona göre, divi ile inşa edilen sitenizin hızını artırmak için önbellek ve cdn kullanmalısınız. Rocketcdn adlı CDN adı verilen CDN ile entegre. Ve iyi haber şu ki, Divi WP roketiyle tamamen uyumlu. Divi 4.10, aşağıdaki iyileştirmeyi tanıtarak WP roketiyle uyumluluğu artırır: WP Rocket'ten "Kullanılmayan CSS" si Sil ", kritik divi CSS özellikleriyle uyumludur. Divi CSS'yi ele alıyor ve WP Rocket geri kalanını yapıyor. Artık WP roket "JS Yürütme" özelliğinde bazı istisnalar ayarlayabilirsiniz, böylece Divi isterseniz hala animasyonlar içerebilir. Divi aşağıdaki özelliklerle birlikte gelir-"JQuery ve JQuery Migrate", "WordPress emojis'i devre dışı bırak" ve "Rocket WP seçeneğinde örtüşen ek üçüncü taraf komut dosyasını erteleyin". Devre dışı bırakmanız ve yalnızca yinelenen optimizasyondan kaçınmak için WP roket özelliğini kullanmanız önerilir. WP roket, Divi ile oluşturulan web sitelerinde daha iyi hücresel performans elde etmenize yardımcı olabilir. Nasıl bakalım! Google PagePeed Insights (Hayati Web Çekirdeği, Hız Dizin, Toplam Engelleme Süresi, İlk İçerik Kedi ve Etkileşimli Zaman) WebPagetest (yüklendiğinde ve hücreseldeki HTTP isteklerinin sayısı) 2 farklı senaryo test edeceğiz: Senaryo #1 - Test sitemin hücresel performansı - WP roketi yok (84/100 aldığımız ilk bölümden sonuçlar) Senaryo #2 - Test sitemin hücresel performansı - WP Rocket ile Karşılaştırmaya başlayalım! Senaryo #1 - Test sitemin hücresel performansı - WP Rocket olmadan Bu makalenin ilk bölümünde görüldüğü gibi, cep telefonumdaki değeri PSI ile işaretlenmiş birkaç performans problemi ile 84/100: Divi sitem için denetim bölümü - Kaynak: Bölüm 1'de gördüğümüz PSI, Divi artık JS ve CSS'yi optimize etmek için varsayılan bir özellik ile geliyor.Doğuştan gelen özellikler olsa bile, "Kullanılmayan CSS'yi Sil" veya "Kullanılmayan JS'yi Azalt" gibi bazı uyarıları neden hala görebileceğinizi merak ediyor olabilirsiniz, değil mi?Cevap: Divi yalnızca Divi tarafından yapılan kullanılmayan CSS ve JS'yi silecektir.Siteniz başka bir eklenti kullanıyorsa, kullanılmayan CSS veya JS stili Divi tarafından silinmez.WP Rocket'in yardımcı olabileceği yer burası! Senaryo #2 - Test sitemin hücresel performansı - WP Roket ile: WP roketini etkinleştirdikten sonra, sitemde Divi ile inşa edilmiş 100/100 var ve tüm KPI performansım yeşil bölgeye taşındı. WP Rocket ile Performansımın Sonuçları - Kaynak: PSI WP Rocket'i kullanmadan önce ve sonra bir performans özetini izliyor: kpi (hücresel performans) skor (WP yok Roket) skor (wp roket ile) > İlk açlık boyası 2,5 saniye (turuncu) 0.6 saniye (yeşil) Hız Endeksi 4.7 saniye (turuncu) 0.6 saniye (yeşil) </s En büyük içerik boyası 2.8 saniye (turuncu) 0.6 saniye (yeşil) > 5.4 saniye (turuncu) 0.6 saniye (yeşil) Toplam engelleme süresi 200 ms 0 ms Kümülatif Düzen Değiştirme 0.01 0 Tam Zamanlı 2.669 saniye 1,294 saniye > 16 Tüm metrikler daha sağlıklı ve Sitem PSI'da 100/100'e bile ulaştı! Buna ek olarak, WP Rocket, tüm performans uyarılarını derecelendirilmiş denetim bölümüne almama izin veriyor. Ne kadar hızlı divi teması?(Ve nasıl hızlandırılır)