En Hızlı Divi Sayfası Nasıl Oluşturulur: Divi İçeriğinizi Hız İçin Optimize Etme

Divi'nin yeni performans güncellemesi ile sayfa hızı puanlarını artırmak için bir sürü olasılık geliyor. Bugün, sıfırdan bir Divi sayfası oluştururken aklınızda bulundurmanız gereken bazı pratik ipuçlarını ve püf noktalarını paylaşıyoruz. Bunlar, önceden belirlenmiş kurallar değil, tavsiyelerdir. Her zaman sayfanızın ana hedeflerine inecektir. Bazen, tasarım için biraz hızdan ödün verdiğinizi ve bunun tersini de göreceksiniz. Her ikisi arasında sağlıklı bir denge bulmakla ilgili olduğuna inanıyoruz, ancak aşağıdaki ipuçlarını kullanarak Divi sayfa hızınızı kesinlikle artırabilirsiniz.

Hadi buna dalalım!

Youtube Kanalımıza Abone Olun

1. Katlanan İçeriğin Üstünü Optimize Etme

Divi'ye eklenen yeni performans özelliklerinden birinin adı Critical CSS. Kısacası, Divi'deki Kritik CSS, ekranın üst kısmındaki CSS olarak adlandırılan hangi CSS'nin hemen yüklenmesi gerektiğini otomatik olarak algılar ve sayfanın geri kalanının CSS'sinin yüklenmesini geciktirir. Bu, kendi başına, çaba sarf etmenize gerek kalmadan sayfa hızını otomatik olarak artırmaya yardımcı olur. Ancak ekstra yol kat etmek istiyorsanız, ekranın üst kısmındaki içeriği de optimize etmeye karar verebilirsiniz.

4-Modül Kahraman Konsepti

İlk bakışta ziyaretçilerinizle olabildiğince fazla bilgi paylaşmak cazip gelebilir, ancak bir kahramanda tam olarak kaçınmanız gereken şey budur. İçeriğiniz hem stil hem de görsellik açısından ne kadar doğrudan olursa o kadar iyidir. Bu nedenle, ekranın üst kısmında kullandığınız modül sayısını sınırlamak Divi sayfa hızınızı artırmanıza yardımcı olacaktır. Tercihen, kullanırsınız:

• Başlık
• Paragraf
• Buton

Ancak, çoğu durumda, bir tür resim de eklemek isteyeceksiniz. Bunu yaparsanız, görüntüyü arka plan olarak kullanmaktan kaçının ve bunun yerine bir modül olarak kullanın. Bunu, maksimum genişlikte belirli bir kapsayıcının içinde bir modül olarak kullanmak, daha küçük resim boyutları kullanmanıza yardımcı olur ve bu da sitenizi hızlandırmanıza yardımcı olur. Bu bizi 4 modüllü kahraman konseptine getiriyor:

• Başlık
• Paragraf
• Buton
• Optimize Görüntü

Hassas Otomatik Algılama için Tam Ekran Kahramanı Kullanın veya İçeriği Birden Çok Bölüme Bölün

Tam ekran kahraman tasarımlarının popüler olmasının bir nedeni var. Sadece tasarımınızı daha nefes alabilir kılmakla kalmaz, aynı zamanda kritik CSS'ye de yardımcı olurlar. Tam ekran bir kahraman seçmeyi seçerseniz, kullandığınız ekran boyutu ne olursa olsun ekranın üst kısmında görünen tek şeyin bu olduğuna karar verirsiniz. Divi'de tam ekran bir kahraman oluşturmak için bölüm ayarlarında minimum "100vh" yükseklik atamayı unutmayın. Min-yükseklik atayarak; bölümün tarayıcının tüm yüksekliğini kapladığından emin oluyorsunuz. O andan itibaren kahraman tasarımınızın bir parçası olmak için bölümün içine her şeyi yerleştirebilirsiniz. Veya Divi'nin yerleşik tam ekran başlığını da kullanabilirsiniz.

Alternatif olarak, tam ekran kahraman rotasını takip etmek istemiyorsanız, ekranın üst kısmındakileri birden fazla bölüme ayırmaya karar verebilirsiniz. Divi, bölüm düzeyinde ekranın üst kısmında görünenleri otomatik olarak algılar . Bu, kısmen ekranın üst kısmında ve kısmen ekranın altında görünen büyük bir bölüm oluşturuyorsanız, tüm bölümün CSS'si ve o bölümdeki öğelerin CSS'si yüklenecektir. Bölümleri birden çok öğeye bölmek, çok fazla öğenin ekranın üst kısmındaymış gibi ele alınmasını önlemenize yardımcı olur.

Gecikmeyi Önlemek için Hero'da Animasyonlardan Kaçının

