Kuzey ışıkları ile ilgili Yenilikler

Kara Erickson
Kara Erickson
X

Chrome'un Aurora girişimi, web'deki kullanıcı deneyimini iyileştirmek için Chrome ile açık kaynak JavaScript çerçeveleri ve araçları arasındaki bir işbirliğidir. Aurora'yı yeni keşfettiyseniz misyonumuz ve metodolojimiz hakkında daha fazla bilgi edinmek için giriş yazımıza göz atın.

2021'den bu yana yol haritası yayınlamadığımız için neler yaptığımızı ve 2023'te kullanıma sunmayı planladığımız heyecan verici projeleri paylaşmak istiyoruz.

Projeyle ilgili son gelişmeler

Son birkaç yıldır Core Web Vitals'ı optimize etmek için Next.js, Angular ve Nuxt gibi çerçevelerle iş ortaklığı yapıyoruz. Son güncellememizden bu yana öne çıkan bazı noktaları aşağıda bulabilirsiniz.

Resimler

Resimler genellikle performans sorunlarına neden olur. Aşağıda, en iyi uygulamaların hazır olarak kullanılabilmesini sağlamak için çerçeve paydaşlarıyla birlikte uyguladığımız yöntemlerden bazıları verilmiştir. Böylece geliştiriciler, birlikte çalıştığımız çerçeveleri kullanırken varsayılan olarak en iyi şekilde resim yayınlayabilir.

Açısal resim yönergesi

Angular 15'te kullanılabilen ve özel olarak 13.4 ile 14.3'e geri bağlanmış Angular çerçevesi için kararlı bir resim yönergesi yayınladık. Bu yönerge, varsayılan olarak yerel gecikmeli yüklemeyi etkinleştirir, öncelikli resimlere fetchpriority ipuçları ekler ve duyarlı resimler için uygun srcset özelliklerini otomatik olarak oluşturur.

Etki: Lighthouse laboratuvar testi, Land's End'in QA ortamında resim yönergesinin kullanılmasından önce ve sonra gerçekleştirildi. Masaüstünde, ortanca Largest Contentful Paint (LCP) değeri 12,0 saniyeden 3,0 saniyeye düştü. Bu, LCP'de% 75 oranında bir iyileşme sağladı.

Film şeridi karşılaştırması: Yerel resim etiketleri içeren Birinci Web Sitesi ve Angular resim yönergesini içeren İkinci Web Sitesi.

Direktif hakkında daha fazla bilgiyi Angular resim direktifiyle resimleri optimize etme başlıklı blog yayınımızda bulabilirsiniz.

Yenilenen next/image

Ayrıca, Next.js ekibiyle birlikte çalışarak resim bileşenini, yerel gecikmeli yükleme ve fetchpriority HTML özelliği gibi yeni tarayıcı özelliklerini kullanacak şekilde güncelledik. Yeni sürüm, Next 13'ten itibaren varsayılan olarak kullanılabilir.

Etki : İş ortağımız Leboncoin, next/image'in yeni sürümüne geçerek bazı sayfaların LCP'sini% 60'a varan oranda iyileştirebildi.

Web yazı tipleri

Web yazı tipi optimizasyonu, yazı tipi kaynaklarının aktarım boyutunu azaltmaktan daha fazlasını içerdiğinden doğru şekilde yapılması zor olabilir. Web yazı tipleri, sayfanın kümülatif düzen kayması (CLS) metriğine de önemli ölçüde katkıda bulunabilir. Yazı tipi değişimlerinden kaynaklanan düzen kaymalarını en aza indirmek için önemli ölçüde çaba gerekir. Neyse ki bu görevi web geliştiricileri için daha da kolaylaştırmak amacıyla çeşitli çerçevelerle iş ortaklığı yaptık.

Next.js, Nuxt ve Vite'de iyileştirilmiş yazı tipi yedekleri için araçlar

Next 13'te, sayfanın yedek yazı tipinin boyutlarını, yüklendiğinde web yazı tipiyle daha iyi hizalanacak şekilde ayarlayan bir özellik kullanıma sunduk. Bu, yazı tipiyle ilgili CLS'yi azaltır. Metodolojimizi Nuxt ekibiyle paylaştık. Bu metodoloji, her ikisi de aynı temel algoritmayı kullanan nuxtjs/fontaine modülü ve fontaine Vite eklentisi için ilham kaynağı oldu.

Etki: İş ortağımız Vox Media, bu özelliği kullanarak The Verge'deki bazı sayfalarda CLS'yi üretim aşamasında 0'a düşürmeyi başardı.

İyileştirilmiş yedek yazı tipleri oluşturma ve yazı tipi yedek çerçeve araçları hakkında daha fazla bilgiyi blog yayınlarımızda bulabilirsiniz.

nuxtjs/google-fonts modülü

