I/O 2019'da kullanıma sunulan üç yeni web performansı özelliği hakkında bilgi edinin.
Google I/O 2019'daki "Geniş Ölçekte Hız" konulu konuşmada, önümüzdeki yıl web performansını iyileştireceğini umduğumuz üç şeyi duyurmuştuk.
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ı belirler. 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'de kullanıma sunuldu
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ın dışında olduğundan kullanıcıların bunları görüntülemek için sayfayı 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üklenir.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ı yakın bir yere geldiğinde" için tam keşif kuralları 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 yazımızı inceleyin.
Google Yazı Tipleri artık sorgu parametresi olarak font-display'i destekliyor
font-display özelliğinin artık display sorgu dizesi parametresi aracılığıyla tüm Google yazı tipleri için üretim ortamında kullanılabildiğini 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 değişikliğin, daha fazla geliştiricinin bu heyecan verici yeni özelliği denemesini sağlayacağını umuyoruz.
Glitch'te birden fazla yazı tipi ailesiyle display'i kullanmayla ilgili bir demo aşağıda verilmiştir. font-display: swap
'nin etkisini görmek için Geliştirici Araçları ağ emülasyonu ile deneyin.
Daha fazlası için izleyin
Görüşmemizde, kullanıcı deneyimini iyileştirmek için gelişmiş performans kalıplarının kullanıldığı çeşitli üretime yönelik örnek olay çalışmaları da ele alındı. 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 :)