Yeni Divi sürümüyle, güçlü bir sayfa oluşturucunun nihai gücüne sahipsiniz. Artık Divi daha hafif ve şişkinliği gidermek için yerleşik özelliklere sahip. Web sitenizi hızlandırmak için Divi'nin şişkinlik önleyici özelliklerini kullanabilirsiniz. Bu, Divi'nin en üst düzey Google sayfa hızı puanını elde edebileceğiniz devasa performans optimizasyon prosedürünün küçük bir parçasıdır.
Bugün 4 şişkinlik önleyici özelliği tartışacağız -
- Dinamik Modül Çerçevesi
- Dinamik CSS
- Dinamik Simgeler
- Dinamik JavaScript Kitaplıkları ile JavaScript Optimizasyonu
Daha fazla zaman kaybetmeyelim ve Divi'nin bizim için ne kadar çok şey olduğunu görelim.
Şişkinlik Sorunu İçin Divi Çözümü
Web Sitesi Şişkinliğinin Tanımı
Sayfayı olması gerekenden daha ağır hale getiren karmaşık JavaScript koduna sahip genel HTML ve CSS'den oluşan herhangi bir statik web sayfasına web şişkinliği denir. Web sayfaları yalnızca işaretlenmiş metinler olduğundan, yalnızca birkaç kilobayt yer kaplarlar. Ancak açılır pencereler, hareket efektleri ve grafik animasyonlar gibi kritik sayfa öğeleri sayfayı ağırlaştırır.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başlaDivi gibi WordPress temaları, PHP dosyalarında oluşturulan HTML sayfalarını dinamik olarak kullanır. Bu yüzden burada PHP dosyalarının boyutunu ve verimliliğini web bloat olarak düşünmeliyiz.
Basitçe, bir sayfaya gereksiz olan ve sayfayı gereğinden fazla kilolu yapan daha fazla dosyanın verimsiz bir şekilde yüklenmesi, web sitesinin şiştiği anlamına gelir.
Bir Web Sitesinin Hızını Nasıl Etkiler?
Bir sayfanın, sayfadakinden daha fazla olağandışı dosya yüklemesi gerekiyorsa, yüklenmesi daha uzun sürer. Örneğin, yalnızca 100 satırlık CSS'ye ihtiyaç duyan bir sayfa var ama sayfada 2000 satırdan fazla kod var, yani 1800 satırlık yükleme süresi tamamen boşa gidiyor.
Diyelim ki web sitenizin bir sayfasını çalıştırmak için 1 ile tüm işleri yapabileceğiniz bir sayfayı çalıştırmak için 5 JavaScript kitaplığı kullanıyorsunuz. Dolayısıyla, işe yaramaz 4 JavaScript kitaplığı kullanmanın bir anlamı yok. Bir JavaScript kitaplığının binlerce kod satırı içerdiğini unutmayın.
CSS ve Js dışında, web sayfanız çok sayıda işlev taşıyan bir PHP dosyası üzerinde çalışıyor. Diyelim ki function.php dosyanızda 20.000 satır kod ve yüzlerce fonksiyon var. Bu nedenle, içeriği belirli bir sayfaya teslim etmek tüm bunları çalıştırır - yalnızca birkaçının gerekli olduğu durumlarda bu tamamen gereksizdir.
Divi'de Şişkinlik Problemi Çözme
Divi'nin tasarımı her geçen gün daha modern hale geliyor. Böylece yavaş yavaş şişkinlik sorunu da yükseliyordu. Bunu çözmek için "Anti-Bloat" mantığı adı verilen ve bu sorunu tamamen ortadan kaldırabilen yeni bir özellik uygulandı. Bu şişkinlik önleyici özelliği ile Divi artık eskisinden çok daha hızlı ve kullanıcılar faaliyetlerine çok daha verimli bir şekilde devam edebiliyor.
Bu Şişkinlik Önleyici Özellikte Neler Var?
Divi'nin "şişkinlik önleme" özelliği, belirli sayfalar için 4 ana rol gerçekleştiriyor -
Dinamik Modül Çerçevesi: PHP dosyaları aracılığıyla oluşturulan sorunları optimize ederek çözer. Böylece sadece bir sayfayı çalıştırmak için gereken işlevler ve kodlar o sayfa için aktif olarak çalışır.
Dinamik CSS: Bir sayfanın yüklenmesi için yalnızca CSS kodlarından oluşan özel bir stil sayfası oluşturacaktır. Fazladan CSS dosyaları için yükleme süresi yok.
Dinamik Javascript Kitaplıkları: Sayfa için ihtiyaç duyulan harici JS kitaplığını yükleyecek bir script.js dosyasını optimize edecek ve dinamik olarak oluşturacaktır.
Dinamik Simgeler: Web sitesi için kullanılan tüm simgeleri değil, sayfada kullanılan simgelerin bir alt kümesini yükler.
Divi'de gezinerek bu özelliği etkinleştirin 
Şişkinlik Önleyici Özellikler Nasıl Çalışır?
Bildiğimiz gibi Divi, alakasız kod satırlarından kaynaklanan sayfa yükleme süresini azaltmak için "şişkinlik önleme" adlı yeni bir özellik başlattı. Bu özelliğin nasıl çalıştığını görelim.
Dinamik PHP Çerçevesi: İşlevler
Divi, burada yalnızca ihtiyaç duyulan işlevleri yürüten basit bir kuralı takip eder. Bu eylemi gerçekleştiren tam kanıtlı bir mantıktır.
Ön İşlem Kontrolü
Dinamik PHP kullanarak sunucunuzdan web sitenize veri göndermek çok kolay ve zaman kazandıran bir işlemdir. Bir bileşenin veya işlevin kullanıldığını tespit ederse, sistemde hız kontrolü yapar ve bu öğeyi destekleyen tüm kodları alır ve buna göre gönderir ve işlem bitene kadar yürütmez.
Talep Üzerine Modüller
Bu yeni özellikle, sayfalar modülleri esnek bir şekilde yükleyebilir. PHP'nin şişkinlik önleyici mantığı nedeniyle Divi, yalnızca sayfanın ihtiyaç duyduğu kısa kodları işler. Örneğin, bir sayfada 5 modülünüz varsa, Divi hepsini değil, yalnızca bu beş modülü işleyecek ve bu beş modülün gösterilip çıktısını alacaktır.
Talep Üzerine Özellikler
Divi, bir sayfadaki her özellik için modülleri otomatik olarak işler ve yükler. Daha doğrusu, bu sistem yalnızca sayfada kullanılan kaydırma efektleri, animasyonlar, kenarlıklar ve yapışkan seçenekler gibi modülleri işler. Ayrıca bölümler, satırlar ve sütunlar için de geçerlidir.
Daynamik CSS
Divi stil sayfası, PHP çerçevesinde kullanılan şişkinlik önleme mantığını da korur. Divi CSS işlevselliği oldukça büyüktür ve genellikle sayfalarda gereksiz şişkinlikler oluşturur.
Sayfaya Dayalı CSS Yükleme
Bir sayfa CSS'yi dinamik olarak yüklediğinde olan budur,
- Yalnızca Divi temasını biçimlendirmesi gereken CSS dosyalarını yükler. Dosya boyutu 50 kb'den fazla değil.
- Ardından, sayfanın tasarım şemasını içeren CSS dosyalarını yükler. Yalnızca sayfanın farklı bölümlerinde kullanılan dinamik olarak dosyaları açar. Örneğin basit bir ana sayfa için sadece 30 kb dosya olacaktır.
Burada, artık herhangi bir şişkinlik olmadan 80kb CSS dosyası var. Daha önce, boyut 900 kb idi ve neredeyse şişkinliklerle doluydu.
Burada, bu ana sayfa Divi oluşturucu kullanılarak yapılmıştır ve bu sayfa için yerel CSS dosyalarının sayfa bileşenlerini görüntülemek için nasıl çalıştığını görebilirsiniz.
Dinamik JavaSript
Web sitesi performansını iyileştirmek, tasarımlarımızı basitleştirmek ve modernize etmek için genellikle JavaScript kullanıyoruz. Divi, dinamik JavaScript kullanarak Js işlevlerini harici bir kitaplıktan içe aktarabilir. Böylece sayfada daha az karmaşık kodlama olacak ve elbette sayfa eskisinden daha hafif ve daha hızlı olacaktır. Şişkinlik önleme özellikleri sayfa başına çalışır, bu nedenle işlevsellik hasarı konusunda endişelenmenize gerek yoktur, Divi bununla ilgilenecektir.
Divi şişkinlik önleme özelliği tarafından ışık kutusu ve yapışkan işlevlerin nasıl halledildiğine dair küçük bir örnek.
Dinamik Simgeler
Simgeler bir web sayfasının çok önemli bir parçasıdır. Divi , tüm simgeleri yüklemek yerine o sayfa için gerekli olan alt küme yazı tiplerini yüklemek için akıllı bir yol sağlıyor. Temel olarak, her web sayfasının üç alt simge grubu vardır,
- Temel - Modülden Divi teması sağır simgeleri.
- Sosyal - Sosyal medya, temel simge setinden simgeleri takip eder.
- Tümü - Simge seçicinin istenen birini seçip kullanabileceği simge paketinin tamamı.
Herhangi bir sayfa sosyal medya modüllerini veya simge seçici tarafından seçilen simgeleri kullanmıyorsa, sayfa 6 kb alan kaplayan bir temel simge seti kullanır. Sosyal medya ikonlarını eklersek boyut biraz daha yükselecektir.
Bir simge seçme/tanıtım modülü kullanırsak, tüm simge seti boyutu 90 kb'ye kadar çıkabilir.
Toplama
Anti-şişkinlik özelliği Divi kesinlikle çok yararlıdır. Bu, Divi web sitelerini daha hızlı hale getirecek ve kullanıcı deneyimini çok geliştirecektir. Divi web sitesine daha fazla güç ve hız getirerek, kullanıcılar sürekli olarak daha iyi destek alıyorlar. İnşallah bu çabalar devam eder. Bu gönderiyi beğendiyseniz, arkadaşlarınızla paylaşın ve yorum bölümünde sorunuzu bize bildirin.
