Sonraki Boya Etkileşimi Nasıl İyileştirilir (INP)

Interaction to Next Paint (INP) artık deneysel değil.

Google,Mart 2024'ten itibaren geçerli olmak üzere, INP'yi İlk Girdi Gecikmesinin yerine yanıt verebilirlik için yeni Core Web Vital metriği olarak tanıtmayı taahhüt eder.

Sitenizin INP puanıyla ilgilenmenin erteleyebileceğiniz bir görev olduğunu düşünebilirsiniz, ancak biz aynı fikirde değiliz.

Google, Search Console'da INP sorunlarını işaretlemeye ve iyi yanıt verme eşiğini kaçıran web sitelerine e-posta göndermeye çoktan başladı:

Başka bir deyişle, sitenizi yaklaşan yanıt hızı metriği için optimize etmeye başlamanın tam zamanı. Ve aşağıdaki satırlarda tam olarak nasıl olduğunu öğreneceksiniz.

• Next Paint'e genel bakışla etkileşim
• Etkileşim Gecikmesini Anlamak
• Siteniz neden INP'de başarısız oluyor?
• Yavaş etkileşimler nasıl belirlenir
• INP nasıl optimize edilir

Okumaya devam etmek.

Next Paint ile Etkileşim: Genel Bakış

Çeşitli optimizasyon tekniklerini incelemeden önce, INP'nin neyi ölçtüğüne dair hızlı bir özet burada.

INP, bir kullanıcının bir sayfayı ziyareti sırasında tüm uygun etkileşimlerin gecikmesini gözlemleyerek bir sayfanın kullanıcı etkileşimlerine genel yanıt verebilirliğini değerlendirir. Nihai INP değeri, gözlemlenen en uzun etkileşimdir.

INP'nin hesaplamalarında rol oynayan etkileşimler şunlardır:

• Fare ile tıklamak;
• Dokunmatik ekranlı bir cihaza dokunmak;
• Fiziksel veya dijital klavyede bir tuşa basmak.

Diğer Önemli Web Verilerine benzer şekilde, INP puanınız üç eşikten birinde olabilir:

• İyi : 0-200ms
• İyileştirme Gerekiyor : 200-500ms
• Zayıf : >500ms

Kullanıcılarınızın çoğunluğu için bu hedefe ulaştığınızı garanti etmek için, mobil ve masaüstü cihazlara göre bölümlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimini değerlendirmeniz önerilir.

INP hakkında daha fazla bilgi edinmek veya bilgilerinizi tazelemek istiyorsanız, yaklaşan yanıt verebilirlik metriği hakkındaki makalemizi okuyun.

Etkileşim Gecikmesini Anlamak

INP puanınızın zayıftan iyiye gitmesini istiyorsanız, etkileşim gecikmesini anlamanız gerekir.

Peki etkileşim gecikmesi tam olarak nedir?

Etkileşim gecikmesi, bir kullanıcının girişi veya eylemi ile ekranda ortaya çıkan yanıt veya çıktı arasında yaşanan gecikme veya gecikmeyi ifade eder. Sitenizin yanıt verebilirliğini ve algılanan performansını belirlemede çok önemli bir faktördür.

Etkileşim gecikmesine üç ana bileşen katkıda bulunur:

Giriş Gecikmesi

Girdi gecikmesi, bir kullanıcının sayfayla etkileşim kurmaya başlaması ile ilgili eylemlerin veya olay geri aramalarının yürütülmeye başlaması arasındaki süreyi ifade eder. Giriş aygıtından (örn. klavye, fare, dokunmatik ekran) ve sistemin girdi işleme mekanizmalarından kaynaklanan fiziksel veya teknik gecikmeleri içerir.

işlem süresi

Kullanıcı girişi alındığında, sistem uygun yanıtı veya eylemi belirlemek için bunu işlemelidir. İşlem süresi, sistemin girdi verilerini analiz etmesi ve yorumlaması, gerekli hesaplamaları veya işlemleri gerçekleştirmesi ve çıktıyı veya yanıtı oluşturması için gereken süreyi ifade eder.

