تحسين أداء الموقع باستخدام HTTP Caching#

إزاي تحسن أداء الموقع وتقلل من وقت تحميله وكمان تقلل ال Load ع السيرفر؟#

تعال أقولك على تريكاية سمعت عن HTTP Caching أو Http Cache Control؟

يعني إيه Http Cache Control؟#

بص، هو عبارة عن إنك بتحفظ نسخة من الملفات الـ Static (زي الصور، وملفات CSS، وملفات JavaScript) في الـ Caching Memory بتاعة المتصفح.

طب إيه الفايدة منها وبتحصل إزاي؟#

• في أول زيارة للموقع، الـ browser بيحمل كل الـ Files اللازمة من السيرفر، وأثناء التحميل بيحفظ نسخة منها في الـ cache عنده.
• بالتالي في أي زيارة مستقبلية، الـ browser بيعمل Check بسيط يشوف إذا الملفات اللي عنده في الـ cache صلاحيتها Valid ولا لأ.

صلاحية الـ Cache#

• الصلاحية دي انت كـ Developer بتحطها في إعدادات الـ Caching في فايل موجود في السيرفر.
• بعد ما الـ browser يعمل Check وإذا كانت الملفات Valid، بيستخدمها بدل ما يحملها تاني من السيرفر.

النتيجة؟ عدد الـ Requests للسيرفر بيقل وسرعة تحميل الموقع للزوار بتزيد.

أماكن تخزين الملفات#

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

طيب ليه مش كل المواقع بتستخدمه؟#

فيه شوية عيوب زي:

1. ملفات قديمة: لو الملفات اللي في الـ cache اتغيرت على السيرفر، المستخدم هيشوف نسخة قديمة لحد ما تنتهي صلاحية الملفات القديمة.
2. استهلاك موارد: بيستهلك مساحة على جهاز الزائر.

ازاي تنفذ الـ Process دي؟#

لو السيرفر بتاعك Apache#

• افتح الـ Root بتاع الموقع واكتب الكود ده في ملف .htaccess

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

شرح بعض الأوامر:

• max-age: بتحدد المدة الزمنية (بالثواني) اللي المتصفح يحتفظ خلالها بالملف في الـ cache.
• no-cache: بيجبر المتصفح على التحقق من صحة الملف مع السيرفر.
• no-store: يمنع المتصفح من تخزين الملف.
• ExpiresByType: بتحدد مدة التخزين لكل نوع من الملفات زي الصور وملفات CSS و JS.

لو السيرفر Nginx#

افتح المسار دا على السيرفر الخاص بك /etc/nginx/nginx.conf، وحط فيه الكود دا:

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

location ~* \.(pdf|html|txt|xml)$ {
    expires 1m;
    add_header Cache-Control "public, max-age=2592000";
}

إزاي تتأكد إن الـ Caching شغال؟#

• افتح الموقع.
• افتح الـ Developer Tools (اختصار: Ctrl+Shift+I).
• روح للـ Network Tab وحمّل الصفحة.
• اختار أي Static File زي صورة.
• بص في جزء الـ Headers، هتلاقي تفاصيل الـ Caching في الـ Response Headers تحت Cache-Control Header مع القيم اللي حددتها.

Join our whatsapp group here
My Channel here