Web Verileri için CSS

Web Verileri'ni optimize etmek için CSS ile ilgili teknikler

Katie Hempenius

Una Kravets

Stillerinizi yazma ve düzenleri oluşturma şeklinizin Önemli Web Verileri üzerinde büyük bir etkisi olabilir. 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 açıklanmaktadır. Bu optimizasyonlar, bir sayfanın düzen, resimler, yazı tipleri, animasyonlar ve yükleme gibi farklı özelliklerine göre ayrılır. Bu süreçte örnek bir sayfayı iyileştirmeyi keşfedeceğiz:

Düzen

DOM'ye içerik ekleme

Çevresindeki içerik yüklendikten sonra sayfaya içerik eklemek, sayfadaki diğer her şeyi aşağı iter. Bu, düzen değişikliklerine neden olur.

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

Tanımla

Lighthouse "Büyük düzen kaymalarından kaçının" denetimi, kayan sayfa öğelerini tanımlar. Bu demo için sonuçlar şu şekilde görünür:

Çerez bildiriminin kendisi yüklendiğinde kaymadığı için bu bulgularda çerez bildirimi listelenmez. Bunun yerine, sayfada 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 Geçişlerinde Hata Ayıklama bölümüne bakın.

Not: Lighthouse, bir sayfanın performansını yalnızca "sayfa yükleme" etkinliğine kadar analiz eder. Çerez banner'ları, reklamlar ve diğer widget'lar bazen sayfa yüklenene kadar yüklenmez. Bu düzen kaymaları, Lighthouse tarafından işaretlenmeseler bile kullanıcıları etkilemeye devam eder.

Düzelt

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

Ö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ında çerez bildirimi için yer ayırmaktır. Bu yaklaşım da aynı derecede etkilidir. Daha fazla bilgi için Çerez bildirimi en iyi uygulamaları bölümüne bakın.

Not: Çerez bildirimi, yüklendiğinde düzen kaymalarını tetikleyen birden çok sayfa öğesinden biridir. Bu sayfa öğelerini daha yakından inceleyebilmemiz için sonraki demo adımlarında çerez bildirimi yer almayacaktır.

Resimler

Resimler ve Largest Contentful Paint (LCP)

Resimler genellikle bir sayfadaki Largest Contentful Paint (LCP) öğesidir. LCP öğesi olabilecek diğer sayfa öğeleri, metin blokları 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örebildiği içeriğe bağlı olarak, sayfa yüklemesinden sayfa yüklemesine kadar değişiklik gösterebileceğini unutmayın. Örneğin, bu demoda çerez bildiriminin arka planı, hero resim ve makale metni, potansiyel LCP öğelerinden bazılarıdır.

Örnek sitede, çerez bildiriminin arka plan resmi aslında büyük bir resim. LCP'yi iyileştirmek için, efekt oluşturmak üzere bir resim yüklemek yerine gradyanı CSS'de 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ükleme sayfa oluşturulduktan sonra gerçekleşirse ancak resim için alan ayrılmamışsa resim göründüğünde bir düzen kayması gerçekleşir. Demoda gösterilen hero resim, yüklendiğinde düzende kaymaya neden olmaktadır.

Not: Resimlerin düzen kaymasına neden olması durumu, resimlerin yavaş yüklendiği durumlarda (örneğin, yavaş bağlantı veya dosya boyutu özellikle büyük bir resim yüklenirken) daha belirgindir.

Tanımla

Açık width ve height içermeyen görüntüleri tanımlamak için Lighthouse'un "Resim öğelerinin genişliği ve yüksekliği açıkça var" denetimini kullanın.

Bu örnekte hem lokomotif 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.

Not: Resim yüklemeyle ilgili diğer bir yaklaşım da width ve height özelliklerini belirterek srcset ve sizes özelliklerini kullanmaktır. Bu, farklı cihazlara farklı boyutlarda resimler sunmanıza olanak tanıyarak ek performans avantajı sağlar. Daha fazla bilgi için Duyarlı resimler sunma bölümüne bakın.

Yazı Tipleri

Yazı tipleri, metnin oluşturulmasını geciktirebilir ve düzen kaymalarına neden olabilir. Sonuç olarak yazı tiplerini hızlıca teslim etmek ö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 işlem, "stilsiz metnin yanıp sönmesini" (FOUT) önlemek için yapılır. Bu durum, çoğu durumda İlk Zengin İçerikli Boyama (FCP) geciktirir. Bazı durumlarda bu, Largest Contentful Paint'i (LCP) geciktirir.

