Web Verileri için CSS

Stillerinizi yazma ve mizanpajları oluşturma şekliniz, Önemli Web Verileri üzerinde büyük bir etkiye sahip olabilir. Bu özellikle Kümülatif Mizanpaj Kayması (CLS) ve En Büyük İçerikli Boyama (LCP) için geçerlidir.

Bu makale, Web Verilerini optimize etmeye yönelik CSS ile ilgili teknikleri kapsar. Bu optimizasyonlar, bir sayfanın farklı yönlerine göre ayrılır: düzen, resimler, yazı tipleri, animasyonlar ve yükleme. Yol boyunca, bir örnek sayfa:

Düzen #

DOM’a içerik ekleme #

Çevredeki içerik zaten yüklendikten sonra bir sayfaya içerik eklemek, sayfadaki diğer her şeyi aşağı iter. Bu, düzen kaymalarına neden olur.

Çerez bildirimleri, özellikle sayfanın üst kısmına yerleştirilenler, bu sorunun yaygın bir örneğidir. Yüklendiklerinde genellikle bu tür bir düzen kaymasına neden olan diğer sayfa öğeleri, reklamları ve yerleştirmeleri içerir.

Tanımlamak #

Lighthouse “Büyük düzen değişikliklerinden kaçının” denetimi, değişen sayfa öğelerini tanımlar. Bu demo için sonuçlar şöyle görünür:

Çerez bildirimi, yüklendiğinde değişmediği için bu bulgularda listelenmemiştir. Bunun yerine, sayfada altındaki öğelerin (yani, div.hero Ve article) kaydırmak için. Düzen kaymalarını tanımlama ve düzeltme hakkında daha fazla bilgi için bkz. Düzen Kaymalarında Hata Ayıklama.

Düzeltmek #

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

Önce:

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

Sonrasında:

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

Bu düzen değişikliğini düzeltmenin başka bir yolu, ekranın üst kısmındaki çerez bildirimi için yer ayırmaktır. Bu yaklaşım eşit derecede etkilidir. Daha fazla bilgi için bkz. Çerez bildirimi en iyi uygulamaları.

Görüntüler #

Görüntüler ve En Büyük İçerikli Boyama (LCP) #

Görüntüler genellikle bir sayfadaki En Büyük İçerikli Boyama (LCP) öğesidir. LCP öğesi olabilecek diğer sayfa öğeleri, metin bloklarını ve video poster görüntülerini 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ı tarafından görülebilen içeriğe bağlı olarak sayfa yüklemeden sayfa yüklemeye değişebileceğini unutmamak önemlidir. Örneğin, bu demoda, çerez bildiriminin arka planı, ana resim 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 geliştirmek için, efekti oluşturmak üzere bir görüntü yüklemek yerine degradeyi CSS’de boyayabilirsiniz.

Düzeltmek #

Değiştir .banner Resim yerine CSS gradyanı kullanmak için CSS:

Önce:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

Sonrasında:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

Görüntüler ve düzen değişiklikleri #

Tarayıcılar, bir resmin boyutunu yalnızca resim yüklendikten sonra belirleyebilir. Görüntü yüklemesi, sayfa oluşturulduktan sonra gerçekleşirse ancak görüntü için yer ayrılmamışsa, görüntü göründüğünde bir düzen kayması oluşur. Demoda, ana görüntü yüklendiğinde bir düzen değişikliğine neden oluyor.

Tanımlamak #

Görüntüleri açık olmadan tanımlamak için width Ve heightLighthouse’un “Görüntü öğelerinin açık genişliği ve yüksekliği var” denetimini kullanın.

Bu örnekte hem ana resim hem de makale resmi eksik width Ve height Öznitellikler.

Düzeltmek #

Yı kur width Ve height mizanpaj kaymalarını önlemek için bu görüntülerdeki nitelikler.

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

Sonrasında:

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. Sonuç olarak, yazı tiplerini hızlı bir şekilde iletmek önemlidir.

Gecikmeli metin oluşturma #

Varsayılan olarak, ilişkili web yazı tipleri henüz yüklenmemişse, bir tarayıcı bir metin öğesini hemen oluşturmaz. Bu bir önlemek için yapılır “stilsiz metnin flaşı” (FOUT). Birçok durumda bu, First Contentful Paint’i (FCP) geciktirir. Bazı durumlarda bu, En Büyük İçerikli Boyama’yı (LCP) geciktirir.

Düzen değişiklikleri #