Google Font performansını optimize etmek için bir modül yayınlamak üzere Nuxt ekibiyle iş ortaklığı yaptık. Modül, ek bir sunucu gidiş dönüşünü önlemek için Google yazı tiplerini otomatik olarak indirir ve kendi bünyesinde barındırır. Ayrıca yazı tipi satır içi ekleme seçeneklerini de destekler.

Üçüncü taraf komut dosyaları

Üçüncü taraf JavaScript, performans sorunlarının potansiyel bir kaynağıdır ve bu komut dosyalarının planladığı çalışma, kullanıcı etkileşimlerinin çalışmasını geciktirebileceğinden Interaction to Next Paint (INP) gibi metrikleri etkileyebilir.

Üçüncü taraf komut dosyaları için next/script bileşeni

Next 12 ve sonraki sürümler için, yükleme sırasında kritik yolun engellenmesini önlemek amacıyla varsayılan olarak komut dosyalarını sulandırma işleminden sonra yükleyen bir komut dosyası bileşeni oluşturduk. Ayrıca, komut dosyalarını ana iş parçacığından tamamen kaldırmak için Partytown'u entegre eden bir web işleyici modu da mevcuttur.

Etki: Lighthouse laboratuvar testlerinde, CareerKarma, çalışan modu etkinken next/script component kullanarak LCP'de% 24 oranında düşüş elde etti.

LCP'de iyileşmeyi gösteren film şeridi karşılaştırması

Daha fazla bilgi için Next.js'de üçüncü taraf komut dosyası yüklemeyi optimize etme başlıklı blog yayınımızı okuyun.

Çeşitli

Çerçeve geliştiricileriyle olan iş ortaklıklarımız Core Web Vitals'ı iyileştirmekle sınırlı değildir. Ayrıca, yeni özelliklerden daha fazla yararlanmak ve geliştiricilerin en son web platformu özelliklerini kullanmaya başlamasını daha da kolaylaştırmak için çalışıyoruz.

Container sorguları polyfill'i

Kapsayıcı sorguları polyfill'ini daha geniş bir CSS özelliği grubunu desteklemek için güncelledik ve 1.0 sürümüne yönelik çalışmalarımız kapsamında performansını iyileştirdik.

Daha fazla bilgi için Container Query Polyfill'in İçinde başlıklı blog yayınımızı inceleyin.

Aurora için sırada ne var?

2023-2024'te, Core Web Vitals'ı çerçeve geliştiricileri için optimize etmek üzere planladığımız heyecan verici projeler var.

Önümüzdeki yıl aşağıdaki konulara odaklanacağız:

  • Next.js ve Nuxt için üçüncü taraf sarmalayıcı bileşenleri: Sarmalayıcı bileşenler, popüler üçüncü taraf kitaplıklarının LCP ve INP için en uygun şekilde yüklenmesini kolaylaştırabilir. Üçüncü tarafınızı yüklemek için komut dosyası etiketi yerine DOM'a bir bileşen etiketi bırakın. Çerçeve, en iyi yükleme stratejisini seçer. Daha fazla bilgi için RFC'ye bakın.

  • Angular SSR ve hidrasyon geliştirici deneyimi: SSR ve hidrasyon projesi üzerinde Angular ekibiyle yakın bir şekilde çalışıyoruz. Odak noktamız, SSR'yi kullanmayla ilgili geliştirici deneyimini iyileştirmek ve daha fazla uygulamanın LCP avantajlarından yararlanmasını sağlamaktı. SSR DOM değiştirme özellikleriyle ilgili resmi bir RFC için takipte kalın.

  • Angular resim yönü ve nuxt/image özellikleri: Angular için otomatik ön bağlantı ipucu oluşturma, temel <img> öğelerinden geçişe yardımcı olacak taşıma araçları, <picture> öğesi desteği ve yer tutucular gibi birçok heyecan verici özellik planlıyoruz. Ayrıca nuxt/image için bir dizi yeni özellik konusunda Nuxt ekibine danışacağız.

  • INP araştırması (çerçeveler arası): Interaction to Next Paint (INP), 2024'te First Input Delay (FID)'in yerini alacağı için çerçevelerde INP'yi iyileştirmeye yönelik desteği artırıyoruz. Bu kapsamda, çerçevelerdeki INP sorunlarının temel nedenlerinin analizi ve mümkün olduğunda çerçeve kullanıcıları için yerleşik çözümler oluşturulması yer alır.

  • Speedometer 3: 2023'ün modern web çerçevesi ortamını temsil etmek için karşılaştırma aracı Speedometer'ın yeni neslinin uygulanmasına da yardımcı oluyoruz.

En son gelişmeleri kaçırmayın

Aurora ekibinin en son haberlerini, teknik sohbetlerini ve blog yayınlarını takip etmek için açılış sayfamıza yer işareti koyun. Bizi Twitter'da da takip edebilirsiniz: