First Contentful Paint (FCP)

Philip Walton

एफ़सीपी क्या है?

फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) की मदद से, उपयोगकर्ता के पहली बार पेज पर जाने से लेकर, पेज के कॉन्टेंट को रेंडर किए जाने के बीच लगने वाले समय को मापा जाता है. इस मेट्रिक के लिए, "कॉन्टेंट" यह टेक्स्ट, इमेज (बैकग्राउंड की इमेज शामिल है), <svg> एलिमेंट या बिना सफ़ेद रंग वाले <canvas> एलिमेंट का रेफ़रंस देता है.

पिछली इमेज में दिखाई गई लोडिंग टाइमलाइन में, एफ़सीपी दूसरे फ़्रेम में होती है. ऐसा तब होता है, जब स्क्रीन पर पहला टेक्स्ट और इमेज एलिमेंट रेंडर किए जाते हैं.

आपको यह जानकारी मिलेगी कि भले ही पूरा कॉन्टेंट रेंडर हो गया है, लेकिन पूरा कॉन्टेंट रेंडर नहीं हुआ है. यह फ़र्स्ट कॉन्टेंटफ़ुल पेंट और सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के बीच का एक अहम अंतर है. इससे यह पता लगाया जाता है कि पेज का मुख्य कॉन्टेंट कब लोड हुआ.

अच्छा एफ़सीपी स्कोर क्या होता है?

उपयोगकर्ताओं को अच्छा अनुभव देने के लिए, साइटों को 1.8 सेकंड या उससे कम का फ़र्स्ट कॉन्टेंटफ़ुल पेंट इस्तेमाल करना चाहिए. यह पक्का करने के लिए कि आप अपने ज़्यादातर उपयोगकर्ताओं के इस टारगेट को पूरा कर रहे हैं, मोबाइल और डेस्कटॉप डिवाइस के हिसाब से पेज लोड का 75वां पर्सेंटाइल मेज़र करना सबसे सही होता है.

एफ़सीपी को मापने का तरीका

एफ़सीपी को लैब में या फ़ील्ड में मापा जा सकता है. यह इन टूल में उपलब्ध है:

फ़ील्ड टूल

• PageSpeed Insights
• Chrome के लिए उपयोगकर्ता अनुभव शिकायत करें
• Search Console (स्पीड रिपोर्ट)
• web-vitals JavaScript लाइब्रेरी

लैब टूल

• लाइटहाउस
• Chrome DevTools
• PageSpeed Insights

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)
• एक से ज़्यादा पेज पर रीडायरेक्ट करने से बचना
• मुख्य अनुरोधों को पहले से लोड करना
• बहुत ज़्यादा नेटवर्क पेलोड से बचें
• कैश मेमोरी की बेहतर नीति के साथ स्टैटिक ऐसेट उपलब्ध कराना
• बहुत ज़्यादा डीओएम साइज़ से बचना
• ज़्यादा से ज़्यादा ज़रूरी अनुरोधों को कम करें
• पक्का करें कि वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे
• अनुरोधों की संख्या कम और ट्रांसफ़र का साइज़ छोटा रखना

बदलावों का लॉग

कभी-कभी, मेट्रिक को मापने के लिए इस्तेमाल किए जाने वाले एपीआई में गड़बड़ियां मिलती हैं. कभी-कभी खुद मेट्रिक की परिभाषा में गड़बड़ियां मिलती हैं. इस वजह से, कभी-कभी बदलाव करने ज़रूरी होते हैं. ये बदलाव आपकी इंटरनल रिपोर्ट और डैशबोर्ड में सुधार या रिग्रेशन के तौर पर दिख सकते हैं.

इसे मैनेज करने में आपकी मदद करने के लिए, इन मेट्रिक को लागू करने या उनकी परिभाषा करने में किए जाने वाले सभी बदलाव, इस बदलाव लॉग में दिखेंगे.

अगर आपको इन मेट्रिक के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो इसे web-vitals-feedback Google ग्रुप में दिया जा सकता है.