I/O 2019'da kullanıma sunulan üç yeni web performansı özelliği hakkında bilgi edinin.
Google I/O 2019'da düzenlenen "Geniş Ölçekte Hız" konuşması sırasında, önümüzdeki yıl web performansını iyileştireceğini umduğumuz üç noktayı duyurduk.
Lighthouse artık performans bütçesini destekliyor
LightWallet, Lighthouse'ta performans bütçeleri için destek ekleyen yeni bir özelliktir. Performans bütçeleri, sitenizin performansı için standartlar oluşturur. Daha da önemlisi, performansta gerilemelerin yayınlanmadan önce tespit edilmesini ve düzeltilmesini kolaylaştırır.
LightWallet, Lighthouse CLI'nin en yeni sürümünde kullanılabilir ve kurulumu yalnızca birkaç dakika sürer. Daha fazla bilgi için bu talimatları inceleyin.
Bütçelerinizin ne olması gerektiğinden emin değil misiniz? LightWallet uyumlu bir bütçe yapılandırması oluşturabilen deneysel Performans Bütçesi Hesaplayıcımızı deneyin.
Tarayıcı düzeyinde resim ve iframe geç yükleme özelliği web'e geliyor
Web sayfaları genellikle çok sayıda resim içerir. Bu resimler, veri kullanımına, sayfa şişmesine ve sayfaların daha yavaş yüklenmesine neden olur. Bu resimlerin çoğu ekran dışındadır ve kullanıcının bunları görüntülemek için ekranı kaydırması gerekir.
Şimdiye kadar, resimleri yavaş yükleme sorununu çözmek için bir JavaScript kitaplığı kullanmanız gerekiyordu ancak bu durum yakında değişebilir. Bu yaz Chrome, web'e standartlaştırılmış <img> ve <iframe> gecikmeli yükleme özelliğini getiren loading özelliği için destek sunmaya başlayacak.
loading özelliği, tarayıcıya ekran dışındaki resimlerin ve iFrame'lerin kullanıcılar yakınlarına gelene kadar yüklenmesini erteleme olanağı tanır. loading üç değeri destekler:
lazy: Yavaş yükleme için iyi bir adaydır.eager: Yavaş yükleme için iyi bir aday değildir. Hemen yükleyin.auto: Tarayıcı, ertelenmiş yükleme yapılıp yapılmayacağını belirler.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
"Kullanıcı sayfayı aşağı kaydırdığında" ile ilgili kesin buluşsal yöntemler tarayıcıya bırakılır. Genel olarak, tarayıcılarımızın ertelenen resimleri ve iframe içeriklerini görüntü alanına girmeden biraz önce getirmeye başlamasını umuyoruz.
loading özelliği, Chrome Canary'da işaretlerin arkasında uygulanır. about://flags/#enable-lazy-image-loading ve about://flags/#enable-lazy-frame-loading işaretlerini etkinleştirerek Chrome 75 ve sonraki sürümlerde bu demoyu deneyebilirsiniz.
Daha fazla bilgi için lütfen buradaki makaleyi inceleyin.
Google Yazı Tipleri artık sorgu parametresi olarak font-display'i destekliyor
font-display desteğinin artık tüm Google Yazı Tipleri için display query-string parametresi üzerinden kullanıma sunulduğunu duyurmuştuk:
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display tanımlayıcısı, web yazı tiplerinizin yüklenmesinin ne kadar sürdüğüne bağlı olarak nasıl oluşturulacağına veya yedek yazı tipine nasıl geçileceğine karar vermenize olanak tanır. auto, block, swap, fallback ve optional gibi çeşitli değerleri destekler.
Daha önce, Google Fonts'taki web yazı tipleri için font-display belirtmenin tek yolu bunları kendi kendine barındırmaktı. Ancak bu değişiklikle birlikte bunu yapma zorunluluğu ortadan kalktı.
Google Fonts dokümanları, varsayılan kod yerleşimlerine font-display'yi içerecek şekilde güncellendi (aşağıda gösterildiği gibi). Bu yeniliğin, daha fazla geliştiriciyi bu heyecan verici eklentiyi denemeye teşvik edeceğini umuyoruz.
Birden fazla yazı tipi ailesiyle görüntülü reklam kullanımı
konusunda bir demoyu burada bulabilirsiniz. font-display: swap'nin etkisini görmek için Geliştirici Araçları ağ emülasyonu ile deneyin.
Daha fazlası için izleyin
Konuşmamızda, kullanıcı deneyimini iyileştirmek için gelişmiş performans modellerinin kullanımıyla ilgili, üretimle ilgili birkaç örnek olaydan da bahsettik. Bu siteler arasında, sayfalarını hızlandırmak için resim CDN'lerinden, Brotli sıkıştırmasından, akıllı JavaScript yayınlama ve ön besleme özelliklerinden yararlananlar da yer aldı. Daha fazla bilgi edinmek için konuşmayı izleyin :)