Web Verileri için CSS

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

Katie Hempenius
Katie Hempenius

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:

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

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:

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

Ç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.

Düzelt

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

Sayfanın altı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ı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.

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.

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

Ö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.

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.

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

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.

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.

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.

Bir yazı tipi değişikliğinden kaynaklanan düzen kaymasını gösteren şema
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 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.

Geliştirici Araçları&#39;nda 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üklenip kullanılabilir.

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

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.

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

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.

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.

Lighthouse&#39;un &quot;Birleştirilmemiş animasyonlardan kaçınma&quot; denetimi

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.