Sunum Gecikmesi

Sistem çıktıyı veya yanıtı oluşturduktan sonra, kullanıcıya sunulmadan önce genellikle bir gecikme olur. Sunum gecikmesi, sistemin ekranı güncellemesi, grafikleri veya kullanıcı arayüzlerini oluşturması ve çıktıyı kullanıcı arayüzüne veya çıkış cihazına iletmesi için geçen süreyi kapsar.

Daha fazla bilgiye ihtiyacınız varsa, Jeremy Wagner'in JSConf Korea 2022'deki sunumuna göz atabilirsiniz:

Etkileşim gecikmesini anlamak ve optimize etmek, sorunsuz bir kullanıcı deneyimi sağlayabilir ve INP puanlarınızı düzeltebilir.

Ancak ondan önce, yüksek etkileşim gecikmesi ve kötü INP puanlarının ana suçlularına bir göz atalım…

Web sitenizde Core Web Vitals INP sorunu algılandı: Buna ne sebep olabilir?

INPbeklemede olarak etiketlense de bu,optimizasyon sürecine bir strateji olmadan girmeniz gerektiği anlamına gelmez.

Yapmanız gereken ilk şey, ana INP suçlularının ne olduğunu öğrenmek, böylece onlarla etkili bir şekilde başa çıkabilirsiniz.

"INP sorunu: 200 ms'den uzun" hata mesajının başlıca nedenleri şunlardır:

Uzun görevler

Bir tarayıcının yaptığı her şey bir görev olarak kabul edilir. Buna HTML oluşturma, ayrıştırma, JavaScript çalıştırma ve üzerinde kontrolünüz olan veya olmayan her şey dahildir.

Ana iş parçacığı, tarayıcının bir sayfayı görüntülemek için gereken işin çoğunu yaptığı yerdir. Yürütülmesi gereken düzinelerce görev olsa da,ana iş parçacığı aynı anda yalnızca bir görevi işleyebilir.

Ama bu sorunun sadece yarısı.

Diğer yarısı ise, bir görevin yürütülmesi 50 milisaniyeden uzun sürerse,uzun bir görev olarak sınıflandırılır. 

Ana iş parçacığının aynı anda bir görevi işleyebileceği göz önüne alındığında, görev ne kadar uzunsa, tarayıcının onu işlemesi o kadar uzun süre engellenir.

Başka bir deyişle, kullanıcı uzun bir görev çalışırken sayfayla etkileşime girmeye çalışıyorsa, tarayıcı isteği yerine getirmekte gecikecektir.

Sonuç - etkileşim gecikmesi ve daha düşük bir INP puanı.

Büyük DOM boyutu

INP'de başarısız olmanın bir başka nedeni de büyük bir DOM boyutuna sahip olmaktır.

Belge Nesne Modeli (DOM), her web sayfasının ayrılmaz bir parçasıdır. DOM, ağaç olarak yapılandırılmış bir HTML belgesinin temsilidir. Ağaçtaki her dal bir düğümde sonlanır ve her düğümde nesneler bulunur. Düğümler, belgenin öğeler, metin dizileri veya yorumlar gibi farklı bölümlerini temsil edebilir.

DOM'un kendisi sorun değil ama boyutu sorun olabilir. Büyük bir DOM boyutu, bir tarayıcının bir sayfayı hızlı ve verimli bir şekilde oluşturma yeteneğini etkiler.

DOM ne kadar büyük olursa, sayfayı ilk başta görüntülemek ve sayfanın yaşam döngüsü boyunca sonraki güncellemeleri yapmak için o kadar fazla kaynak kullanır.

Basit ifadeyle:

Bir sayfanın kullanıcı etkileşimlerine hızlı bir şekilde yanıt vermesini istiyorsanız, DOM'nizin yalnızca gerekli öğeleri içerdiğinden emin olun.

