लाइटहाउस की शुरुआत के बाद से, पेज स्पीड से जुड़े नए पैरामीटर सामने आए हैं। इनमें से सबसे महत्वपूर्ण पैरामीटर फर्स्ट कंटेंटफुल पेंट (FCP) है। लाइटहाउस संस्करण 10 में, जो जून 2024 से प्रभावी है, समग्र स्कोर पर FCP का प्रभाव 10% है.

एफसीपी को एक मीट्रिक के रूप में अपनाने और समझने के लिए, सबसे पहले इसके पीछे के मनोविज्ञान की जांच करना आवश्यक है। यह अवधारणा इसी तरह की है लिफ्टों में दर्पण लगाए गए:

संक्षेप में कहें तो: 1900 के दशक के पहले भाग में ऊंची इमारतों में लिफ्ट का उपयोग काफी बढ़ गया था, लेकिन आज की तुलना में लिफ्ट सिस्टम आदिम थे। इसलिए, लिफ्ट में बिताए गए समय को कम करने के लिए लिफ्ट में दर्पण लगाने का विचार उभरा।

 

छवि 11.png
स्रोत: https://web.dev/fcp/

 

अपने विषय पर लौटते हुए: वह बिंदु जो पृष्ठ तक पहुंचने का प्रयास करते समय लोडिंग समय के दौरान आपको प्रतीक्षा कराता है, वह FCP है। फर्स्ट कंटेंटफुल पेंट की परिभाषा वह समय है जो उपयोगकर्ता के लिए पहला टेक्स्ट, छवि, गैर-सफेद कैनवास आदि प्रदर्शित होने में लगता हैएफ.सी.पी. की इकाई सेकंड है।

लाइटहाउस में, FCP के लिए रंग पैमाना निम्नानुसार निर्धारित किया जाता है:

  • 0-2 सेकंड: हरा => तेज़
  • 2-4 सेकंड: नारंगी => सुधार की आवश्यकता है
  • 4+ सेकंड: लाल => धीमा

HTTP आर्काइव डेटा के अनुसार, उन साइटों की संख्या जिन्हें माना जा सकता है तेजी 25% है, और मौजूदा साइटों में से 50% को धीमी श्रेणी में वर्गीकृत किया गया है।

 

छवि 10.png
स्रोत: https://web.dev/first-contentful-paint/

 

एफसीपी में सुधार के लिए क्या किया जा सकता है?

सर्वर रिस्पांस टाइम कम करें

आम तौर पर, इसे सर्वर और सॉफ़्टवेयर के सर्वर साइड पर आवश्यक सुधारों के रूप में समझा जा सकता है। सर्वर प्रतिक्रिया समय पर नकारात्मक प्रभाव डालने वाली समस्याओं की सूची बनाने के लिए:

  • सर्वर की साझाकरण, कॉन्फ़िगरेशन (अर्थात, सर्वर सेटिंग्स) और सर्वर संसाधन समस्या हो सकते हैंआपके सर्वर की क्षमता आपके ट्रैफ़िक के अनुसार बढ़ाई जानी चाहिए। कुछ मामलों में, खराब तरीके से लिखे गए डेटाबेस क्वेरीज़ और अत्यधिक जटिल सॉफ़्टवेयर घटक सर्वर प्रतिक्रिया समय को गंभीर रूप से प्रभावित कर सकते हैं।
  • CDN (कंटेंट डिलीवरी नेटवर्क) का उपयोग न करने से कंटेंट तक पहुंचने में देरी हो सकती है, जिससे FCP प्रभावित हो सकता हैजैसे-जैसे सामग्री का आकार बढ़ता है, उदाहरण के लिए, यदि किसी बड़े एनिमेटेड GIF या वीडियो को CDN के बिना कॉल करने का प्रयास किया जाता है और मुख्य सर्वर किसी भिन्न महाद्वीप पर है, तो आपको FCP को हल करने के लिए CDN समाधान पर विचार करने की आवश्यकता हो सकती है।

 

छवि 12.png
स्रोत: https://gtmetrix.com/blog/first-contentful-paint-explained/

 

  • उचित और सुसंगत कैश नीति के साथ स्थैतिक सामग्री की सेवा न करने से ओवरलोड हो सकता है आगंतुकों की संख्या बढ़ने पर आपका सर्वर अनावश्यक रूप सेउदाहरण के लिए, यदि आप अपने लोगो को हर पृष्ठ पर लोड करते समय उसे दीर्घकालिक कैश में नहीं रखते हैं, तो आप अनावश्यक रूप से अपने सर्वर के प्रतिक्रिया समय को नुकसान पहुंचाते हैं।
  • अनावश्यक पृष्ठ पुनर्निर्देशन पृष्ठ तक पहुँचने के दौरान अनावश्यक रूप से आपके FCP पर प्रभाव पड़ सकता है। 

उदाहरण के लिए, पहले इस तरह के सेटअप हुआ करते थे: जब कोई उपयोगकर्ता किसी साइट में प्रवेश करना चाहता था, तो HTTP से HTTPS रीडायरेक्ट होता था, फिर अगर वह मोबाइल था, तो HTTPS से मोबाइल रीडायरेक्ट होता था (जैसे, https://www से https://m), और अगर पेज को हटा दिया जाता था और 301 के साथ कहीं और रीडायरेक्ट किया जाता था, तो ऐसा लगता था कि उपयोगकर्ता को टैक्स ऑफिस में डेस्क से डेस्क पर भेजा जा रहा है। बेहतर समझ के लिए यह एक चरम उदाहरण है, लेकिन अगर आप 301 रीडायरेक्ट के साथ किसी पेज को दूसरे URL पर रीडायरेक्ट करते हैं और फिर उस पेज को 301 के साथ दूसरे पर रीडायरेक्ट करते हैं, तो आप वही अतार्किक सेटअप बना रहे होंगे।

  • अगर तुम प्रीकनेक्ट या DNS-प्रीफ़ेच का उपयोग न करें यदि आप अपनी तृतीय-पक्ष सेवाओं से कनेक्ट करते समय उपसर्गों का उपयोग करते हैं और कई तृतीय-पक्ष सेवाओं से कनेक्ट करते हैं, तो आप FCP के लिए कुछ भी लाभदायक नहीं कर रहे हैं।

रेंडर-ब्लॉकिंग संसाधनों को कम करें

मुझे यह स्वीकार करना होगा कि लाइन आइटम के रूप में लिखे गए इस एक बिंदु को संबोधित करने में महीनों लग सकते हैं।

छवि 13.png
स्रोत: https://gtmetrix.com/eliminate-render-blocking-resources.html

इसे प्राप्त करने के लिए, एक समाधान विधि है जहां सभी JS, CSS और इसी तरह के संसाधन जो पेज रेंडरिंग को ब्लॉक करते हैं, उन्हें पेज निर्माण समय के बाद लोड किया जाता है, लेकिन साइट लोड होने के दौरान साइट का शुरू में दिखाई देने वाला हिस्सा पहले लोड होता है. हालाँकि, ऐसा करने के लिए, सभी JS, CSS और इसी तरह के संसाधनों की जाँच करने की आवश्यकता है, और सबसे अधिक समय लेने वाली प्रक्रियाओं को अलग करने की आवश्यकता है। इसके अतिरिक्त, यथासंभव कम तृतीय-पक्ष सेवाओं का उपयोग करने से FCP को अनुकूलित करने में मदद मिलती है।