INP (bir sonraki boyaya etkileşim): derinlemesine çekirdek web canlıları

Hiç ... web sitesine girip basılan bir "sepeti ekle" düğmesi bulurken, yine de, tıklama olan açılır menü veya yazdırılan arama kutusu ama hiçbir şey olmadı mı? "Gecikme" hissi, Google'ın "INP" adı verilen en son çekirdek web canlılarıyla "devrim" e veya bir sonraki boyaya etkileşimli olarak "devrim" e gelmek üzere olduğu gibi hayal kırıklığına uğramış!

Web sitemizin Web sitemizin yeterince hızlı olduğunu düşünen web sitesi sahibi, pazarlamacı veya web geliştiricileri iseniz, bugün tekrar düşünmek zorunda kalabilir, çünkü INP sadece "yükleme hızı" değil, her kullanıcının eylemleri için "yanıt hızı" ölçüsü ölçülür. Bu, hem kullanıcı deneyimini (UX) hem de SEO'nuzu doğrudan etkileyen önemli bir faktör haline gelmek üzere! Bu makale sizi kolay bir şekilde anladık. Bir kılavuzla, optimize yöntemi, "geciktirilen" web sitesini müşteri etkilenene kadar "pürüzsüz" olarak değiştirmek için elden yapıldı.

Hayattaki asıl sorun: "hala" web sitesi personel gibidir.

Çok ilginç bir ürün reklamı bulduğunuzu hayal edin. Web sitesine hızlıca tıklayın. Web sayfası, göz açıp kapayıncaya kadar güzel bir şekilde yüklendi. "Rengi seçin" düğmesine basmak istediğiniz ürünü buluyorsunuz ... ve ... sessiz ... hiçbir şey olmadı ve tekrar basmaya çalışıyorsunuz ... hala hala. Hayal kırıklığına uğramaya başlarsınız ve web sitesinin kırıldığından mı yoksa internetten mi emin değilsiniz. Bir sorunun var. Sonunda, pencereyi kapattınız. O zaman bunun yerine diğer web sitelerinden satın almaya gidin

Bu, e-ticaret web sitesinin "kabusu" ve dönüştürülmesi gereken tüm web siteleridir. Sorun "tıklayın ve tut ve" basılı tut ve sonra gecikme "muazzam bir kötü deneyim yaratıyor. Güvenilirliği yok ediyor ve maalesef müşterilerimizi kaybetmemize neden oluyor, ancak" yavaş tepki "adı verilen küçük bir sorun olan SEO'yu çekmek veya yapmak için çok para kullanıyor.

‍

İllüstrasyonlar istemi: Grafikler kullanıcıyı gösterir. Parmaklar, kum saati sembolü veya yükleme simgesi ile herhangi bir yanıt vermeden mobil ekrandaki düğmeye batırılırken

Bu sorun neden ortaya çıktı: "bir çalışan" adlı ana konu

Web sitemizin "Yavaş Yanıt" veya Yüksek INP'nin ana nedeni tarayıcıdan geliyor. "Önemli çalışanlar" "Ana Konu" adlı tek kişidir. Bu çalışan neredeyse her şeyden sorumludur. Web sayfası ekranından (render düzeni), CSS kod yönetimi, karmaşık JavaScript RUN'a kadar

Şimdi, ana iş parçacığının üçüncü taraftan güzel bir animasyon veya büyük miktarda veri yönetimi oluşturmak için büyük JavaScript işlemesi gibi uzun bir süre çalışmasını sipariş edersek düşünün. Ardından kullanıcı "tıklayın" düğmesine veya "Tür" i itti. Mesaj gelir. Ana iş parçacığının "misafirleri almak" veya hemen bu siparişe yanıt verecek boş bir eli olmayacaktır. Bu nedenle, önce işin tamamlanmasını beklemek zorundadır. Kullanıcının yaptıklarına yönelmek, hissettiğimiz "gecikme" veya "olağanüstü" dır. Bu sorun genellikle aşağıdakilerden kaynaklanır:

• Çok uzun süre çalışan JavaScript (uzun görevler): Ana iş parçacığını hemen engellemek için 50 milisaniyeden fazla alan komut dosyaları.
• DOM büyük ve karmaşıktır: ne kadar çok öğe, her yeni sonucu görüntülemek için çok fazla hesaplamaya sahiptir, o kadar uzun sürer.
• NANTUAL ORTANLIK GERİ DÖNEMLERİ: Çeşitli etkinliklerle (Tıklama, Kaydırma, Keypres gibi) ilgilenen kod yazma yeterince iyi değildir.
• Ağır olan üçüncü taraf komut dosyaları: Sohbet sistemleri, analiz veya reklamlar gibi harici komut dosyaları ana iş parçacığı kaynakları için de rekabet edebilir.