"Gerekli"nin ne anlama geldiğini merak ediyor olabilirsiniz. Lighthouse'a göre, bir sayfanın DOM boyutu1.400 düğümü aştığında aşırıdır.

Bu nedenle, bu sınır içinde kaldığınızdan emin olun. Aksi takdirde, PageSpeed ​​Insights raporunuzda aşağıdaki hatayı görebilirsiniz:

İstemci tarafında HTML oluşturma

İstemci sitesi oluşturmanın neden düşük INP puanlarına neden olabileceğini anlamak için, bunun HTML'nin sunucu tarafı oluşturmasından nasıl farklı olduğunu açıklamamız gerekir.

Geleneksel sayfa yükleme, tarayıcının her gezinmede sunucudan HTML almasını içerir. Bir kişi bir sayfayı yüklemeye karar verdiğinde arka planda şunlar olur:

1. Tarayıcı, sağlanan URL için bir gezinme isteği gönderir.
2. Sunucu, parçalar halinde HTML ile yanıt verir.

Buradaki anahtar "parçalar halinde".

Tarayıcı ilk HTML yığınını aldığında onu ayrıştırmaya başlayabilir. Ancak bildiğimiz gibi, HTML'yi ayrıştırmak ana iş parçacığının yaptığı bir görevdir.

Ancak, her parça işlendikten sonra, tarayıcı ayrıştırmaya ara verir ve diğer görevlerin gerçekleştirilmesine izin verir. Bu, tarayıcıyı yavaşlatabilecek uzun görevleri önler.

Bunun yerine, sayfanın zaten ayrıştırılmış kısımlarını oluşturmaya başlayabilir, böylece kullanıcı kısmen yüklenmiş bir sayfayı daha erken görür. Ayrıca, sayfanın ilk yüklenmesi sırasında meydana gelen tüm kullanıcı etkileşimlerini de işleyebilir.

Başka bir deyişle:

Bu yaklaşım, sayfa için daha iyi bir Sonraki Boyama Etkileşimi (INP) puanı anlamına gelir.

Aksine, web siteniz istemcide HTML/DOM'un büyük bölümlerini JavaScript ile dinamik olarak oluşturan tek sayfa uygulaması (SPA) modelini kullanıyorsa, INP puanınız üzerinde olumsuz etkiler bekleyebilirsiniz.

İstemci tarafı işlemede, sunucu istemciye küçük bir temel HTML parçası gönderir. Daha sonra istemci, sunucudan aldığı verileri kullanarak sayfanın ana içeriğini doldurma işini üstlenir.

Gelecekteki tüm gezinmeler JavaScript tarafından yönetilir, sunucudan yeni HTML getirilir ve sayfa tamamen yeniden yüklenmeden dinamik olarak güncellenir. Ne yazık ki, istemci tarafında JavaScript görevleri söz konusu olduğunda, bunlar otomatik olarak parçalara ayrılmıyor.

Bu, ana ileti dizisini bloke eden uzun görevlere yol açarak potansiyel olarak sayfanızın Sonraki Boyayla Etkileşim puanını etkileyebilir. Bu nedenle, istemci tarafı oluşturma, sayfanızın yüklenmesine ve etkileşimine zarar verebilir.

Sunucu tarafı ve istemci tarafı işlemenin artıları ve eksileri hakkında ek bilgiye ihtiyacınız varsa, bu videoyu izleyin:

Artık ana suçlulardan bazılarını bildiğinize göre, INP puanınızı ölçmeye ve yavaş etkileşimleri belirlemeye geçelim.

Saha verilerini kullanarak yavaş etkileşimleri belirleme ve laboratuvarda hatalarını ayıklama

INP optimizasyon yolculuğundaki bir sonraki adım, sitenizin performansını ölçmek ve yavaş etkileşimleri belirlemektir.

İlk Giriş Gecikmesine benzer şekilde, INP en iyi sahada ölçülür - gerçek kullanıcıların web sitenizi nasıl deneyimlediğini inceler.

En uygun test süreci şuna benzer:

