Divi 5'te (Public Alpha) En Hızlı Web Sitelerini Oluşturmak İçin 5 İpucu

Divi 5, en iyi WordPress deneyimini yaratmak için yıllar süren çabanın sonucudur. Visual Builder'ın ve ön ucun her etkileşimini ve yönünü optimize etmek bunun önemli bir parçası oldu. Sonuçta bu iyileştirmelerden keyif alacaksınız; ancak en iyi sonuçları elde etmek için Divi 5'i geliştirebileceğiniz yollar var.

Bu makale, Divi 5'te yerleşik olan performans avantajlarını ve mümkün olan en hızlı web sitelerini oluşturmak için bu optimizasyonlardan tam olarak nasıl yararlanabileceğinizi keşfedecektir.

Divi 5 Public Alpha ve nasıl indirileceği hakkında daha fazla bilgi edinin.

Divi 5 Alpha'yı İndirin Divi 5 Demosunu Deneyin Divi 5 Hata Test Cihazı Olun

Divi 5 Hızlı Olmak İçin Tasarlandı

Divi 5, performans öncelikli olacak şekilde tamamen yeniden yazıldı. Kısa kodlarla oluşturulan Divi 4'ün aksine Divi 5, daha modern, blok tabanlı bir yapı kullanıyor. Yalnızca bu değişim bile içeriğin işlenmesi ve sayfaların yüklenmesi için harcanan süreyi önemli ölçüde azalttı. Bu yeni çerçeve aynı zamanda yüklenen HTML miktarını önemli ölçüde azaltmamıza da olanak tanıdı; bu da sayfalarınızın özellikle uzun ve karmaşık düzenlerde daha hızlı yükleneceği anlamına geliyor.

Ayrıca Divi 5, çok daha küçük ve daha verimli bir JavaScript dosya yapısı içerir. Tüm komut dosyaları soyutlanır ve yalnızca ihtiyaç duyulduğunda kuyruğa alınır; bu, gereksiz kodun web sitenizin performansını yavaşlatmadığı anlamına gelir. Divi 5'in performans geliştirmeleri hakkında daha fazla bilgi edinin.

Tüm bu iyileştirmeler Divi 5'i daha hızlı hale getiriyor, ancak sitelerinizi daha da hızlı hale getirmek için atabileceğiniz birkaç adım var.

En Hızlı Divi 5 Web Sitelerini Oluşturmak İçin 5 İpucu

Divi ile inanılmaz hızlı bir web sitesi oluşturmak artık daha kolay. Bunun nedeni, Divi 5'in çarpıcı performans artışları ve yerleşik, performanslı web siteleri oluşturmayı kolaylaştıran özelliklerdir. Divi'den en iyi şekilde yararlandığımızdan ve zemini geri kazandığımızdan eminiz.

1. Sayfadaki Modül Türlerinin Sayısını Azaltın

Divi 5'in yeniden inşasının en büyük avantajlarından biri, ihtiyaç duyulmayan varlıkları gereksiz yere yüklememesidir. Bu, özellikle Divi Modüllerinde, her modülün bir sayfaya kendi benzersiz stillerini ve komut dosyalarını eklemesiyle fark edilir. Modül türlerini kullanımınız ne kadar çeşitli olursa sayfayı oluşturmak için o kadar fazla kaynak gerekir. Bu çok büyük bir olay değil, ancak performans konusunda bilinçliyseniz, bu hatırlanması gereken önemli bir şeydir (bu, herhangi bir web sitesi veya sayfa oluşturucu için geçerlidir).

Divi'nin 5'li Ekleme Modülü Görünümü

Kaynakları kolaylaştırmak ve sitenizi hızlandırmak için herhangi bir sayfada sınırlı sayıda çekirdek modül türü kullanmaya odaklanın. Bu stratejiyi uygulamanın harika bir yolu Divi Kitaplığı ve Divi Bulutunu kullanmaktır. Bireysel modülleri, bölümleri ve düzenleri kaydederek önceden tasarlanmış öğeleri kolayca yeniden kullanabilirsiniz. Bu, aynı stillerin ve modüllerin tutarlı bir şekilde uygulanmasını sağlayarak sayfayı gereksiz varyasyonlarla şişirme olasılığını azaltır.

Satırı/Bölümü/Modülleri kaydetmek, bu öğeleri (aynı stil ayarlarıyla) sayfanızın veya web sitenizin başka bir yerinde kolayca yeniden kullanmanıza olanak tanır.

Bir sayfada daha önce hangi modülleri kullandığınızı hatırlamak sizi sınırlayabilir gibi görünse de bir sayfayı tasarlamanın birden fazla yolu vardır. Aşağıdaki örnek, aynı şeyi farklı modül düzenlemeleriyle oluşturmanın iki yolunu göstermektedir. Blurb Modülünün sayfada kullanılıp kullanılmadığına bağlı olarak sayfanın bu bölümünü onunla veya parçalayarak tasarlamayı seçebilirsiniz.

