अनुमानित लोड स्पीड को मापने के लिए, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी), उपयोगकर्ताओं को ध्यान में रखकर बनाया गया एक अहम मेट्रिक है. यह पेज लोड होने की टाइमलाइन का पहला पॉइंट होता है, जहां लोग स्क्रीन पर कुछ भी देख सकते हैं. तेज़ एफ़सीपी, उपयोगकर्ता को यह भरोसा दिलाने में मदद करता है कि कुछ हो रहा है.
एफ़सीपी, उपयोगकर्ता के पहली बार पेज पर जाने से लेकर पेज के कॉन्टेंट के किसी हिस्से को स्क्रीन पर रेंडर करने में लगने वाले समय को मापता है. इस मेट्रिक के लिए, "कॉन्टेंट" का मतलब टेक्स्ट, इमेज (बैकग्राउंड इमेज के साथ), <svg>
एलिमेंट या
नॉन-व्हाइट <canvas>
एलिमेंट से है.
पहला कॉन्टेंट एलिमेंट रेंडर होने पर, हर कॉन्टेंट रेंडर नहीं होता है. एफ़सीपी और सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के बीच के फ़र्क़ के बारे में यह एक अहम फ़र्क़ है. इससे पता चलता है कि पेज का मुख्य कॉन्टेंट कब लोड हो रहा है.
अच्छा एफ़सीपी स्कोर क्या होता है?
अच्छा उपयोगकर्ता अनुभव देने के लिए, साइटों का 1.8 सेकंड या इससे कम का एफ़सीपी होना ज़रूरी है. यह पक्का करने के लिए कि आपने ज़्यादातर उपयोगकर्ताओं के लिए यह टारगेट पूरा किया है, पेज लोड का 75वां पर्सेंटाइल है, जिसे मोबाइल और डेस्कटॉप डिवाइसों के हिसाब से बांटा जाता है.
एफ़सीपी को मापने का तरीका
एफ़सीपी को लैब में या फ़ील्ड में मापा जा सकता है. यह इन टूल में उपलब्ध है:
फ़ील्ड टूल
- PageSpeed Insights
- Chrome पर उपयोगकर्ता अनुभव रिपोर्ट
- Search Console (स्पीड रिपोर्ट)
web-vitals
JavaScript लाइब्रेरी
लैब टूल
JavaScript में एफ़सीपी को मेज़र करना
JavaScript में एफ़सीपी को मापने के लिए, Paint Timing API का इस्तेमाल करें.
इस उदाहरण में PerformanceObserver
बनाने का तरीका बताया गया है, जो first-contentful-paint
नाम वाली paint
एंट्री को सुनता है और उसे कंसोल में लॉग करता है.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});
इस उदाहरण में, लॉग की गई first-contentful-paint
एंट्री से आपको पता चलता है कि पहले कॉन्टेंटफ़ुल एलिमेंट को कब पेंट किया गया था. हालांकि, कुछ मामलों में यह एंट्री, एफ़सीपी को मापने के लिए मान्य नहीं होती.
नीचे दिए गए सेक्शन में, एपीआई की रिपोर्ट और मेट्रिक की गिनती के तरीके के बीच के अंतर को बताया गया है.
मेट्रिक और एपीआई के बीच अंतर
- एपीआई, बैकग्राउंड टैब में लोड किए गए पेजों के लिए,
first-contentful-paint
एंट्री भेजता है. हालांकि, एफ़सीपी में लोड होने वाले पेजों को अनदेखा किया जाना चाहिए. पहली बार पेंट करने के समय को सिर्फ़ तब माना जाता है, जब पेज पूरी तरह फ़ोरग्राउंड में हो. - पेज को बैक/फ़ॉरवर्ड कैश मेमोरी से वापस लाए जाने पर, एपीआई
first-contentful-paint
एंट्री रिपोर्ट नहीं करता. हालांकि, इन मामलों में एफ़सीपी को मेज़र किया जाना चाहिए, क्योंकि उपयोगकर्ता उन्हें एक पेज पर अलग-अलग विज़िट के तौर पर देखते हैं. - ऐसा हो सकता है कि एपीआई क्रॉस-ऑरिजिन iframe से पेंट करने की समयावधि को रिपोर्ट न करे, लेकिन एफ़सीपी को सही तरीके से मेज़र करने के लिए, आपको सभी फ़्रेम इस्तेमाल करने होंगे. सब-फ़्रेम, एग्रीगेशन के लिए पैरंट फ़्रेम को अपने पेंट टाइम की रिपोर्ट करने के लिए, एपीआई का इस्तेमाल कर सकते हैं.
- एपीआई, नेविगेशन शुरू होने के समय से एफ़सीपी को मापता है. हालांकि,
पहले से रेंडर किए गए पेजों के लिए,
एफ़सीपी को
activationStart
से मापा जाना चाहिए. ऐसा इसलिए, क्योंकि यह उपयोगकर्ता के अनुभव के हिसाब से एफ़सीपी में लगने वाले समय से मेल खाता है.
इन सभी छोटे-मोटे अंतर को याद रखने के बजाय, डेवलपर एफ़सीपी को मेज़र करने के लिए web-vitals
JavaScript लाइब्रेरी का इस्तेमाल कर सकते हैं. इससे जहां भी मुमकिन हो, वहां इन अंतरों को आपके लिए मैनेज किया जा सकता है (iframe को छोड़कर):
import {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);
JavaScript में एफ़सीपी को मापने के तरीके के बारे में जानने के लिए, onFCP()
का सोर्स कोड देखें.
एफ़सीपी को बेहतर बनाने का तरीका
किसी साइट के एफ़सीपी को बेहतर बनाने का तरीका जानने के लिए, लाइटहाउस परफ़ॉर्मेंस ऑडिट चलाया जा सकता है. साथ ही, ऑडिट के सुझाए गए किसी भी ऑपर्च्यूनिटी या गड़बड़ी की जानकारी पर ध्यान दें.
किसी भी साइट के लिए, एफ़सीपी को बेहतर बनाने का तरीका जानने के लिए, यहां दी गई परफ़ॉर्मेंस गाइड देखें:
- रेंडर ब्लॉक करने वाले संसाधनों को हटाना
- सीएसएस को छोटा करें
- इस्तेमाल नहीं किए गए सीएसएस को हटाना
- इस्तेमाल नहीं किया गया JavaScript हटाना
- ज़रूरी ऑरिजिन से पहले से कनेक्ट करना
- सर्वर के रिस्पॉन्स में लगने वाले समय को कम करना (TTFB)
- एक से ज़्यादा पेज रीडायरेक्ट से बचना
- मुख्य अनुरोधों को पहले से लोड करना
- बहुत ज़्यादा नेटवर्क पेलोड से बचना
- कैश मेमोरी से जुड़ी बेहतर नीति की मदद से, स्टैटिक एसेट दिखाना
- डीओएम के बहुत ज़्यादा साइज़ से बचना
- गहराई से किए जाने वाले अनुरोधों की गहराई को कम करें
- पक्का करना कि वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे
- अनुरोधों की संख्या कम और ट्रांसफ़र का साइज़ छोटा रखना
बदलावों का लॉग
कभी-कभी, मेट्रिक को मापने के लिए इस्तेमाल किए जाने वाले एपीआई में गड़बड़ियां मिलती हैं. कभी-कभी, मेट्रिक की परिभाषा में भी गड़बड़ियां मिलती हैं. इसलिए, कभी-कभी बदलाव करने पड़ते हैं. ये बदलाव, आपकी इंटरनल रिपोर्ट और डैशबोर्ड में सुधार या रिग्रेशन के तौर पर दिख सकते हैं.
इन्हें मैनेज करने में आपकी मदद के लिए, इन मेट्रिक को लागू करने या इनकी परिभाषा में किए गए सभी बदलाव इस बदलाव लॉग में दिखाए गए हैं.
अगर आपके पास इन मेट्रिक के बारे में कोई सुझाव है, तो उन्हें वेब-वाइटल-सुझाव/शिकायत/राय वाले Google ग्रुप में दें.