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

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

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

كيف تعمل ذاكرة التخزين المؤقت خلف الكواليس؟

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

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

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

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

تدفق الطلبات مع عدم وجود إعدادات ذاكرة التخزين المؤقت

الأمر متروك للمتصفح لتحديد ما يجب فعله وكيفية تخزين المعلومات مؤقتًا دون تعليمات من الخادم. حاليًا ، يقوم Chrome و Safari بتنزيل البيانات من الواجهة الخلفية في كل مرة ، بدون تعليمات التخزين المؤقت. هذا يمكن أن يتغير ويؤدي إلى سلوكيات مختلفة ، خاصة في الأنظمة الأساسية الأخرى.

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

Etag (علامة الكيان)

Etag هو أحد إعدادات ذاكرة التخزين المؤقت. الفكرة الرئيسية وراء رأس HTTP هذا هي السماح للمستعرض الخاص بك أن يكون على دراية بالتعديلات على الموارد ذات الصلة دون تنزيل ملفات كاملة. يمكن أن يحسب الخادم شيئًا مشابهًا بمجموع التجزئة لكل ملف ، ثم يرسل مبلغ التجزئة هذا إلى العميل. في المرة التالية التي يحاول فيها العميل الوصول إلى هذا المورد ، بدلاً من تنزيل الملف ، سيرسل المستعرض شيئًا كهذا في رأس HTTP: If-None-Match: W / "1d2e7–1648e509289". سيقوم الخادم بعد ذلك بالتحقق من مبلغ التجزئة هذا مقابل مبلغ التجزئة للملف الحالي ، وإذا كان هناك فرق ، يجب على العميل تنزيل ملف جديد. خلاف ذلك ، سيتم إبلاغ العميل بأنه يجب أن يستخدم نسخة مخبأة.

تدفق الطلبات مع Etag - الحمل الأولتدفق الطلبات مع Etag - الحمل الثاني

مع تشغيل سياسة التخزين المؤقت لـ Etag ، ننتقل دائمًا إلى الخادم للتحقق من مجموع تجزئة الملف ، وبعد ذلك فقط يقرر المتصفح نقله من ذاكرة التخزين المؤقت أو تحميله بالكامل. عندما لا يتم تعديل أحد الموارد ، يستغرق الأمر ما بين 80 إلى 100 بايت للتحقق بغض النظر عما تطلبه ، سواء كان ملف بحجم 10 كيلوبايت أو 10 ميجابايت.

آخر تعديل

الإعداد الآخر للتحكم في ذاكرة التخزين المؤقت هو رأس HTTP "التعديل الأخير". الفكرة الرئيسية تشبه إلى حد بعيد Etag ، ولكن سلوك المتصفح مختلف قليلاً. خوادم لديها الطابع الزمني لآخر تاريخ تعديل لكل ملف. بعد تحميل الملف الأول ، يكون لدى العميل القدرة على سؤال الخادم إذا تم تعديل المورد منذ اللحظة المحددة التي تم فيها الوصول إلى الملفات من قبل العميل. للقيام بذلك ، يرسل المستعرض If-Modified-Since: الجمعة ، 13 يوليو 2018 10:49:23 بتوقيت جرينتش في رأس HTTP. إذا تم تعديل المورد ، فيجب على المتصفح تنزيل ملف جديد ، وإلا فإنه يستخدم نسخة مخبأة.

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

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

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

ذاكرة التخزين المؤقت للتحكم ماكس العمر

يسمح لنا هذا التوجيه بإخبار المتصفح بالفترة التي يجب أن يحتفظ بها بالملف في ذاكرة التخزين المؤقت منذ أول تحميل. يجب تعريف الوقت الذي يجب أن يحتفظ فيه المستعرض بالملف في ذاكرة التخزين المؤقت بالثواني ، ويتم تقديمه عادةً مثل التحكم في ذاكرة التخزين المؤقت: max-age = 31536000. باستخدام هذه السياسة ، يتخطى المتصفح عملية تقديم الطلبات إلى الخادم تمامًا ويفتح الملفات بسرعة كبيرة. ولكن كيف يمكننا التأكد من أن الملف لن يتغير لفترة طويلة؟ لا.

لذلك ، لإجبار المتصفح على تنزيل إصدار جديد من الملف المطلوب ، نستخدم تقنية تم تنفيذها بواسطة العديد من أدوات مُنشئ الأصول ، مثل Webpack أو Gulp. سيتم تجميع كل ملف مسبقًا على الخادم وستتم إضافة مبالغ التجزئة إلى أسماء الملفات ، مثل "app-72420c47cc.css". حتى التغييرات الصغيرة في الملف تنعكس في مبلغ التجزئة ، والذي يضمن أنه سيتم التعرف عليه على أنه مختلف. إذن ، بعد النشر ، ستحصل على إصدار جديد من الملف. يمكن أن ينطبق هذا على جميع ملفات css و js و الصور الخاصة بنا (الحد الأقصى للعمر = 31536000) ؛ بعد قيامنا بتغيير شيء ما ، سيطلب المتصفح فقط ملفًا جديدًا به مبلغ تجزئة جديد ، والذي سيخزنه بعد ذلك.

لا ذاكرة التخزين المؤقت

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

أوصي بتطبيق Cache-Control: no-cache على ملفات html. لا يعني تطبيق "no-cache" عدم وجود ذاكرة تخزين مؤقت على الإطلاق ، إنه ببساطة يخبر المتصفح بالتحقق من صحة الموارد على الخادم قبل استخدامه من ذاكرة التخزين المؤقت. ولهذا السبب نحتاج إلى استخدامه مع Etag ، لذلك سترسل المتصفحات طلب بسيط وتحميل 80 بايت إضافية للتحقق من حالة الملف.

الإعدادات النهائية

  • استخدم Gulp أو Webpack أو ما شابه ذلك لإضافة أرقام تجزئة فريدة إلى ملفات css و js وملفات الصور الخاصة بك (مثل app-67ce7f3483.css) ؛
  • بالنسبة إلى ملفات js و css وملفات الصور ، قم بتعيين Cache-Control: public ، الحد الأقصى للعمر = 31536000 ، لا Etag ، لا توجد إعدادات Last-Modified.
  • لملفات HTML ، استخدم Cache-Control: no-cache ، و Etag.

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

اضغط على زر if إذا وجدت هذه المقالة مفيدة!

أي أسئلة أو ملاحظات؟ الاتصال عبر نقطة بكسل