3 ayrı modül (solda) veya bir Blurb Modülü (sağda) kullanma. Hangisini seçeceğiniz daha önce hangi modülleri kullandığınıza bağlı olabilir.

Şimdi bu konuda fazla endişelenmeyin. Sayfanız belirli bir öğeyi gerektiriyorsa onu oluşturmalısınız. Ancak bir şeyi oluşturmanın birden fazla yolu varsa, fazladan kaynak yüklememek için sayfada zaten kullanılan modülleri kolayca kullanabilirsiniz.

2. CSS'yi Azaltmak için Global Ön Ayarları Kullanın

Divi 5'te web sitenizin performansını artırmanın en etkili yollarından biri Ön Ayarları kullanmaktır. Bir öğeye ön ayarlar uyguladığınızda Divi 5, birden fazla öğe arasında stilleri paylaşan sınıf tabanlı bir sistem kullandığından daha az CSS oluşturur. Birden çok öğe aynı stilleri kullandığında sayfanız aynı tasarım düzeyi için daha az CSS üretir.

Sık kullanılan modüller (düğmeler, başlıklar ve bölümler gibi) için genel ön ayarlar oluşturmak, her yeni örnek için stilleri manuel olarak ayarlama ihtiyacını ortadan kaldırır. Bu, web sitenize stil vermek için gereken sürenin yanı sıra, oluşturulan toplam özel CSS miktarını da önemli ölçüde azaltır.

Tasarım akışınızda ön ayarları nasıl kullanmaya başlayabileceğinizle ilgili bazı fikirler:

• Satır Ön Ayarı : Bir satır ön ayarına sütun yapısı, cilt payı genişliği, dolgu ve arka plan stilleri gibi ayarlar ekleyebilirsiniz. Bu, sitenizdeki satırlar için tutarlı aralıkların ve görsel stillerin korunmasına yardımcı olur.
• Bölüm Ön Ayarı : Bölüm ön ayarları, arka plan renklerini, degradeleri veya görüntüleri, dolguyu ve aralığı ve belirli cihazlar için görüntüleme koşulları veya özel CSS gibi görünürlük ayarlarını tanımlamanıza olanak tanır.
• Modül Ön Ayarı (örneğin, Düğme Modülü) : Bir modül ön ayarı, düğme metni stilleri, renkler, vurgulu efektler, kenarlık yarıçapı, gölgeler ve hizalama gibi ayarları eklemenizi sağlar. Bu, web sitenizdeki düğmelerin tutarlı görünmesini ve tasarım temanızla eşleşmesini sağlar. Çeşitli varyasyonlar oluşturabilirsiniz, ancak aynı ön ayarların tek bir sayfada kullanılması stil tasarrufunu artıracaktır.

3. Performansı Artırmak İçin Divi 4 İçeriğinden Kaçının

Divi 5'ten en iyi performansı istiyorsanız her sayfanın tamamen taşınması gerekir. Divi 5'i Genel Alfa olarak piyasaya sürdüğümüzden bu yana, çok geçmeden kullanıma sunulacak olan birkaç özellik eksiktir (gerçi beklediğiniz özelliklerin çoğu zaten oradadır). Sayfanız Divi 5'in henüz desteklemediği bir öğe kullanıyorsa o sayfa tamamen D5'e taşınamaz. Bu etkinliklerde, bu sayfalar için Divi 4 çerçevesi yüklenir (geriye dönük uyumluluk için), bu da sayfanın hâlâ çalıştığı ancak Divi 5'in sayfa hızının avantajlarından yararlanamadığı anlamına gelir.

Desteklenmeyen D4 içeriğini tespit eden Divi 5 Migrator örneği

Divi 5'in optimizasyonlarından tam olarak yararlanmak için, web sitenizi Divi 4 içeriği açısından taramak üzere yerleşik geçiş aracını kullanın. Taşıyıcı, henüz Divi 5'te desteklenmeyen tüm modülleri, şablonları veya eklentileri vurgulayacaktır.

Şu anda Divi 5'ten tam olarak yararlanmak istiyorsanız, bu öğeleri Divi 5 uyumlu olanlarla dönüştürmeniz veya değiştirmeniz gerekir. Aceleniz yoksa, şu anda desteklenmiyor olarak gösterilen öğeler için daha fazla uyumluluk getirebilecek ardışık Divi 5 Public Alpha güncellemelerini bekleyebilirsiniz. Divi 5 geçişi hakkında daha fazla bilgi edinin.

4. Özellikle Ekranın Üst Kısmında Animasyonları ve Efektleri Sınırlayın

Animasyonlar ve efektler bir web sitesinin tasarımını geliştirebilir, ancak özellikle ekranın üst kısmındaki içerik için kesinlikle ekstra yükleme süresi sağlayacaktır. Bu alan, kullanıcıların gördüğü ilk şey olduğundan algılanan performans açısından çok önemlidir. Burada daha yavaş yükleme süreleri, hem kullanıcı deneyimini hem de web sitenizin temel web verilerini, özellikle de En Büyük İçerikli Boya (LCP) ve Kümülatif Düzen Kayması (CLS) gibi ölçümleri olumsuz etkileyebilir.

