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

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

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

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

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

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

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

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

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

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

Cache-Control: max-age=31536000

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

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

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

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

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

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

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

1. DevTools खोलने के लिए, Control+Shift+J (या Mac पर Command+Option+J) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.

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

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

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

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

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

Drupal

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

Joomla

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

WordPress

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

संसाधन

• बेहतर कैश मेमोरी नीति की मदद से स्टैटिक ऐसेट दिखाएं ऑडिट के लिए सोर्स कोड
• Cache-Control की खास जानकारी
• कैश-कंट्रोल (एमडीएन)