Interaction to Next Paint (INP) səhifənin bütün kliklənmə, toxunma və klaviatura qarşılıqlı əlaqələrinə reaksiya verməsi üçün sərf olunan vaxtı ölçən metrikadır. 2024-cü ilin mart ayından etibarən bu metrika əvvəlki reaktivlik metrikasını Əsas Veb Vital kimi əvəz etdi. İstifadəçi səhifə ilə qarşılıqlı əlaqədə olduqda, brauzer daxil olan məlumatı emal etməli və sonra ekrandakı vizual vəziyyəti yeniləməlidir. Bu ümumi müddətin ölçülməsi adi istifadəçi tapşırıqları zamanı saytın ləng və ya reaksiyasız olub-olmadığını müəyyən etməyə kömək edir.
INP və əvvəlki reaktivlik metrikaları arasındakı fərq nədədir?
Əvvəlki reaktivlik metrikaları çox vaxt istifadəçinin səhifəni yükləyərkən yerinə yetirdiyi ilk qarşılıqlı əlaqəyə diqqət yetirirdi. Lakin istifadəçi adətən bütün sessiya ərzində saytla defələrlə əlaqə qurur. INP səhifə açıq olarkən baş verən bütün qarşılıqlı əlaqələrin gecikməsini müşahidə edərək daha ətraflı baxış təqdim edir. Ən uzun qarşılıqlı əlaqə gecikməsini qeyd etməklə, o, ziyarətçinin düyməni sıxmağa və ya naviqasiya menyusunu açmağa çalışarkən qarşılaşa biləcəyi ən pis ssenarini vurğulayır.
Məsələn, səbətə məhsul əlavə etməyə çalışan ağır e-ticarət platformasındakı ziyarətçini təsəvvür edin. Həmin düymə üçün skriptin icrası digər fon tapşırıqları tərəfindən bloklanıbsa, brauzer İNİ dərhal yeniləyə bilməz. Bu gecikmə tövsiyə olunan hədləri aşarsa, istifadəçi təcrübəsinə mənfi təsir göstərir. Google Əsas Veb Vitalları öz reytinq siqnallarına daxil etdiyindən, bu gecikmələrin aradan qaldırılmaması axtarış sistemlərinin veb səhifələrinizin keyfiyyətini necə qavradığına birbaşa təsir edə bilər.
INP axtarış motoru reytinqləriniz üçün niyə çox vacibdir?
Axtarış sistemləri istifadəçilərə sabit və sürətli təcrübə təmin edən səhifələrə üstünlük verir. Səhifənin vizual yenilənməni göstərməsi çox vaxt tələb etdikdə, istifadəçilər tez-tez saytın xarab olduğunu və ya yavaş olduğunu güman edirlər və bu da onların erkən tərk etməsinə səbəb olur. Yüksək imtina dərəcələri axtarış sistemlərinə məzmunun istifadəçi gözləntilərinə cavab vermədiyini bildirə bilər. Aşağı INP saxlamaqla siz saytınızın yüksək keyfiyyətli veb təcrübəsi üçün müasir standartlara uyğun gələn sürətli və etibarlı hiss olunmasını təmin edersiniz.
Məzmunla zəngin sayt üçün tipik hesabda siz görə bilərsiniz ki, mürrəkəb JavaScript paketləri zəif qarşılıqlı əlaqə vaxtlarının əsas səbəbkarıdır. İstifadəçi menyuya toxunduqda, brauzer həmin xüsusi qarşılıqlı əlaqə üçün tələb olunmayan kodu təhlil etmək və ya icra etməklə məşğuldur. Üçüncü tərəf skriptlərinin təsirini minimuma endirmək və saytınızın JavaScript icrasını necə idarə etməsini optimallaşdırmaq səhifələrinizi veb məhsuldarlıq meyarları tərəfindən müəyyən edilmiş məqbul hədlər daxilində saxlamaq üçün vacib addımlardır.
Saytınızda yüksək INP-ni necə ölçə və müəyyən edə bilərsiniz?
Hansı qarşılıqlı əlaqələrin gecikmələrə səbəb olduğunu dəqiq müəyyən etmək üçün real istifadəçilərin sahə məlumatlarından istifadə etməlisiniz. Chrome İstifadəçi Təcrübəsi Hesabatı (CrUX) bu məlumat üçün əsas mənbədir, çünki o, faktiki ziyarətçilərin məlumatlarını birləşdirir. Siz bu məlumatlara PageSpeed Insights hesabatı və ya Search Console Core Web Vitals hesabatı kimi alətlər vasitəsilə daxil ola bilərsiniz. Bu alətlər səhifələrinizi INP balına əsasən Yaxşı, Təkmilləşdirməyə Ehtiyac Var və ya Zəif performans kimi kateqoriyalara ayırır.
Bu problemləri izləməyin başqa bir təsirli yolu saytınızda Real İstifadəçi Monitorinqi (RUM) skriptlərinin tətbiq edilməsidir. Bu skriptlər performans məlumatlarını real vaxt rejimində qeyd edərək səhifələrinizdə hansı elementlərin ən uzun gecikmələrə səbəb olduğunu dəqiq görməyə imkan verir. Bu məlumatları xüsusi istifadəçi hərəkətləri ilə əlaqələndirməklə siz təkmilləşdirilməli olan dəqiq skriptləri və ya CSS animasiyalarını müəyyən edə bilərsiniz. Həmişə məlumatlardakı nümunələri, məsələn, daha yüksək gecikmə qeyd edən xüsusi brauzerləri və ya cihaz növlərini axtarın.
Hansı ümumi nümunələr yüksək INP dəyərlərinə səbəb olur?
Bir neçə texniki nümunə yüksək INP-nin ümumi səbəbləridir. Tez-tez rast gəlinən səbəblərdən biri istifadəçi girişinin idarə edilməsini bloklayan əsas sapda uzun müddət işləyən tapşırıqların yerinə yetirilməsidir. Brauzer ağır skriptlə məşğul olduqda, klikləməyə və ya toxunmaya dərhal cavab verə bilməz. Bundan əlavə, istifadəçi səhifə ilə hər dəfə əlaqə quranda bahalı hesablamalar aparan səmərəsiz hadisə idarəediciləri giriş gecikməsini və sonrakı emal müddətini kəskin şəkildə artıra bilər.
Digər nümunə vizual yeniləmələri gözləniləndən daha yavaş edən mürəkkəb DOM strukturlarını əhatə edir. Skript brauzerdən tərtibatı yenidən hesablamanı və ya ekranın böyük hissəsini yenidən rəngləndirməni tələb edən dəyişikliyə səbəb olduqda, qarşılıqlı əlaqə gecikməsi artır. Bu, xüsusilə çoxlu dinamik komponentləri olan səhifələrdə və ya brauzer resursları uğrunda mübarizə aparan ağır reklam-texnologiya inteqrasiyalarında çox rast gəlinir. DOM-unuzu sadələşdirmək və lazımsız tərtibat dəyişikliklərini azaltmaq reaktivlikdə əhəmiyyətli fərq yarada bilər.
Daha yaxşı reaktivlik üçün JavaScript necə optimallaşdırılmalıdır?
- Əsas sapı sərbəst saxlamaq üçün setTimeout və ya requestIdleCallback istifadə edərək uzunmüddətli JavaScript tapşırıqlarını daha kiçik hissələrə bölün.
- Hər səhifə sorğusunda yüklənən, lakin ilkin istifadəçi qarşılıqlı əlaqələri üçün vacib olmayan istifadə olunmamış JavaScript kitabxanalarını silin.
- Dərhal qarşılıqlı əlaqə üçün lazım olan kritik koda üstünlük verin və səhifə boş rejimə keçdikdən sonra yüklənmək üçün əsas olmayan skriptləri təxirə salın.
- Yükləmə mərhələsində brauzeri istifadəçi girişini qeydiyyatdan keçirməzdən əvvəl gözləməyə məcbur edən böyük sinxron skriptlərdən istifadə etməyin.
- İstifadəçi qarşılıqlı əlaqələri zamanı əsas sapı tıxaya bilən sosial media vidjetləri və ya izləmə pikseləri kimi üçüncü tərəf skriptlərini yoxlayın.
Üçüncü tərəf kodunun və aktivlərinin idarə edilməsi üçün ən yaxşı təcrübələr
Üçüncü tərəf skriptləri tez-tez marketinq və analitika üçün zəruridir, lakin onlara nəzarət edilməzsə, INP-nizi asanlıqla poza bilər. Ümumi strategiya bu skriptləri tənbəl yükləməkdir ki, onlar ilkin səhifənin renderini və ya sonrakı qarşılıqlı əlaqələri bloklamasınlar. Siz həmçinin hər bir skriptin onun performans xərcini əsaslandırmaq üçün kifayət qədər dəyər təmin edib-etmədiyini qiymətləndirməlisiniz. Məsələn, DOM-a dəyişikliklər daxil edən A/B sınaq aləti onun tərtibatın sıxılmasına səbəb olmadığından əmin olmaq üçün izlənilməlidir.
Şəkillər və CSS üçün aktivlərinizin düzgün sıxıldığına və optimallaşdırıldığına əmin olun. Böyük şəkil faylları yaddaş və emal gücünü istehlak edə bilər ki, bu da dolayı yolla brauzerin girişləri rəvan idarə etmək qabiliyyətinə təsir göstərir. WebP və ya AVIF kimi müasir formatlara xidmət etməklə və reaktiv şəkil ölçülərindən istifadə etməklə siz brauzerə düşən ümumi yükü azaldırsınız. Bu, cihaza nəhəng aktivləri render etməkdənsə, resurslarını istifadəçi qarşılıqlı əlaqələrinin emalına yönəltməyə imkan verir.
INP-nizi yaxşılaşdırmaq üçün bu həftə haradan başlamaq lazımdır
- Yüksək gecikmə kimi qeyd olunan xüsusi qarşılıqlı əlaqələri müəyyən etmək üçün saytınızın performansını PageSpeed Insights-da yoxlayın.
- Yavaş olduğuna şübhələndiyiniz istifadəçi qarşılıqlı əlaqəsini qeyd etmək və təhlil etmək üçün Chrome DevTools ‘Performance’ tabını açın.
- Tipik sessiya zamanı hansı skriptlərin icrasının daha çox vaxt apardığını görmək üçün əsas sapı bloklayan tapşırıqlarınızı nəzərdən keçirin.
- Üçüncü tərəf inteqrasiyalarınızı yoxlayın və əsas sapın sıxılmasına səbəb olan istifadə olunmayan və ya artıq marketinq teqlərini silin.
- Kodun bölünməsi kimi dəyişikliklərinizin həqiqətən qarşılıqlı əlaqə gecikməsini azaltdığını yoxlamaq üçün sadə sınaq mühiti tətbiq edin.
INP-nin təkmilləşdirilməsi kodunuzun istifadəçi təcrusəsinə necə təsir etdiyinə ardıcıl diqqət yetirməyi tələb edən davamlı prosesdir. Bu addımları yerinə yetirməklə və real dünya performans hesabatlarınızı izləməklə saytınızın reaktiv qalmasını təmin edə bilərsiniz. Alien Road hər şeyi birdən düzəltməyə çalışmaqdansa, bu kiçik, tədricən dəyişikliklər etməyi tövsiyə edir. Əvvəlcə ən çox istifadə edilən qarşılıqlı əlaqələrə diqqət yetirmək ziyarətçiləriniz və axtarış sisteminin performansı üçün ən yaxşı nəticə verəcəkdir.
Oxumağa davam edin: SEO (Axtarış Motorunun Optimizasiyası) · SEO