1. INP için saha verilerini toplayın
2. INP'den sorumlu kesin eylemleri belirleyin
3. Bu etkileşimlerin neden yavaş olduğunu anlamak için laboratuvar araçlarını kullanın

Optimumdedik çünkü bazı durumlarda sitenizde saha verileri (Gerçek Kullanıcı İzleme (RUM) verileri olarak da bilinir) bulunmayabilir. Ancak bu, INP puanınızı optimize etmekten vazgeçmeniz gerektiği anlamına gelmez. Farklı bir yaklaşım izlemeniz ve mevcut laboratuvar araçlarından yararlanmanız gerekir.

Her iki senaryoya da bir göz atalım ve saha ve laboratuvar verilerinizin çoğunu nasıl alacağınızı açıklayalım.

Alan Verileri

İdeal olarak, sitenizin yanıt verebilirliğini geliştirmeye başladığınızda saha verilerine sahip olmak isteyeceksiniz. RUM verilerine güvenmek, hangi etkileşimlerin optimize edilmesi gerektiğini bulmak için size çok zaman kazandırır.

Ayrıca, laboratuvar tabanlı araçlar belirli etkileşimleri simüle edebilir ancak gerçek dünyadaki kullanıcı deneyimlerini tam olarak kopyalayamaz.

INP saha verilerini toplarken, etkileşimlerin neden yavaş olduğuna bağlam vermek için aşağıdakileri yakalamak isteyeceksiniz:

• INP değeri – Bu değerlerin dağılımı, sayfanın INP eşiklerini karşılayıp karşılamadığını belirleyecektir.
• Sayfanın INP'sinden sorumlu öğe seçici dizesi – Yalnızca bir sayfanın INP değerini bilmek yeterli değildir.Etkileşimlerden hangi öğelerin sorumlu olduğunu bilmek istiyorsunuz.
• Sayfanın INP'si olan etkileşim için sayfanın yüklenme durumu – Etkileşimin sayfa yükleme sırasında mı yoksa sonrasında mı meydana geldiğini anlamak, sayfanın ilk yüklenmesinden bağımsız olarak ana ileti dizisini mi yoksa etkileşimin kendisinin mi yavaş olduğunu belirlemenize yardımcı olur.
• Etkileşimin başlangıç ​​Zamanı – Performans zaman çizelgesinde etkileşimin ne zaman gerçekleştiğini size bildirdiğinden, etkileşimin başlangıç ​​Zamanını günlüğe kaydettiğinizden emin olun.
• Olay türü – Etkileşim olay türünü bilmek – tuşa basma, diğer uygun etkinlikler – etkileşimde hangi olay geri aramasının en uzun sürdüğünü belirlemenize olanak tanır.

Kendinize soruyorsanız:

Tüm bu şeyleri nasıl yakalayacağım?

Merak etme. Tüm veriler web-vitals JavaScript kitaplığında gösterilir. Web-vital kitaplığından nasıl yararlanacağınız ve hatta INP verilerini doğrudan Google Analytics'inize nasıl ileteceğiniz konusunda Google'ın adım adım kılavuzuna göz atabilirsiniz.

Ayrıca, zaten üçüncü taraf bir RUM sağlayıcıyla veri topluyor olsanız bile, kullandıkları metodolojilerde farklılıklar olduğundan, bunları Chrome UX Raporu (CrUX) verileriyle karşılaştırmayı düşünün.

Laboratuvar Verileri

Saha verileri ölçüm için en güvenilir kaynaktır. Ancak, dediğimiz gibi, her zaman mevcut değildir.

Ancak endişelenmenize gerek yok çünkü laboratuvar verilerinin yardımıyla iyileştirmek için etkileşimleri hâlâ ölçebilir ve tanımlayabilirsiniz.

Bazı performans testleri yapmak için Lighthouse veya PageSpeed ​​Insights'ı kullanabilirsiniz. Dikkat etmeniz gereken metrik, Toplam Engelleme Süresi'dir (TBT).

