تحسين التخزين المؤقت في Nginx

كيفية الاستفادة من التخزين المؤقت في المتصفح باستخدام وحدة header في خادم Nginx على أوبنتو 16.04

في بيئات الويب الحديثة، يُعد التخزين المؤقت في المتصفح (Browser Caching) من الأساليب الفعّالة التي تحسن أداء المواقع بشكل كبير. عبر تخزين البيانات المحلية على أجهزة المستخدمين، يمكن تقليل أوقات التحميل، مما يعزز تجربة المستخدم بشكل عام. في هذا المقال، سنناقش كيفية الاستفادة من هذه التقنية من خلال تكامل وحدة header في خادم Nginx على أوبنتو 16.04، مما يساهم في تحسين السرعة والأداء.

ما هو التخزين المؤقت في المتصفح؟

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

لماذا يعتبر التخزين المؤقت مهمًا؟

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

2. تقليل الحمل على الخادم: بفضل التخزين المؤقت، يتم تقليل عدد الطلبات الواردة إلى الخادم، مما يقلل من العبء عليه ويُحسن من استجابته.

3. تحسين تجربة المستخدم: عندما يتم تحميل صفحات الموقع بسرعة، يُصبح التفاعل مع الموقع أكثر سلاسة، مما يُحسن تجربة المستخدم.

4. توفير البيانات: عندما يتم تخزين الملفات بشكل محلي، يتم تقليل الحاجة إلى تحميل نفس الملفات مرارًا وتكرارًا، مما يوفر البيانات على شبكات الإنترنت.

كيفية إعداد التخزين المؤقت في المتصفح باستخدام وحدة header في Nginx؟

1. تثبيت Nginx على أوبنتو 16.04:
   إذا لم يكن لديك خادم Nginx مثبتًا بعد على أوبنتو 16.04، يمكنك البدء بتثبيته عبر الأوامر التالية:

   sql
   CopyEdit
   sudo apt update
   sudo apt install nginx
   

   بعد التثبيت، يمكنك بدء الخدمة باستخدام:

   sql
   CopyEdit
   sudo systemctl start nginx
   

   تحقق من حالة الخادم باستخدام:

   lua
   CopyEdit
   sudo systemctl status nginx
   

2. تعديل إعدادات Nginx لتمكين التخزين المؤقت:

   لتفعيل التخزين المؤقت في المتصفح عبر Nginx، نحتاج إلى تعديل إعدادات ترويسات الـHTTP (HTTP Headers) التي يرسلها الخادم مع الملفات. سنستخدم التوجيه add_header لتحديد سياسات التخزين المؤقت للمحتوى.

   الخطوة الأولى هي فتح ملف تكوين Nginx:

   swift
   CopyEdit
   sudo nano /etc/nginx/sites-available/default
   

   داخل هذا الملف، ابحث عن الكتلة الخاصة بـ server التي تحدد إعدادات الخادم.

3. إضافة رؤوس التخزين المؤقت:

   في قسم server، يمكنك إضافة الرؤوس التي تحدد سياسات التخزين المؤقت. على سبيل المثال:

   nginx
   CopyEdit
   location ~* \.(jpg|jpeg|png|gif|css|js|ico)$ {
       add_header Cache-Control "public, max-age=31536000, immutable";
   }
   

   في المثال أعلاه:

   • Cache-Control: هو رأس HTTP الذي يستخدم لتحديد سياسات التخزين المؤقت.

     • public: يسمح بالتخزين المؤقت من قبل أي خادم، مثل شبكة توصيل المحتوى (CDN).

     • max-age=31536000: يعني أن الملف يمكن تخزينه في المتصفح لمدة سنة (31536000 ثانية).

     • immutable: يشير إلى أن الملف لا يتغير، لذلك لا يجب على المتصفح التحقق من وجود تحديثات له.

   هذه الإعدادات تتعلق بتخزين الصور، ملفات الـCSS، وملفات JavaScript لفترة طويلة، مما يحسن من وقت التحميل عندما يقوم المستخدم بزيارة الموقع في المستقبل.

4. تحديد سياسات التخزين المؤقت لملفات أخرى:

   يمكن تطبيق سياسة التخزين المؤقت على أنواع أخرى من الملفات مثل ملفات HTML أو الفيديو. على سبيل المثال، يمكن تحديد سياسة تخزين مؤقت مختلفة لملفات HTML لأن هذه الملفات قد تتغير بشكل أكثر تكرارًا:

   nginx
   CopyEdit
   location ~* \.(html|htm)$ {
       add_header Cache-Control "private, no-store, no-cache, must-revalidate";
   }
   

   في هذا المثال:

   • private: يشير إلى أن التخزين المؤقت مخصص للمستخدم الفردي ولا يجب مشاركته بين المستخدمين.

   • no-store: يمنع المتصفح من تخزين المحتوى.

   • no-cache: يمنع المتصفح من استخدام المحتوى المخزن إذا تم تغييره.

5. اختبار التعديلات:

   بعد إجراء التعديلات على ملف التكوين، يجب إعادة تحميل Nginx لتطبيق التغييرات:

   nginx
   CopyEdit
   sudo systemctl reload nginx
   

   يمكنك الآن اختبار إعدادات التخزين المؤقت باستخدام أدوات المطور في المتصفح. افتح أدوات المطور (عادة باستخدام F12 أو النقر بزر الماوس الأيمن واختيار “Inspect”)، ثم انتقل إلى تبويب الشبكة (Network) للتحقق من رؤوس الاستجابة المرسلة من الخادم.

   تأكد من أن رؤوس Cache-Control تظهر بالشكل الذي حددته في التكوين.

6. التعامل مع الملفات الديناميكية:

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

   يمكنك استخدام قواعد مختلفة لـ Nginx لتحديد سياسات التخزين المؤقت للمحتوى الديناميكي:

   nginx
   CopyEdit
   location /news/ {
       add_header Cache-Control "max-age=3600, must-revalidate";
   }
   

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

7. تحسينات إضافية:

   • استخدام gzip لضغط المحتوى: يمكن أن يؤدي ضغط المحتوى مثل HTML وCSS وJavaScript إلى تحسين الأداء بشكل كبير. يمكنك تمكين الضغط عبر Nginx باستخدام:

     nginx
     CopyEdit
     gzip on;
     gzip_types text/plain application/javascript text/css application/json application/xml;
     

   • الاستفادة من CDN: يمكنك استخدام شبكة توصيل المحتوى (CDN) لتوزيع الملفات الثابتة بشكل أسرع عبر عدة خوادم حول العالم. مع تكامل التخزين المؤقت في المتصفح، سيستفيد المستخدمون من تحميل الملفات بشكل أسرع من أقرب نقطة إلى موقعهم الجغرافي.

الخلاصة

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