I/O 2019'da duyurulan üç yeni web performansı lansmanı hakkında bilgi edinin.
Google I/O 2019'daki "Ölçekte Hız" konuşması sırasında, önümüzdeki yıl web performansını iyileştireceğini umduğumuz üç şeyi 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 belirler. Daha da önemlisi, performans gerilemelerini yayınlanmadan önce tespit edip düzeltmenize olanak tanır.
LightWallet, Lighthouse CLI'nin 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 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 durum veri kullanımını, sayfa boyutunu ve sayfa yükleme sürelerini artırır. Bu resimlerin çoğu ekran dışındadır ve kullanıcının bunları görüntülemek için sayfayı kaydırması gerekir.
Şimdiye kadar, resimlerin geç yüklenmesini çözmek için bir JavaScript kitaplığı kullanmanız gerekiyordu ancak bu durum yakında değişebilir. Chrome, bu yaz web'e standartlaştırılmış <img> ve <iframe> geç yükleme özelliği getiren loading özelliğini desteklemeye başlayacak.
loading özelliği, tarayıcının ekran dışı resimlerin ve iframe'lerin yüklenmesini kullanıcılar ekranı kaydırarak bunlara yaklaşana 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 uygun bir aday değil. Hemen yükleyin.auto: Tarayıcı, geç 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ı yaklaştığında" ifadesinin tam olarak ne anlama geldiği tarayıcıya bırakılmıştır. Genel olarak, tarayıcıların ertelenen resimleri ve iframe içeriğini görüntü alanına girmeden biraz önce getirmeye başlayacağını umuyoruz.
loading özelliği, Chrome Canary'de işaretlerin arkasında uygulanır. about://flags/#enable-lazy-image-loading ve about://flags/#enable-lazy-frame-loading flag'leri etkinleştirilmiş Chrome 75 ve sonraki sürümlerde bu demoyu deneyebilirsiniz.
Geç yükleme özelliği hakkında daha fazla bilgi edinmek için bu makaleyi inceleyebilirsiniz.
Google Fonts artık font-display'i sorgu parametresi olarak destekliyor
font-display desteğinin, display sorgu dizesi parametresi aracılığıyla tüm Google Fonts için üretimde kullanılabildiğ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 dahil olmak üzere çeşitli değerleri destekler.
Daha önce, Google Fonts'taki web yazı tipleri için font-display değerini belirtmenin tek yolu bunları kendi sunucunuzda barındırmaktı ancak bu değişiklik sayesinde artık buna gerek kalmayacak.
Google Fonts belgeleri, varsayılan kod yerleştirmelerine font-display parametresini ekleyecek şekilde güncellendi (aşağıda gösterildiği gibi). Bu sayede daha fazla geliştiricinin bu heyecan verici yeni özelliği deneyeceğini umuyoruz.
Glitch'te birden fazla yazı tipi ailesiyle display kullanımına dair bir demo bulabilirsiniz. font-display: swap etkisini görmek için Geliştirici Araçları ağ emülasyonu ile deneyin.
Daha fazla bilgi için izleyin
Konuşmamızda, kullanıcı deneyimini iyileştirmek için gelişmiş performans kalıplarının kullanıldığı çeşitli üretim örnek olayları da ele alındı. Bu siteler, sayfalarını hızlandırmak için resim CDN'leri, Brotli sıkıştırma, akıllı JavaScript sunma ve önceden getirme gibi yöntemlerden yararlanıyordu. Daha fazla bilgi edinmek için konuşmayı izleyin.