منع الطلبات غير الضرورية من الشبكة باستخدام ذاكرة التخزين المؤقت عبر HTTP

عملية استرجاع الموارد عبر الشبكة بطيئة ومكلفة:

• تتطلب الاستجابات الكبيرة عدة عمليات ذهاب وعودة بين المتصفِّح والخادم.
• لن يتم تحميل صفحتك إلى أن يتم تنزيل جميع مواردها المُهمّة بشكل كامل.
• إذا كان لدى أحد المستخدمين على موقعك الإلكتروني خطة بيانات جوّال محدودة، سيؤدي كل طلب غير ضروري إلى الشبكة إلى إهدار أمواله.

كيف يمكنك تجنُّب طلبات الشبكة غير الضرورية؟ تعد ذاكرة التخزين المؤقت لبروتوكول HTTP للمتصفح خط الدفاع الأول. وهو ليس بالضرورة النهج الأكثر فعالية أو مرونة، ولديك قدرة محدودة على التحكم في فترة صلاحية الردود المخزّنة مؤقتًا، ولكنه فعال ويتوافق مع جميع المتصفحات ولا يتطلب الكثير من العمل.

يوضح لك هذا الدليل أساسيات تنفيذ تخزين HTTP مؤقتًا.

توافُق المتصفح

ذاكرة التخزين المؤقت HTTP هي الاسم العام لمجموعة من واجهات برمجة التطبيقات للنظام الأساسي للويب المتوافقة مع جميع المتصفحات:

Cache-Control

ETag

Last-Modified

طريقة عمل ذاكرة التخزين المؤقت لبروتوكول HTTP

يتم أولاً توجيه جميع طلبات HTTP التي يجريها المتصفح إلى ذاكرة التخزين المؤقت للمتصفّح للتحقق مما إذا كانت هناك استجابة مخزّنة مؤقتًا صالحة يمكن استخدامها لتنفيذ الطلب. وفي حال وجود تطابق، تتم قراءة الاستجابة من ذاكرة التخزين المؤقت، ما يؤدي إلى استبعاد وقت استجابة الشبكة وتكاليف بيانات عملية النقل.

يتم التحكّم في سلوك ذاكرة التخزين المؤقت لبروتوكول HTTP من خلال مجموعة من عناوين الطلبات وعناوين الاستجابة. في السيناريو المثالي، يمكنك التحكم في كلٍ من رمز تطبيق الويب الذي يحدد عناوين الطلبات وتهيئة خادم الويب الذي يحدد عناوين الاستجابة.

راجِع مقالة التخزين المؤقت لبروتوكول HTTP من MDN للحصول على نظرة عامة أكثر تفصيلاً.

عناوين الطلبات: الالتزام بالإعدادات التلقائية (عادةً)

هناك عدد من العناوين المهمة التي ينبغي تضمينها في الطلبات الصادرة لتطبيق الويب الخاص بك، ولكن المتصفح يعتني دائمًا بإعدادها نيابةً عنك عند تقديم الطلبات. تظهر عناوين الطلبات التي تؤثر في عملية التحقّق من مدى الحداثة، مثل If-None-Match وIf-Modified-Since، استنادًا إلى ما يفهمه المتصفّح للقيم الحالية في ذاكرة التخزين المؤقت لبروتوكول HTTP.

هذا خبر سارّ: يعني ذلك أنّه يمكنك مواصلة تضمين علامات مثل <img src="my-image.png"> في ترميز HTML، وسيراعي المتصفّح تلقائيًا التخزين المؤقت لبروتوكول HTTP بدون أي جهد إضافي.

عناوين الاستجابة: ضبط خادم الويب

أكثر أجزاء إعداد التخزين المؤقت لبروتوكول HTTP هي العناوين التي يضيفها خادم الويب إلى كل استجابة صادرة. تُعد العناوين التالية عاملاً مهمًا في سلوك التخزين المؤقت الفعال:

Cache-Control

يمكن أن يعرض الخادم التوجيه Cache-Control لتحديد كيفية تخزين المتصفّح وذاكرات التخزين المؤقت الوسيطة الأخرى للاستجابة الفردية ومدة تخزين هذه الاستجابة.

ETag.

عندما يعثر المتصفّح على استجابة منتهية الصلاحية، يمكنه إرسال رمز مميّز صغير (عادةً ما يكون تجزئة من محتوى الملف) إلى الخادم للتحقّق مما إذا كان الملف قد تغيّر. وإذا عرض الخادم الرمز المميّز نفسه، يكون الملف هو نفسه ولا حاجة إلى إعادة تنزيله.

Last-Modified