TBT, yükleme sırasında sayfa yanıt verebilirliğini değerlendiren ve INP ile çok iyi korelasyon gösteren bir ölçümdür. Zayıf bir TBT puanı, sayfa yükleme sırasında yavaş olabilecek etkileşimlerin olduğunun bir işaretidir.

Laboratuvar araçlarıyla yavaş etkileşimi şu şekilde yeniden oluşturabilirsiniz:

• Web Verileri Chrome Uzantısını kullanın

Web Vitals Chrome Uzantısı, sitenizin etkileşim gecikmesini ölçmenin en kolay yollarından biridir. Yararlı bilgileri almak için yapmanız gerekenler:

1. Chrome'da, adres çubuğunun sağındaki uzantılar simgesini tıklayın.
2. Açılır menüde Web Vitals uzantısını bulun.
3. Uzantının ayarlarını açmak için sağdaki simgeye tıklayın.
4. Seçenekler'i tıklayın.
5. Ortaya çıkan ekranda Konsol günlüğü onay kutusunu etkinleştirin ve ardından Kaydet'e tıklayın.

Son olarak, Chrome DevTools konsolunu açın ve test etmeye başlayın. Etkileşim için size ayrıntılı teşhis bilgileri veren yardımcı konsol günlükleri alacaksınız.

• Chrome DevTools ile bir iz kaydedin

Etkileşimin neden yavaş olduğu hakkında daha fazla bilgi almak için Chrome DevTools'daki performans profili oluşturucuyu kullanabilirsiniz. Sadece aşağıdakileri yapın:

1. Chrome DevTools'u açın ve Performans paneline gidin.
2. İzlemeye başlamak için panelin sol üst kısmındaki Kayıt düğmesine tıklayın.
   
   
   
3. İstenen etkileşimi gerçekleştirin.
4. İzlemeyi durdurmak için Kayıt düğmesine tekrar tıklayın.

Performans sorunlarını hızlı bir şekilde belirlemek için, profil dolduğunda profil oluşturucunun üst kısmındaki etkinlik özetini kontrol edin. Etkinlik özetinde, kayıt sırasında uzun görevlerin örneklerini gösteren kırmızı çubuklara bakın. Bu kırmızı çubuklar, sorunlu alanları belirlemenize ve araştırmanıza odaklanmanıza yardımcı olur.

• Lighthouse zaman aralıklarını kullan

Lighthouse'un zaman aralıkları modu, DevTools performans profili oluşturucuya göre daha az göz korkutucu bir alternatiftir. Nasıl kullanılacağı aşağıda açıklanmıştır:

1. DevTools'ta Lighthouse sekmesine gidin.
2. Mod etiketli bölümün altında, Zaman Aralığı seçeneğini seçin.
3. Cihaz etiketli bölüm altında istediğiniz cihaz tipini seçin.
4. En azından Kategoriler etiketi altında Performans etiketli onay kutusunun seçili olduğundan emin olun.
5. Zaman aralığını başlat düğmesine tıklayın.
   
   
   
6. Sayfada istenen etkileşimi/etkileşimleri test edin.
7. Zaman aralığını sonlandır düğmesine tıklayın ve denetimin görünmesini bekleyin
8. Denetim doldurulduğunda, INP'ye göre filtreleyin.

Size başarısız ve başarılı denetimlerin bir listesi sunulacaktır. Bunlara tıkladığınızda, bir açılır menü görünür ve etkileşim sırasında harcanan sürenin giriş gecikmesi, işlem süresi ve sunum gecikmesine bölünmüş bir dökümünü görebilirsiniz.

Kaynak: Google

Artık ne üzerinde çalışacağınızı bildiğinize göre, kolları sıvayıp optimizasyona başlamanın zamanı geldi.

INP nasıl optimize edilir

Sitenizeiyibir INP puanı garanti etmek için, her bir etkileşim olayının olabildiğince hızlı çalışmasını sağlamalısınız. Bunu nasıl başaracağınız aşağıda açıklanmıştır:

