बेहतर कैश नीति के साथ स्टैटिक एसेट दिखाएं

एचटीटीपी कैश मेमोरी में डेटा को बार-बार विज़िट करने पर, आपके पेज को लोड होने में ज़्यादा समय लग सकता है.

जब कोई ब्राउज़र किसी संसाधन का अनुरोध करता है, तब संसाधन उपलब्ध कराने वाला सर्वर ब्राउज़र को यह बता सकता है कि उसे संसाधन को कितने समय के लिए अस्थायी तौर पर सेव या कैश करना चाहिए. उस संसाधन के लिए बाद के किसी भी अनुरोध पर, ब्राउज़र उसे नेटवर्क से लेने के बजाय, उसकी लोकल कॉपी का इस्तेमाल करता है.

लाइटहाउस कैश से जुड़ी नीति का ऑडिट कैसे काम नहीं करता है

Lighthouse उन सभी स्टैटिक रिसॉर्स को फ़्लैग करता है जिन्हें कैश मेमोरी में सेव नहीं किया जाता:

कैश मेमोरी की नीति के बेहतर ऑडिट के साथ, Lighthouse की स्टैटिक एसेट का स्क्रीनशॉट

लाइटहाउस, संसाधन को कैश मेमोरी में सेव करने लायक तभी मानता है जब ये सभी शर्तें पूरी होती हैं:

  • संसाधन एक फ़ॉन्ट, इमेज, मीडिया फ़ाइल, स्क्रिप्ट या स्टाइलशीट है.
  • संसाधन में 200, 203 या 206 एचटीटीपी स्टेटस कोड होता है.
  • संसाधन में, कैश मेमोरी में सेव न होने की साफ़ तौर पर जानकारी देने वाली नीति मौजूद नहीं है.

जब कोई पेज ऑडिट में फ़ेल हो जाता है, तो Lighthouse तीन कॉलम वाली टेबल में नतीजों की सूची बनाता है:

यूआरएल कैश मेमोरी में सेव किए जा सकने वाले संसाधन की जगह
कैश TTL (टीटीएल) संसाधन की कैश मेमोरी की मौजूदा अवधि
ट्रांसफ़र साइज़ इस बात का अनुमान कि फ़्लैग किए गए संसाधन को कैश मेमोरी में सेव किए जाने पर, आपके उपयोगकर्ता कितने डेटा को सेव करेंगे

एचटीटीपी कैश मेमोरी का इस्तेमाल करके, स्टैटिक रिसॉर्स को कैश मेमोरी में सेव करने का तरीका

Cache-Control एचटीटीपी रिस्पॉन्स हेडर दिखाने के लिए, अपना सर्वर कॉन्फ़िगर करें:

Cache-Control: max-age=31536000

max-age डायरेक्टिव, ब्राउज़र को बताता है कि रिसॉर्स को सेकंड में कितने समय तक कैश मेमोरी में सेव करना चाहिए. इस उदाहरण में, कुल समय को 31536000 पर सेट किया गया है, जो एक साल के हिसाब से है: 60 सेकंड × 60 मिनट × 24 घंटे × 365 दिन = 31536000 सेकंड.

आपको नहीं बदले जा सकने वाले स्टैटिक ऐसेट को लंबे समय के लिए कैश मेमोरी में रखना चाहिए. जैसे, एक साल या उससे ज़्यादा समय के लिए.

अगर संसाधन में बदलाव करना और उसे अपडेट करना ज़रूरी है, लेकिन आपको फिर भी कैश मेमोरी में सेव करने की रफ़्तार के कुछ फ़ायदे चाहिए, तो no-cache का इस्तेमाल करें. ब्राउज़र अब भी उस संसाधन को कैश मेमोरी में सेव करता है जो no-cache पर सेट है. हालांकि, यह पहले सर्वर से जांच करके यह पक्का करता है कि वह संसाधन अब भी अपडेट किया जा रहा है या नहीं.

कैश मेमोरी का लंबा समय हमेशा बेहतर नहीं होता. आखिरकार, यह आपको तय करना होता है कि आपके संसाधनों के लिए कैश मेमोरी का इस्तेमाल करने की सबसे सही अवधि क्या है.

ब्राउज़र अलग-अलग संसाधनों को कैसे कैश करता है, इसे पसंद के मुताबिक बनाने के कई निर्देश हैं. एचटीटीपी कैश मेमोरी: सुरक्षा गाइड की पहली लाइन और एचटीटीपी कैशिंग बिहेवियर कोडलैब कॉन्फ़िगर करना में, रिसॉर्स को कैश मेमोरी में सेव करने के बारे में ज़्यादा जानें.

Chrome DevTools में कैश मेमोरी में सेव किए गए जवाबों की पुष्टि करने का तरीका

यह देखने के लिए कि ब्राउज़र को कैश मेमोरी से कौनसे संसाधन मिल रहे हैं, Chrome DevTools में नेटवर्क टैब खोलें:

[comment]: <> (नीचे दी गई सूची web.dev का एक शॉर्टकोड है, लेकिन इसका अंग्रेज़ी से किसी भी भाषा के लिए अनुवाद नहीं किया गया है.) 1. DevTools खोलने के लिए Control+Shift+J (या Mac पर Command+Option+J) दबाएं. 2. नेटवर्क टैब पर क्लिक करें.

Chrome DevTools में साइज़ कॉलम की मदद से, यह पुष्टि की जा सकती है कि किसी संसाधन को कैश मेमोरी में सेव किया गया है या नहीं:

साइज़ कॉलम.

Chrome, मेमोरी कैश से सबसे ज़्यादा अनुरोध किए गए रिसॉर्स का इस्तेमाल करता है, जो बहुत तेज़ है, लेकिन ब्राउज़र बंद होने पर मिटा दिया जाता है.

यह पुष्टि करने के लिए कि संसाधन का Cache-Control हेडर उम्मीद के मुताबिक सेट है, उसका एचटीटीपी हेडर डेटा जांचें:

  1. अनुरोध टेबल के नाम कॉलम में, अनुरोध के यूआरएल पर क्लिक करें.
  2. हेडर टैब पर क्लिक करें.
हेडर टैब से कैश-कंट्रोल हेडर की जांच करना
हेडर टैब से Cache-Control हेडर की जांच की जा रही है.

स्टैक के हिसाब से सलाह

Drupal

एडमिन > कॉन्फ़िगरेशन > डेवलपमेंट पेज में जाकर, ब्राउज़र और प्रॉक्सी कैश मेमोरी की ज़्यादा से ज़्यादा उम्र सेट करें. Drupal की परफ़ॉर्मेंस से जुड़े संसाधन देखें.

जूमला

कैश मेमोरी देखें.

WordPress

ब्राउज़र कैशिंग देखें.

रिसॉर्स