يخدم هذا العنوان الغرض نفسه مثل ETag، ولكنه يستخدم استراتيجية مستندة إلى الوقت لتحديد ما إذا كان قد تم تغيير أحد الموارد، بدلاً من الاستراتيجية المستندة إلى المحتوى في ETag.

تحتوي بعض خوادم الويب على دعم مدمج لإعداد هذه الرؤوس افتراضيًا. بينما يترك البعض الآخر العناوين بالكامل ما لم تهيئها بشكل صريح. تختلف التفاصيل المحددة لكيفية ضبط العناوين اختلافًا كبيرًا وفقًا لخادم الويب الذي تستخدمه، وعليك الرجوع إلى مستندات الخادم لمعرفة أدق التفاصيل.

لتوفير بعض عمليات البحث، إليك إرشادات تهيئة بعض خوادم الويب الشائعة:

• سريعة
• Apache
• nginx
• استضافة Firebase
• Netlify

لا يؤدي تجاهل عنوان الاستجابة Cache-Control إلى إيقاف التخزين المؤقت لبروتوكول HTTP. بدلاً من ذلك، تخمّن المتصفّحات بشكل فعال نوع سلوك التخزين المؤقت الأكثر ملاءمةً لنوع معيّن من المحتوى. من المحتمل أنّك تريد المزيد من التحكّم عن تلك العروض، لذا عليك تخصيص بعض الوقت لإعداد عناوين الردّ.

ما قيم عنوان الاستجابة التي يجب عليك استخدامها؟

هناك حالتان مهمتان يجب تناولهما عند تهيئة عناوين الاستجابة لخادم الويب.

تخزين مؤقت طويل الأمد لعناوين URL المكرّرة

عند الردّ على طلبات عناوين URL التي تتضمّن "بصمة رقمية" أو معلومات عن الإصدارات والتي لا تهدف مطلقًا إلى تغيير محتواها، أضِف السمة Cache-Control: max-age=31536000 إلى ردودك.

يؤدي ضبط هذه القيمة إلى إعلام المتصفّح بأنّه عندما يحتاج إلى تحميل عنوان URL نفسه في أي وقت على مدار العام المقبل (31,536,000 ثانية، وهي الحدّ الأقصى للقيمة المسموح بها)، يمكنه استخدام القيمة على الفور في ذاكرة التخزين المؤقت لبروتوكول HTTP، بدون الحاجة إلى تقديم طلب شبكة إلى خادم الويب على الإطلاق. هذا رائع - لقد اكتسبت على الفور الموثوقية والسرعة اللتين تأتيان من تجنب الشبكة!

يمكن لأدوات إنشاء مثل حزمة الويب تنفيذ عملية تعيين بصمات أصابع التجزئة إلى عناوين URL لمواد العرض.

إعادة التحقّق من الخادم لعناوين URL التي لم يتم نسخها

لا يتم إصدار نُسخ معيّنة من جميع عناوين URL التي تحمّلها. قد لا تتمكن من تضمين خطوة الإصدار قبل نشر تطبيق الويب، وبالتالي لا يمكنك إضافة علامات تجزئة إلى عناوين URL لمواد العرض. ويحتاج كل تطبيق ويب إلى ملفات HTML، والتي نادرًا لا تتضمّن معلومات عن الإصدارات، لأنّه لن يكلّف أحد باستخدام تطبيق الويب الخاص بك إذا كان بحاجة إلى تذكُّر أنّ عنوان URL الذي ستتم زيارته هو https://example.com/index.34def12.html. إذًا، ما الذي يمكنك فعله لعناوين URL هذه؟

لكن التخزين المؤقت لبروتوكول HTTP وحده ليس قويًا بما يكفي لتجنب الشبكة تمامًا. (لا داعي للقلق، فستتعرف قريبًا على عاملي الخدمة، الذين يقدمون دعمًا إضافيًا). ولكن هناك بعض الخطوات التي يمكنك اتخاذها للتأكد من أن طلبات الشبكة سريعة وفعالة قدر الإمكان.

يمكن أن تساعدك قيم Cache-Control التالية في تحسين مكان تخزين عناوين URL التي لم يتم تحويلها وكيفية تخزينها مؤقتًا:

• يخبر no-cache المتصفّح بأنّه يجب إعادة التحقّق مع الخادم في كل مرة قبل استخدام نسخة مخزّنة مؤقتًا من عنوان URL.
• تطلب السمة no-store من المتصفّح وذاكرات التخزين المؤقت المتوسطة الأخرى (مثل شبكات توصيل المحتوى (CDN)) عدم تخزين أي نسخة من الملف مطلقًا.
• private: يمكن للمتصفحات تخزين الملف في ذاكرة التخزين المؤقت، ولكن لا يمكن لذاكرات التخزين المؤقت المتوسطة ذلك.
• public: يمكن لأي ذاكرة تخزين مؤقت تخزين الرد.

