नेटवर्क में बाइट को कम से कम खर्च करने के लिए, टेक्स्ट आधारित संसाधन, कंप्रेस करने के साथ दिखाए जाने चाहिए. आपकी लाइटहाउस रिपोर्ट के ऑपर्च्यूनिटी सेक्शन में, टेक्स्ट पर आधारित ऐसे सभी संसाधनों की सूची होती है जिन्हें कंप्रेस नहीं किया गया होता:
लाइटहाउस, टेक्स्ट कंप्रेस करने की सुविधा को कैसे मैनेज करता है
लाइटहाउस सभी जवाबों को इकट्ठा करता है:
- आपके पास टेक्स्ट पर आधारित रिसॉर्स टाइप हों.
- ऐसा
content-encodingहेडर शामिल न करें जोbr,gzipयाdeflateपर सेट हो.
इसके बाद, लाइटहाउस संभावित बचत का पता लगाने के लिए, GZIP टूल की मदद से इनमें से हर एक को कंप्रेस करता है.
अगर किसी रिस्पॉन्स का मूल साइज़ 1.4KiB से कम है या कंप्रेस करने की संभावित बचत, ओरिजनल साइज़ के 10% से कम है, तो Lighthouse उस रिस्पॉन्स को नतीजों में फ़्लैग नहीं करेगा.
अपने सर्वर पर टेक्स्ट कंप्रेस करने की सुविधा चालू करने का तरीका
इस ऑडिट को पास करने के लिए, ये रिस्पॉन्स दिखाने वाले सर्वर पर टेक्स्ट कंप्रेस करने की सुविधा चालू करें.
जब कोई ब्राउज़र किसी रिसॉर्स के लिए अनुरोध करता है, तो वह
Accept-Encoding
एचटीटीपी अनुरोध के हेडर का इस्तेमाल करके, यह बताता है कि उसके साथ कौनसे कंप्रेशन एल्गोरिदम काम करते हैं.
Accept-Encoding: gzip, compress, br
अगर ब्राउज़र पर Brotli
(br) काम करते हैं, तो आपको Brotli का इस्तेमाल करना चाहिए. ऐसा करने से, रिसॉर्स का साइज़ दूसरे कंप्रेस करने वाले एल्गोरिदम की तुलना में कम हो सकता है. how to enable Brotli compression in <X> खोजें. यहां
<X> आपके सर्वर का नाम है. दिसंबर 2022 से, Brotli, iOS पर Safari को छोड़कर सभी मुख्य ब्राउज़र पर काम करता है. अपडेट के लिए
ब्राउज़र के साथ काम करने की सुविधा
देखें.
Brotli में फ़ॉलबैक के तौर पर GZIP का इस्तेमाल करें. GZIP सभी मुख्य ब्राउज़र में काम करता है, लेकिन यह Brotli से कम असरदार है. उदाहरणों के लिए सर्वर कॉन्फ़िगरेशन देखें.
आपके सर्वर को
Content-Encoding
एचटीटीपी रिस्पॉन्स हेडर दिखाना चाहिए. इससे यह पता चलेगा कि उसने किस कंप्रेशन एल्गोरिदम का इस्तेमाल किया है.
Content-Encoding: br
यह देखना कि Chrome DevTools में किसी जवाब को कंप्रेस किया गया है या नहीं
यह देखने के लिए कि सर्वर ने किसी रिस्पॉन्स को कंप्रेस किया है या नहीं:
DevTools खोलने के लिए Control+Shift+J (या Mac पर Command+Option+J) दबाएं.
नेटवर्क टैब पर क्लिक करें.
[comment]: <> (नीचे दी गई सूची web.dev का एक शॉर्टकोड है, लेकिन इसका अंग्रेज़ी से किसी भी भाषा के लिए अनुवाद नहीं किया गया है.)
1. DevTools खोलने के लिए Control+Shift+J (या Mac पर Command+Option+J) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.
3. उस अनुरोध पर क्लिक करें जिसकी वजह से आपकी पसंद का जवाब मिला है.
4. हेडर टैब पर क्लिक करें.
5. रिस्पॉन्स हेडर सेक्शन में content-encoding हेडर देखें.
content-encoding रिस्पॉन्स हेडर.
किसी रिस्पॉन्स के कंप्रेस किए गए और डी-कंप्रेस किए गए साइज़ की तुलना करने के लिए:
[comment]: <> (नीचे दी गई सूची web.dev का एक शॉर्टकोड है, लेकिन इसका अंग्रेज़ी से किसी भी भाषा के लिए अनुवाद नहीं किया गया है.)
1. DevTools खोलने के लिए Control+Shift+J (या Mac पर Command+Option+J) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.
3. अनुरोध की गई बड़ी लाइनों को चालू करें.
अनुरोध की बड़ी लाइनों का इस्तेमाल करना लेख पढ़ें.
4. आपको जिस जवाब के बारे में जानकारी चाहिए उसके लिए साइज़ कॉलम देखें. सबसे बड़ी वैल्यू, कंप्रेस किया गया साइज़ होती है. सबसे नीचे की वैल्यू, डी-कंप्रेस्ड
साइज़ होती है.
नेटवर्क पेलोड को छोटा और कंप्रेस करें भी देखें.
स्टैक के हिसाब से सलाह
जूमला
Gzip पेज कंप्रेस करने की सेटिंग चालू करें (सिस्टम > ग्लोबल कॉन्फ़िगरेशन > सर्वर).
WordPress
अपने वेब सर्वर कॉन्फ़िगरेशन में टेक्स्ट कंप्रेस करने की सुविधा चालू करें.