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

من السمات المميزة لأي موقع ويب سهل الاستخدام أنه لا يجعل الزائرين ينتظرون وقتًا طويلاً أثناء التحميل. يُعد التخزين المؤقت للأصول الثابتة خطوة مهمة لتحسين أداء الموقع ، ولكن لا يساعد كثيرًا في إعداد هذا الأمر والمضي قدمًا. بدون سياسة التخزين المؤقت الفعالة في WordPress ، قد تواجه صعوبة في توفير أوقات تحميل سريعة.

لحسن الحظ ، فإن تعلم كيفية الاستفادة من التخزين المؤقت للمتصفح على WordPress أسهل مما تعتقد. يمكنك تكوين التخزين المؤقت للمستعرض يدويًا ، كما يمكّنك نظام إدارة المحتوى (CMS) من استخدام الأدوات التي تقوم بذلك نيابةً عنك.

في هذه المقالة ، سنشرح كيفية عمل التخزين المؤقت للمتصفح ومناقشة فوائده. سنوضح لك أيضًا كيفية التحقق مما إذا كان التخزين المؤقت ممكّنًا على موقعك وإلقاء نظرة على طرق مختلفة لتشغيله.

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

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

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

إذا كان عليك التحقق من ذاكرة التخزين المؤقت للمتصفح الآن ، فمن المحتمل أن تجد بضع مئات من الميغابايت من الملفات بداخلها. تمكّنك معظم المتصفحات الحديثة من رؤية نظرة عامة على الملفات المخزنة مؤقتًا إذا انتقلت إلى إعدادات الخصوصية.

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

ما هي فوائد التخزين المؤقت للأصول الثابتة؟

الفائدة الأساسية من التخزين المؤقت للمتصفح هي أنه يمكن أن يساعد الزائرين في تحميل الصفحات بشكل أسرع عند العودة إلى موقعك. نتحدث عن "الأصول الثابتة" لأنه لا يمكن تخزين كل عنصر مؤقتًا على موقع ويب.

الأصول الديناميكية هي عناصر تتغير في كل مرة تقوم فيها بتحميل صفحة. على سبيل المثال ، إذا قمت بتسجيل الدخول إلى تطبيق يعرض لك موجز نشر في الوقت الفعلي ، مثل Twitter أو Instagram ، فإن هذه الأصول تكون ديناميكية.

نظرًا لأنه يمكن تغيير الأصول الديناميكية بشكل متكرر ، فقد لا يخدم تخزينها مؤقتًا أي غرض. بعد كل شيء ، في المرة القادمة التي تقوم فيها بتسجيل الدخول إلى Twitter أو Instagram ، سترى منشورات جديدة تمامًا.

يوفر التخزين المؤقت أفضل النتائج الممكنة عندما يقتصر على الأصول الثابتة. تعلم كيفية خدمة الأصول الثابتة باستخدام سياسة ذاكرة التخزين المؤقت الفعالة في WordPress يمكن أن يكون له العديد من الفوائد:

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

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

كيفية التحقق من تمكين التخزين المؤقت للمتصفح على موقعك

أسهل طريقة للتحقق مما إذا كان موقع الويب يستفيد من التخزين المؤقت هو استخدام أدوات مطور المتصفح ، مثل تلك التي تجدها في Firefox و Google Chrome. يتطلب منك هذا الأسلوب إلقاء نظرة على بعض التعليمات البرمجية ، لكنك لست بحاجة إلى أن تكون مطورًا لفهمها.

للقيام بذلك في Google Chrome ، قم بزيارة موقع الويب الذي تريد التحقق منه ، وانقر بزر الماوس الأيمن في أي مكان على الصفحة ، وحدد الخيار فحص . سيؤدي هذا إلى فتح علامة تبويب أدوات المطور داخل المتصفح ، والتي يجب أن تبدو كما يلي:

انقر فوق علامة التبويب الشبكة . إذا رأيت قائمة فارغة ، فستحتاج إلى إعادة تحميل الصفحة مع فتح علامة تبويب أدوات المطور. ستعرض علامة التبويب "الشبكة" جميع الطلبات والأصول التي يقوم المتصفح بتحميلها أثناء الوصول إلى الصفحة.

يجب أن يكون العنصر الذي نهتم به هو الأول في القائمة. في حالتنا ، إنه Jetpack.com ، ويحتوي على رؤوس الصفحة. حدد هذا الملف ، وسيفتح علامة تبويب جديدة على اليمين ، ويقفز مباشرة إلى قسم الرؤوس .

ستخبرنا بعض الرؤوس ما إذا كان الموقع يستخدم التخزين المؤقت وكيف يتم تنفيذه. هؤلاء هم:

• التحكم في ذاكرة التخزين المؤقت. يحدد هذا الرأس توجيهات التخزين المؤقت ، مثل max-age (الحد الأقصى للوقت الذي يعتبر فيه المورد جديدًا) أو no-cache (يفرض على ذاكرات التخزين المؤقت إرسال الطلب إلى الخادم الأصلي للتحقق من صحته قبل إصدار نسخة مخبأة).
• تنتهي. يوفر هذا الرأس تاريخ انتهاء الصلاحية ووقته للمورد. بعد ذلك ، يعتبر المورد قديمًا ، وسيقوم المتصفح بإعادة التحقق منه.
• ETag. هذا الرأس هو معرف لإصدار معين من المورد. عندما يتغير المورد ، يتغير ETag أيضًا ، مما يسمح للمتصفحات بتحديد ما إذا كان المورد المخزن مؤقتًا لا يزال صالحًا.
• آخر تعديل. يشير هذا الرأس إلى تاريخ التعديل الأخير للمورد. يمكن للمتصفحات استخدام هذه المعلومات للتحقق مما إذا كانت النسخة المخزنة مؤقتًا لا تزال محدثة.

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

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

أسهل طريقة للاستفادة من التخزين المؤقت للمتصفح على موقع WordPress هي استخدام مكون إضافي. هناك الكثير من مكونات التخزين المؤقت التي يمكنك استخدامها. أحد الخيارات الرائعة هو WP Super Cache.

بمجرد تثبيت WP Super Cache وتنشيطه على موقعك ، يمكنك تنفيذ التخزين المؤقت باستخدام عدة طرق. إن أبسط طريقة هي الانتقال إلى الإعدادات → WP Super Cache وتحديد خيار Caching On بجوار Caching .

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

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

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

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

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

1. أضف رؤوس "Cache-Control" و "Expires" في NGINX

لإضافة رؤوس "Cache-Control" و "Expires" في NGINX ، ستحتاج إلى تعديل ملف تكوين الخادم. عادة ما يسمى هذا الملف nginx.conf ، وهو موجود في دليل nginx الرئيسي.

أسهل طريقة للاتصال بخادم موقعك هي استخدام عميل بروتوكول نقل الملفات (FTP). بعد ذلك ، ستحتاج إلى تحديد موقع ملف nginx.conf ، والذي يجب أن يكون في أيٍ منهما

/etc/nginx/nginx.conf أو / etc / nginx / sites-available / default .  

افتح الملف باستخدام محرر نصوص وابحث عن كتلة الخادم من التعليمات البرمجية داخل nginx.conf . هنا ، سنضيف الكتلة الجديدة التالية من التعليمات البرمجية ، والتي تحدد الملفات التي يجب على الخادم إخبار المتصفحات بالتخزين المؤقت لها والمدة التي يجب أن تستمر ذاكرة التخزين المؤقت قبل انتهاء صلاحيتها:

 location ~* \.(jpg|jpeg|png|gif)$ {    expires 30d;    add_header Cache-Control "public, no-transform"; }

يتضمن هذا الرمز كلاً من رأسي "Cache-Control" و "Expires". يمكنك تعديل كل من النطاق الزمني لانتهاء الصلاحية وأنواع الملفات التي يجب على المستعرضات تخزينها مؤقتًا.

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

بمجرد إضافة الرمز ، احفظ التغييرات في الملف واخرج من المحرر. ستحتاج إلى إعادة تشغيل NGINX لتطبيق التغييرات.

2. أضف رأسي "Cache-Control" و "Expires" في Apache

يتطلب استخدام رؤوس "Cache-Control" و "Expires" في Apache تمكين الوحدات النمطية المقابلة لها. يمكنك تمكين هذه الوحدات عن طريق فتح الجهاز وتشغيل الأوامر التالية:

 sudo a2enmod expires sudo a2enmod headers sudo systemctl restart apache2

سيقوم الأمر الأخير بإعادة تشغيل Apache مع تنشيط كلتا الوحدتين. بعد ذلك ، ستحتاج إلى تعديل ملف تكوين Apache ، والذي يُسمى عادةً إما httpd.conf أو apache2.conf .

يمكنك العثور على هذا الملف إما في /etc/httpd/conf/httpd.conf أو /etc/apache2/apache2.conf أو

/etc/apache2/sites-available/000-default.conf ، اعتمادًا على تكوين الخادم.

بعد ذلك ، ابحث عن كتلة <Directory> داخل ملف تكوين Apache وأضف الكود التالي بداخله:

 <IfModule mod_expires.c>    ExpiresActive On    ExpiresDefault "access plus 1 month"    ExpiresByType image/jpg "access plus 1 month"    ExpiresByType image/jpeg "access plus 1 month"    ExpiresByType image/gif "access plus 1 month"    ExpiresByType image/png "access plus 1 month" </IfModule> <IfModule mod_headers.c>    <FilesMatch "\.(jpg|jpeg|png|gif)$">        Header set Cache-Control "public, no-transform"    </FilesMatch> </IfModule>

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

عند الانتهاء ، احفظ التغييرات في ملف تكوين Apache وأغلقه. ستحتاج إلى إعادة تشغيل Apache حتى تصبح التغييرات سارية المفعول.

3. استخدم شبكة توصيل المحتوى (CDN)

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

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

Jetpack CDN هو خيار يتكامل بسلاسة مع WordPress ، وهو سهل الاستخدام وفعال للغاية.

أفضل ما في الأمر هو أنه شبكة CDN مجانية تخزن الصور وأنواعًا أخرى من الأصول الثابتة من موقع الويب الخاص بك. بمجرد تثبيته وتنشيطه ، يمكنك تمكين CDN من خلال الانتقال إلى Jetpack → Settings في لوحة معلومات WordPress.

بعد ذلك ، حدد موقع إعدادات الأداء والسرعة وقم بتبديل خيار تمكين مسرع الموقع .

4. استضافة البرامج النصية والأصول التابعة لجهات خارجية محليًا (كلما أمكن ذلك)

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

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

يمكنك تحديد البرامج النصية التابعة لجهات خارجية ، بالإضافة إلى JavaScript غير المستخدمة ، باستخدام PageSpeed ​​Insights. تسلط هذه الأداة الضوء على فرص تحسين أداء الموقع ، بما في ذلك قوائم التعليمات البرمجية غير المستخدمة والنصوص البرمجية لجهات خارجية التي يمكن إزالتها من صفحاتك.

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

الخطوة الأخيرة: قم بتثبيت مكون إضافي مجاني لتحسين Core Web Vitals

يعد تعلم كيفية الاستفادة من التخزين المؤقت للمتصفح في WordPress خطوة أساسية لتحسين أداء الموقع. لحسن الحظ ، ليس هذا هو الشيء الوحيد الذي يمكنك القيام به لتحسين تجربة المستخدم.

يقيس Google جودة تجربة مستخدم الموقع من خلال مجموعة من المقاييس تسمى Core Web Vitals. تشمل مقاييس الأداء الرئيسية ما يلي:

• أكبر طلاء محتوى (LCP). يقيس هذا المقياس المدة التي يستغرقها تحميل أكبر أصل في الصفحة. عادةً ما يكون مؤشرًا جيدًا لوقت التحميل الإجمالي للصفحة.
• أول تأخير في الإدخال (FID). هناك تأخير بين تحميل الصفحة وتصبح تفاعلية. قد تعتقد أن الصفحة قد تم تحميلها ، ولكن إذا لم تمكّنك من التفاعل مع عناصر مثل النماذج أو الروابط ، فقد تحتوي على FID مرتفع.
• التحول في التخطيط التراكمي (CLS) . أثناء تحميل الصفحة ، يمكن أن يتغير تخطيطها ، مما يؤدي إلى تحريك العناصر في المتصفح. كلما زاد عدد العناصر التي تتحرك حولها ، زادت درجة CLS. من الناحية المثالية ، يجب أن يكون هذا صفرًا.

هناك الكثير من الطرق لتحسين Core Web Vitals في WordPress. أسهل طريقة هي استخدام مكون إضافي يعمل على تحسين جميع المتغيرات الكامنة وراء هذه المقاييس.

يمكن أن يساعدك Jetpack Boost في تنفيذ العديد من الاستراتيجيات لتحسين Core Web Vitals. يمكنك تحسين تسليم CSS وتأجيل JavaScript غير الأساسية وتمكين التحميل البطيء.

عادة ، ستحتاج إلى استخدام مكونات إضافية متعددة لتنفيذ هذه التكوينات أو القيام بذلك يدويًا. بعد تثبيت وتفعيل Jetpack Boost ، يمكنك ببساطة تمكين كل إعداد من خلال الانتقال إلى Jetpack → Boost وتبديل الخيارات المقابلة.

الأسئلة المتداولة حول التخزين المؤقت لمتصفح WordPress

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

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

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

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

التخزين المؤقت للمتصفح مقابل التخزين المؤقت للخادم: كيف يختلفان؟

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

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

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

ما الذي يمكنني فعله أيضًا لتحسين أداء موقعي؟

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

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

ابدأ في تقديم الأصول الثابتة على موقع WordPress الخاص بك

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

أسهل طريقة لتنفيذ التخزين المؤقت للمستعرض في WordPress هي استخدام مكون إضافي مثل WP Super Cache. يمكّنك هذا المكون الإضافي من الاستفادة من التخزين المؤقت للمتصفح باستخدام مجموعة من التكوينات الافتراضية أو التحكم في كل إعداد يدويًا. بالإضافة إلى أنه مجاني للاستخدام.

بالإضافة إلى ذلك ، عند تثبيت Jetpack Boost ، يمكنك تحسين أداء موقعك بشكل أكبر. تحقق من البرنامج المساعد لمعرفة المزيد!