Web Vitals'ı optimize etmek için CSS ile ilgili teknikler
Stillerinizi yazma ve düzenler oluşturma şekliniz Önemli Web Verileri'ni önemli ölçüde etkileyebilir. Bu durum özellikle Cumulative Layout Shift (CLS) ve Largest Contentful Paint (LCP) için geçerlidir.
Bu makalede, Web Vitals'ı optimize etmek için CSS ile ilgili teknikler ele alınmaktadır. Bu optimizasyonlar, sayfanın farklı yönlerine göre ayrılır: düzen, resimler, yazı tipleri, animasyonlar ve yükleme. Bu süreçte, örnek bir sayfayı iyileştirmeyi inceleyeceğiz:
Düzen
DOM'a içerik ekleme
Çevresindeki içerikler yüklendikten sonra bir sayfaya içerik eklemek, sayfadaki diğer her şeyi aşağı iter. Bu da düzenleme değişikliklerine neden olur.
Özellikle sayfanın üst kısmına yerleştirilenler olmak üzere çerez bildirimleri bu sorunun yaygın bir örneğidir. Yüklenirken genellikle bu tür düzen kaymalarına neden olan diğer sayfa öğeleri arasında reklamlar ve yerleştirilenler bulunur.
Tanımla
Lighthouse'un "Büyük düzen kaymalarından kaçının" denetimi, kaymış sayfa öğelerini tanımlar. Bu demoda sonuçlar şu şekilde görünür:
Çerez bildirimi, yüklenirken kaymadığı için bu bulgularda listelenmez. Bunun yerine, sayfadaki altındaki öğelerin (yani div.hero ve article) kaymasına neden olur. Sayfa düzeni kaymalarını tespit etme ve düzeltme hakkında daha fazla bilgi için Sayfa düzeni kaymalarında hata ayıklama başlıklı makaleyi inceleyin.
Düzelt
Çerez bildirimini, mutlak veya sabit konumlandırma kullanarak sayfanın alt kısmına yerleştirin.
Önce:
.banner {
position: sticky;
top: 0;
}
Sonra:
.banner {
position: fixed;
bottom: 0;
}
Bu düzen değişikliğini düzeltmenin bir başka yolu da ekranın üst kısmında çerez bildirimi için yer ayırmaktır. Bu yaklaşım da aynı derecede etkilidir. Daha fazla bilgi için Çerez bildirimi ile ilgili en iyi uygulamalar başlıklı makaleyi inceleyin.
Resimler
Resimler ve Largest Contentful Paint (LCP)
Görseller genellikle bir sayfadaki Largest Contentful Paint (LCP) öğesidir. LCP öğesi olabilecek diğer sayfa öğeleri arasında metin blokları ve video poster resimleri yer alır. LCP öğesinin yüklendiği zaman LCP'yi belirler.
Bir sayfanın LCP öğesinin, sayfa ilk kez görüntülendiğinde kullanıcıya görünen içeriğe bağlı olarak sayfa yüklemelerinde değişiklik gösterebileceğini unutmayın. Örneğin, bu demoda çerez bildiriminin arka planı, hero resmi ve makale metni potansiyel LCP öğelerinden bazılarıdır.
Örnek sitede, çerez bildiriminin arka plan resmi aslında büyük bir resimdir. LCP'yi iyileştirmek için efekti oluşturmak üzere bir resim yüklemek yerine CSS'de renk geçişini boyayabilirsiniz.
Düzelt
.banner CSS'sini, resim yerine CSS renk geçişi kullanacak şekilde değiştirin:
Önce:
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
Sonra:
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
Resimler ve düzen kaymaları
Tarayıcılar, bir resmin boyutunu yalnızca resim yüklendikten sonra belirleyebilir. Resim yükleme işlemi sayfa oluşturulduktan sonra gerçekleşirse ancak resim için yer ayrılmamışsa resim göründüğünde bir düzen kayması meydana gelir. Demoda, lokomotif resim yüklendiğinde düzen kaymasına neden oluyor.
Tanımla
Açıkça belirtilmiş width ve height değerleri olmayan resimleri belirlemek için Lighthouse'un "Resim öğelerinin açıkça belirtilmiş genişlik ve yüksekliği var" denetimini kullanın.
Bu örnekte hem hero resminde hem de makale resminde width ve height özellikleri eksik.
Düzelt
Düzen kaymalarını önlemek için bu resimlerde width ve height özelliklerini ayarlayın.
Önce:
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
Sonra:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
Yazı Tipleri
Yazı tipleri, metin oluşturmayı geciktirebilir ve düzen kaymalarına neden olabilir. Bu nedenle, yazı tiplerinin hızlı bir şekilde yayınlanması önemlidir.
Gecikmeli metin oluşturma
Varsayılan olarak, bir tarayıcı, ilişkili web yazı tipleri henüz yüklenmemişse metin öğesini hemen oluşturmaz. Bu, "stillendirilmemiş metin yanıp sönmesini" (FOUT) önlemek için yapılır. Bu durum çoğu durumda ilk zengin içerikli boyamayı (FCP) geciktirir. Bazı durumlarda bu durum Largest Contentful Paint'i (LCP) geciktirir.
Düzen kaymaları
Yazı tipi değiştirme, içeriği kullanıcıya hızlı bir şekilde göstermek için mükemmel olsa da düzen kaymalarına neden olabilir. Bu düzen kaymaları, bir web yazı tipi ve yedek yazı tipi sayfada farklı miktarda yer kapladığında gerçekleşir. Benzer oranda yazı tipleri kullanmak, bu düzen kaymalarının boyutunu en aza indirir.
Tanımla
Belirli bir sayfada yüklenen yazı tiplerini görmek için Geliştirici Araçları'nda Ağ sekmesini açın ve Yazı tipi'ne göre filtreleyin. Yazı tipleri büyük dosyalar olabileceğinden, genellikle daha az yazı tipi kullanmak performans açısından daha iyidir.
Yazı tipinin istenmesinin ne kadar sürdüğünü görmek için Zamanlama sekmesini tıklayın. Bir yazı tipi ne kadar erken istenirse o kadar erken yüklenebilir ve kullanılabilir.
Bir yazı tipinin istek zincirini görmek için Başlatıcı sekmesini tıklayın. Genel olarak, istek zinciri ne kadar kısa olursa yazı tipi o kadar erken istenebilir.
Düzelt
Bu demoda Google Fonts API kullanılmaktadır. Google Fonts, yazı tiplerini <link> etiketleri veya @import ifadesi aracılığıyla yükleme seçeneği sunar. <link> kod snippet'inde preconnect kaynak ipucu var. Bu, @import sürümünü kullanmaktan daha hızlı bir stil sayfası yayınlama işlemiyle sonuçlanacaktır.
Kaynak ipuçlarını, tarayıcıya belirli bir bağlantıyı kurması veya belirli bir kaynağı indirmesi gerektiğini ima etmenin bir yolu olarak düşünebilirsiniz. Sonuç olarak tarayıcı bu işlemlere öncelik verir. Kaynak ipuçlarını kullanırken belirli bir işleme öncelik vermenin, tarayıcı kaynaklarını diğer işlemlerden aldığını unutmayın. Bu nedenle, kaynak ipuçları her şey için değil, dikkatli bir şekilde kullanılmalıdır. Daha fazla bilgi için Algılanan sayfa hızını artırmak için ağ bağlantılarını erken oluşturma başlıklı makaleyi inceleyin.
Stil sayfanızdan aşağıdaki @import ifadesini kaldırın:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
Belgenin <head> bölümüne aşağıdaki <link> etiketlerini ekleyin:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
Bu bağlantı etiketleri, tarayıcıya Google Fonts tarafından kullanılan kaynaklarla erken bağlantı kurmasını ve Montserrat ile Roboto için yazı tipi beyanını içeren stil sayfasını yüklemesini söyler. Bu <link> etiketleri, <head>'un mümkün olduğunca başlarına yerleştirilmelidir.
Animasyonlar
Animasyonların Web Vitals'ı etkilemesinin birincil yolu, sayfa düzeninde kaymalara neden olmalarıdır. Kullanmaktan kaçınmanız gereken iki tür animasyon vardır: düzeni tetikleyen animasyonlar ve sayfa öğelerini hareket ettiren "animasyon benzeri" efektler. Genellikle bu animasyonlar, transform, opacity ve filter gibi CSS özellikleri kullanılarak daha yüksek performanslı eşdeğerleriyle değiştirilebilir. Daha fazla bilgi için Yüksek performanslı CSS animasyonlarını oluşturma başlıklı makaleyi inceleyin.
Tanımla
Lighthouse'un "Birleştirilmemiş animasyonlardan kaçının" denetimi, performansı düşük animasyonları belirlemenize yardımcı olabilir.
Düzelt
slideIn animasyon sırasını, margin-left mülkünde geçiş yapmak yerine transform: translateX() kullanacak şekilde değiştirin.
Önce:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
Sonra:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
Kritik CSS
Stil sayfaları oluşturmayı engelliyor. Bu, tarayıcı bir stil sayfasıyla karşılaştığında stil sayfasını indirip ayrıştırana kadar diğer kaynakları indirmeyi durduracağı anlamına gelir. Bu durum LCP'yi geciktirebilir. Performansı artırmak için kullanılmayan CSS'leri kaldırabilir, kritik CSS'leri satır içine alabilir ve kritik olmayan CSS'leri erteleyebilir.
Sonuç
Daha fazla iyileştirmeye (ör. resimleri daha hızlı yayınlamak için resim sıkıştırma özelliğini kullanma) yer olsa da bu değişiklikler bu sitenin Web Vitals metriklerini ö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 amacıyla gerçek kullanıcılardan performans verileri toplamak olurdu. Web Vitals hakkında daha fazla bilgi için Web Vitals hakkında bilgi edinin başlıklı makaleyi inceleyin.