I/O 2019'da web performansına yönelik üç yeni lansman hakkında bilgi edinin.
Google I/O 2019'da düzenlenen "Büyük Ölçekte Hız" konuşmasında, gelecek yıl web performansını iyileştirmesini umduğumuz üç şeyi duyurduk.
Lighthouse artık Performans Bütçelemesini destekliyor
LightWallet, Lighthouse'ta performans bütçelerini destekleyen yeni bir özelliktir. Performans bütçeleri, sitenizin performansı için standartlar belirler. Daha da önemlisi, ürün kullanıma sunulmadan önce performans gerilemelerini belirleyip düzeltmeyi kolaylaştırır.
Lightwallet, Lighthouse CLI'ın en yeni sürümünde kullanılabilir ve kurulumu yalnızca birkaç dakika sürer. Bu talimatlar daha fazla bilgi sağlar.
Bütçelerinizin ne kadar olması gerektiğinden emin değil misiniz? Lightbox ile uyumlu bir bütçe yapılandırması oluşturabilen deneysel Performans Bütçe Hesaplayıcı aracımızı deneyin.
Tarayıcı düzeyinde resim ve iframe geç yükleme özelliği artık web'de
Web sayfaları genellikle çok sayıda resim içerir. Bu da veri kullanımına, sayfa şişirme ve sayfa yüklemelerinin daha yavaş olmasına katkıda bulunur. Bu resimlerin birçoğu ekran dışındadır ve kullanıcının onları görüntülemek için ekranı kaydırması gerekir.
Şimdiye kadar JavaScript kitaplığı kullanarak resimleri geç yükleme sorununu çözmeniz gerekiyordu ancak bu durum yakında değişebilir. Bu yaz Chrome, standartlaştırılmış <img> ve <iframe> geç yüklemeyi web'e getiren loading özelliği için desteği kullanıma sunacak.
loading özelliği, tarayıcının ekran dışındaki resimlerin ve iframe'lerin yüklenmesini, kullanıcılar yaklaşıncaya kadar ertelemesine olanak tanır. loading, üç değeri destekler:
lazy: Geç yükleme için iyi bir adaydır.eager: Geç yükleme için iyi bir aday değildir. Hemen yükleyin.auto: Tarayıcı, geç yüklenip yüklenmeyeceğini belirler.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
"Kullanıcı sayfayı kaydırdığında" ifadesinin tam buluşsal yöntemleri tarayıcıya bırakılır. Genel olarak, tarayıcıların ertelenmiş resimleri ve iframe içeriğini görüntü alanına girmeden biraz önce getirmeye başlayacağını umuyoruz.
loading özelliği, Chrome Canary'deki işaretlerin arkasında uygulanır. Bu demoyu Chrome 75 ve sonraki sürümlerde about://flags/#enable-lazy-image-loading ve about://flags/#enable-lazy-frame-loading işaretleri açık olarak deneyebilirsiniz.
Daha ayrıntılı bilgi için geç yükleme özelliğiyle ilgili bir yazma sunulmaktadır.
Google Fonts artık font-display'i sorgu parametresi olarak destekliyor
font-display desteğinin artık tüm Google Yazı Tipleri için display query-string parametresi aracılığıyla üretimde kullanılabileceğini duyurduk:
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display tanımlayıcısı, web yazı tiplerinizin yüklenme süresine bağlı olarak nasıl oluşturulacağına veya yedekleneceğine karar vermenizi sağlar. auto, block, swap, fallback ve optional gibi birkaç değeri destekler.
Önceden, Google Fonts'taki web yazı tipleri için font-display belirtmenin tek yolu bunları kendi kendine barındırmaktı ancak bu değişiklik bunu yapma ihtiyacını ortadan kaldırıyor.
Google Fonts dokümanları, varsayılan kod yerleştirmelerine font-display eklenecek şekilde güncellendi (aşağıda göründüğü gibi). Bunun, daha fazla geliştiriciyi bu heyecan verici eklemeyi denemeye teşvik edeceğini umuyoruz.
Birden fazla yazı tipi ailesine sahip görüntülü reklam kullanma hakkındaki demoyu burada bulabilirsiniz. font-display: swap etkisini görmek için DevTools ağ emülasyonu ile deneyin.
Daha fazlası için izleyin
Konuşmamızda, kullanıcı deneyimini iyileştirmek için gelişmiş performans kalıplarının kullanıldığı, üretimle ilgili bazı örnek olayları da ele aldık. Bunların arasında resim CDN'lerinden, Brotli sıkıştırma'dan, akıllı JavaScript sunumu ve sayfalarını hızlandırmak için önceden getirme özelliklerinden yararlanan siteler de yer alıyordu. Daha fazla bilgi edinmek için konuşmayı izleyin :)