First Contentful Paint (FCP)

Philip Walton

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

  • 60
  • 79
  • 84
  • 78 जीबी में से

सोर्स

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

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

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

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

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

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

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

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

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