Web Verileri için CSS

0
43

Web Verilerini optimize etmek için CSS ile ilgili teknikler

2 Haz 2021

Una Kravets

Stillerinizi yazma ve düzen oluşturma şekliniz, Önemli Web Verileri üzerinde büyük bir etkiye sahip olabilir. Bu, özellikle Kümülatif Düzen Kaydırma (CLS) ve En Büyük İçerikli Boyama (LCP) için geçerlidir.

Bu makale, Web Verilerini optimize etmek için CSS ile ilgili teknikleri kapsar. Bu optimizasyonlar, bir sayfanın farklı yönlerine göre ayrılır: düzen, resimler, yazı tipleri, animasyonlar ve yükleme. Bu arada, örnek bir sayfayı iyileştirmeyi keşfedeceğiz:

Örnek sitenin ekran görüntüsü

Yerleşim #

DOM #’a içerik ekleme

İçeriği çevreleyen içerik zaten yüklendikten sonra bir sayfaya içerik eklemek, sayfadaki diğer her şeyi aşağı iter. Bu, düzen kaymalarına neden olur.

Çerez bildirimleri, özellikle sayfanın en üstüne yerleştirilenler, bu sorunun yaygın bir örneğidir. Yüklendiğinde bu tür bir düzen değişikliğine neden olan diğer sayfa öğeleri arasında reklamlar ve yerleştirmeler bulunur.

# tanımla

Lighthouse “Büyük yerleşim değişikliklerinden kaçının” denetimi, değişen sayfa öğelerini tanımlar. Bu demo için sonuçlar şöyle görünür:

Deniz Feneri'nin 'Büyük yerleşim değişikliklerinden kaçının' denetimi

Çerez bildirimi bu bulgularda listelenmez çünkü çerez bildiriminin kendisi yüklendiğinde değişmemektedir. Bunun yerine, sayfada altındaki öğelerin (yani, div.hero ve makale) kaymasına neden olur. Düzen kaymalarını belirleme ve düzeltme hakkında daha fazla bilgi için bkz. Düzen Kaydırmalarında Hata Ayıklama.

Lighthouse, yalnızca “sayfa yükleme” olayına kadar bir sayfanın performansını analiz eder. Çerez afişleri, reklamlar ve diğer widget’lar bazen sayfa yüklenene kadar yüklenmez. Bu düzen değişiklikleri, Lighthouse tarafından işaretlenmemiş olsalar bile kullanıcıları etkilemeye devam eder.

# Düzelt

Mutlak veya sabit konumlandırma kullanarak çerez bildirimini sayfanın altına yerleştirin.

Sayfanın altında görüntülenen çerez bildirimi

Önce:

.banner {
pozisyon: yapışkan;
üst: 0;
}

Sonra:

.banner {
pozisyon: sabit;
alt: 0;
}

Bu düzen değişikliğini düzeltmenin başka bir yolu, ekranın üst kısmındaki çerez bildirimi için yer ayırmaktır. Bu yaklaşım eşit derecede etkilidir. Daha fazla bilgi için bkz. Çerez bildirimi en iyi uygulamaları.

Çerez bildirimi, yüklendiğinde düzen kaymalarını tetikleyen birden çok sayfa öğesinden biridir. Bu sayfa öğelerine daha yakından bakmamıza yardımcı olmak için sonraki demo adımları çerez bildirimini içermeyecektir.

Görüntüler #

Resimler ve En Büyük İçerikli Boya (LCP) #

Görüntüler genellikle bir sayfadaki En Büyük İçerikli Boyama (LCP) öğesidir. LCP öğesi olabilecek diğer sayfa öğeleri, metin bloklarını ve video poster resimlerini içerir. LCP öğesinin yüklendiği zaman, LCP’yi belirler.

Bir sayfanın LCP öğesinin, sayfa ilk görüntülendiğinde kullanıcının gördüğü içeriğe bağlı olarak sayfa yüklemesinden sayfa yüklemesine kadar değişebileceğini unutmamak önemlidir. Örneğin, bu demoda, çerez bildiriminin arka planı, ana resim ve makale metni potansiyel LCP öğelerinden bazılarıdır.

Farklı senaryolarda sayfanın LCP öğesini vurgulayan diyagram.

Örnek sitede, çerez bildiriminin arka plan resmi aslında büyük bir resimdir. LCP’yi iyileştirmek için, efekti oluşturmak için bir görüntü yüklemek yerine degradeyi CSS’de boyayabilirsiniz.

# Düzelt

.banner CSS’sini bir resim yerine bir CSS gradyanı kullanacak şekilde değiştirin:

Önce:

arka plan: url(“https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701_960_720.jpg”)

Sonra:

arka plan: doğrusal gradyan(135deg, #fbc6ff %20, #bdfff9 %90);

Görüntüler ve düzen kaymaları #

Tarayıcılar, yalnızca görüntü yüklendikten sonra görüntünün boyutunu belirleyebilir. Sayfa oluşturulduktan sonra resim yüklemesi gerçekleşirse, ancak resim için yer ayrılmamışsa, resim göründüğünde bir düzen kayması meydana gelir. Demoda, kahraman görüntüsü yüklendiğinde bir düzen kaymasına neden oluyor.

Düzen kaymalarına neden olan görüntüler olgusu, görüntülerin yavaş yüklendiği durumlarda daha belirgindir – örneğin, yavaş bağlantıda veya özellikle büyük dosya boyutuna sahip bir görüntü yüklerken.

# tanımla

Açık genişlik ve yükseklik içermeyen görüntüleri tanımlamak için Lighthouse’un “Görüntü öğelerinin açık genişlik ve yüksekliği var” denetimini kullanın.

Lighthouse'un 'Görüntü öğelerinin açık genişlik ve yüksekliği var' denetimi

Bu örnekte, hem ana resim hem de makale resminde genişlik ve yükseklik özellikleri eksik.

# Düzelt

Düzen kaymalarını önlemek için bu görüntülerdeki genişlik ve yükseklik özelliklerini ayarlayın.

Önce:

yüklenecek resim
yüklenecek resim

Sonra:

yüklenecek resim
yüklenecek resimGörüntü artık bir düzen kaymasına neden olmadan yüklenir.

Görüntüleri yüklemek için başka bir yaklaşım, genişlik ve yükseklik özniteliklerini belirtmekle birlikte srcset ve size özniteliklerini kullanmaktır. Bu, farklı cihazlara farklı boyutlu görüntüler sunmanıza olanak tanıyan ek performans avantajına sahiptir. Daha fazla bilgi için, bkz. Duyarlı resimler sunma.

Yazı Tipleri #

Yazı tipleri, metin oluşturmayı geciktirebilir ve düzen kaymalarına neden olabilir. Sonuç olarak, yazı tiplerini hızlı bir şekilde teslim etmek önemlidir.

Gecikmeli metin oluşturma #

Varsayılan olarak, ilişkili web yazı tipleri henüz yüklenmemişse, tarayıcı bir metin öğesini hemen oluşturmaz. Bu, “stillenmemiş metnin parlamasını” (FOUT) önlemek için yapılır. Birçok durumda bu, First Contentful Paint’i (FCP) geciktirir. Bazı durumlarda bu, En Büyük İçerikli Boyamayı (LCP) geciktirir.

Varsayılan olarak, Chromium tabanlı ve Firefox tarayıcıları, ilişkili web yazı tipi yüklenmemişse metin oluşturmayı 3 saniyeye kadar engeller; Safari, metin oluşturmayı süresiz olarak engeller. Engelleme süresi, tarayıcı bir web yazı tipi istediğinde başlar. Blok döneminin sonunda yazı tipi hala yüklenmemişse, tarayıcı metni bir geri dönüş yazı tipi kullanarak oluşturacak ve kullanılabilir olduğunda web yazı tipini değiştirecektir.

Düzen kaymaları #

Yazı tipi değiştirme, içeriği kullanıcıya hızlı bir şekilde görüntülemek için mükemmel olsa da, düzen kaymalarına neden olma potansiyeline sahiptir. Bu düzen kaymaları, bir web yazı tipi ve onun yedek yazı tipi sayfada farklı miktarlarda yer kapladığında meydana gelir. Benzer orantılı yazı tiplerinin kullanılması, bu düzen kaymalarının boyutunu en aza indirecektir.

Yazı tipi değişiminin neden olduğu bir düzen kaymasını gösteren diyagramBu örnekte, yazı tipi değiştirme, sayfa öğelerinin beş piksel yukarı kaymasına neden oldu.

# tanımla

Belirli bir sayfada yüklenmekte olan yazı tiplerini görmek için DevTools’ta Ağ sekmesini açın ve Yazı Tipine göre filtreleyin. Yazı tipleri büyük dosyalar olabilir, bu nedenle yalnızca daha az yazı tipi kullanmak performans açısından genellikle daha iyidir.

DevTools'ta görüntülenen bir yazı tipinin ekran görüntüsü

Yazı tipinin talep edilmesinin ne kadar sürdüğünü görmek için Zamanlama sekmesine tıklayın. Bir yazı tipi ne kadar erken istenirse, o kadar çabuk yüklenebilir ve kullanılabilir.

DevTools'da 'Zamanlama' sekmesinin ekran görüntüsü

Bir yazı tipinin istek zincirini görmek için Başlatıcı sekmesine tıklayın. Genel olarak, istek zinciri ne kadar kısa olursa, yazı tipi o kadar erken talep edilebilir.

DevTools'da 'Başlatıcı' sekmesinin ekran görüntüsü

# Düzelt

Bu demo, Google Fonts API’sini kullanır. Google Fonts, yazı tiplerini şu şekilde yükleme seçeneği sunar: etiketler veya bir @import ifadesi. kod parçacığı, bir ön bağlantı kaynağı ipucu içerir. Bu, @import sürümünü kullanmaktan daha hızlı stil sayfası teslimi ile sonuçlanmalıdır.

Çok yüksek düzeyde, kaynak ipuçlarını, tarayıcıya belirli bir bağlantı kurması veya belirli bir kaynağı indirmesi gerekeceği konusunda ipucu vermenin bir yolu olarak düşünebilirsiniz. Sonuç olarak, tarayıcı bu eylemlere öncelik verecektir. Kaynak ipuçlarını kullanırken, belirli bir eyleme öncelik vermenin tarayıcı kaynaklarını diğer eylemlerden uzaklaştırdığını unutmayın. Bu nedenle, kaynak ipuçları her şey için değil, düşünceli bir şekilde kullanılmalıdır. Daha fazla bilgi için bkz. Algılanan sayfa hızını iyileştirmek için ağ bağlantılarını erken kurun.

Aşağıdaki @import ifadesini stil sayfanızdan kaldırın:

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap’);

Aşağıdakileri ekleyin etiketler belgenin:

Bu bağlantı etiketleri, tarayıcıya, Montserrat ve Roboto için yazı tipi bildirimini içeren stil sayfasını yüklemek için https://fonts.gstatic.com amd ile erken bir bağlantı kurmasını söyler. Bunlar etiketler en erken olabildiğince.

Google Fonts’tan yalnızca bir yazı tipinin alt kümesini yüklemek için ?text= API parametresini ekleyin. Örneğin, ?text=ABC, yalnızca “ABC” oluşturmak için gerekli karakterleri yükler. Bu, bir yazı tipinin dosya boyutunu küçültmenin iyi bir yoludur.

Animasyonlar #

Animasyonların Web Verilerini etkilemesinin birincil yolu, düzen kaymalarına neden olmalarıdır. Kullanmamanız gereken iki tür animasyon vardır: düzeni tetikleyen animasyonlar ve sayfa öğelerini hareket ettiren “animasyon benzeri” efektler. Tipik olarak bu animasyonlar, dönüştürme, opaklık ve filtre gibi CSS özellikleri kullanılarak daha performanslı eşdeğerlerle değiştirilebilir. Daha fazla bilgi için bkz. Yüksek performanslı CSS animasyonları nasıl oluşturulur.

# tanımla

Lighthouse “Birleştirilmiş olmayan animasyonlardan kaçının” denetimi, performans göstermeyen animasyonları belirlemek için yardımcı olabilir.

Deniz Feneri'nin 'Birleştirilmiş olmayan animasyonlardan kaçının' denetimi

Dikkat:

Lighthouse “Birleştirilmiş olmayan animasyonlardan kaçının” denetimi yalnızca performans göstermeyen CSS animasyonlarını tanımlar; JavaScript güdümlü animasyonlar (örneğin, bir öğeyi “canlandırmak” için setInterval() kullanılması) performans açısından kötüdür ancak bu denetim tarafından işaretlenmez.

# Düzelt

SlideIn animasyon sırasını, themargin-left özelliğinin geçişini yapmak yerine transform: translateX()’i kullanacak şekilde değiştirin.

Önce:

.başlık {
animasyon: slayt 1s 1 kolaylık;
}

@keyframes slideIn {
{
sol kenar boşluğu: -%100;
}
{ için
sol kenar boşluğu: 0;
}
}

Sonra:

.başlık {
animasyon: slayt 1s 1 kolaylık;
}

@keyframes slideIn {
{
transform: translateX(-100%);
}

{ için
dönüştürmek: çevirX(0);
}
}

Kritik CSS #

Stil sayfaları oluşturmayı engelliyor. Bu, tarayıcının bir stil sayfasıyla karşılaştığı, tarayıcı stil sayfasını indirip ayrıştırana kadar diğer kaynakları indirmeyi durduracağı anlamına gelir. Bu, LCP’yi geciktirebilir. Performansı artırmak için kullanılmayan CSS’yi kaldırmayı, kritik CSS’yi satır içine almayı ve kritik olmayan CSS’yi ertelemeyi düşünün.

Sonuç #

Daha fazla iyileştirme için hala yer olmasına rağmen (örneğin, görüntüleri daha hızlı sunmak için görüntü sıkıştırmayı kullanmak), bu değişiklikler bu sitenin Web Verilerini önemli ölçüde iyileştirdi. Bu gerçek bir site olsaydı, sonraki adım, çoğu kullanıcı için Web Vitals eşiklerini karşılayıp karşılamadığını değerlendirmek için gerçek kullanıcılardan performans verileri toplamak olurdu. Önemli Web Verileri hakkında daha fazla bilgi için bkz. Web Verilerini Öğrenme.

Son güncelleme: 2 Haz 2021 Makaleyi iyileştirin

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz