Yeni INP metriğinin, JavaScript çerçeveleri ve kitaplıkları kullanılarak oluşturulan sitelerin deneyimini nasıl etkilediğini anlayın.
Chrome kısa süre önce Chrome Kullanıcı Deneyimi Raporu raporunda yeni bir deneysel yanıt verme metriği özelliğini kullanıma sundu. Artık Sonraki Boyamayla Etkileşim (INP) olarak bilinen bu metrik, sayfadaki kullanıcı etkileşimlerine genel yanıt verme hızını ölçer. Bugün, modern JavaScript çerçeveleri kullanılarak oluşturulan web sitelerinin bu metriğe kıyasla ne durumda olduğuyla ilgili analizler paylaşmak istiyoruz. INP'nin neden çerçevelerle 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'ın (CWV) bir parçası olarak First Input Delay (FID) özelliğini kullanır. FID, ilk kullanıcı etkileşiminden 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şleyicilerini işleme, aynı sayfadaki sonraki etkileşimleri işleme veya etkinlik geri çağırmaları çalıştırıldıktan sonraki kareyi boyama süresini içermez. Ancak yanıt verme, sayfa yaşam döngüsü boyunca kullanıcı deneyimi açısından kritik öneme sahiptir çünkü kullanıcılar yüklendikten sonra sayfada zamanın yaklaşık% 90'ını geçirmektedir.
INP, bir web sayfasının kullanıcının etkileşimine başlamasından sonraki karenin ekranda boyandığı ana kadar olan 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 etkinleştirmeyi umuyoruz. INP'nin, web sayfalarının yükü ve çalışma zamanına yanıt verme süresiyle ilgili daha doğru bir tahmin sağlayacağına inanıyoruz.
FID yalnızca ilk etkileşimin giriş gecikmesini ölçtüğünden, web geliştiricileri CWV iyileştirme süreçlerinin bir parçası olarak sonraki etkileşimleri proaktif bir şekilde optimize etmemiş olabilir. Bu nedenle, sitelerin, özellikle de etkileşim düzeyi yüksek olanların bu metrikte başarılı olmak için çok çalışmaya başlaması gerekir.
Çerçevelerin rolü
Birçok web sitesi etkileşim sağlamak için JavaScript'e başvurduğundan, INP puanı öncelikli olarak ana iş parçacığında işlenen JavaScript miktarından etkilenir. JavaScript çerçeveleri, modern kullanıcı arabirimi web geliştirmenin önemli bir parçasıdır ve geliştiricilere, yönlendirme, etkinlik işleme ve JavaScript kodunun sınıflandırılması için değerli soyutlamalar sunar. Dolayısıyla, bu reklamları kullanan web sitelerinin duyarlılığını ve kullanıcı deneyimini optimize etmede merkezi bir rol oynarlar.
Çerçeveler, web siteleri için FID'yi daha önce iyileştirerek daha iyi yanıt verme süresine yönelik adımlar atmış olabilir. Ancak, artık mevcut yanıt verme metriği verilerini analiz etmeleri ve tespit edilen boşlukları gidermeye çalışmaları gerekecek. Genel olarak, INP'nin geçme oranları daha düşüktür ve ölçüm sürecindeki fark, ek kod optimizasyonu gerektirir. Aşağıdaki tabloda bunun nedeni ö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. Verileri, CrUX raporlarındaki deneysel yanıt verme metriğine göre topladık. Çerçeve tabanlı web siteleri için INP metriğine geçişi kolaylaştırmak amacıyla analizleri ve yapılacak işlemleri paylaşacağız.
Deneysel duyarlılık metriği verileri
200 milisaniyenin altında veya buna eşit bir INP, iyi yanıt verme süresini gösterir. Haziran 2023'te yayınlanan CrUX rapor verileri ve CWV Teknoloji Raporu, popüler JavaScript çerçevelerinin yanıt verme hızı hakkında bize aşağıdaki bilgileri sağlar.
Tablo, iyi yanıt verme puanına sahip her bir çerçevedeki kaynakların yüzdesini gösterir. Rakamlar cesaret verici ama daha fazla gelişim alanı olduğunu gösteriyor.
JavaScript, INP'yi nasıl etkiler?
Alandaki INP değerleri, laboratuvarda gözlemlenen Toplam Engelleme Süresi (TBT) ile ilişkilidir. Bu, ana iş parçacığını uzun süre engelleyen herhangi bir komut dosyasının INP için kötü olacağı anlamına gelebilir. Herhangi bir etkileşimden sonra ağır JavaScript yürütme işlemi, ana iş parçacığını uzun bir süre boyunca engelleyebilir ve bu 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 zayıf kod bölme ve yükleme stratejileri, JavaScript şişmesine neden olabilir ve ana iş parçacığını uzun süre engelleyebilir. Kod bölme, progresif yükleme ve uzun görevleri bölme, yanıt sürelerini önemli ölçüde kısaltabilir.
Üçüncü taraf komut dosyaları: Bazen bir etkileşimi işlemesi gerekmeyen üçüncü taraf komut dosyaları (ör. reklam komut dosyaları), ana iş parçacığını engelleyebilir ve gereksiz gecikmelere neden olabilir. Önemli komut dosyalarına öncelik vermek, üçüncü taraf komut dosyalarının olumsuz etkisini azaltmaya yardımcı olabilir.
Birden fazla etkinlik işleyici: Her biri farklı bir komut dosyası çalıştıran ve her etkileşimle ilişkilendirilmiş birden fazla etkinlik işleyici, birbiriyle çakışabilir ve uzun gecikmelere neden olabilir. Bu görevlerden bazıları gerekli olmayabilir ve bir web çalışanı için veya tarayıcı boştayken planlanabilir.
Olay işlemede çerçeve çalışması ek yükü: Çerçeveler, etkinlik işleme için ek özelliklere/söz dizimine sahip olabilir. Örneğin, Vue öğelere etkinlik işleyicileri eklemek için v-on kullanırken Angular kullanıcı etkinlik işleyicilerini sarmalar. Bu özelliklerin uygulanması, vanilla JavaScript üzerinde ek çerçeve kodu gerektirir.
Hydrasyon: Bir JavaScript çerçevesi kullanırken, bir sunucunun bir sayfa için ilk HTML'yi oluşturması yaygın bir durumdur. Bunun ardından, sayfanın bir web tarayıcısında etkileşimli olabilmesi için etkinlik işleyiciler ve uygulama durumuyla genişletilmesi gerekir. Bu sürece hidrasyon diyoruz. Bu işlem, JavaScript'in yüklenmesinin ne kadar sürdüğüne ve sıvı alımının tamamlanma süresine bağlı olarak, yükleme sırasında yapılan ağır bir işlem olabilir. Ayrıca, öyle olmadıkları halde etkileşimliymiş gibi görünen sayfalara da yönlendirebilir. Hidrasyon genellikle sayfa yüklenirken otomatik olarak veya geç (örneğin, kullanıcı etkileşiminde) gerçekleşir ve görev planlaması nedeniyle INP'yi veya işleme süresini etkileyebilir. React gibi kitaplıklarda, bileşen oluşturma işleminin bir bölümünün sonraki karede olması ve daha maliyetli yan etkilerin gelecekteki karelere bırakılması için
useTransitionözelliğinden yararlanabilirsiniz. Bu göz önünde bulundurulduğunda, bir geçişte tıklamalar gibi daha acil güncellemelere yol açan güncellemeler INP için iyi bir kalıp olabilir.Önceden getirme: Sonraki gezinmeler için gereken kaynakları agresif bir şekilde önceden getirmek, doğru yapıldığında performans kazancı sağlayabilir. Ancak SPA rotalarını eşzamanlı olarak önceden getirir ve oluşturursanız bu pahalı oluşturma işlemlerinin tümü tek bir çerçevede tamamlanmaya çalıştığından INP'yi olumsuz yönde etkileyebilirsiniz. Bunu, rotanızı önceden getirmemek ve gerekli işleri başlatmak (örneğin,
fetch()) ve boya engelini kaldırmak ile karşılaştırın. Çerçevenizin önceden getirme yaklaşımının optimum kullanıcı deneyimini sunup sunmadığını ve (varsa) bunun INP'yi nasıl etkileyebileceğini yeniden incelemenizi öneririz.
Bundan sonra, iyi bir INP puanı elde etmek isteyen geliştiriciler, sayfadaki her etkileşimden sonra yürütülen kodu incelemeye odaklanmalı ve hem birinci taraf hem de üçüncü taraf komut dosyaları için yığma, yeniden kullanılabilirlik, yükleme stratejileri ve her birrender() güncellemesinin boyutunu optimize etmek zorunda kalacaklar.
Aurora ve çerçeveler INP sorunlarını nasıl ele alıyor?
Aurora, yaygın sorunlara entegre çözümler sağlamak için en iyi uygulamaları bir araya getirerek çerçevelerle çalışır. Performansı optimize etmek amacıyla güçlü varsayılanlar sunan çözümler üzerinde Next.js, Nuxt.js, Gatsby ve Angular ile çalıştık. Bu bağlamda yaptığımız çalışmalarda öne çıkan noktaları aşağıda bulabilirsiniz:
React ve Next.js: Next.js Komut Dosyası bileşeni, üçüncü taraf komut dosyalarının verimsiz yüklenmesinden kaynaklanan sorunların giderilmesine yardımcı olur. Paylaşılan kod için daha küçük boyutlu parçalara olanak tanımak amacıyla Next.js'de ayrıntılı parçalama kullanıma sunuldu. Bu, tüm sayfalara indirilen, kullanılmayan ortak kod miktarının azalmasına yardımcı olur. INP verilerini Analytics hizmetlerinin bir parçası olarak kullanılabilir hale getirmek için Next.js ile de çalışıyoruz.
Angular: Aurora, sunucu tarafı oluşturma ve hidrasyon iyileştirmelerini keşfetmek için Angular ekibiyle iş ortaklığı yapıyor. INP'yi iyileştirmek için etkinlik işleme ve değişiklik algılama özelliğinde yapılacak iyileştirmelere de yer vermeyi planlıyoruz.
Vue ve Nuxt.js: Özellikle komut dosyası yükleme ve oluşturma bağlamında, ortak çalışma için yeni yollar 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 dilimi, seçmeli veya progresif sıvı alımını etkinleştirmenize olanak tanır. Bu, sıvı alımının eşzamanlı bir blok olmadığı anlamına gelir. Bu işlem, her an kesintiye uğrayan küçük dilimler halinde yapılır.
Bu, INP'yi iyileştirmeye yardımcı olur ve tuş vuruşlarına, geçiş sırasında fareyle üzerine gelme efektlerine ve tıklamalara daha hızlı yanıt verebilmenizi sağlar. Ayrıca otomatik tamamlama gibi büyük geçişlerde bile React uygulamalarının duyarlı kalmasını sağlamaya yardımcı olur.
Next.js, rota geçişleri için varsayılan olarak startTransition kullanan yeni bir yönlendirme çerçevesi uygulamaya koydu. Bu, Next.js site sahiplerinin React zaman dilimi özelliğini kullanmasına ve rota geçişlerinin duyarlılığını iyileştirmesine olanak tanır.
Angular
Angular ekibi, INP'ye de yardımcı olacak birkaç fikir araştırıyor:
- Bölgesiz: İlk paket boyutunu ve uygulamanın herhangi bir öğe oluşturabilmesi için yüklenmesi gereken kodu azaltır.
- Hydrasyon: Uygulamanın ne kadarının etkileşim için uyandırması gerektiğini sınırlamak için ada tarzı sıvı alımı.
- CD'nin ek yükünü azaltın: Örneğin, değişiklik algılamayı daha ucuz hale getirin, uygulamayı daha az kontrol etmenin yollarını bulun ve değişikliklerle ilgili reaktif sinyallerden yararlanın.
- Daha ayrıntılı kod bölme: İlk paketi küçültün.
- Yükleme göstergeleri için daha iyi destek:: Örneğin, SSR yeniden oluşturma sırasında, rotada gezinme sırasında ve geç yükleme işlemlerinde.
- Profil oluşturma araçları: Özellikle belirli etkileşimlerde değişiklik algılama maliyetiyle ilgili etkileşim maliyetini anlamak için daha iyi geliştirici araçları.
Bu geliştirmeler sayesinde, yanıt hızının ve kullanıcı deneyiminin zayıf olmasına yol açan farklı sorunları ele alabilir ve çerçeve tabanlı web siteleri için CWV metriklerini ve yeni INP metriğini güçlendirebiliriz.
Sonuç
INP puanının, gelecekte yanıt verme hızını ve performansı iyileştirmek için web sitelerine daha iyi bir pusula sağlamasını bekliyoruz. 2023'te çerçeve geliştiricilerine daha fazla uygulanabilir ipucu sağlamak için mevcut INP rehberimizi geliştireceğiz. Bunu başarabilmek için şunları yapmayı umuyoruz:
- Çerçeveler ve web geliştiricileri için INP'de alan verilerine kolay erişim için kanallar oluşturma.
- INP'yi varsayılan olarak iyileştirecek özellikler oluşturmak için çerçevelerle çalışın.
INP optimizasyon yolculuklarına başlayan çerçeve kullanıcıların geri bildirimlerini almaktan memnuniyet duyarız.