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

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

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

लाइटहाउस कैश नीति का ऑडिट कैसे फ़ेल होता है

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

कैश मेमोरी की नीति के बेहतर ऑडिट की मदद से, लाइटहाउस उपलब्ध कराई गई स्टैटिक ऐसेट का स्क्रीनशॉट

लाइटहाउस ऐसे संसाधन को कैश मेमोरी में सेव करता है जिसे कैश मेमोरी में सेव किया जा सकता है अगर ये शर्तें पूरी होती हैं:

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

जब कोई पेज ऑडिट में फ़ेल हो जाता है, लाइटहाउस टेबल में नतीजों को तीन कॉलम के साथ दिखाता है:

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

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

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

Cache-Control: max-age=31536000

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

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

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

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

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

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

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

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

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

साइज़ कॉलम.

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

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

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

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

Drupal

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

Joomla

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

WordPress

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

संसाधन