Not: Varsayılan olarak, ilişkili web yazı tipi yüklenmediyse Chromium tabanlı ve Firefox tarayıcılar 3 saniyeye kadar metin oluşturmayı engeller. Safari, metin oluşturmayı süresiz olarak engeller. Engelleme süresi, tarayıcı bir web yazı tipi istediğinde başlar. Blok süresinin sonuna kadar yazı tipi hâlâ yüklenmemişse tarayıcı metni yedek bir yazı tipi kullanarak oluşturur ve kullanılabilir duruma geldiğinde web yazı tipini değiştirir.

Düzen kaymaları

Yazı tipi değiştirme, içeriğin kullanıcıya hızlı bir şekilde gösterilmesi için mükemmel olsa da, düzen kaymasına neden olma potansiyeline sahiptir. Bu düzen kaymaları, bir web yazı tipi ve yedek yazı tipi sayfada farklı miktarda yer kapladığında ortaya çıkar. Benzer şekilde oranlanmış yazı tipleri kullanmak, bu düzen kaymalarının boyutunu en aza indirir.

Bu örnekte, yazı tipi değiştirme işlemi 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, daha az yazı tipi kullanmak performans açısından genellikle daha iyi olur.

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üklenip kullanılabilir.

Bir yazı tipine ilişkin istek zincirini görmek için Başlatan 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ılır. Google Fonts, yazı tiplerini <link> etiketleri veya @import ifadesi aracılığıyla yükleme seçeneği sunar. <link> kod snippet'i, bir preconnect kaynak ipucu içerir. Böylece stil sayfası, @import sürümünü kullanmaktan daha hızlı yayınlanır.

Genel olarak kaynak ipuçlarını, tarayıcıya belirli bir bağlantıyı kurması veya belirli bir kaynağı indirmesi için ipucu vermesinin 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 götüreceğini unutmayın. Bu nedenle, kaynak ipuçlarını her şey için değil dikkatli bir şekilde kullanmalısınız. Daha fazla bilgi edinmek için Algılanan sayfa hızını iyileştirmek için ağ bağlantılarını erkenden oluşturma bölümüne bakın.

Şu @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ğıdaki <link> etiketlerini, dokümanın <head> öğesine 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 bir bağlantı kurmasını ve Montserrat ve Roboto için yazı tipi bildirimini içeren stil sayfasını yüklemesini söyler. Bu <link> etiketleri, <head> içinde mümkün olduğunca erken yerleştirilmelidir.

Not: Google Fonts'tan bir yazı tipinin yalnızca bir alt kümesini yüklemek için ?text= API parametresini ekleyin. Örneğin, ?text=ABC yalnızca "ABC"yi oluşturmak için gereken karakterleri yükler. Bu, yazı tiplerinin dosya boyutunu küçültmenin iyi bir yoludur.

Animasyonlar

Animasyonların Web Verileri'ni etkilemesinin birincil yolu, düzen kaymasına neden olduklarıdır. İki tür animasyon kullanmaktan kaçınmanız gerekir: düzeni tetikleyen animasyonlar ve sayfa öğelerini hareket ettiren "animasyon benzeri" efektler. Tipik olarak 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ı oluşturma bölümüne bakın.

Tanımla

Lighthouse "Birleştirilmemiş animasyonlardan kaçının" denetimi, performans sağlamayan animasyonları tanımlamak için yararlı olabilir.

Dikkat: Lighthouse "Birleştirilmemiş animasyonları kullanma" denetimi yalnızca iyi performans göstermeyen CSS animasyonlarını tanımlar. JavaScript'e dayalı animasyonlar (örneğin, bir öğeyi "animasyon etmek" için setInterval() kullanmak) performans açısından kötüdür ancak bu denetim tarafından işaretlenmez.

Düzelt

margin-left özelliğini geçirmek yerine slideIn animasyon sırasını 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 durumda, tarayıcı bir stil sayfasıyla karşılaşır ve stil sayfasını indirip ayrıştırıncaya kadar diğer kaynakları indirmeyi durdurur. Bu, LCP'de gecikmeye neden olabilir. 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 değerlendirin.

Sonuç

Hâlâ daha fazla iyileştirme yapılabilir (ör. resimleri daha hızlı göndermek için görüntü sıkıştırma özelliğinin kullanılması), bu değişiklikler sitenin Web Verileri'ni önemli ölçüde iyileştirdi. Bu gerçek bir site olsaydı ç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 verileri toplamak bir sonraki adım olacaktı. Web Verileri hakkında daha fazla bilgi için Web Verileri'ni Öğrenme sayfasına bakın.