इस पेज का अनुवाद Cloud Translation API से किया गया है.

First Contentful Paint (FCP)

Philip Walton

ब्राउज़र सहायता

ध्यान दें: फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी), उपयोगकर्ता को ध्यान में रखकर बनाया गया एक अहम मेट्रिक है. इससे अनुमानित लोड स्पीड का पता लगाया जाता है. यह पेज लोड होने की टाइमलाइन का सबसे पहला पॉइंट होता है, जहां उपयोगकर्ता स्क्रीन पर कुछ भी देख सकता है—तेज़ एफ़सीपी उपयोगकर्ता को यह पक्का करने में मदद करता है कि कुछ हो रहा है.

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

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

अहम जानकारी: यह ध्यान रखना ज़रूरी है कि एफ़सीपी में पिछले पेज के अनलोड होने में लगने वाला समय, कनेक्शन सेट अप होने में लगने वाला समय, रीडायरेक्ट होने में लगने वाला समय, और पहले बाइट में लगने वाला समय (टीटीएफ़बी) शामिल होता है. फ़ील्ड में मेज़र करने पर, यह अहम हो सकता है और फ़ील्ड और लैब के मेज़रमेंट में अंतर हो सकता है.

google.com से मिली एफ़सीपी टाइमलाइन — इस लोड टाइमलाइन में, एफ़सीपी दूसरे फ़्रेम में होती है, क्योंकि इसके बाद ही स्क्रीन पर पहला टेक्स्ट और इमेज एलिमेंट रेंडर होते हैं.

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

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

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

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

अच्छी एफ़सीपी वैल्यू 1.8 सेकंड या इससे कम हैं, खराब वैल्यू 3.0 सेकंड से ज़्यादा हैं, और कुछ भी सुधार की ज़रूरत है — अच्छी एफ़सीपी वैल्यू 1.8 सेकंड या उससे कम होती हैं. खराब वैल्यू, 3.0 सेकंड से ज़्यादा की हैं

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

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

फ़ील्ड टूल

लैब टूल

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 एंट्री को कंसोल में कैसे लॉग किया जाता है. हालांकि, JavaScript में एफ़सीपी को मेज़र करना ज़्यादा मुश्किल है. इस बारे में ज़्यादा जानने के लिए, यह लेख पढ़ना जारी रखें.

पिछले कोड स्निपेट में, लॉग की गई first-contentful-paint एंट्री से आपको पता चलेगा कि पहले कॉन्टेंटफ़ुल एलिमेंट को कब पेंट किया गया था. हालांकि, कुछ मामलों में यह एंट्री एफ़सीपी को मापने के लिए मान्य नहीं है.

नीचे दिए गए सेक्शन में, एपीआई रिपोर्ट और मेट्रिक की गिनती के तरीके के बीच अंतर बताया गया है.

मेट्रिक और एपीआई के बीच अंतर

एपीआई, बैकग्राउंड टैब में लोड किए गए पेजों के लिए, first-contentful-paint एंट्री भेजेगा. हालांकि, एफ़सीपी का हिसाब लगाते समय उन पेजों को अनदेखा करना चाहिए (फ़र्स्ट पेंट टाइमिंग को सिर्फ़ तब ध्यान में रखना चाहिए, जब पेज पूरे समय फ़ोरग्राउंड में था).
जब पेज को बैक/फ़ॉरवर्ड कैश मेमोरी से वापस लाया जाता है, तो एपीआई first-contentful-paint एंट्री की रिपोर्ट नहीं करता. हालांकि, इन मामलों में एफ़सीपी को मेज़र किया जाना चाहिए, क्योंकि उपयोगकर्ताओं को यह अलग-अलग पेज विज़िट के तौर पर दिखता है.
हो सकता है कि एपीआई क्रॉस-ऑरिजिन iframes से पेंटिंग टाइमिंग की रिपोर्ट न कर पाए. हालांकि, एफ़सीपी को सही तरीके से मेज़र करने के लिए, आपको सभी फ़्रेम को ध्यान में रखना चाहिए. सब-फ़्रेम, एपीआई का इस्तेमाल करके एग्रीगेशन के लिए पैरंट फ़्रेम पर अपने पेंट के समय की जानकारी दे सकते हैं.
एपीआई, नेविगेशन शुरू होने से एफ़सीपी को मेज़र करता है. हालांकि, पहले से रेंडर किए गए पेजों के लिए, एफ़सीपी को 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 में एफ़सीपी को मेज़र नहीं किया जा सकता. जैसे, क्रॉस-ऑरिजिन iframes. ज़्यादा जानकारी के लिए, web-vitals लाइब्रेरी का सीमाएं सेक्शन देखें.

एफ़सीपी को कैसे बेहतर बनाएं

किसी साइट के लिए एफ़सीपी को बेहतर बनाने का तरीका जानने के लिए, लाइटहाउस परफ़ॉर्मेंस का ऑडिट किया जा सकता है. साथ ही, ऑडिट के सुझाए गए किसी भी ऑपर्च्यूनिटी या गड़बड़ी की जानकारी पर ध्यान दिया जा सकता है.

किसी भी साइट के लिए, एफ़सीपी को बेहतर बनाने का तरीका जानने के लिए, नीचे दी गई परफ़ॉर्मेंस गाइड देखें:

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

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

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

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