Web Verileri için CSS

Web Vitals'ı optimize etmek için CSS ile ilgili teknikler

Katie Hempenius
Katie Hempenius
X
Una Kravets

Stillerinizi yazma ve derleme düzenlerini yazma şekliniz, Core Web Vitals'ı önemli ölçüde etkileyebilir. Bu durum özellikle Cumulative Layout Shift (CLS) ve Largest ContentfulPaint (LCP) için geçerlidir.

Bu makalede, Web Verileri'ni optimize etmek için CSS ile ilgili teknikler ele alınmaktadır. Bu optimizasyonlar, bir 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:

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

Düzen

DOM'e içerik ekleme

Bir sayfayı çevreleyen içerik yüklendikten sonra buraya içerik eklemek, sayfadaki diğer her şeyi aşağı iter. Bu da düzen kaymalarına neden olur.

Çerez bildirimleri, özellikle de sayfanın üst kısmına yerleştirilenler, bu sorun için yaygın bir örnektir. 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:

Lighthouse'ın "Büyük düzen kaymalarından kaçının" denetimi

Çerez bildirimi yüklendiğinde kendisinin kaymadığı için bildirim bu bulgularda listelenmez. Bunun yerine, sayfadaki altındaki öğelerin (yani div.hero ve article) kaymasına neden olur. Düzen kaymalarını tanımlama ve düzeltme hakkında daha fazla bilgi için Düzen Kaydırmalarında Hata Ayıklama bölümüne bakın.

Düzelt

Çerez bildirimini, mutlak veya sabit konumlandırma kullanarak sayfanın alt kısmına yerleştirin.

Sayfanın alt kısmında çerez bildirimi gösteriliyor

Önce:

.banner {
  position: sticky;
  top: 0;
}

Sonra:

.banner {
  position: fixed;
  bottom: 0;
}

Bu düzen kaymasını düzeltmenin bir başka yolu da ekranın üst kısmındaki ç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)

Resimler 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üklenme zamanı, LCP'yi belirler.

Bir sayfanın LCP öğesinin, sayfa ilk kez görüntülendiğinde kullanıcıya gösterilen içeriğe bağlı olarak sayfa yükleme işleminden sayfa yüklemeye kadar değişebileceğini unutmayın. Örneğin, bu demoda çerez bildiriminin arka planı, hero resim ve makale metni, olası LCP öğelerinden bazılarıdır.

Farklı senaryolarda sayfanın LCP öğesini vurgulayan şema.

Ö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 bir CSS gradyanı 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üklenmesi, sayfa oluşturulduktan sonra gerçekleşir ancak resim için hiç alan ayrılmamışsa resim göründüğünde bir düzen kayması gerçekleşir. 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.

Lighthouse'un "Resim öğelerinin genişliği ve yüksekliği açıkça belirtilmiş" denetimi

Bu örnekte, hem hero resim hem de makale resminde width ve height özellikleri eksiktir.

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">
Resim artık düzen kaymasına neden olmadan yükleniyor.

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, 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. Bu, bazı durumlarda 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ı miktarlarda alan kapladığında gerçekleşir. Benzer şekilde orantılı yazı tipleri kullanmak, bu düzen kaymalarının boyutunu en aza indirir.

Yazı tipi değişiminin neden olduğu bir düzen değişikliğini gösteren diyagram
Bu örnekte, yazı tipi değişimi sayfa öğelerinin beş piksel yukarı kaymasına neden olmuştur.

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 olabilir. Bu nedenle, yalnızca daha az yazı tipi kullanmak genellikle daha iyi performans sağlar.

DevTools&#39;da görüntülenen bir yazı tipinin ekran görüntüsü

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.

Geliştirici Araçları&#39;ndaki &quot;Zamanlama&quot; sekmesinin ekran görüntüsü

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.

Geliştirici Araçları&#39;ndaki &quot;Başlatıcı&quot; sekmesinin ekran görüntüsü

Düzelt

Bu demo, Google Fonts API'yi kullanır. Google Fonts, yazı tiplerini <link> etiketleri veya @import ifadesi aracılığıyla yükleme seçeneği sunar. <link> kod snippet'i preconnect kaynak ipucu içerir. Bu yöntem, stil sayfasının @import sürümünü kullanmaya kıyasla daha hızlı yayınlanmasını sağlar.

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ı iyileştirmek için ağ bağlantılarını erkenden kurma bölümüne bakın.

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 Verileri'ni etkilemesinin birincil yolu, düzen kaymalarına neden olması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 animasyon oluşturma başlıklı makaleyi inceleyin.

Tanımla

Lighthouse "Bileşik olmayan animasyonlardan kaçının" denetimi, iyi performans göstermeyen animasyonları tanımlamak için faydalı olabilir.

Lighthouse&#39;un &quot;Bileşik olmayan animasyonları kullanma&quot; denetimi

Düzelt

slideIn animasyon dizisini, margin-left özelliğini değiştirmek 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, 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ştirme yapılması (örneğin, resimleri daha hızlı yayınlamak için resim sıkıştırma özelliğini kullanma) olsa da bu değişiklikler, bu sitenin Web Verileri'ni önemli ölçüde iyileştirdi. Bu gerçek bir site olsaydı bir sonraki adımınız, çoğu kullanıcı için Web Verileri eşiklerini karşılayıp karşılamadığını değerlendirmek amacıyla gerçek kullanıcılardan performans verilerini toplamak olurdu. Web Vitals hakkında daha fazla bilgi için Web Vitals hakkında bilgi edinin başlıklı makaleyi inceleyin.