Giriş gecikmesini azaltın

1. Ana iş parçacığını fazla çalıştıran yinelenen zamanlayıcılardan kaçının

setTimeout ve setInterval, giriş gecikmesine katkıda bulunabilen, yaygın olarak kullanılan JavaScript zamanlayıcı işlevleridir.

setTimeout, belirli bir süre sonra çalışacak bir geri arama planlar ve uzun görevlerden kaçınmaya yardımcı olsa da, zaman aşımının ne zaman gerçekleştiğine ve kullanıcı etkileşimleriyle çakışıp çakışmadığına bağlıdır.

setInterval ise belirli bir aralıkta tekrar tekrar çalışacak şekilde bir geri arama planlar. Bu nedenle, kullanıcı etkileşimlerine müdahale etme olasılığı daha yüksektir. Yinelenen doğası, giriş gecikmesini artırır ve etkileşimlerin yanıt verebilirliğini etkileyebilir.

Kodunuzdaki zamanlayıcılar üzerinde kontrole sahipseniz, gerekliliklerini değerlendirin ve iş yüklerini mümkün olduğunca azaltın.

2. Uzun görevlerden kaçının

Bildiğiniz gibi, uzun görevler ana ileti dizisini engelleyerek tarayıcının etkileşim olaylarını yürütmesini engeller.

Sitenizin yanıt hızını artırmak için, ana iş parçacığındaki iş yükünü en aza indirmek ve uzun görevleri bölmeyi düşünmek önemlidir.

Ana iş parçacığı, uzun görevleri daha küçük parçalara bölerek diğer görevleri yerine getirme ve kullanıcı etkileşimlerine daha hızlı yanıt verme fırsatı elde eder.

Ek olarak, uzun görevleri bölmek, sayfadaki animasyonların ve geçişlerin ana iş parçacığının aşırı yüklenmesi nedeniyle dalgalı veya tekleyen hale geldiği "sarsıntı" etkisinin önlenmesine yardımcı olur. Sayfa, her görevin daha kısa bir zaman diliminde tamamlanmasını sağlayarak, kullanıcı için daha sorunsuz bir görsel deneyim sağlayabilir.

3. Etkileşim örtüşmesinden kaçının

Etkileşim çakışması, bir ziyaretçinin bir öğeyle etkileşime girdikten sonra, ilk etkileşimin bir sonraki kareyi oluşturma şansı bulamadan sayfayla başka bir etkileşim kurması anlamına gelir.

Örneğin, kullanıcılar form alanlarına yazarken bu durum meydana gelebilir ve kısa bir süre içinde çok sayıda klavye etkileşimine yol açabilir. İşlemi şu şekilde optimize edebilirsiniz:

• Bir olay geri aramasının belirli bir süre içinde yürütülme sayısını sınırlamak için girişleri kaldırma.
• Giden getirme isteklerini iptal etmek için AbortController'ı kullanma, böylece ana iş parçacığı getirme geri aramalarını işlerken fazla çalışmaz.
  

Olay geri aramalarını optimize edin (işlem süresi)

1. Gereksiz geri aramayı kaldırmayı düşünün

Pahalı olay geri araması gerçekten gerekli mi? Değilse, kodu tamamen kaldırmayı düşünün veya bu mümkün değilse, yürütülmesini daha uygun bir zamana kadar erteleyin.

2. Oluşturulmayan işleri erteleyin

Uzun görevler, ana iş parçacığına teslim edilerek parçalanabilir. Ana iş parçacığına teslim olduğunuzda, esas olarak mevcut görevi duraklatır ve kalan işi ayrı bir göreve bölersiniz. Bu, oluşturucunun, olay geri aramasında daha önce işlenen kullanıcı arabirimi güncellemelerini işlemesine olanak tanır. Verim vererek, işleyicinin bekleyen değişiklikleri yürütmesini ve sorunsuz ve zamanında bir kullanıcı arabirimi güncellemesi sağlamasını sağlarsınız.

Sunum gecikmesini en aza indirin

