Geniş ölçekte hız: Web performansındaki yenilikler neler?

I/O 2019'da kullanıma sunulan üç yeni web performansı özelliği hakkında bilgi edinin.

Katie Hempenius
Katie Hempenius

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.

Dosya boyutu bütçesini aşan öğeleri gösteren bir LightWallet raporu.

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.

İsteğe bağlı olarak yüklenen ekran dışı içeriği vurgulayan tarayıcı düzeyinde geç yükleme

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.

URL&#39;ye sorgu parametresi olarak font-display dahil edilen Google Yazı Tipleri yerleştirme kodu

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 :)