Sitenizin performansını artırmak için kahraman bölümünüzdeki ve ekranın üst kısmındaki diğer içerikteki animasyonları ve efektleri sınırlayın veya ortadan kaldırın. Bunun yerine, hızla yüklenen statik, hafif sayfa öğeleri sunmaya odaklanın.

Animasyon kullanmanız gerekiyorsa bunların minimum düzeyde olduğundan ve sayfanın ilk yüklenmesini engellemediğinden emin olun. Modül ön ayarlarını kullanmak, modüller arasında tutarlı animasyon kullanımı sağlamanın (ve dolayısıyla gereksiz yere ekstra animasyon stilleri yüklememenin) harika bir yoludur.

5. Gömülü Videolar için Tıklanabilir Küçük Resimleri Kullanın

Videoları doğrudan YouTube gibi platformlardan yerleştirmek, bu yerleştirmelerin gerektirdiği ekstra komut dosyaları ve kaynaklar nedeniyle sayfanızın yükleme süresini yavaşlatabilir. Videoyu doğrudan gömmek yerine, videoyu bir ışık kutusunda veya yeni bir sekmede açan tıklanabilir bir küçük resim kullanın. Bu şekilde, video ve ilgili kaynaklar, kullanıcı onlarla etkileşime girene kadar yüklenmeyecek ve sayfanızın ilk yükleme süresi kısalacaktır.

Divi'nin Video Modülü bunu gerçekten kolaylaştırıyor. "İçerik" sekmesinin altında " Yer Paylaşımları " başlıklı bir seçenek alanı göreceksiniz. Daha sonra kaplama olarak optimize edilmiş bir görsel ekleyebilir veya YouTube videosunun kendisinden otomatik olarak bir görsel oluşturabilirsiniz.

Bu teknik, sayfa ilk yüklendiğinde gereksiz isteklerde bulunulmasını önleyerek web sitenizin daha hızlı performans göstermesine yardımcı olur. Bu, video içeriği sağlamaya devam ederken sayfa performansını iyileştirmenin basit bir yoludur.

Özet: Daha Hızlı Divi 5 Web Siteleri için 5 İpucu

• Modül Türlerinin Sayısını Azaltın: Kaynakların yüklenmesini kolaylaştırmak için bir sayfadaki farklı modüllerin sayısını en aza indirin.
• Genel Ön Ayarları Kullanın: Özel CSS'yi azaltmak ve tutarlı tasarımlar oluşturmak için ön ayarları uygulayın.
• Divi 5'e Tamamen Geçiş Yapın: Desteklenmeyen Divi 4 içeriğini taramak ve değiştirmek için Divi 5 Migrator'u kullanın.
• Animasyonları Sınırlayın: İlk yüklemenin daha hızlı olması için özellikle kahraman bölümündeki animasyonları ve efektleri azaltın.
• Videolar için Tıklanabilir Küçük Resimler Kullanın: Gereksiz komut dosyalarının yüklenmesini önlemek için gömülü videoları tıklanabilir küçük resimlerle değiştirin.

Çözüm

Divi 5, birçok yerleşik performans iyileştirmesi sunarak onu Divi'nin eski sürümlerinden doğal olarak daha hızlı hale getiriyor. Kısa kodları ortadan kaldırması, daha iyi (daha yeni) teknolojiler geliştirmesi ve performans odaklı özelliklerin tümü daha sorunsuz, daha hızlı bir kullanıcı deneyimine katkıda bulunur. Ayrıca görüntüleri optimize etmek, hızlı ve güvenilir bir ana bilgisayar kullanmak, CDN veya uç önbelleğe alma kullanmak ve kullanılmayan dosyaları/kodları ortadan kaldırmak gibi standart en iyi uygulamaları da kullanmalısınız.

Ele aldıklarımızı özetlemek gerekirse, her sayfadaki modül türlerinin sayısını azaltarak, genel ön ayarlardan yararlanarak, içeriğinizin Divi 4'ten tamamen taşınmasını sağlayarak, animasyonları en aza indirerek ve videolar için küçük resimler kullanarak web sitenizin performansını önemli ölçüde artırabilirsiniz. Bu küçük ayarlamalar, Divi 5'in optimize edilmiş mimarisinden tam olarak yararlanmanıza yardımcı olarak web sitelerinizin harika görünmesini ve inanılmaz yüksek hızlarda yüklenmesini sağlar.

Divi 5 hız göz önünde bulundurularak tasarlanmış olsa da, sayfalarınızı nasıl oluşturduğunuz ve yapılandırdığınızın bu performansı en üst düzeye çıkarmada hala kritik bir rol oynadığını unutmayın.

Divi 5 Alpha'yı İndirin Divi 5 Demosunu Deneyin

Hata testi sürecine katılarak Divi 5'i daha da iyi hale getirmemize yardımcı olun! Geri bildiriminiz Divi 5'i iyileştirmemize ve geliştirme sürecinin başlarında sorunları düzeltmemize yardımcı olacaktır.

Divi 5 Hata Test Cihazı Olun