راجِع الملحق: مخطط انسيابي Cache-Control لعرض عملية تحديد قيم Cache-Control المطلوب استخدامها. ويمكن لـ Cache-Control أيضًا قبول قائمة من التوجيهات مفصولة بفواصل. يمكنك الاطّلاع على الملحق: Cache-Control مثال.

يمكن أن يساعدك أيضًا ضبط ETag أو Last-Modified. كما هو مذكور في عناوين الاستجابة، يُستخدم كل من ETag وLast-Modified للغرض نفسه، وهو تحديد ما إذا كان المتصفّح بحاجة إلى إعادة تنزيل ملف مخزَّن مؤقتًا منتهي الصلاحية أم لا. ننصح باستخدام السمة ETag لأنّها أكثر دقة.

يؤدي ضبط السمة ETag أو Last-Modified إلى تعزيز فعالية طلب إعادة التحقّق، إذ يتم السماح له بتشغيل عناوين طلبات If-Modified-Since أو If-None-Match المذكورة فيعناوين الطلب.

وعندما يرى خادم الويب المهيأ بشكل صحيح رؤوس الطلبات الواردة هذه، يمكنه تأكيد ما إذا كان إصدار المورد الذي يتوفر للمتصفح في ذاكرة التخزين المؤقت لبروتوكول HTTP يتطابق مع أحدث إصدار على خادم الويب. وفي حال العثور على تطابق، يمكن للخادم الاستجابة لطلبات HTTP 304 Not Modified التي توازي عبارة "مرحبًا، ندعوك إلى مواصلة استخدام البيانات المتوفّرة لديك حاليًا". هناك القليل جدًا من البيانات المراد نقلها عند إرسال هذا النوع من الردود، لذلك عادةً ما يكون ذلك أسرع بكثير من الاضطرار فعليًا إلى إرسال نسخة من المورد الفعلي المطلوب.

ملخّص

تُعد ذاكرة التخزين المؤقت لبروتوكول HTTP طريقة فعالة لتحسين أداء التحميل لأنها تقلل من طلبات الشبكة غير الضرورية. وهي متوافقة في جميع المتصفحات ولا يتطلب إعدادها الكثير من العمل.

تعتبر إعدادات Cache-Control التالية بداية جيدة:

• Cache-Control: no-cache للموارد التي يجب إعادة التحقق منها مع الخادم قبل كل استخدام.
• Cache-Control: no-store للموارد التي يجب عدم تخزينها مؤقتًا مطلقًا.
• Cache-Control: max-age=31536000 للموارد التي تم تحديد إصداراتها.

يمكن أن يساعدك العنوان ETag أو Last-Modified في إعادة التحقّق بكفاءة أكبر من موارد ذاكرة التخزين المؤقت المنتهية الصلاحية.

مزيد من المعلومات

إذا كنت تريد تجاوز أساسيات استخدام عنوان Cache-Control، يمكنك الاطّلاع على دليل أفضل ممارسات التخزين المؤقت والأهداف القصوى من "جيك أرشيبالد".

راجع أعجبني ذاكرة التخزين المؤقت للحصول على إرشادات حول كيفية تحسين استخدام ذاكرة التخزين المؤقت للزائرين المتكررين.

الملحق: مزيد من النصائح

إذا كان لديك مزيد من الوقت، فإليك المزيد من الطرق لتحسين استخدامك لذاكرة التخزين المؤقت لبروتوكول HTTP:

• استخدِم عناوين URL متّسقة. فإذا كنت تعرض المحتوى نفسه على عناوين URL مختلفة، يجلب المتصفّح ذلك المحتوى ويخزنه عدة مرات.
• قلِّل من إيقاف الاستخدام. إذا كان جزء من مورد (مثل ملف CSS) يتم تحديثه بشكل متكرر بينما لا يتم تحديث بقية الملف (كما هو الحال مع رمز المكتبة)، يمكنك تقسيم الرمز الذي يتم تحديثه بشكل متكرر إلى ملف منفصل واستخدام استراتيجية تخزين مؤقت قصيرة المدة للرمز الذي يتم تحديثه بشكل متكرر، واستراتيجية تخزين مؤقت طويلة للرمز الذي لا يتغير كثيرًا.
• إذا كان مقياس "Cache-Control" مقبولاً إلى حدّ ما من الحداثة، يُرجى مراعاة توجيه stale-while-revalidate الجديد .

الملحق: رسم بياني انسيابي Cache-Control

الملحق: Cache-Control مثال