Yükleme süresinde gecikmeye neden olabilecek ekranın üst kısmındaki herhangi bir şeyden kaçınmak iyidir. Buna animasyonlar dahildir. Ancak bu, bundan tamamen kaçınmanız gerektiği anlamına gelmez. Sayfanın aşağısındaki animasyonları kolayca kullanabilir ve/veya kahramanınızın içinde kullandığınız animasyonları sınırlayabilirsiniz. İyi bir denge bulmak anahtardır.

Tablette ve Mobilde Katlamanın Üstündeki İçeriği Değiştirin

Kritik CSS ile ilgili olarak belirtilmesi gereken son şey, tasarımınızın daha küçük ekran boyutlarında değiştirilmesidir. Ekranın üst kısmındaki içeriğinizin farklı ekran boyutları için optimize edildiğinden emin olmanız önemlidir. Bu, hem masaüstünde hem de mobil cihazlarda harika bir sayfa hızı puanına ulaşabilmeniz için tasarımın ince ayar yapılması meselesidir. Örneğin, sayfanızın hızını daha küçük ekran boyutlarında artırmak için tüm kahraman görüntüsünü mobil cihazlarda gizleyebilirsiniz.

2. Akıllı Stilleri Kullanma

Akıllı Stiller Nasıl Çalışır?

Yeni performans güncellemesiyle Divi, yinelenen stiller azaltılarak optimize edildi. Akıllı stilleri etkinleştirmek için Divi Önayarları dünyasına dalmanız gerekir. Hazır ayarlar temel olarak, aynı şekilde stil verilmiş her bir öğeye benzersiz bir stil bloğu atamak zorunda kalmadan stilleri farklı öğelerle paylaşmanıza olanak tanır.

Bölümler ve Satırlar için 1 veya 2 Ön Ayar Kullanma

Bölümler ve satırlar, ön ayarlardan bahsettiğimizde genellikle unutulmuş gibi görünen iki öğe türüdür. Modüller gibi, bölümlere ve satırlara ön ayarlar atayabilirsiniz. Bu, yalnızca oluşturulan CSS'yi sınırlamanıza yardımcı olmakla kalmaz, aynı zamanda tasarım tutarlılığını sayfa düzeyinde tutmanıza da yardımcı olur. Örneğin, dikey ritim oluşturmak için her bölüm için sürekli olarak 100 piksel üst ve alt dolgu kullanmak istediğinizi varsayalım, bu süreçte Divi ön ayarlarından yararlanmamanız için hiçbir neden yok. Bu dolgu değerlerini kullanan bir bölüm için yeni bir ön ayar oluşturun ve eklediğiniz her yeni bölüme atayın veya onu varsayılan bölüm ön ayarı yapın.

Ayrıca, seçtiğiniz genişlik ve maksimum genişlikte bir satır ön ayarı ayarlayabilir ve bunun standart olmasını sağlayabilirsiniz. Bu ön ayarlarla oynayın ve yalnızca tasarım sürecinizi nasıl kolaylaştırdıklarını değil, aynı zamanda sayfa hızı puanlarını artırmanıza nasıl yardımcı olduklarını keşfedin.

Modüller için Ön Ayarları Kullan

Elbette modüller için de akıllı stiller kullanmak isteyeceksiniz. Aşağıdaki örnekte, her modülün genel görünümünün ve hissinin benzer olduğunu fark edeceksiniz. Blurb Modülü için bir ön ayar oluşturmak, sayfanızın CSS dosyasını küçük tutmanıza yardımcı olacaktır.

Bir ön ayarı geçersiz kılmak ya da etmemek?

Ancak her küçük değişiklik için yeni bir ön ayar oluşturmamalısınız. Örneğin yukarıdaki örnekte, son iki Blurb Modülünün farklı bir metin rengine sahip olduğunu fark edebilirsiniz. Bunun için eskisini çoğaltarak yeni bir ön ayar oluşturabilir veya ön ayarı geçersiz kılmaya karar verebilirsiniz. Bu durumda, yeni bir ön ayar oluşturmak ve birden fazla CSS kodu satırı eklemek yerine, yalnızca metin rengini geçersiz kılmak (bu, fazladan bir CSS kodu satırına yol açar) daha mantıklıdır.

3. Tasarım Seçeneklerini Hızla Eşleştirme

Kullanmak İstediğiniz Modül Seçimini Sınırlayın (Dinamik Modüller)

Oluşturmakta olduğunuz sayfa için kullanmak istediğiniz modülleri seçerken bunların dinamik olarak yükleneceğini unutmamakta fayda var. Yani belirli bir modülü kullanmazsanız sayfa hızınıza herhangi bir etkisi olmaz. Eklediğiniz her modülü değerlendirmek ve “buna değer” olup olmadığını görmek isteyeceksiniz. Ancak ideal bir senaryoda, Divi içeriğinizin geri kalanının yeterince optimize edildiğinden emin olursunuz, böylece modüllerden ödün vermek zorunda kalmazsınız.

