तुमचा पेज वेगाने लोड होतोय पण तरीही तो संथ वाटतोय?

तुमचा Lighthouse रिपोर्ट हिरवा आहे. तुमचे LCP आणि CLS स्कोअर चांगले दिसत आहेत. तुमचा पेज वेगाने लोड होतो. पण मग तुमचे रिअल-वर्ल्ड स्कोअर कमी होतात. तुम्हाला समजत नाही की ते का होत आहे.

समस्या अनेकदा INP मध्ये असते.

INP म्हणजे Interaction to Next Paint. मार्च २०२४ मध्ये Core Web Vital म्हणून त्याने FID ची जागा घेतली. FID फक्त तुमच्या पहिल्या क्लिकमधील विलंब मोजत असे. INP एखादी व्यक्ती तुमचा पेज वापरत असताना होणाऱ्या प्रत्येक इंटरॅक्शनचे (interaction) मोजमाप करते. ते सर्वात संथ (slowest) इंटरॅक्शनची नोंद करते.

INP हा लोडिंग मेट्रिक (loading metric) नाही. तो रिस्पॉन्सिव्हनेस मेट्रिक (responsiveness metric) आहे. तो एकच प्रश्न विचारतो: जेव्हा तुम्ही क्लिक करता किंवा टाईप करता, तेव्हा स्क्रीन बदलण्यासाठी किती वेळ लागतो?

Google हे नियम वापरते:

एखादी साइट एक सेकंदात लोड होऊ शकते आणि तरीही ती अयशस्वी ठरू शकते. वेगाने लोड होणे आणि वेगाने प्रतिसाद देणे (responding fast) या दोन वेगवेगळ्या गोष्टी आहेत.

Lighthouse तुमच्या बटणांवर क्लिक करून पाहत नाही. ते तुम्हाला फक्त एक अंदाज देते. तुमच्याकडे एकाच वेळी हिरवा 'lab report' आणि लाल 'field score' असू शकतो.

खरा आकडा पाहण्यासाठी, इंटरॅक्शन्स जसे घडतात तसे मोजा. हा कोड वापरा:

import { onINP } from 'web-vitals'; onINP(function (metric) { console.log('INP', metric.value, metric.entries); });

यामुळे संथ इंटरॅक्शन आणि त्यामागील एलिमेंटची (element) नोंद होते. आता तुम्ही अंदाज लावण्याऐवजी प्रत्यक्ष समस्या सुधारू शकता.

जेव्हा 'main thread' व्यस्त असतो, तेव्हा INP च्या समस्या उद्भवतात. जोपर्यंत JavaScript टास्क पूर्ण होत नाही, तोपर्यंत ब्राउझर प्रतिसाद 'paint' करू शकत नाही. एखादा मोठा टास्क (long task) इंटरॅक्शनला अडवतो (blocks).

सामान्य कारणे:

तुम्ही लांब टास्कचे तुकडे करून हे सुधारू शकता. ब्राउझरला मोकळीक द्या.

async function onClick() { doUrgentPart(); await yieldToMain(); doExpensivePart(); }

ध्येय हे आहे की संथ काम सुरू होण्यापूर्वी प्रतिसाद 'paint' करणे.

इतर घ्यावयाचे उपाय:

जर तुमचा 'lab report' हिरवा असेल पण तुमचे रिअल स्कोअर लाल असतील, तर LCP कडे बघणे थांबवा. जाऊन तुमचे इंटरॅक्शन्स मोजा.

स्रोत: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn