كلما تم تحميل موقع الويب بشكل أسرع ، كلما كان الزائر أكثر احتمالًا في البقاء. توجهك هذه المقالة حول كيفية تنفيذ التخزين المؤقت للمتصفح مع تكوينات NGINX.
في سلسلة التعليمية الخاصة بـ NGINX ، قمنا بتغطية كيفية استخدام NGINX كـ LOAD BALANCER ، تكوين NGINX كوكيل عكسي ، استخدم إصدارات PHP متعددة مع NGINX ، و تحويل HTACCESS REWRITE قواعد لتوجيهات إعادة كتابة Nginx. في مقال اليوم ، نغطي موضوعًا مهمًا للغاية يساعد الشركات على تحسين تجربة المستخدم من خلال الاستفادة من التخزين المؤقت للمتصفح. في هذا البرنامج التعليمي ، سوف نوجهك حول كيفية تنفيذ التخزين المؤقت للمتصفح مع تكوين NGINX باستخدام وحدة رأس NGINX. هيا بنا نبدأ!
- التخزين المؤقت للمستعرضة المبلغ
- وحدة رأس nginx
- e-tage و if-match
- استفادة من التخزين المؤقت للمتصفح مع تكوين NGINX
- الخلاصة
الاستفادة من التخزين المؤقت للمتصفح
كلما كان موقع الويب بشكل أسرع ، كلما زاد احتمال البقاء على موقع الويب. يتم تحميل مواقع الويب التي تحتوي على الكثير من الصور والمحتوى التفاعلي في الخلفية ، مما يجعل موقع الويب يفتح مهمة معقدة. يتكون من طلب العديد من الملفات المختلفة من الخادم واحدًا تلو الآخر. تقليل كمية هذه الطلبات هو إحدى الطرق لتسريع موقع الويب الخاص بك. إحدى الطرق لتحسين أداء موقع الويب هي leveraging Browser Caching. يلعب التخزين المؤقت للمتصفح دورًا كبيرًا في آلية ذاكرة التخزين المؤقت لزيادة سرعة الصفحة. يمكن حفظ الملفات الثابتة مثل CSS و JS و JPEG و PNG ، وما إلى ذلك التي يتم استخدامها للموقع على الكمبيوتر للزائر للوصول إلى المستقبل. عندما يواجه الزائر صفحة جديدة على موقع الويب الخاص بك ، يمكن الوصول إلى الملفات المذكورة أعلاه من كمبيوتر الزائر بدلاً من الخادم المقدم ، مما سيزيد بشكل كبير من سرعة تحميل الصفحة.
وحدة رأس Nginx
تتيح وحدة _ngx \ _http \ headers_module إضافة حقول الرأس “expires” و “cache-control” ، والحقول التعسفية ، إلى رأس استجابة. يمكننا استخدام وحدة الرأس لتعيين رؤوس HTTP هذه. وحدة الرأس عبارة عن وحدة NGINX الأساسية ، مما يعني أنه لا يلزم تثبيته بشكل منفصل لاستخدامه. مثال التكوين يبدو هكذا:
expires 24h;
expires modified +24h;
expires @24h;
expires 0;
expires -1;
expires epoch;
expires $expires;
add_header Cache-Control private;
TAG E و IF-MATCH
لنفترض أن لدينا بعض ملفات الاختبار مع امتدادات مختلفة ، مثل Test.html ، و test.jpg ، و test.css ، و test.js. بشكل افتراضي ، سيكون لدى جميع الملفات نفس سلوك التخزين المؤقت الافتراضي. للتحقق من رؤوس الاستجابة لملف باستخدام الأمر التالي لطلب ملف من خادم Nginx المحلي الخاص بنا ويظهر رؤوس الاستجابة:
curl -I http://localhost/test.html
Output: Nginx response headers
HTTP/1.1 200 OK
Server: nginx/1.14.1
Date: Fri, 03 March 2021 18:23:09 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Fri, 03 March 2021 18:23:09 GMT
Connection: keep-alive
<strong>ETag: "501c3b6f-401"</strong>
Accept-Ranges: bytes
في السطر الأخير إلى الأخير ، ستجد رأس etag ، الذي يحتوي على معرف فريد لهذا المراجعة الخاصة للملف المطلوب. إذا قمت بتنفيذ الأمر الأخير curl بشكل متكرر ، فستجد نفس قيمة ETAG بالضبط. عند استخدام متصفح الويب ، يتم تخزين قيمة ETAG مرة أخرى إلى الخادم مع رأس طلب if-match عندما يقوم المستخدم بتحديث الصفحة أو نفس الملف مطلوب بواسطة المتصفح لأي سبب. يمكننا محاكاة هذا على سطر الأوامر مع الأمر التالي.
curl -I -H 'If-None-Match: "501c3b6f-401"' http://localhost/test.html
لاحظ المعرف الفريد ، يجب أن يتطابق مع قيمة الاستجابة التي حصلنا عليها من مكالمة curl السابقة. سيكون الاستجابة مختلفة هذه المرة:
Output: Nginx response headers
<strong>HTTP/1.1 304 Not Modified</strong>
Server: nginx/1.14.1
Date: Thu, 04 Feb 2021 18:24:05 GMT
Last-Modified: Thu, 04 Feb 2021 18:22:39 GMT
Connection: keep-alive
<strong>ETag: "501c3b6f-401"</strong>
هذه المرة ، سوف يستجيب Nginx مع 304 غير تعديل . لن يرسل الملف عبر الشبكة مرة أخرى ؛ بدلاً من ذلك ، سيخبر المستعرض أنه يمكنه إعادة استخدام الملف الذي تم تنزيله محليًا بالفعل. هذا مفيد لأنه يقلل من حركة الشبكة. لكن لا يزال يتعين على المتصفح إجراء مكالمة HTTP للحصول على استجابة من الخادم ، والتي لا تزال تستغرق بعض الوقت.
استفادة من التخزين المؤقت للمتصفح مع تكوين NGINX
في مثالنا السابق ، أوضحنا كيف يساعدك TAG E و IF-Match على تقليل حركة الشبكة. لكن مشكلة etag هي أن المتصفح يرسل دائمًا طلبًا إلى الخادم يسأل عما إذا كان بإمكانه إعادة استخدام ملفه المخزنة مؤقتًا. وهذا لا يزال يستغرق بعض الوقت لتقديم الطلب وتلقي الاستجابة.
الآن بمساعدة وحدة رأس NGINX ، سنجعل المتصفح يقوم بتخزين بعض الملفات محليًا دون أن نسأل الخادم بشكل صريح.
أضف الأسطر الثلاثة التالية في ملف تكوين NGINX الخاص بك إلى محتوى ذاكرة التخزين المؤقت في NGINX
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
يرشد السطر الأول Nginx إلى محتوى ذاكرة التخزين المؤقت في متصفح العميل لمدة 30 يومًا (30D). بعد هذه الفترة ، سيؤدي أي طلب جديد من المستخدم إلى إعادة التحقق من صحة ذاكرة التخزين المؤقت والتحديث من متصفح العميل. يمكنك وضع الخطوط المذكورة أعلاه في location أو server أو http كتل.
location /static/ {
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
}
عندما تضعها في كتلة الموقع ، سيتم تخزين المحتوى الذي يقدمه هذا الموقع فقط. في الحالة المذكورة أعلاه ، تطلب فقط / ثابت / سيتم تخزينها مؤقتًا. إذا كنت ترغب في تخزين أنواع الملفات المحددة ، فيمكنك القيام بذلك باستخدام كتلة الموقع.
location ~* \.(js|jpg|gif|png|css)$ {
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
}
في المثال أعلاه ، نحن نقوم بتخزين المؤقت أنواع الملفات المختلفة مثل JS و JPG و CSS وما إلى ذلك. وبالمثل ، يمكنك وضع تكوين ذاكرة التخزين المؤقت في server block قبل أي كتلة الموقع. في هذه الحالة ، سيتم تخزين جميع ردود هذا الخادم. أو يمكنك وضعه في كتلة http ، في هذه الحالة ، سيتم تخزين جميع طلبات الخادم المدعومة بملف تكوين NGINX.
خاتمة
يمكن استخدام وحدة رؤوس Nginx لإضافة أي رؤوس تعسفية إلى الاستجابة ، ولكن وضع رؤوس التحكم في ذاكرة التخزين المؤقت بشكل صحيح هو أحد أكثر تطبيقاتها المفيدة. يساعدك ذلك على تحسين أداء موقع الويب ، خاصة بالنسبة للمستخدمين على الشبكات ذات الكمون الأعلى ، مثل شبكات شركات النقل المحمولة. في هذا البرنامج التعليمي ، تعلمنا كيفية الاستفادة من التخزين المؤقت للمتصفح مع تكوين NGINX. آمل أن يساعدك هذا في تحسين تجربة المستخدم على موقع الويب الخاص بك.