Yeni INP metriğinin, JavaScript çerçeveleri ve kitaplıkları kullanılarak oluşturulan sitelerdeki deneyimi nasıl etkilediğini öğrenin.
Chrome kısa süre önce Chrome Kullanıcı Deneyimi Raporu raporunda yeni bir deneysel duyarlılık metriği kullanıma sundu. Artık Sonraki Boyamayla Etkileşim (INP) olarak bildiğimiz bu metrik, sayfadaki kullanıcı etkileşimlerine genel duyarlılığı ölçer. Bugün, modern JavaScript çerçeveleri kullanılarak oluşturulan web sitelerinin bu metrik açısından hangi noktada bulunduğuyla ilgili ayrıntılı bilgiler paylaşmak istiyoruz. INP'nin çerçevelerle neden ilgili olduğunu ve Aurora ile çerçevelerin duyarlılığı optimize etmek için nasıl çalıştığını görüşmek istiyoruz.
Arka plan
Chrome, web sitelerinin yükleme duyarlılığını ölçmek için Core Web Vitals'ın (CWV) bir parçası olarak İlk Giriş Gecikmesini (FID) kullanır. FID, ilk kullanıcı etkileşiminden tarayıcının etkileşime bağlı etkinlik işleyicileri işleyebilmesine kadar geçen bekleme süresini ölçer. Etkinlik işleyicilerin işlenmesi, aynı sayfada sonraki etkileşimlerin işlenmesi veya etkinlik geri çağırmalarının çalıştırılmasından sonra bir sonraki çerçevenin boyanması için gereken süreyi içermez. Bununla birlikte, kullanıcılar sayfa yüklendikten sonra zamanın yaklaşık% 90'ını geçirdiklerinden, sayfa yaşam döngüsü boyunca yanıt verme özelliği kullanıcı deneyimi açısından çok önemlidir.
INP, kullanıcının etkileşimi başlatmasından, bir sonraki karenin ekranda boyanmasına 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şimlerde algılanan gecikme için toplu ölçüm sağlamayı umuyoruz. INP'nin, web sayfalarının sayfaları hakkında daha doğru bir tahmin sağlayacağına inanıyoruz. ve çalışma zamanına yanıt verebilir.
FID yalnızca ilk etkileşimdeki giriş gecikmesini ölçtüğünden, web geliştiricileri muhtemelen CWV iyileştirme süreçlerinin bir parçası olarak sonraki etkileşimleri proaktif olarak optimize etmemiştir. Dolayısıyla, sitelerin, özellikle de yüksek düzeyde etkileşime sahip olanların, bu metrikte iyi bir performans göstermek üzere sıkı bir şekilde çalışmaya başlaması gerekir.
Çerçevelerin rolü
Birçok web sitesi etkileşim sağlamak için JavaScript'e bağlı olduğ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, JavaScript kodunun yönlendirme, etkinlik işleme ve bölümlere ayrılması için değerli soyutlamalar sağlar. Bu nedenle, kendilerini kullanan web sitelerinin duyarlılığını ve kullanıcı deneyimini optimize etme konusunda merkezi bir role sahiptirler.
Çerçeveler, web siteleri için FID'yi daha önce iyileştirerek daha iyi yanıt verme düzeyine yönelik adımlar atmış olabilir. Ancak, artık mevcut duyarlılık metriği verilerini analiz etmeleri ve tespit edilen boşlukları doldurmak için çalışmaları gerekiyor. Genel olarak, INP daha düşük geçme oranlarına sahiptir ve ölçüm sürecindeki fark için ek kod optimizasyonu gerekir. 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ştirmesine yardımcı olmak için açık kaynak web çerçeveleriyle çalışır. INP'nin kullanıma sunulmasıyla birlikte, çerçeve tabanlı web sitelerine yönelik CWV metriklerinde yapılacak değişikliğe hazır olmak istiyoruz. Verileri, CrUX raporlarındaki deneysel duyarlılık metriğine dayalı olarak topladık. Çerçeve tabanlı web sitelerinde INP metriğine geçişi kolaylaştırmak için analizleri ve işlem öğelerini paylaşacağız.
Deneysel duyarlılık metriği verileri
200 milisaniyeden küçük veya eşit bir INP, yanıt verme kalitesinin iyi olduğunu gösterir. Haziran 2023 için CrUX rapor verileri ve CWV Teknoloji Raporu'nda, popüler JavaScript çerçeveleri için yanıt verme süresi hakkında aşağıdaki bilgiler verilmektedir.
Tabloda, her çerçevedeki iyi yanıt verme puanına sahip kaynakların yüzdesi gösterilir. Rakamlar cesaret verici olsa da iyileştirilmesi gereken çok nokta olduğunu gösteriyor.
JavaScript, INP'yi nasıl etkiler?
Alandaki INP değerleri, laboratuvarda gözlemlenen Toplam Engelleme Süresi (TBT) ile orantılıdır. Bu, ana iş parçacığını uzun bir süre boyunca engelleyen bir komut dosyasının INP için kötü olacağı anlamına gelebilir. Herhangi bir etkileşimden sonra ağır JavaScript yürütmesi, 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'in aşırı dolu olmasına ve ana iş parçacığını uzun süre engellemesine neden olabilir. Kod bölme, progresif yükleme ve uzun görevleri bölme işlemleri yanıt sürelerini önemli ölçüde kısaltabilir.
Üçüncü taraf komut dosyaları: Bazen bir etkileşimi (ör. reklam komut dosyaları) işlemek için gerekli olmayan üçüncü taraf komut dosyaları, ana mesaj dizisini 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 etkileşimle ilişkili birden fazla etkinlik işleyici (her biri farklı bir komut dosyası çalıştıran) birbirine müdahale edebilir ve uzun gecikmelere neden olabilir. Bu görevlerden bazıları çok gerekli olmayabilir ve bir web çalışanı için ya da tarayıcı boştayken programlanabilir.
Etkinlik işlemede çerçeve çalışması ek yükü: Çerçevelerde, olay işleme için ek özellikler/söz dizimi olabilir. Örneğin, Vue öğelere etkinlik işleyiciler eklemek için v-on'u kullanırken Angular kullanıcı etkinlik işleyicilerini sarmalar. Bu özelliklerin uygulanması, normal JavaScript üzerinde ek çerçeve kodu gerektirir.
Hidrasyon: JavaScript çerçevesi kullanılırken sunucunun bir sayfanın ilk HTML'sini oluşturması nadir bir durumdur. Daha sonra, sayfanın bir web tarayıcısında etkileşimli olması için etkinlik işleyiciler ve uygulama durumuyla zenginleştirilmesi gerekir. Bu sürece hidrasyon diyoruz. Bu, 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 yorucu bir işlem olabilir. Ayrıca, etkileşimli olmadıkları halde sayfaların etkileşimli gibi görünmesine yol açabilir. Sıvı alımı genellikle sayfa yüklenirken otomatik olarak veya geç gelişir (örneğin, kullanıcı etkileşiminde) ve görev planlaması nedeniyle INP'yi ya da işlem süresini etkileyebilir. React gibi kitaplıklarda
useTransitionözelliğinden yararlanarak oluşturulan bileşenin bir parçasının sonraki karede yer alması ve daha maliyetli yan etkilerin gelecek karelere bırakılması sağlanır. Bu nedenle, tıklama sayısı gibi daha acil güncellemelere neden olan bir geçiş kalıbı INP açısından iyi olabilir.Önceden getirme: Sonraki gezinmeler için gereken kaynakları agresif bir şekilde önceden getirmek, doğru yapıldığında performansı artırabilir. Bununla birlikte, SPA rotalarını eşzamanlı olarak önceden getirir ve oluşturursanız bu pahalı oluşturma işlemi tek bir karede tamamlanmaya çalışıldığından, INP'yi olumsuz yönde etkileyebilirsiniz. Bunu, rotanızı önceden getirmemek, gerekli işi (örneğin,
fetch()) başlatmak ve boyanın engelini kaldırmakla karşılaştırın. Çerçevenizin önceden getirme yaklaşımının optimum kullanıcı deneyimi sağlayıp sağlamadığını ve bunun INP'yi nasıl etkileyebileceğini yeniden incelemenizi öneririz.
İyi bir INP puanı elde etmek için artık geliştiricilerin sayfadaki her etkileşimden sonra yürütülen kodu incelemeye odaklanması ve hem birinci taraf hem de üçüncü taraf komut dosyaları için parçalama, yeniden kullanılabilirlik, yükleme stratejileri ve herrender() güncellemesinin boyutunu optimize etmesi gerekecektir.
Aurora ve çerçeveler INP sorunlarını nasıl ele alıyor?
Aurora, yaygın sorunlara yerleşik çözümler sağlamak için en iyi uygulamaları benimseyerek çerçevelerle çalışmaktadır. Next.js, Nuxt.js, Gatsby ve Angular ile birlikte çalışarak performansı optimize etmek için çerçeve dahilinde güçlü varsayılanlar sunan çözümler oluşturduk. Bu bağlamda çalışmalarımızdan öne çıkan noktaları aşağıda bulabilirsiniz:
React ve Next.js: Next.js Komut Dosyası bileşeni, üçüncü taraf komut dosyalarının verimsiz şekilde yüklenmesinden kaynaklanan sorunların giderilmesine yardımcı olur. Ayrıntılı parçalama, paylaşılan kod için daha küçük boyutlu parçalara olanak tanımak amacıyla Next.js'de kullanıma sunulmuştur. Bu, tüm sayfalara indirilen kullanılmayan ortak kod miktarını azaltmaya yardımcı olur. Ayrıca, INP verilerini Analytics hizmetlerinin bir parçası olarak kullanılabilir hale getirmek için Next.js ile birlikte çalışıyoruz.
Angular: Aurora, sunucu tarafı oluşturma ve hidrasyon iyileştirmelerini keşfetmek için Angular ekibiyle iş ortaklığı yapıyor. Ayrıca, INP'yi iyileştirmek için olay işleme ve değişiklik algılama konularında yapılan iyileştirmeleri de incelemeyi planlıyoruz.
Vue ve Nuxt.js: Çoğunlukla komut dosyası yükleme ve oluşturmaya ilişkin ortak çalışma yollarını araştırıyoruz.
Çerçeveler INP'yi iyileştirme konusunda nasıl düşünüyor?
React ve Next.js
startTransition ve Suspense aracılığıyla uygulanan React.js zaman dilimleme, seçici veya aşamalı hidrasyonu etkinleştirmenize olanak tanır. Bu, hidrasyonun eşzamanlı blok olmadığı anlamına gelir. Bu işlem, herhangi bir noktada kesintiye uğrayan küçük dilimler halinde gerçekleştirilir.
Bu, INP'nin iyileştirilmesine 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ına yardımcı olur.
Next.js, rota geçişleri için varsayılan olarak startTransition kullanan yeni bir yönlendirme çerçevesi uygulamıştır. Bu, Next.js site sahiplerinin React zaman dilimlemeyi benimsemesine ve rota geçişlerinin duyarlılığını iyileştirmesine olanak tanır.
Angular
Angular ekibi, INP'ye de yardımcı olacak çeşitli fikirleri araştırıyor:
- Alt bölgesiz: Bir uygulamanın herhangi bir öğe oluşturabilmesi için ilk paket boyutunu ve gereken kodu azaltır.
- Hidrasyon: Etkileşim için uygulamanın ne kadarının uyandırılması gerektiğini sınırlayan 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şiklikler hakkında reaktif sinyallerden yararlanın.
- Daha ayrıntılı kod bölme: İlk paketi küçültün.
- Gösterge yükleme 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şimler için değişiklik algılama maliyetiyle ilgili olarak etkileşim maliyetini anlamak üzere daha iyi geliştirici araçları.
Bu geliştirmeler sayesinde, düşük yanıt hızına ve kullanıcı deneyimine yol açan farklı sorunları ele alabilir ve çerçeve tabanlı web siteleri için CWV metriklerini ve yeni INP metriğini iyileştirebiliriz.
Sonuç
INP puanının, gelecekte duyarlılığı ve performansı iyileştirmek için web sitelerine daha iyi bir pusula sağlaması bekleniyor. 2023'te çerçeve geliştiricilerine uygulanabilir daha fazla ipucu sağlamak için mevcut INP kılavuzumuzu geliştireceğiz. Bu hedefe ulaşmak için:
- Çerçeveler ve web geliştiricileri için INP'deki alan verilerine kolay erişim sağlayan kanallar 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.