تعتبر سرعة تصفح مواقع الانترنت من العوامل المهمة في نجاحها حيث ان المواقع البطيئة تُشعر زوارها بالملل وسرعان ما سوف يغادرون الموقع الى غير رجعة خصوصا اذا تكررت مثل هذا الامور، وعلى الرغم من ان هناك الكثير من العوامل التي تؤثر على سرعة تصفح المواقع على شبكة الانترنت ابتداء من كفاءة خادم الموقع مرورا ببرمجيات الموقع وبعد او قرب خادم الموقع من الزائر وامور كثيرة لا يمكن لمدير الموقع ان يتحكم بها ، ولكن هناك بعض الامور التي يستطيع مدير الموقع القيام بها لتسريع تصفح موقعه ومن هذه الامور استخدام Cache-Control من اجل تسريع تصفح الموقع والتي يقوم من خلالها مدير الموقع باخبار متصفح زائر الموقع ان علية حفظ نسخ مخبأة (cache) من ملفات الموقع على اجهزة الزوار.
لماذا يجب استخدام Cache-Control
عندما يقوم الزائر بتصفح صفحة معينة على موقع فانه يتم تحميل وجلب كل ما تحتوية الصفحة من نصوص ومحتويات بما في ذلك تحميل الصور وتحميل ملفات الجافا سكربت (javascript) وملفات السي اس اس (CSS) ووضعها في مجلد مؤقت على جهاز المستخدم ومن ثم عرضها على متصفح المستخدم. وفي كل صفحة يقوم المستخدم بطلبها يتم القيام بنفس الامر ، تخيل معي كمية الملفات التي سوف يتم تحميلها في كل مرة على جهاز المستخدم اثناء تنقله بين صفحات موقعك.
وقد يتبادر في ذهنك السؤال التالي: هناك ملفات مستخدمة في كل صفحات موقعي كملفات سي اس اس وجافا سكربت وبعض الصور التي تظهر في اعلى الموقع واسفل الموقع ، هل سوف يتم تحميلها في كل مرة يقوم المستخدم بالتنقل من صفحة الى صفحة عبر موقعي؟
الجواب: ببساطة نعم!.
والجواب الاخير يجعلنا نتسائل سؤال ذكي ربما: اذا هل يمكننا ان نشعر مستعرض الانترنت لدى المستخدم ان يخزن هذه الملفات على جهاز المستخدم وبالتالي عند زيارته للصفحة التالية او زيارته للموقع في وقت لاحق يتم تحميل هذه الملفات من جهاز المستخدم بدلا من تحميلها من موقعنا؟
والجواب ايضا سيكون نعم بامكاننا ذلك ببساطة، وبهذا نكون قد سرعنا من عملية التحميل لانه من المعروف ان التحميل من جهاز المستخدم سيكون اسرع بكثير من تحميل تلك الملفات من موقع الانترنت الخاص بنا.
هناك من يقول ان حجم الصفحة ربما لا يتعدى بضعة كيلو بايت وبالتالي لا داعي للتفكير في حفظ تلك الملفات على جهاز المستخدم فسرعة الانترنت الحالية لم تعد مشكلة والصفحات يتم تحميلها بلمح البصر، وهذا الامر قد يكون فعلا منطيقا ولكن ان كنت مصرا على ان صفحة موقعك لا يتجاوز حجمها بضعة كيلو بايت فارجو ان تفحص الصفحة من خلال الرابط التالي. انا عن نفسي اكتشفت ان الصفحة الرئيسية لموقعي كانت بحجم 1.7 ميجا بايت (بما فيها الصور وملفات سي اس اس وجافا سكربت). تخيل معي انه في كل تنقل للمستخدم على موقعك سوف يقوم بتحميل 1.7 ميجا بايت، اي انه لو تصفح 10 صفحات على موقعك انه تقريبا يقوم بتحميل 17 ميجا بايت من البيانات.
ان كان بامكاننا تقليل هذا الحجم ، فلماذا لا نقوم بذلك؟!
يتفق خبراء تحسين مواقع الانترنت (SEO) على ان سرعة الموقع تعتبر عامل مهم وذات اثر ايجابي على الموقع ، ويتفقون ايضا انه كلما كان حجم الصفحة اقل كلما كان التحميل اسرع (مع عزل باقي العوامل المؤثرة) واذا وكنتيجة منطقية ان استطعنا تقليل حجم الصفحة مع الحفاظ على محتواها كما هو فاننا سوف نزيد من سرعة الموقع لدى المتصفحين وهذا ما سوف نقوم به من خلال استخدام Cache-Control.
كيف نقلل حجم البيانات التي يتم تبادلها مع المستخدم من خلال استخدام Cache-Control
ببساطة تعمل تعليمة Cache-Control بطريقة يفهمها متصفح الانترنت وخادم الويب معا ، وفيها يقوم خادم الويب باشعار متصفح الانترنت بانواع الملفات التي يجب عليه الاحتفاظ بها كنسخ مخباة لفترة زمنية معينة دون الحاجة لطلبها مرة اخرى من الخادم، فمثلا (ملفات الصور وملفات javascript وملفات css تعتبر ذات محتوى ثابت نسبيا) وبالتالي فهي لا تتغير كل يوم ولهذا فانه من الانسب ان نجعل متصفح المستخدم يحتفظ بنسخ مخباة منها على اجهزة المستخدمين وبالتالي نحقق هدفنا في تقليل حجم البيانات الذي يتم تبادله بين موقعنا وبين الزوار في كل مرة يتم طلب صفحة على موقعنا.
في خوادم الويب اباتشي (Apache) فانه يتم وضع تعليمة Cache-Control من خلال ملف .htaccess باستخدام سطر اوامر مشابة كالتالي (ولكن تريث واكمل قراءة قبل استخدام السطر)
1
| Cache-Control: max-age=2592000, public |
التعليمة السابقة تجعل المتصفح يحتفظ بنسخ مخباة من جميع الملفات في الموقع لمدة شهر (30 يوم) والتي تم التعبير عنها ف المتغير max-age مع ارفاق رقم بالثواني ليدل على الشهر (الشهر = 30 يوم ، اليوم 24 ساعة ، الساعة 60 دقيقة ، الدقيقة 60 ثانية = 2592000). ولكننا في الواقع لا نرغب للمتصفح بالاحتفاظ بنسخ مخباة من جميع المحتويات اذ ان بعض المحتويات قد تتبدل وتتعدل كمحتوى الصفحة الرئيسية وباقي صفحات الموقع. نحن فقط نرغب ان يتم الاحتفاظ بنسخ مخباة من ملفات الصور لمدة سنة ومن ملفات css ومن ملفات js فقط لمدة شهر ، لهذا فان التعليمة سوف تكون كالتالي:
1
2
3
4
5
6
7
8
9
10
11
| # سنة واحدة للصور من الامتدادات المذكورة في التعليمة<filesMatch ".(jpg|jpeg|png|gif|ico)$">Header set Cache-Control "max-age=31536000, public"Header append Vary: Accept-Encoding</filesMatch># شهر واحد لملفات السي اس اس والجافا سكربت<filesMatch ".(css|js)$">Header set Cache-Control "max-age=2628000, public"Header append Vary: Accept-Encoding</filesMatch> |
قد يتسائل البعض وهل يمكن الاحتفاظ بالملفات لمدة سنة على جهاز المستخدم؟ 
، ان المستخدم يمتلك الحرية في تفريغ مجلد النسخ المحفوظة على جهازة وذلك من خلال اعدادات المتصفح ومن ثم اختيار حذف النسخ المخباة (Delete Cache) لهذا لا داعي لهذا القلق تجاة هذا الامر.
، ان المستخدم يمتلك الحرية في تفريغ مجلد النسخ المحفوظة على جهازة وذلك من خلال اعدادات المتصفح ومن ثم اختيار حذف النسخ المخباة (Delete Cache) لهذا لا داعي لهذا القلق تجاة هذا الامر.
المحصلة: ان استخدام Cache-Control لحفظ نسخ مخباة عن الصور وعن ملفات جافا سكربت و سي اس اس سوف يزيد من سرعة تصفح الموقع بصورة ملحوظة خصوصا ان كان الموقع غنيا بالصور التي يكثر تكرارها في الموقع.
معلومة: تلعب كثير من الامور دورها في سرعة الموقع وقد يكون اهمها كفاءة الخادم الذي يستطيع الموقع ، وكافة البرمجيات التي يعمل الموقع بواسطتها.
على الهامش
في خوادم الاباتشي المبنية مع mod_expires يمكن استخدام تعليمات مشابهه لاستخدام Cache-Control ، مثال
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <IfModule mod_expires.c>ExpiresActive On#jpg احتفاظ بالصور لمدة سنةExpiresByType image/jpg "access 1 year"#jpg احتفاظ بالصور لمدة سنةExpiresByType image/jpeg "access 1 year"#gif احتفاظ بالصور لمدة سنةExpiresByType image/gif "access 1 year"#png احتفاظ بالصور لمدة سنةExpiresByType image/png "access 1 year"#css احتفاظ بالملفات لمدة شهرExpiresByType text/css "access 1 month"#pdf احتفاظ بالملفات لمدة شهرExpiresByType application/pdf "access 1 month"#js احتفاظ بالملفات لمدة شهرExpiresByType text/x-javascript "access 1 month"#swf احتفاظ بالملفات لمدة شهرExpiresByType application/x-shockwave-flash "access 1 month"#ico احتفاظ بالملفات لمدة سنةExpiresByType image/x-icon "access 1 year"</IfModule> |
ولكن استخدام Cache-Control يعتبر افضل لانه اسهل ويؤدي نفس الغرض.
ماذا لو كان خادم الويب هو nginx وليس apache
يتم استخدام التعليمة بالطريقة التالية
1
2
3
| location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {expires 365d;} |
لاحظ انه في التعليمة السابقة استخدام عبارة 365d للاشارة بالاحتفاظ بالملفات لمدة سنة ، وبالتالي يمكن تعديلها الى الرقم المناسب.
يمكنك استخدام اداة https://tools.pingdom.com في فحص صفحات موقعك والتاكد من ان Cache-Control يعمل لديك بشكل صحيح او لا.
0 تعليقات