Tasarımınızın LCP'sini Bulun ve Optimize Edin

Sayfa hızınızı artırmanıza yardımcı olabilecek başka bir şey de En Büyük İçerikli Paint'inizi bulmak ve onu optimize etmektir. Kısacası, LCP'niz, sayfa hızı puanınızı belirlemenize yardımcı olan sayfanızdaki en büyük öğedir. Bu konuda daha fazlasını buradan okuyabilirsiniz. Tasarımınızın LCP'sinin optimize edildiğinden emin olarak, sayfanızdaki yükleme süresini önemli ölçüde azaltabilirsiniz.

Bir Animasyon Stili Seçme (Dinamik Özellikler)

Dinamik modüllerimiz olduğu gibi dinamik özelliklerimiz de var. Bu, sayfanızda belirli bir özelliği hiç kullanmazsanız yüklenmeyeceği ve bu da daha yüksek bir sayfa hızına yol açacağı anlamına gelir. Bu nedenle, bir animasyon stili seçtiğinizden ve buna bağlı kaldığınızdan emin olmanız önemlidir. Örneğin, hareket efektleriyle gitmeyi seçebilir ve sayfanızdaki tüm animasyonu bu özellik etrafında yoğunlaştırabilirsiniz. Veya normal animasyon ayarlarına gidebilir ve o rotayı takip edebilirsiniz. Bu, yalnızca hafif bir sayfa oluşturmanıza izin vermekle kalmaz, aynı zamanda kullanıcı deneyimi cephesinde genellikle iyi bir şey olan öngörülebilirliği de güçlendirir.

Yazı Tipi Eşleştirme: 1 veya 2 Yazı Tipi Ailesine Bağlı kalın

Ayrıca tasarladığınız sayfalar için en fazla 2 yazı tipi ailesine bağlı kalmanızı öneririz. Bunu yaparak, sayfaya girmeden önce yüklenmesi gereken yazı tipi sayısını sınırlamış olursunuz.

4. Manuel Optimizasyon

Duyarlı İçerik: Mobil Cihazda Görüntü Boyutlarını Küçültün

Mobil sayfa hızı puanlarını artırmanıza yardımcı olacak bir diğer şey, Divi'de duyarlı içeriğin kullanılmasıdır. Bu, muhtemelen daha küçük ekran boyutlarında puanlarınızı en iyi şekilde artırmanıza yardımcı olabilecek özelliklerden biridir. Bu çok daha fazla çaba gerektirse de, kesinlikle buna değer. Görüntü düzenleme yazılımı aracılığıyla görüntünüzün boyutlarını/boyutunu küçültün ve masaüstünde gösterdiklerinin aksine bu daha küçük görüntüleri mobilde kullanın. Bu, resim dosyalarınızın boyutunu büyük ölçüde azaltacak ve mobil cihazlarda daha yüksek sayfa hızına yol açacaktır.

Dosya Türleri ve Sıkıştırma

Dosya boyutu daha düşük olduğundan, mümkün olduğunca JPEG'e bağlı kaldığınızdan emin olun. PNG genellikle yalnızca tasarımı yükseltmek için görüntünüzde şeffaflığa ihtiyacınız varsa anlamlıdır, ancak o zaman bile tasarımın çalışması için bir alternatif bulmaya çalışabilirsiniz. GIF gibi daha ağır dosya türlerinden de kaçının. Videoya gelince, özellikle arka planda oynatılmasını istiyorsanız, bu genellikle bir zorunluluktur. Ve elbette, kullandığınız dosyaları WordPress medya kitaplığınıza yüklemeden önce bile sıkıştırdığınızdan emin olun.

Kamera ARKASI

Yukarıdaki tüm ipuçları sayfa hızını artırmanıza yardımcı olabilir, ancak Divi dışındaki web sitesi optimizasyonu en iyi uygulamalarına dikkat etmeniz gerektiğini belirtmek önemlidir. Bu nihai kılavuza giderek daha fazla teknik bilgi bulabilirsiniz.

Divi ile Hızlı Sayfalar Oluşturma—Her zamankinden daha kolay

Divi'nin performans özellikleri ile web sitenizi oluşturmayı nasıl ele aldığınız arasında büyük bir örtüşme olduğu sonucuna kolayca varabiliriz. Divi, kısmi tarafla ilgilenir, böylece hepsini güzel ve hızlı bir web sitesinde bir araya getirmek için gereken ön uç en iyi uygulamalarına odaklanabilirsiniz. İşinize yarayan en iyi uygulamalar varsa, sohbeti devam ettirmek için bunları aşağıdaki yorum bölümünde paylaşmaktan çekinmeyin!