Interaction to Next Paint (INP) necə yaxşılaşdırılır

INP, istifadəçinin siçan klikləməsi və ya klaviatura basması kimi bir qarşılıqlı əlaqəni başlatdığı andan brauzerin növbəti vizual çərçivəni çəkdiyi ana qədər olan vaxtı ölçür. Yalnız ilk qarşılıqlı əlaqəyə baxan əvvəlki göstəricilərdən fərqli olaraq, INP səhifə ziyarəti müddətində baş verən demək olar ki, bütün qarşılıqlı əlaqələrin gecikməsini qiymətləndirir. O, saytınızın yüklənmə zamanı necə performans göstərdiyinə dair nümayəndəlik balı təmin etmək üçün kənar göstəriciləri istisna edərək müşahidə olunan ən uzun qarşılıqlı əlaqəyə diqqət yetirir. Yaxşı bir INP balı ümumiyyətlə 200 millisaniyə və ya daha az hesab olunur.

Bunu qiymətləndirmək üçün brauzerlər xüsusi DOM elementləri ilə əlaqəli hadisə işləyicilərini izləyirlər. İstifadəçi bir hadisəni işə saldıqda, brauzerin əsas axını çox vaxt digər tapşırıqlarla məşğul olur. Əsas axın ağır JavaScript və ya render tapşırıqlarını yerinə yetirməklə məşğuldursa, brauzer istifadəçi girişini dərhal emal edə bilmir. Bu gecikmə, dərhal rəy gözləyən istifadəçiləri məyus edə biləcək daha yüksək INP dəyəri ilə nəticələnir. Yüksək gecikmə çox vaxt kliklənməyən düymə və ya dərhal açılmayan menyu kimi təzahür edir.

Gecikmənin xüsusi səbəbini müəyyən etmək düzgün diaqnostik alətlərdən istifadə etməyi tələb edir. Chrome User Experience Report (CrUX), real istifadəçilərin saytınızı necə təcrübədən keçirdiyini başa düşmək üçün vacib olan sahə məlumatlarını təqdim edir. Həmçinin, rəsmi Core Web Vitals hədlərinə qarşı cari performansınızın icmalını vermək üçün CrUX məlumatlarından istifadə edən PageSpeed Insights alətindən istifadə etməlisiniz. Saytınız INP qiymətləndirməsindən keçmirsə, sınaq mərhələlərinizdə ən uzun gecikmələrə səbəb olan xüsusi qarşılıqlı əlaqələri axtarın.

Chrome DevTools daxilində Performans paneli darboğazları tapmaq üçün əsas resursdur. İstifadəçi qarşılıqlı əlaqəsini qeyd edərək və alov diaqramını yoxlayaraq, hansı tapşırıqların əsas axını istehlak etdiyini dəqiq görə bilərsiniz. 50 millisaniyəni aşan uzun tapşırıqları axtarın, çünki bunlar giriş gecikməsinin əsas günahkarlarıdır. Məhsulu səbətə əlavə etmək və ya əlaqə formasını göndərmək kimi kritik istifadəçi qarşılıqlı əlaqəsi zamanı xüsusi bir üçüncü tərəf skriptinin əsas axını blokladığını aşkar edə bilərsiniz.

JavaScript yüksək INP dəyərlərinin ən çox yayılmış səbəbidir, çünki o, istifadəçi girişini idarə etməkdən də məsul olan əsas axında işləyir. Sayt böyük bir JavaScript paketi yüklədikdə, brauzer kodu təhlil etmək, tərtib etmək və icra etmək üçün əhəmiyyətli vaxt sərf edir. İstifadəçi bu baş verərkən səhifə ilə qarşılıqlı əlaqədə olmağa çalışarsa, brauzer girişi cavablandırmazdan əvvəl cari tapşırığını bitirməlidir. Bu növbə effekti, mürəkkəb interaktiv xüsusiyyətlərə malik saytlarda ümumi bir nümunədir.

Ümumi bir səhv, sənəd elementlərinə dərhal böyük miqdarda məntiq icra edən ağır hadisə dinləyicilərini əlavə etməkdir. Məsələn, axtarış çubuğu debouncing olmadan hər düymə basışında mürəkkəb bir filtrləmə funksiyasını icra edərsə, əsas axın həddindən artıq yüklənir. Debouncing və ya throttling texnikalarını tətbiq etməklə, məntiqin yalnız istifadəçi girişini bitirdikdən sonra işləməsini təmin edirsiniz. Bu sadə dəyişiklik brauzerə ilkin qarşılıqlı əlaqəni daha sürətli idarə etməyə imkan verir və qavranılan cavabdehliyi yaxşılaşdırır.

