Interaction to Next Paint (INP) sessiya ərzində istifadəçi qarşılıqlı əlaqələrinə (kliklər, toxunuşlar və klaviatura daxiletmələri) veb saytın ümumi reaktivliyini ölçən Core Web Vital metrikasıdır. Yaxşı INP balı 200 millisaniyə və ya daha azdur. INP-nin yaxşılaşdırılması əsas axındakı uzun tapşırıqların parçalanmasını, üçüncü tərəf skriptlərinin azaldılmasını, ağır render əməliyyatları zamanı əsas axına yol verilməsini və ani vizual əks əlaqəni təmin etmək üçün hadisə işləyicilərinin optimallaşdırılmasını tələb edir.
Yüksək Interaction to Next Paint Gecikməsinə Nə Səbəb Olur?
Veb brauzerlər JavaScript-i əsas axın (main thread) adlanan tək bir axında icra edirlər. İstifadəçi düyməni kliklədikdə və ya mobil menyunu açdıqda, brauzer müvafiq JavaScript hadisə işləyicisini növbəyə qoymalı, kodu icra etməli və yenilənmiş çərçivəni çəkmək üçün düzəni yenidən hesablamalıdır. Əgər əsas axın 50 millisaniyədən çox davam edən (uzun tapşırıq kimi tanınan) icra bloku ilə məşğuldursa, istifadəçinin qarşılıqlı əlaqəsi gecikir. İcra üçün gözləməyə, işləyicinin işlədilməsinə və yeniləmənin render edilməsinə sərf olunan ümumi vaxt ümumi INP müddətini təşkil edir.
Tipik hesab və ya sayt strukturunda yüksək gecikmə adətən üç ayrı mərhələdən qaynaqlanır: daxiletmə gecikməsi, emal vaxtı və təqdimat gecikməsi. Daxiletmə gecikməsi hadisə işləyiciniz başlamazdan əvvəl əvvəlki tapşırıqlar əsas axını blokladıqda baş verir. Emal vaxtı hadisə işləyici kodunun özünün müddətini təmsil edir. Təqdimat gecikməsi üslubların yenidən hesablanmasına, düzən ağaclarının yenilənməsinə və ekranda piksellərin render edilməsinə sərf olunan vaxtdır. Minlərlə qovşağı olan mürəkkəb DOM ağacları təqdimat gecikməsini əhəmiyyətli dərəcədə artırır.
Chrome DevTools-da INP-ni Necə Ölçmək Olar?
Qarşılıqlı əlaqə gecikməsini diaqnostika etmək səhifə ilə aktiv şəkildə əlaqə saxlayarkən performans məlumatlarının toplanmasını tələb edir. Chrome DevTools-u açın, Performance panelini seçin və elementləri klikləyərkən, sahələrə mətn daxil edərkən və ya interaktiv menyuları dəyişdirərkən əllə qeydə başlayın. Qeydi dayandırdıqdan sonra zaman qrafikinin yuxarı hissəsindəki Interactions trekinə baxın. Uzun qarşılıqlı əlaqələr qırmızı göstəricilərlə vurğulanır və daxiletmə gecikməsinin, emal müddətinin və təqdimat gecikməsinin dəqiq müddətini göstərir.
Real dünya mobil cihazlarını təqlid etmək üçün DevTools Performance parametrlərində CPU tənzimlənməsini (throttling) aktivləşdirin. 4x CPU yavaşlamasının təyin edilməsi güclü masaüstü inkişaf aparatında görünməz qala bilən dar boğazları Üzə çıxarır. Lighthouse kimi sintetik sınaq alətləri laboratoriya məlumatları təqdim edir, lakin Google Search Console və ya real istifadəçi monitorinqi alətləri vasitəsilə toplanan sahə məlumatları müxtəlif şəbəkə sürətləri və aparat imkanları üzrə faktiki ziyarətçi təcrübələrini əks etdirir.
Üçüncü Tərəf Skriptləri Niyə INP Balınızı Məhv Edir?
Taq menecerləri vasitəsilə əlavə olunan üçüncü tərəf skriptləri çox vaxt istifadəçinin pik fəaliyyəti zamanı əlaqələndirilməmiş JavaScript işlədir. Analitika izləyiciləri, istilik xəritəsi alətləri, çət vidjetləri və reklam pikselləri daxil olan hadisələri davamlı olaraq emal edir və ya şəbəkəni sorğulayır. İstifadəçi üçüncü tərəf marketinq teqi arxa planda qaydaları qiymətləndirərkən interaktiv elementi kliklədikdə, istifadəçinin hərəkəti izləmə icrasının arxasında növbəyə durur və gecikməni 200 ms hədəfindən kənara itələyir.
Üçüncü tərəf skriptlərinin auditi həm yükləmə vaxtının, həm də icra dəyərinin qiymətləndirilməsini tələb edir. İzləmə funksiyalarını Google Tag Manager daxilində birləşdirin və üst-üstə düşən məlumatları toplayan artıq teqləri silin. Tətik şərtlərini elə konfiqurasiya edin ki, əsas olmayan marketinq teqləri ilkin istifadəçi qarşılıqlı əlaqəsindən sonra və ya requestIdleCallback üsullarından istifadə edərək boş dövrlərdə icra olunsun. Xarici skriptlərdən əsas axın rəqabətinin azaldılması istifadəçi tərəfindən başladılan tədbirlər üçün dərhal yer yaradır.
Əsas Axındakı Uzun Tapşırıqların Parçalanması
Uzun tapşırıqlar əsas axını bloklayır və brauzerin istifadəçi daxiletmələrinə dərhal cavab verməsinin qarşısını alır. Bunu həll etmək üçün tərtibatçılar monolit funksiyaları əllə daha kiçik asinxron hissələrə ayıra bilərlər. Əsas axına yol vermək brauzerə növbəyə qoyulmuş istifadəçi qarşılıqlı əlaqələrini emal etmək və ağır arxa plan hesablamalarını bərpa etməzdən əvvəl yenilənmiş vizual çərçivələri render etmək üçün qısa bir pəncərə verir.
Müasir brauzer API-ləri funksiya məntiqini pozmadan icraya yol vermək üçün aydın nümunələr təklif edir. Uzun dövrlər və ya çoxmərhələli hesablamalar daxilində güzəşt nöqtələrinin daxil edilməsi əsas axına daxil olan daxiletmə hadisələrini dərhal idarə etməyə imkan verir.
- İcra prioritetini qoruyub saxlayaraq idarəetməni əsas axına qaytarmaq üçün dəstəkləyən brauzerlərdə scheduler.yield() istifadə edin.
- Qalan işi yeni makro-tapşırığa daxil etmək üçün sıfır gecikmə parametri ilə setTimeout-a müraciət edin.
- Emal prosesini tamamilə əsas axından uzaqlaşdırmaq üçün CPU-tələb edən məlumat transformasiyalarını Web Workers daxilində qablaşdırın.
- Dəyişiklikləri çərçivə yeniləmələri ilə uyğunlaşdırmaq üçün requestAnimationFrame istifadə edərək kütləvi DOM yeniləmələrini toplu əməliyyatlara bölün.
Ağır Hadisə İşləyicilərini Necə Optimallaşdırmalısınız?
İstifadəçi daxiletmələrinə qoşulmuş hadisə işləyiciləri çox vaxt tək sinxron blokda çoxlu tapşırıqları yerinə yetirməyə çalışırlar. Məsələn, e-ticarət platformasındakı filtr düyməsi bir klik hadisəsi daxilində URL parametrlərini yeniləyə, məhsul kolleksiyalarını filtrləyə, qiymət diapazonlarını yenidən hesablaya və izləmə piksellərini işə sala bilər. Bütün bu əməliyyatların sinxron şəkildə icra edilməsi renderi ləngidir və istifadəçini bir neçə yüz millisaniyə ərzində donmuş UI ilə qoyur.
Ağır hadisə işləyicilərini düzəltmək üçün tam hesablama tamamlanmasından əvvəl dərhal vizual rəyə üstünlük verin. Ağır filtrləmə məntiqini yerinə yetirməzdən əvvəl UI vəziyyətini dərhal dəyişdirin – məsələn, yükləmə fırlanıcısının göstərilməsi və ya düymə vəziyyətlərinin yenilənməsi. Analitik pinqlərin göndərilməsi və ya müvəqqəti istifadəçi vəziyyətinin localStorage-də saxlanılması kimi kritik olmayan əlavə təsirləri əsas render dövrəsindən kənara daşıyın.
Alien Road vizual vəziyyət dəyişikliklərini arxa plan emalından ayırmaq üçün interaktiv komponentlər üzrə daxiletmə hadisə dinləyicilərini nəzərdən keçirməyi tövsiyə edir. İşləyicilərin yenidən qurulması istifadəçi jestlərinin dərhal vizual təsdiqlər verməsini təmin edir, qavranılan və ölçülən qarşılıqlı əlaqə gecikməsini 200 ms-dən xeyli aşağı saxlayır.
- İstifadəçinin hərəkətini dərhal qəbul etmək üçün hadisə işləyicisində dərhal vizual əlaqə təmin edin.
- Pəncərənin ölçüsünün dəyişdirilməsi, səhifənin sürüşdürülməsi və ya axtarış sahəsinə yazılması kimi davamlı daxiletmə hadisələrini debons (debounce) edin.
- Mikrotapşırıqlar və ya asinxron işçilərdən istifadə edərək vizual DOM yeniləmələrini arxa plan məlumatlarının emalından ayırın.
- Ana konteyner elementlərində qeydiyyatdan keçmiş köhnəlmiş və ya dublikat hadisə dinləyicilərini silin.
Mürəkkəb DOM Strukturlarının və Təqdimat Gecikməsinin İdarə Edilməsi
Təqdimat gecikməsi Interaction to Next Paint gecikməsinin son komponentini təşkil edir. JavaScript icrası başa çatdıqdan sonra brauzer hesablanmış üslubları hesablamalı, səhifə həndəsəsini düzməli və pikselləri çəkməlidir. Minlərlə element ehtiva edən böyük DOM ağacları render mürəkkəbliyini artırır və hətta sadə DOM dəyişikliklərini hesablamanı baha başa gətirir.
Gizli elementləri silməklə, ekrandan kənar siyahıları tənbəl render etməklə və müasir CSS tərkib xüsusiyyətlərini tətbiq etməklə DOM ölçüsünü idarəolunan saxlayın. contain-intrinsic-size və content-visibility: auto kimi CSS xüsusiyyətləri brauzerlərə ekrandan kənar komponentlər görünüşə sürüşdürülənə qədər onların üslub və düzən hesablamalarını atlamağa imkan verir. Düzənin yenidən hesablanması vaxtının azaldılması istifadəçi klikləri zamanı təqdimat gecikməsini birbaşa azaldır.
Bu Həftə INP-nin Təkmilləşdirilməsinə Haradan Başlamalı
Qarşılıqlı əlaqə reaktivliyini yaxşılaşdırmaq əvvəlcə yüksək təsirli dar boğazları həll edən metodik yanaşma tələb edir. Zəif qarşılıqlı əlaqələr yaşayan xüsusi URL-ləri müəyyən etmək üçün Google Search Console-da Core Web Vitals altında real istifadəçi sahəsi məlumatlarını nəzərdən keçirməklə başlayın.
Sonra, 4x CPU tənzimlənməsi altında Chrome DevTools Performance panelindən istifadə edərək həmin qarşılıqlı əlaqə gecikmələrini təkrarlayın. Mühəndislik səylərinizi istifadəçi klikləri zamanı icra olunan uzun tapşırıqların parçalanmasına, lazımsız üçüncü tərəf teqlərinin təmizlənməsinə və əsas axın icrasına yol verilməsinə yönəldin. INP ballarını 200 ms və ya daha aşağı səviyyədə saxlamaqla, saytınız ziyarətçilərin marağını qoruyan reaktiv təcrübə təqdim edir.
Oxumağa davam edin: Veb Dizayn və İnkişafı · Veb Dizayn