First Contentful Paint (FCP)

Philip Walton

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

  • 60
  • 79
  • 84
  • 14.1

सोर्स

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

फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) की मदद से, उपयोगकर्ता के पहली बार पेज पर जाने से लेकर, पेज के कॉन्टेंट को रेंडर किए जाने के बीच लगने वाले समय को मापा जाता है. इस मेट्रिक के लिए, "कॉन्टेंट" का मतलब टेक्स्ट, इमेज (बैकग्राउंड की इमेज के साथ) <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 एंट्री से आपको पता चलेगा कि पहले कॉन्टेंटफ़ुल एलिमेंट को कब पेंट किया गया था. हालांकि, कुछ मामलों में यह एंट्री एफ़सीपी को मापने के लिए मान्य नहीं है.

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

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

  • एपीआई, बैकग्राउंड टैब में लोड किए गए पेजों के लिए, 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() का सोर्स कोड देखें.

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

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

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

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

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

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

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