temel web canlılarını anlamak , bu sorunları çözmek için önemli bir temeldir.

‍

İllüstrasyonlar istemi: Kolay infografik görüntüler. "Ana iş parçacığı" nı göstermek, telefona (kullanıcı etkileşimi) cevap verecek zamana kadar büyük bir belge (JavaScript) yapan tek çalışan gibidir.

Eğer bırakılırsa, nasıl etkilenecek: sadece "can sıkıcı" değil, işin "felaket".

Yüksek bir INP değerine sahip olmak veya web sitesine yavaş yavaş yanıt veriyor, sadece "hayal kırıklığına uğramış" kullanıcıyı etkilemekle kalmaz, aynı zamanda uzun vadede iş ve SEO üzerinde doğrudan bir etkisi vardır.

• Dönüşüm oranı. Dang: Kullanıcılarla karşılaştığında, ürün seçimi düğmesine basma gibi başlangıçlardan itibaren sorun kullanırlar. Ya da neredeyse sıfır "ödemek" için son adıma ulaşma fırsatı formunu doldurun.
• Sınır oranı yüksektir: İlk izlenim önemlidir. Web siteniz kötü bir deneyim yaratıyorsa, kullanıcı hemen basar. Ve tekrar geri dönmeyi düşünmedim
• Markayı kırın: Yavaş ve zor web siteleri. Cehaletin yansıtılması ve profesyonel olmayan biriken güvenilirliği yok etmek
• SEO Sıralaması: Mart 2024'ten bu yana Google, Inp'yi resmi temel Web canlılarından biri olarak getirdi. FID'yi değiştirmek için (ilk giriş gecikmesi). Bu, kötü bir INP'ye sahip web sitesinin doğrudan arama sayfasında azaltılacağı anlamına gelir, özellikle B2B işinin web sitesi en yüksek önemlidir.

Başka bir deyişle, web sitesinin güzel bir dükkan açmak gibi yüksek bir INP değerine sahip olmasına izin vermek. Ancak, müşterilerin girmesine izin vermekten kapıyı kilitledim, iş fırsatlarını yok etmek ve yaptığınız tüm pazarlamanın verimliliğini azaltmaktır.

‍

İllüstrasyonlar istemi: Bondce hızı çizgisi, arka planda kırmızı olan INP simgesi ile yükselirken dönüşüm oranı çizgisini gösteren grafik düşer.

Herhangi bir çözüm var mı? Ve Nereden Başlatılır: Tam Optimize INP ders kitabını açın

İyi haber şu ki, yüksek INP sorunları çözülebilir ve geliştirilebilir. "Bağımsız Dönüş" in ana iş parçacığına anahtarı, böylece kullanıcılara istediğiniz zaman yanıt vermeye hazır olacak. Önce sorunun kaynağını bulmak için "sonuçları ölçerek" başlamalıyız. Ve sonra bu yönergeleri düzeltin

1. Bir sorunu olan bir etkileşimi ölçün ve bulun:

• Laboratuar Veri Araçlarını kullanın: örneğin, Google PagesPeed Insights veya meydana gelen "uzun görevleri" simüle etmek ve bulmak için Chrome Devtools (Performans) kullanın.
• Alan Veri Araçlarını Kullanın: INP verilerini doğrudan kullanıcınızdan saklamak için Chrome Kullanıcı Deneyimi Raporu (Crux) aracılığıyla gerçek kullanıcılardan gelen bilgilere bakın veya Google'ın kütüphanesini yükleyin.