1. DOM boyutunu azaltın

Büyük bir DOM boyutu, INP değerlendirmesinde başarısız olmanın kesin bir yoludur. Bunun olmamasını sağlamak için DOM boyutunuzu küçültmeniz veya başka bir deyişle DOM derinliğini azaltmanız gerekir.

1.400 düğümden fazla olmayan bir DOM derinliğini hedefleyin.

Aşağıdaki teknikleri kullanarak bunu başarabilirsiniz:

• Kötü kodlanmış eklentilerden ve temalardan kaçının
• JavaScript tabanlı DOM düğümlerini en aza indirin
• Şişirilmiş HTML oluşturan sayfa oluşturuculardan uzaklaşın
• Metni WYSIWYG düzenleyicisine kopyalayıp/yapıştırmayın
• Tek sayfalık web sitenizi birden çok sayfaya ayırın
• İstenmeyen öğeleri display:none kullanarak gizlemeyin
• Karmaşık CSS bildirimleri ve JavaScript kullanmaktan kaçının
  

2. requestAnimationFrame geri aramalarında aşırı veya gereksiz işlerden kaçının

requestAnimationFrame yöntemi, tarayıcıya bir animasyon gerçekleştirmek istediğinizi söyler ve tarayıcının bir sonraki yeniden boyamadan hemen önce bir animasyonu güncellemek için belirli bir işlevi çağırmasını ister.

requestAnimationFrame() geri araması, olay döngüsündeki oluşturma aşamasının bir parçasıdır ve bir sonraki karenin görüntülenmesi için tamamlanması gerekir. Kullanıcı arabirimi değişiklikleriyle ilgili olmayan görevler için requestAnimationFrame() kullanıyorsanız, sonraki çerçevenin işlenmesinde bir gecikmeye neden olabileceğinizi bilmeniz önemlidir.

Bu yüzden gereksiz olduğunda bunları kullanmaktan kaçının.

3. ResizeObserver geri aramalarını erteleyin

ResizeObserver arabirimi, bir Element içeriğinin veya kenarlık kutusunun veya bir SVGElement'in sınırlayıcı kutusunun boyutlarındaki değişiklikleri bildirir.

ResizeObserver geri aramaları, işlemeden önce çalışır ve yoğun kaynak gerektiren görevler içeriyorsa sonraki çerçevenin sunumunu potansiyel olarak erteleyebilir. Olay geri aramalarına benzer şekilde, hemen yaklaşan çerçeve için gerekli olmayan herhangi bir gereksiz mantığın ertelenmesi tavsiye edilir.

NitroPack ile INP'yi iyileştirin

Son birkaç aydır yaptığımız tüm testlere ve Google'ın INP'de yayınladığı tüm belgelere dayanarak, bunun Largest Contentful Paint'e (LCP) çok benzediğini söyleyebiliriz.

Birçok hareketli parçası olan çok katmanlı bir Core Web Vital.

Dolayısıyla, Google yeni yanıt verme metriklerini ilk kez duyurduğundan beri, müşterilerimizin INP puanlarını iyileştirecek özellikleri test etmeye ve üzerinde çalışmaya başladık.

Ve bazı umut verici sonuçlar görüyoruz:

NitroPack ile müşterilerimiz INP'de ortalama %36'lık bir iyileşme yaşıyor.

Ve bunların hepsi otomatik pilotta gerçekleşti. Sadece NitroPack'i kurarak ve aşağıdakiler gibi optimizasyon özellikleri sayesinde:

• Kullanılmayan CSS'yi Azaltın
• JavaScript yüklemesini ertele
• Yerleşik CDN

Ayrıca, tek bir kod satırı bile yazmadan INP ve Önemli Web Verileri puanlarınızı yükseltebilirsiniz. NitroPack'i ücretsiz yükleyin ve iyileştirmeleri kendiniz deneyimleyin.

INP sorunlarınızı düzeltin ve Önemli Web Verilerini otomatik olarak iletin. NitroPack'i şimdi edinin →