Alien Road-da performansa yanaşmamız qarşılıqlı əlaqə axınının tam auditi ilə başlayır. Tipik bir əlaqə zamanı, ödəniş düymələri və ya naviqasiya menyuları kimi hər bir kritik istifadəçi yolunu xəritələmək üçün diaqnostik alətlərdən istifadə edirik. Bu qarşılıqlı əlaqələr zamanı əsas axın fəaliyyətini gecikmələrə səbəb olan xüsusi skriptləri müəyyən etmək üçün təhlil edirik. Komandamız daha sonra bu skriptləri yenidən qurmaq üçün çalışır, tez-tez brauzerin sessiya boyunca cavabdeh qalmasını təmin etmək üçün ağır məntiqi kritik yoldan uzaqlaşdırır.

Məsələn, müştəri saytı ağır bir çat vidcetindən istifadə edirsə, onun tənbəl yüklənə biləcəyini və ya yalnız əsas məzmun hazır olduqdan sonra işə salına biləcəyini qiymətləndiririk. Brauzerin boş vaxtı olana qədər qeyri-vacib tapşırıqları təxirə salaraq istifadəçi interfeysinə üstünlük veririk. Bu strukturlaşdırılmış proses müştərilərimizə zəngin, interaktiv təcrübələr təqdim edərkən Core Web Vitals-ı qorumağa kömək edir. Biz rəsmi Google göstəriciləri ilə uyğunlaşan ölçülə bilən təkmilləşdirmələrə diqqət yetiririk və işimizin daha yaxşı istifadəçi təcrübəsinə çevrilməsini təmin edirik.

Bəli, render tapşırıqları çox vaxt giriş emalı ilə rəqabət aparır. İstifadəçi bir səhifə ilə qarşılıqlı əlaqədə olduqda, brauzer növbəti çərçivəni çəkməzdən əvvəl üslubları yenidən hesablaya və ya layout yeniləməsini yerinə yetirə bilər. CSS-iniz həddindən artıq mürəkkəbdirsə və ya bahalı seçicilərdən istifadə edirsə, brauzer yeni vizual vəziyyəti hesablamaq üçün daha çox vaxt sərf edə bilər. Bu müddət INP balınızı təşkil edən ümumi gecikmənin bir hissəsidir. CSS-inizi səmərəli saxlamaq və böyük layout dəyişikliklərindən qaçmaq cavabdehliyi yaxşılaşdırmaq üçün vacib strategiyalardır.

Performans panelində rəngləmə müddətini müşahidə edərək render darboğazlarını yoxlaya bilərsiniz. ‘Üslubu Yenidən Hesabla’ və ya ‘Layout’ tapşırıqları üçün yüksək vaxtlar görürsünüzsə, CSS-inizi sadələşdirməlisiniz. Dərin seçici yuvalanmasından çəkinin və sadə qarşılıqlı əlaqələrdə yenidən render edilməli olan elementlərin sayını məhdudlaşdırın. Dəyişikliklərin vizual təsirini azaltmaqla, brauzerin yeniləmələri daha sürətli çəkməsinə imkan verirsiniz, bu da birbaşa INP dəyərinizi aşağı salır və son istifadəçi üçün daha hamar bir hiss yaradır.

• Faktiki ziyarətçiləriniz üçün INP dəyərlərini izləmək üçün real istifadəçi monitorinqini (RUM) qurun.
• Trendlər üçün Google Search Console ‘Core Web Vitals’ hesabatınızı həftəlik nəzərdən keçirin.
• Gecikmədəki qəfil artımlar barədə sizi xəbərdar etmək üçün xüsusi performans tablosu yaradın.
• Canlı yayıma keçməzdən əvvəl yeni üçüncü tərəf inteqrasiyalarını performans təsirinə görə qiymətləndirin.
• Mobil performansı sınaqdan keçirin, çünki daha yavaş CPU-lara malik cihazlar çox vaxt daha yüksək INP dəyərləri göstərir.