𝗜𝗺𝗮𝗴𝗲 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗳𝗼𝗿 𝗔𝗜-𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗲𝗱 𝗖𝗼𝗻𝘁𝗲𝗻𝘁
AI इमेजेसमुळे परफॉर्मन्सची एक वेगळी समस्या निर्माण होते. इमेज तयार होईपर्यंत तुम्हाला तिचा आकार (size), फॉरमॅट किंवा कंटेंट माहित नसतो. तरीही, स्लो लोडिंग आणि लेआउट शिफ्ट्स (layout shifts) रोखणे आवश्यक असते.
एक फ्री AI इमेज जनरेटर तयार करताना मी या स्टेप्स वापरल्या.
स्टँडर्ड ऑप्टिमायझेशनमध्ये असे मानले जाते की तुम्हाला इमेज आधीच माहित आहे. तुम्ही तिचे डायमेन्शन्स (dimensions) मोजू शकता आणि बिल्ड टाइमला ऑप्टिमाइझ करू शकता. पण जनरेट केलेल्या इमेजेस या नियमाचे उल्लंघन करतात. जोपर्यंत युजर रिक्वेस्ट करत नाही, तोपर्यंत इमेज अस्तित्वात नसते.
डिलिव्हरी कशी हाताळायची:
- रॉ (Raw) AI आउटपुट सहसा PNG असते. PNG फाइल्स खूप मोठ्या असतात, सहसा 800KB ते 1.2MB दरम्यान.
- इमेजेस WebP मध्ये कन्व्हर्ट करा. समान क्वालिटीमध्ये WebP फाइल्स PNG पेक्षा 25% ते 35% लहान असतात.
- WebP साठी 85 क्वालिटी वापरा. AI इमेजेसमध्ये नैसर्गिक टेक्सचर नॉईज (texture noise) असतो. जास्त सेटिंग्जमुळे व्हिज्युअल क्वालिटी सुधारत नाही, पण फाईलचा आकार वाढतो.
लेआउट शिफ्ट्स कसे रोखायचे:
युजर्स 'जनरेट' क्लिक करण्यापूर्वी ॲस्पेक्ट रेशो (aspect ratio) निवडतात. याचा फायदा घ्या.
- निवडलेल्या रेशोवर आधारित (1:1, 16:9, इ.) कंटेनरचा आकार आधीच ठरवून ठेवा (Pre-size).
- यामुळे इमेज येण्यापूर्वी कंटेनर योग्य आकारात राहतो.
- यामुळे क्युम्युलेटिव्ह लेआउट शिफ्ट (CLS) टाळता येते.
लोडिंग स्पीड कसा सुधारावा:
जनरेट झालेली इमेज सहसा Largest Contentful Paint (LCP) एलिमेंट असते.
- तुमच्या कोडमध्ये इमेजला 'प्रायोरिटी' (priority) म्हणून मार्क करा.
- तुमच्या CDN साठी preconnect लिंक वापरा. यामुळे DNS आणि TLS हँडशेक्स (handshakes) लवकर पूर्ण होतात.
- असा स्केलेटन लोडर (skeleton loader) वापरा जो अंतिम इमेजने व्यापलेल्या जागेतच असेल.
कॅशिंग स्ट्रॅटेजी (Caching strategy):
- इन्फरन्स लेयरवर (inference layer) कॅश करू नका. प्रत्येक रिक्वेस्ट ताजी (fresh) वाटली पाहिजे.
- डिलिव्हरी स्पीडसाठी CDN लेयरवर कॅश करा.
- प्रत्येक इमेजचा URL युनिक असतो, त्यामुळे ॲग्र्रेसिव्ह कॅशिंग (aggressive caching) सुरक्षित आहे.
या बदलांचे परिणाम:
- सरासरी आकार: 900KB ते 200KB.
- LCP: 4.1s ते 1.9s.
- CLS: पूर्णपणे काढून टाकले.
कृतींचा सारांश:
- 85 क्वालिटीसह WebP मध्ये कन्व्हर्ट करा.
- निवडलेल्या ॲस्पेक्ट रेशोचा वापर करून कंटेनर्सचा आकार आधीच ठरवा.
- मुख्य इमेजला प्रायोरिटी लोडिंगसाठी सेट करा.
- CDN लेव्हलवर मोठ्या प्रमाणात कॅश करा.
- 'below the fold' असलेल्या दुय्यम कंटेंटसाठीच लेझी लोडिंग (lazy loading) वापरा.
पर्यायी लर्निंग कम्युनिटी: https://t.me/GyaanSetuAi