वेब परफॉर्मन्सचा ३-सेकंद नियम
तुमच्याकडे फक्त तीन सेकंद आहेत.
त्यानंतर, तुमचे युजर्स निघून जातात.
गुगलच्या संशोधनानुसार, जर एखादी साइट लोड होण्यासाठी ३ सेकंदांपेक्षा जास्त वेळ घेत असेल, तर ५३% मोबाईल युजर्स ती साइट सोडून जातात.
संथ (Slow) साइट्समुळे तुमचे आर्थिक नुकसान होते. मोबाईल लोड टाइममध्ये ०.१ सेकंदांची सुधारणा केल्यास रिटेल कन्व्हर्जनमध्ये ८.४% वाढ होते.
परफॉर्मन्स हा केवळ तांत्रिक निकष (metric) नाही. तो एक बिझनेस निकष आहे.
यशस्वी होण्यासाठी, तुम्हाला Core Web Vitals समजून घेणे आवश्यक आहे:
• LCP (Largest Contentful Paint): युजर्सना मुख्य कंटेंट किती वेगाने दिसतो. २.५ सेकंदांपेक्षा कमी वेळेचे लक्ष्य ठेवा. • INP (Interaction to Next Paint): क्लिक्सना पेज किती वेगाने प्रतिसाद देते. २०० मिलीसेकंद (ms) पेक्षा कमी वेळेचे लक्ष्य ठेवा. • CLS (Cumulative Layout Shift): पेज किती स्थिर आहे. ०.१ पेक्षा कमी वेळेचे लक्ष्य ठेवा.
अंदाज लावणे थांबवा आणि ऑप्टिमाइझ करायला सुरुवात करा. वेळेवर मात करण्यासाठी खालील गोष्टी करा:
JavaScript ऑप्टिमायझेशन • कमी कोड पाठवा. गरज असेल तेव्हाच कोड लोड करण्यासाठी dynamic imports वापरा. • tree-shaking वापरा. अनावश्यक कोड काढून टाकण्यासाठी CommonJS कडून ES modules कडे वळा. • जड कामे Web Workers कडे सोपवा. युजर इनपुटसाठी main thread मोकळा ठेवा. • defer किंवा async वापरा. स्क्रिप्ट्सना तुमचे HTML पार्सिंग रोखू देऊ नका.
CSS आणि रेंडरिंग • critical CSS इनलाइन करा. सुरुवातीला फक्त 'above the fold' (स्क्रीनवर दिसणारा भाग) दिसणारा कंटेंट लोड करा. • layout thrashing टाळा. सततच्या पुनर्गणना (recalculations) टाळण्यासाठी तुमचे reads आणि writes बॅचमध्ये करा. • transform आणि opacity वापरून ॲनिमेशन करा. हे GPU चा वापर करतात आणि layout shifts टाळतात. • content-visibility: auto वापरा. स्क्रीनच्या बाहेर असलेल्या कंटेंटसाठी रेंडरिंग वगळा.
इमेज स्ट्रॅटेजी • आधुनिक फॉरमॅट्स वापरा. WebP आणि AVIF हे JPEG पेक्षा खूप लहान असतात. • width आणि height ॲट्रिब्युट्स सेट करा. यामुळे layout shifts (CLS) टाळता येतात. • 'below the fold' असलेल्या इमेजेससाठी lazy-load वापरा. तुमच्या LCP hero इमेजसाठी lazy-load वापरू नका. • srcset वापरा. मोबाईल युजर्सना लहान इमेजेस सर्व्ह करा.
नेटवर्क आणि कॅशिंग • CDN वापरा. लेटन्सी (latency) कमी करण्यासाठी तुमचा कंटेंट युजर्सच्या जवळ नेऊन ठेवा. • कॉम्प्रेशन (compression) सक्षम करा. फाईल साइज कमी करण्यासाठी Brotli किंवा Zstandard वापरा. • आक्रमकपणे कॅशिंग करा. hashed assets साठी immutable cache headers वापरा. • bfcache कार्यरत ठेवा. त्वरित back/forward नेव्हिगेशन सुनिश्चित करण्यासाठी unload इव्हेंट वापरणे टाळा.
ध्येय साधे आहे: काम टाळा.
सर्वात वेगवान कोड तो असतो जो तुमचे युजर्स कधीच डाउनलोड करत नाहीत. सर्वात वेगवान रिक्वेस्ट ती असते जी ब्राउझरला कधीच करावी लागत नाही.
स्रोत: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1