2. Kod tekniklerini optimize edin (INP'yi azaltmanın kalbi):

• Büyük çalışmayı Alt Taslılara bölün: en önemli teknik "teslim" dir ve ana iş parçacığını zaman zaman serbest bırakacak. Uzun süre çalışmasını emretmek yerine, ana iş parçacığı ritmi "nefes" yapmak ve kullanıcılara yanıt vermek için bazı işlevlerin işlevini geciktirmek için `settimeout'u kullanabiliriz. Google tarafından web.dev adresinden resmi veri kaynağından daha fazlasını okuyun
• Düzenden kaçının: Elemanın boyutunu okumak için sipariş verdiğiniz bir komut dosyası yazmayın ve aynı döngüde değişen yeni bir değer yazmayın. Çünkü tarayıcıyı düzeni gereksiz yere hesaplamaya zorladı
• DOM'un karmaşıklığını azaltın: Daha az element daha fazla elemen olur. Tarayıcı daha kolay ve daha hızlıdır. HTML yapısını olabildiğince basit hale getirmeye çalışın.
• CSS'de `içerik görünürlüğü SP ve` `dahildir: tarayıcıya, oluşturulması gerekmeyen veya diğer parçalardan ayrı olarak hesaplanabileceğini söylemek için. Bu da ekran yükünü azaltmaya yardımcı olur
• Üçüncü taraf komut dosyasını yönetin: Komut dosyasını gerektiği gibi yükleyin ve web sayfasının ana sayfasını engellememek için 'async' veya erteleme özniteliği kullanın. Oluşturma engelleme kaynaklarının nasıl düzeltileceğini öğrenmek bu bölümde çok yardımcı olacaktır.

Giriş Inp'den Core Web Vitals'e kadar incelenebilir

‍

İllüstrasyonlar istemi: INP'yi 3 adım olarak optimize gösteren infografik: 1. Ölçüm (büyütülmüş gözlük simgesi) 2. Tanımlayın (hedef havacılık) 3.

Eskiden başarılı olan gerçek şeyden örnekler: "Parmağına Tıklayın" i döndüren e-ticaret web sitesi

Görüntüyü açıkça görmek için e-ticaret web sitesinin örneğini kaldırmak istiyorum. Yüksek INP sorunlarıyla karşılaşan bir moda kıyafetleri satın. Web sitelerinde özellikleri var. "Filtre" (çok karmaşık) kullanıcılar hem kıyafetleri, renk, boyutu hem de fiyat aralığını seçebilir.

Orijinal sorun: Kullanıcı "kırmızı" seçmek gibi bir filtre her seçtiğinde, tüm sayfa JavaScript'in tüm yeni ürünleri işlemesini ve görüntülemesini beklemek için 1-2 saniye tutacaktır. Bu, birçok müşterinin yan yana filtreyi seçmek için tıkladığı çok rahatsız edici ve web sitesi çok uzun, bu da görevden dönüşüm oranını en önemlisi haline getiriyor.

INP Misyonu Optimize: Geliştirme ekibi "Uzun Görevleri Ayrıl" tekniğini kullanarak düzenlemeye başladı. Tüm kodu aynı anda çalıştırmaktan değiştiler. 'SetTimeout' kullanılarak parçalara ayrılır. Kullanıcıdan sonra filtreyi tıklayın, sistem yükleme döndürücüyü hemen görüntüler (hemen yanıt verir) ve ardından JavaScript'in bilgileri çekmesine ve yeni ürünü arka planda oluşturmasına izin verir.

Şaşırtıcı sonuçlar: Ürün sayfasının INP'si ~ 800ms'den sadece ~ 150ms'ye düşürülür ("kötü" den "iyi" olur). Düzgün kullanım deneyimi bir mobil uygulama gibidir. Kullanıcı, tökezlemeden sürekli olarak birçok filtreyi seçmek için basabilir. ** Filtre kullanan oturum%25'e kadar bir dönüşüm oranı vardır ** ve ** Sayfanın **%15 düşüşleri ** Bu, kullanıcıların deneyimini gerçekten değiştirebilecek ve iş sonuçları oluşturabilecek optimize edici INP'nin gücüdür. Shopify'da satışları doğrudan etkileyen aynı

‍

İllüstrasyonlar istemi: e-ticaret sayfasının öncesi ve sonrası sayfası. İlk taraf kullanıcıyı gösterir. Kullanıcıyı gösterdikten sonra filtre ile tahriş olur.

Takip etmek istiyorsanız, ne yapmalı? (Hemen kullanılabilir): Kontrol listesi. Web sitenizde sağlık kontrolü.

Web sitenizi değiştirmeye hazır mı? "Parmağına tıklayın"? Sorunun birikmesini beklemenize gerek yok. Optimize INP'yi hemen başlatmak için bu kolayca kontrol listesini izlemeye çalışın.

1. Google PagePeed Insights: Web Sitenizi yazın. Ve "Performans Sorunları Teşhis" konusuna bakın, Interactive adlı metriği bir sonraki boyaya (INP) görmek için aşağı kaydırın. Değeriniz ne kadar? (İyi = 200ms'nin altında, geliştirilmelidir = 200-500ms, kötü = 500ms'den yüksek)
2. Yavaş etkileşimi bulun: PagePeed Insights genellikle hangi etkileşimin (düğmeyi tıklamak, menüyü açmak gibi) en uzun zaman süren söyler. Bu senin ilk hedefin.
3. Geliştiricinizle konuşun (veya Devtools'un kendisini açın): Bu raporu geliştiricilere gönderin. Ya da kendiniz yapabiliyorsanız, Chrome Devtools'u Performans sekmesine açın ve uzun kırmızı bir bant arayışında bir sorunu olan bir etkileşim yapmaya çalışın. "Uzun görev"
4. En kolay şeyle başlayın: Gereksiz yere çalışan JavaScript'i aramaya çalışın. Web sayfası bitti. İşlemini 1-2 saniye geciktirmek için `setTimeout`u kullanmayı deneyin.
5. Üçüncü taraf komut dosyalarını kontrol edin: Bir eklentiniz veya komut dosyası var mı? Açılmamış kullanıcı veya ısı haritası olmayan bir sohbet sistemi gibi. Sonuçları geçici olarak kapatmaya ve ölçmeyi deneyin.
6. Bir uzmana danışın: Sorun karmaşıksa, gelişmiş web sitesi geliştirme uzmanlarına , uzun vadede en değerli yatırım olabilir.

‍

İllüstrasyonlar istemi: PagePeed Insights simgesi, kod simgesi, fiş simgesi ve uzman simgeleri gibi her bileşen simgesine sahip INP denetim öğelerine sahip kontrol listesi görüntüleri.

İnsanların merak ettiği sorular ve temizlenen cevaplar

Böylece INP'yi iyice anlayabilirsiniz, net bir cevapla ortak bir soru derledim.

INP FID'den (ilk giriş gecikmesi) nasıl farklıdır, eski web hayati nasıl?
FID sadece "ilk giriş" (ilk giriş), ancak kullanıcının kullanımı boyunca meydana gelen "her etkileşimli" ölçümünü inp. İlk tıklamadan son tıklamaya kadar, Inp genel kullanıcı deneyiminin çok daha iyi bir temsilcisidir.

"İyi" INP değeri ne kadar olmalı?
Google'ın kriterlerine göre, iyi INP değerleri 200 milisresden (MS) daha az olmalıdır, eğer 200-500ms arasında, yenilenmiş olduğu düşünülür ve 500m'den daha yüksek kötü kabul edilirse.

Programcı değilim, Inp'yi kendiniz geliştirebilecek mi?
Kod bilgisi yoksa bazı iyileştirmeler zor olabilir. Ancak yapabileceğiniz şey 1. Sorunları "teşhis etmek" için PagePeed Insights gibi araçları kullanmaktır. 2. Fiş veya gereksiz harici komut dosyalarının sayısını azaltın. 3. Kodu iyi yazan ve performansı ve 4'ü vurgulayan temayı veya sıcaklık seçin.

Web sitem sadece sıradan bir bilgi. Inp ile ilgilenmesi gerekmiyor mu?
Kesinlikle gerekli! Web sitesinin türünden bağımsız olarak, menüye basma, video oynamak için tıklama ve hatta Çerez Kabul düğmesine basma gibi sorunsuz bir etkileşime sahip olmak, kullanıcının güvenilirliğini ve deneyimini etkiler. Ve en önemlisi, SEO sıralamalarınızı doğrudan etkiler.

‍

İllüstrasyonlar istemi: Karakter, programcılar ve pazarlamacılar ile soru işareti (SSS) olan Terazi şeklinde simge ayakta ve konuşuyor.

Anlaması kolay olmak için özet + yapmaya çalışmak istiyorum

Özetle, Next Paint'e (INP) etkileşim, Google'ın web sitesinin kalitesini ölçmek için yeni bir standart olarak kullandığı "kullanıcılardan yansıma" olan bir "teknik" baş ağrısı "değildir. Kalbi kolaydır: Kullanıcı web sitemizde bir şey yaptığında. Yanıtı hemen görmelidir.

Web sitesini yüksek Inp ile bırakmak müşterinin sesini görmezden gelmek gibidir. Tüm deneyimi, güvenilirliği, satışları ve SEO sıralamasını yok eder. Yatırım, sadece ödev yapmak, Google'ı göndermek için değil, bugün INP'yi optimize etmek için etkilidir, aynı zamanda uzun vadede işletmeniz için güçlü bir temeldir. Tüm kullanıcılara ve duygulara saygı gösterir.

Daha fazla müşteri kaybedene kadar web sitenizi "gecikme" için beklemeyin. Bugün web sitenizi kontrol etmek için verdiğim kontrol listesini kullanmayı deneyin. Veya e -ticaret optimizasyon denetimi yapmak için bir yardımcı istiyorsanız , tüm derinlemesine problemlerde arama ve çözmek için harika bir başlangıç noktasıdır. Kullanıcının her tıklamasını bir izlenime dönüştürmenin zamanı geldi!

‍

İllüstrasyonlar istemi: İlham verici görüntüler, tıklayan fare simgesinden yükselen oku gösterir. Temiz ve hızlı görünen bir web sitesinin zeminli büyüyen bir satış grafiği oldu

‍