كيفية تخزين الأصول الثابتة مؤقتًا باستخدام Nginx لمواقع أسرع

لماذا يهم التخزين المؤقت للأصول الثابتة

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

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

فهم التخزين المؤقت للمتصفح مقابل التخزين المؤقت من جانب الخادم

هناك نوعان رئيسيان من التخزين المؤقت ذو الصلة هنا:

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

كلاهما حاسم للأداء. سنغطي كليهما.

الخطوة 1: تكوين التخزين المؤقت للمتصفح باستخدام ترويسات Expires

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

افتح ملف تكوين موقعك (مثلاً، /etc/nginx/sites-available/example.com) وأضف كتلة location للأصول الثابتة:

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

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

أفضل ممارسة: استخدم أسماء ملفات مُصدّرة (مثلاً، style.abc123.css) حتى تتمكن من تحديث الأصول دون كسر التخزين المؤقت. عندما يتغير الملف، يتغير اسم الملف، ويجلب المتصفح الإصدار الجديد.

الخطوة 2: تمكين التخزين المؤقت من جانب الخادم باستخدام Proxy Cache

إذا كنت تشغل خادم تطبيقات (مثل Node.js، Python، أو PHP) خلف Nginx، يمكنك تخزين الاستجابات الثابتة مؤقتًا في Nginx لتقليل طلبات الواجهة الخلفية.

أولاً، حدد مسار التخزين المؤقت في كتلة http في nginx.conf:

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static_cache:10m max_size=1g inactive=60m use_temp_path=off;

ثم، في كتلة الخادم الخاصة بك، استخدمه:

location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
    proxy_cache static_cache;
    proxy_cache_valid 200 302 1y;
    proxy_cache_valid 404 1m;
    proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
    proxy_cache_lock on;
    add_header X-Cache-Status $upstream_cache_status;
    proxy_pass http://backend;
}

هذا يخزن الاستجابات الناجحة مؤقتًا لمدة عام ويقدم محتوى قديمًا إذا كانت الواجهة الخلفية معطلة. يساعدك ترويسة X-Cache-Status في التصحيح (HIT، MISS، إلخ).

الخطوة 3: التحسين باستخدام الضغط و HTTP/2

يقلل التخزين المؤقت من الطلبات، لكن يمكنك تسريع عمليات النقل بشكل أكبر من خلال تمكين ضغط gzip و HTTP/2.

تمكين gzip في nginx.conf:

gzip on;
gzip_types text/css application/javascript image/svg+xml;
gzip_min_length 1000;

يقوم HTTP/2 بتعدد إرسال الطلبات ويتم تمكينه بإضافة http2 إلى توجيه listen الخاص بك:

listen 443 ssl http2;

ملاحظة: يتطلب HTTP/2 بروتوكول HTTPS. إذا لم تقم بإعداد TLS بعد، راجع دليلنا حول كيفية عمل HTTPS و TLS.

مقارنة: توجيهات Cache-Control

الخطوة 4: الاختبار والتحقق

بعد تطبيق التغييرات، أعد تحميل Nginx: sudo nginx -s reload. ثم اختبر باستخدام curl:

curl -I https://example.com/style.css

ابحث عن ترويسات Cache-Control وExpires. يمكنك أيضًا استخدام أدوات مطوري المتصفح (علامة تبويب Network) لمعرفة ما إذا كانت الأصول تُقدَّم من ذاكرة التخزين المؤقت (الحالة 200 أو 304).

بالنسبة لذاكرة التخزين المؤقت من جانب الخادم، راقب ترويسة X-Cache-Status.

المزالق الشائعة وأفضل الممارسات

• لا تخزن HTML مؤقتًا: يجب أن يكون HTML ديناميكيًا أو أن يكون له أوقات تخزين مؤقت قصيرة لتعكس التحديثات.
• استخدم التصدير: أضف تجزئات إلى أسماء الملفات لكسر التخزين المؤقت عند تغير المحتوى.
• اضبط max-age المناسب: سنة واحدة آمنة للأصول المُصدّرة.
• راقب حجم ذاكرة التخزين المؤقت: يمكن أن تنمو ذاكرات التخزين المؤقت من جانب الخادم؛ اضبط max_size وinactive.
• فكر في CDN: للجماهير العالمية، يمكن لـ CDN تخزين الأصول مؤقتًا بالقرب من المستخدمين.

الأسئلة الشائعة

كيف أعرف إذا كانت أصولي يتم تخزينها مؤقتًا؟

تحقق من ترويسات الاستجابة باستخدام curl -I أو أدوات مطوري المتصفح. ابحث عن ترويسات Cache-Control: public, max-age=31536000 وExpires. في أدوات المطورين، سيعرض عمود Size \"(from disk cache)\" للأصول المخزنة مؤقتًا.

ما الفرق بين expires وCache-Control؟

يحدد expires تاريخًا مطلقًا، بينما يستخدم Cache-Control ثوانٍ نسبية. Cache-Control له الأولوية في المتصفحات الحديثة. يضبط توجيه expires في Nginx كليهما للتوافق.

هل يمكنني تخزين المحتوى الديناميكي مؤقتًا؟

نعم، ولكن بحذر. استخدم proxy_cache مع TTLs قصيرة وفكر في مفاتيح ذاكرة التخزين المؤقت بناءً على ملفات تعريف الارتباط أو الترويسات. للمحتوى الخاص بالمستخدم، استخدم private أو تجنب التخزين المؤقت.

سرّع سير عملك مع TryQuickToolBox

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