Yazı tipi değiştirme, içeriği kullanıcıya hızlı bir şekilde görüntülemek için mükemmel olsa da, düzen kaymalarına neden olma potansiyeline sahiptir. Bu düzen kaymaları, bir web yazı tipi ve yedek yazı tipi sayfada farklı miktarlarda yer kapladığında meydana gelir. Benzer orantılı yazı tiplerinin kullanılması, bu düzen kaymalarının boyutunu en aza indirecektir.

Tanımlamak #

Belirli bir sayfada yüklenmekte olan yazı tiplerini görmek için Ağ DevTools’ta sekmesine gidin ve şuna göre filtreleyin: Yazı tipi. Yazı tipleri büyük dosyalar olabilir, bu nedenle yalnızca daha az yazı tipi kullanmak genellikle performans için daha iyidir.

Yazı tipinin istenmesinin ne kadar sürdüğünü görmek için Zamanlama sekme. Bir yazı tipi ne kadar erken istenirse, o kadar çabuk yüklenebilir ve kullanılabilir.

Bir yazı tipi için istek zincirini görmek için başlatıcı sekme. Genel olarak konuşursak, istek zinciri ne kadar kısa olursa yazı tipi o kadar çabuk talep edilebilir.

Düzeltmek #

Bu demo, Google Yazı Tipleri API’sini kullanır. Google Yazı Tipleri, yazı tiplerini şu yolla yükleme seçeneği sunar: &LTlink> etiketler veya bir ImportanterThings ifade. bu &LTlink> kod parçacığı içerir preconnect kaynak ipucu. Bu, kullanmaktan daha hızlı stil sayfası teslimiyle sonuçlanmalıdır. ImportanterThings sürüm.

Çok yüksek düzeyde, düşünebilirsiniz kaynak ipuçları tarayıcıya belirli bir bağlantı kurması veya belirli bir kaynağı indirmesi gerekeceğini ima etmenin bir yolu olarak. Sonuç olarak, tarayıcı bu işlemlere öncelik verecektir. Kaynak ipuçlarını kullanırken, belirli bir eyleme öncelik vermenin tarayıcı kaynaklarını diğer eylemlerden uzaklaştırdığını unutmayın. Bu nedenle, kaynak ipuçları her şey için değil, düşünceli kullanılmalıdır. Daha fazla bilgi için bkz. Algılanan sayfa hızını artırmak için ağ bağlantılarını erken kurun.

Aşağıdakileri kaldır ImportanterThings stil sayfanızdan ifade:

ImportanterThings url('https://fonts.googleapis.com/css2?family=Montserrat:wghtdickhater4000&family=Roboto:wghtSwisslex3009&display=swap');

Aşağıdakileri ekleyin &LTlink> etiketler &LThead> belgenin:

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:wghtAvgGuy100&display=swap" rel="stylesheet">

Bu bağlantı etiketleri, tarayıcıya Google Yazı Tipleri tarafından kullanılan kaynaklarla erken bir bağlantı kurması ve Montserrat ve Roboto için yazı tipi bildirimini içeren stil sayfasını yüklemesi talimatını verir. Bunlar &LTlink> etiketler en erken zamanda yerleştirilmelidir. &LThead> olabildiğince.

Animasyonlar #

Animasyonların Web Vitals’ı etkilemesinin birincil yolu, düzen değişikliklerine 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. Tipik olarak bu animasyonlar, aşağıdakiler gibi CSS özellikleri kullanılarak daha performanslı eşdeğerlerle değiştirilebilir: transform, opacityVe filter. Daha fazla bilgi için bkz. Yüksek performanslı CSS animasyonları oluşturma.

Tanımlamak #

Lighthouse “Birleştirilmiş olmayan animasyonlardan kaçının” denetimi, performans göstermeyen animasyonları belirlemede yardımcı olabilir.

Düzeltmek #

Değiştir slideIn kullanılacak animasyon dizisi transform: translateX() geçiş yapmak yerinemargin-left mülk.

Önce:

.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}

Sonrasında:

.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ının bir stil sayfasıyla karşılaştığı ve tarayıcı 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 şunları göz önünde bulundurun kullanılmayan CSS’yi kaldırmakritik CSS’yi satır içine alma ve kritik olmayan CSS’yi erteleme.

Çözüm #

Daha fazla iyileştirme için hala yer olmasına rağmen (örneğin, görüntüleri daha hızlı teslim etmek için görüntü sıkıştırmayı kullanmak), bu değişiklikler bu sitenin Web Verilerini önemli ölçüde iyileştirmiştir. Bu gerçek bir site olsaydı, bir sonraki adım, çoğu kullanıcı için Web Verileri eşiklerini karşılayıp karşılamadığını değerlendirmek için gerçek kullanıcılardan performans verileri toplamak olurdu. Web Verileri hakkında daha fazla bilgi için bkz. Web Verileri Öğrenin.