बहुत से विज़िटर आपकी साइट मोबाइल डेटा पर खोलते हैं, जहाँ डेटा पैक सीमित होता है या मेट्रो, मॉल और सफ़र में सिग्नल कमज़ोर होता है। कई बड़ी फ़ोटो वाला पेज उनके लिए अटका हुआ लगता है और वे पूरा लोड होने से पहले ही चले जाते हैं।
अच्छी बात यह है कि तस्वीरों की गति की समस्या सबसे आसान होती है, और आप उसे चैट से ही ठीक कर सकते हैं।
पेज में सबसे भारी हिस्सा अक्सर तस्वीरें होती हैं। उन्हें उसी साइज़ में बदलें जिसमें वे दिखती हैं, WebP जैसा आधुनिक फ़ॉर्मेट इस्तेमाल करें और पहली स्क्रीन के नीचे की तस्वीरें लेज़ी लोड करवाएं।
अपलोड से पहले साइज़ छोटा करें
फ़ोन कैमरे की सीधी फ़ोटो कई एमबी की और हज़ारों पिक्सल चौड़ी हो सकती है, जबकि वह पेज पर कुछ सौ पिक्सल के डिब्बे में दिखती है। अच्छा नियम है कि फ़ाइल को शार्प स्क्रीन के लिए दिखने की चौड़ाई से करीब दोगुना रखें, उससे ज़्यादा नहीं।
- पूरी चौड़ाई की हीरो इमेज: करीब 1600 से 2000 पिक्सल चौड़ी काफ़ी है।
- कार्ड और प्रोडक्ट थंबनेल: 600 से 800 पिक्सल चौड़े।
- लोगो और आइकन: SVG इस्तेमाल करें, जो साफ़ और बहुत हल्का रहता है।
सही फ़ॉर्मेट चुनें
WebP (और जहाँ सपोर्ट हो वहाँ AVIF) आम तौर पर समान क्वालिटी पर JPEG या PNG से बहुत छोटी फ़ाइल देता है। फ़ोटो के लिए JPEG को बैकअप के रूप में रखें, और फ़ोटो के लिए PNG से बचें क्योंकि वह भारी होता है। 75 से 80 प्रतिशत क्वालिटी आम तौर पर आँख को पता नहीं चलती।
समझदारी से लोड करें
पहली स्क्रीन के नीचे की तस्वीरें तभी लोड हों जब विज़िटर स्क्रॉल करके उनके पास पहुँचे (लेज़ी लोडिंग)। ऊपर की मुख्य इमेज तुरंत लोड हो, लेज़ी नहीं, क्योंकि लोग सबसे पहले वही देखते हैं।
हर तस्वीर पर चौड़ाई और ऊँचाई, या तय अनुपात भी रखें, ताकि तस्वीरें आने के दौरान पेज उछले नहीं।
एक प्रॉम्प्ट जो आप कॉपी कर सकते हैं
"इस साइट की सारी तस्वीरें मोबाइल डेटा के लिए ऑप्टिमाइज़ करो। फ़ोटो को WebP में बदलो, हर एक को उसके दिखने के साइज़ के दोगुने से बड़ा मत रखो, पहली स्क्रीन के नीचे सब कुछ लेज़ी लोड करो पर हीरो इमेज को नहीं, ताकि कुछ उछले नहीं इसके लिए तय अनुपात रखो और छोटा वर्णनात्मक ऑल्ट टेक्स्ट जोड़ो।"
बदलाव के बाद फ़ोन पर वाई-फ़ाई बंद करके साइट खोलें और देखें कि पहली स्क्रीन कितनी जल्दी आती है।