Web Verileri'ni optimize etmek için CSS ile ilgili teknikler
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.
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.
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.
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">
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](https://web.dev/static/articles/css-web-vitals/image/diagram-showing-layout-s-9f7571069ba78.png?authuser=5&hl=tr)
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.
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.
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.