Yeni INP metriğinin, JavaScript çerçeveleri ve kitaplıkları kullanılarak oluşturulan sitelerin deneyimini nasıl etkilediğini öğrenin.
Chrome kısa süre önce Chrome Kullanıcı Deneyimi Raporu'nda yeni bir deneysel duyarlılık metriği kullanıma sundu. Artık Interaction to Next Paint (INP) olarak bildiğimiz bu metrik, sayfadaki kullanıcı etkileşimlerine genel yanıt verme durumunu ölçer. Bugün, modern JavaScript çerçeveleri kullanılarak oluşturulan web sitelerinin bu metrik açısından nerede durduğuna dair analizleri paylaşmak istiyoruz. INP'nin çerçevelerle neden alakalı olduğunu ve Aurora ile çerçevelerin duyarlılığı optimize etmek için nasıl çalıştığını tartışmak istiyoruz.
Arka plan
Chrome, web sitelerinin yükleme duyarlılığını ölçmek için Core Web Vitals (CWV) kapsamında First Input Delay'i (FID) kullanır. FID, ilk kullanıcı etkileşiminin gerçekleştiği andan tarayıcının etkileşime bağlı etkinlik işleyicileri işleyebildiği ana kadar geçen bekleme süresini ölçer. Etkinlik işleyicilerinin işlenmesi, aynı sayfada sonraki etkileşimlerin işlenmesi veya etkinlik geri çağırmalarının çalıştırılmasının ardından bir sonraki karenin boyanması için geçen süre bu süreye dahil değildir. Ancak kullanıcılar sayfa yüklendikten sonra sayfa üzerinde geçirdikleri sürenin yaklaşık% 90'ını kullandığından, sayfa yaşam döngüsü boyunca kullanıcı deneyimi için duyarlılığın önemi büyüktür.
INP, kullanıcının etkileşimi başlattığı andan bir sonraki karenin ekranda boyandığı ana kadar web sayfasının kullanıcı etkileşimlerine yanıt vermesi için geçen süreyi ölçer. INP ile sayfanın yaşam döngüsündeki tüm etkileşimlerin algılanan gecikmesi için toplu bir ölçüm sunmayı umuyoruz. INP'nin, web sayfalarının yüklenme ve çalışma zamanındaki yanıt verme hızıyla ilgili daha doğru bir tahmin sağlayacağına inanıyoruz.
FID yalnızca ilk etkileşimin giriş gecikmesini ölçtüğünden, web geliştiricilerinin CWV iyileştirme süreci kapsamında sonraki etkileşimleri proaktif olarak optimize etmemiş olması muhtemeldir. Bu nedenle, özellikle etkileşim düzeyi yüksek olan sitelerin bu metrikte iyi bir performans göstermek için yoğun şekilde çalışmaya başlaması gerekecek.
Çerçevelerin rolü
Birçok web sitesi etkileşim sağlamak için JavaScript'i kullandığından INP puanı öncelikle ana iş parçacığında işlenen JavaScript miktarından etkilenir. JavaScript çerçeveleri, modern ön uç web geliştirmenin önemli bir parçasıdır ve geliştiricilere JavaScript kodunun yönlendirilmesi, etkinlik işlenmesi ve bölümlendirilmesi için değerli soyutlamalar sağlar. Bu nedenle, çerezler, bunları kullanan web sitelerinin duyarlılığını ve kullanıcı deneyimini optimize etmede merkezi bir role sahiptir.
Çerçeveler, web siteleri için FID'yi daha önce iyileştirerek daha iyi duyarlılığa yönelik adımlar atmış olabilir. Ancak artık mevcut yanıt verme metriği verilerini analiz etmeleri ve tespit edilen boşlukları gidermek için çalışmaları gerekiyor. Genel olarak INP'nin geçiş oranları daha düşüktür ve ölçüm sürecindeki fark ek kod optimizasyonu gerektirir. Bunun nedeni aşağıdaki tabloda özetlenmiştir.
Chrome'daki Aurora ekibi, geliştiricilerin performans ve CWV metrikleri de dahil olmak üzere kullanıcı deneyiminin farklı yönlerini iyileştirmelerine yardımcı olmak için açık kaynak web çerçeveleriyle çalışır. INP'nin kullanıma sunulmasıyla birlikte, çerçeve tabanlı web siteleri için CWV metriklerindeki değişikliğe hazırlanmak istiyoruz. CrUX raporlarındaki deneysel duyarlılık metriğine göre veri topladık. Çerçeve tabanlı web siteleri için INP metriğine geçişi kolaylaştırmak amacıyla analizler ve işlem öğeleri paylaşacağız.
Deneysel duyarlılık metriği verileri
200 milisaniyeden kısa veya eşit bir INP, iyi bir duyarlılığı gösterir. CrUX raporu verileri ve Haziran 2023'e ait ÖWV Teknoloji Raporu, popüler JavaScript çerçevelerinin duyarlılığı hakkında aşağıdaki bilgileri sağlar.
Tabloda, her çerçevedeki iyi bir yanıtlama puanı alan kaynakların yüzdesi gösterilmektedir. Sayılar cesaret verici olsa da iyileştirmeye çok yer olduğunu gösteriyor.
JavaScript, INP'yi nasıl etkiler?
Sahadaki INP değerleri, laboratuvarda gözlemlenen toplam engelleme süresi (TBT) ile iyi bir korelasyon gösterir. Bu, ana iş parçacığını uzun süre boyunca engelleyen komut dosyalarının INP için kötü olabileceği anlamına gelebilir. Herhangi bir etkileşimden sonra yoğun JavaScript yürütme, ana ileti dizisini uzun süre boyunca engelleyebilir ve söz konusu etkileşime verilen yanıtı geciktirebilir. Komut dosyalarının engellenmesine yol açan yaygın nedenlerden bazıları şunlardır:
Optimize edilmemiş JavaScript: Gereksiz kod veya kötü kod bölme ve yükleme stratejileri, JavaScript'in şişmesine ve ana iş parçacığının uzun süre boyunca engellenmesine neden olabilir. Kod bölme, aşamalı yükleme ve uzun görevlerin parçalara ayrılması yanıt sürelerini önemli ölçüde iyileştirebilir.
Üçüncü taraf komut dosyaları: Bazen bir etkileşimi işlemek için gerekli olmayan üçüncü taraf komut dosyaları (ör. reklam komut dosyaları), ana ileti dizisini engelleyebilir ve gereksiz gecikmelere neden olabilir. Temel komut dosyalarına öncelik vermek, üçüncü taraf komut dosyalarının olumsuz etkisini azaltmaya yardımcı olabilir.
Çoklu etkinlik işleyiciler: Her etkileşimle ilişkili ve her biri farklı bir komut dosyası çalıştıran birden fazla etkinlik işleyici, birbirini etkileyebilir ve uzun gecikmeler yaşanmasına neden olabilir. Bu görevlerin bazıları gerekli olmayabilir ve bir web işçisinde veya tarayıcı boşken planlanabilir.
Etkinlik işlemeyle ilgili çerçeve yükü: Çerçevelerde etkinlik işlemeyle ilgili ek özellikler/sentakslar olabilir. Örneğin, Vue öğelere etkinlik dinleyicileri eklemek için v-on'u kullanırken Angular kullanıcı etkinlik işleyicilerini sarmalar. Bu özelliklerin uygulanması, standart JavaScript'in ötesinde ek çerçeve kodu gerektirir.
Eşleme: JavaScript çerçevesi kullanıldığında, bir sunucunun bir sayfanın ilk HTML'sini oluşturması ve ardından web tarayıcısında etkileşimli olabilmesi için bu HTML'nin etkinlik işleyiciler ve uygulama durumuyla genişletilmesi yaygın bir durumdur. Bu sürece "sulandırma" denir. Bu işlem, JavaScript'in yüklenmesi ve hidrasyonun tamamlanması ne kadar sürerse o kadar uzun sürebilir. Ayrıca, sayfaların etkileşimli olmadığı halde etkileşimli gibi görünmesine neden olabilir. Besleme genellikle sayfa yükleme sırasında otomatik olarak veya yavaşça (ör. kullanıcı etkileşimi sırasında) gerçekleşir ve görev planlaması nedeniyle INP'yi veya işlem süresini etkileyebilir. React gibi kitaplıklarda, bir bileşenin oluşturulmasının bir kısmının sonraki karede olması ve daha maliyetli yan etkilerin gelecekteki karelere bırakılması için
useTransition'ten yararlanabilirsiniz. Bu nedenle, geçiş sırasında tıklamalar gibi daha acil güncellemelere yol açan güncellemeler, INP için iyi olabilecek bir kalıp olabilir.Önceden getirme: Sonraki gezinmeler için gereken kaynakları agresif bir şekilde önceden getirmek, doğru yapıldığında performans açısından kazanç sağlayabilir. Ancak SPA rotalarını senkronize olarak önceden alır ve oluşturursanız bu pahalı oluşturma işlemlerinin tümü tek bir karede tamamlanmaya çalışacağından INP'yi olumsuz yönde etkileyebilirsiniz. Bunun aksine, rotanızı önceden yüklemez ve bunun yerine gereken çalışmayı (ör.
fetch()) başlatıp boyamanın engellemesini kaldırırsınız. Çerçevenizin ön getirme yaklaşımının optimum kullanıcı deneyimini sağlayıp sağlamadığını ve bu yaklaşımın INP'yi nasıl (varsa) etkileyebileceğini yeniden incelemenizi öneririz.
Artık geliştiricilerin iyi bir INP puanı almak için sayfadaki her etkileşimden sonra yürütülen kodu incelemeye odaklanmaları ve hem birinci taraf hem de üçüncü taraf komut dosyaları için parçalara ayırma, yeniden sulandırma, yükleme stratejilerini ve her bir render() güncellemesinin boyutunu optimize etmeleri gerekecek.
Aurora ve çerçeveler INP sorunlarını nasıl ele alıyor?
Aurora, yaygın sorunlara yerleşik çözümler sunmak için en iyi uygulamaları dahil ederek çerçevelerle çalışır. Performansı optimize etmek için çerçevede güçlü varsayılanlar sunan çözümler üzerinde Next.js, Nuxt.js, Gatsby ve Angular ile birlikte çalıştık. Bu bağlamda yaptığımız çalışmaların öne çıkan noktalarını aşağıda bulabilirsiniz:
React ve Next.js: Next.js komut dosyası bileşeni, üçüncü taraf komut dosyalarının verimli bir şekilde yüklenmemesi nedeniyle ortaya çıkan sorunları gidermeye yardımcı olur. Next.js'de, paylaşılan kod için daha küçük boyutlu parçalara izin vermek üzere ayrıntılı parçalara bölme özelliği kullanıma sunulmuştur. Bu, tüm sayfalarda indirilen kullanılmayan ortak kod miktarını azaltmaya yardımcı olur. Ayrıca, INP verilerini Analytics hizmeti kapsamında kullanıma sunmak için Next.js ile birlikte çalışıyoruz.
Angular: Aurora, sunucu tarafı oluşturma ve besleme iyileştirmelerini keşfetmek için Angular ekibiyle ortaklık yapıyor. Ayrıca, INP'yi iyileştirmek için etkinlik işleme ve değişiklik algılama konusundaki ayrıntıları incelemeyi planlıyoruz.
Vue ve Nuxt.js: Özellikle komut dosyası yükleme ve oluşturma ile ilgili olarak ortak çalışma yollarını araştırıyoruz.
Çerçeveler, INP'yi iyileştirmeyi nasıl düşünüyor?
React ve Next.js
startTransition ve Suspense aracılığıyla uygulanan React.js zaman dilimleme, seçmeli veya aşamalı hidrasyonu etkinleştirmenize olanak tanır. Bu, hidrasyonun senkronize bir blok olmadığı anlamına gelir. Bu işlem, herhangi bir noktada kesintiye uğratılabilen küçük dilimlerde yapılır.
Bu, INP'yi iyileştirmeye yardımcı olur ve geçiş sırasında fareyle üzerine gelme efektlerine, tuş vuruşlarına ve tıklamalara daha hızlı yanıt vermenizi sağlar. Ayrıca, otomatik tamamlama gibi büyük geçişlerde bile React uygulamalarının duyarlı kalmasına yardımcı olur.
Next.js, rota geçişleri için varsayılan olarak startTransition kullanan bir yeni yönlendirme çerçevesi uyguladı. Bu sayede Next.js site sahipleri React zaman dilimlerini kullanabilir ve rota geçişlerinin yanıt hızını artırabilir.
Angular
Angular ekibi, INP'ye de yardımcı olması gereken çeşitli fikirleri araştırıyor:
- Bölgesiz: İlk paket boyutunu ve bir uygulamanın herhangi bir şey oluşturabilmesi için yüklenmesi gereken kodu azaltır.
- Sıvı alımı: Etkileşim için uygulamanın ne kadarının uyandırılması gerektiğini sınırlamak amacıyla ada tarzı sıvı alımı.
- CD'nin ek maliyetini azaltın: Örneğin, değişiklik algılamayı daha uygun maliyetli hale getirin, uygulamanın daha azını kontrol etmenin yollarını bulun ve nelerin değiştiğiyle ilgili reaktif sinyallerden yararlanın.
- Daha ayrıntılı kod bölme: İlk paketi daha küçük yapın.
- Yükleme göstergeleri için daha iyi destek: Örneğin, SSR yeniden oluşturma sırasında, rota gezinme sırasında ve yavaş yükleme işlemlerinde.
- Profil oluşturma araçları: Etkileşim maliyetini, özellikle belirli etkileşimler için değişiklik algılama maliyetini anlamak üzere daha iyi geliştirici araçları.
Bu iyileştirmeler sayesinde, düşük duyarlılığa ve kullanıcı deneyimine yol açan farklı sorunları giderebilir, çerçeve tabanlı web siteleri için CWV metriklerini ve yeni INP metriğini artırabiliriz.
Sonuç
INP puanının, web sitelerinin gelecekte yanıt verme hızını ve performansını iyileştirmesi için daha iyi bir pusula sunmasını bekliyoruz. 2023'te çerçeve geliştiricileri için daha fazla uygulanabilir ipucu sağlamak amacıyla mevcut INP kılavuzumuzu geliştireceğiz. Bunu şu şekilde başarmayı umuyoruz:
- Çerçeveler ve web geliştiricileri için INP'deki alan verilerine kolayca erişmek üzere kanal oluşturma.
- Varsayılan olarak INP'yi iyileştirecek özellikler oluşturmak için çerçevelerle çalışın.
INP optimizasyon yolculuklarına başlayan çerçeve kullanıcılarından geri bildirim almaktan memnuniyet duyarız.