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

تقدم مواقع الويب مثل GTMetrix و Google PageSpeed ​​Insights اقتراحات حول كيفية تحسين أداء موقع الويب الخاص بك. إذا كنت تقرأ هذا ، فأنت على الأقل تدرك أن كل موقع ويب لديه فرص لتحسين الأداء ، إما من خلال التحسينات اليدوية أو من خلال استخدام المكونات الإضافية مثل 10Web Booster.

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

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

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

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

في Google PageSpeed ​​Insights ، يبدو الاقتراح مشابهًا ويقدم معلومات مماثلة.

الاقتراحات متشابهة لأن GTMetrix و PageSpeed ​​Insights يستخدمان أداة Lighthouse لإطار عمل تحليل صفحات الويب الخاصين بهما. Lighthouse هي أداة مفتوحة المصدر تهدف إلى تحسين أداء الموقع ويمكن تشغيلها في العديد من التنسيقات المختلفة.

لنأخذ لحظة لتجديد المعلومات سريعًا لتذكير أنفسنا بكيفية قياس أداء موقع الويب من خلال مجموعة من المقاييس ، وأهمها أساسيات الويب الأساسية.

هنا ملخص:

• Largest Contentful Paint ( LCP ) - قياس الوقت الذي يستغرقه تحميل أكبر كائن في إطار عرض الصفحة.
• أول تأخير للإدخال ( FID ) - يقيس هذا استجابة موقع الويب. يقيس الوقت بين نقر المستخدم أو تفاعله مع الموقع واستجابة الموقع.
• إزاحة التخطيط التراكمي ( CLS ) - يقيس هذا مقدار تغير تخطيط الصفحة بشكل غير متوقع.

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

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

هناك بعض المكونات ، لذلك دعونا نناقشها بمزيد من التفصيل.

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

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

ما هي الأصول الثابتة؟

الأصول الثابتة هي ملفات. عندما نشير إلى الأصول الثابتة في هذه المقالة ، فإننا نشير إلى الملفات الفردية التي لا يُتوقع تغييرها قريبًا أو كثيرًا.

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

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

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

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

مقالات ذات صلة

كيفية مسح ذاكرة التخزين المؤقت WordPress بأمان وفعالية؟

ابحث عن أفضل مكون إضافي للتخزين المؤقت في WordPress من خلال أفضل 5 اختيارات

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

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

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

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

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

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

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

وفقًا لـ GTMetrix ، يمكن تخزين الأصل مؤقتًا إذا كان يفي بالمتطلبات التالية:

• إنه ملف خط أو CSS أو جافا سكريبت أو ملف وسائط.
• تقوم بإرجاع رمز حالة HTTP 200 أو 203 أو 206
• ليس لديها سياسة صريحة لعدم التخزين المؤقت

ما هي سياسة التخزين المؤقت؟

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

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

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

بعض المصطلحات الإضافية التي سيكون من الجيد فهمها قبل المضي قدمًا.

كيف تتأثر UX و SEO بسياسة ذاكرة التخزين المؤقت؟

ترتبط تجربة المستخدم (UX) وتحسين محرك البحث (SEO) معًا بإحكام. وفقًا لـ Google ، تُظهر الدراسات أن المستخدمين يهتمون باستجابة الموقع ، لذلك تصنف Google صفحات استجابة أعلى.

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

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

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

إصلاح يدويًا

إن تقديم الأصول الثابتة بسياسة ذاكرة تخزين مؤقت فعالة ليس إعدادًا خاصًا بـ WordPress ، يمكنك تعيينه يدويًا عن طريق تعديل ملف تكوين خوادم الويب أو استخدام مكون إضافي مثل استضافة 10Web Booster لضمان تكوين موقعك باستخدام إعدادات التخزين المؤقت المحسّنة.

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

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

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

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

مثال: تخزين أحد الأصول مؤقتًا لمدة سبعة أيام
Cache-Control: max-age=604800

مثال: يمكن تخزينها في ذاكرة تخزين مؤقت مشتركة لمدة تصل إلى سبعة أيام
Cache-Control: public, max-age=604800

مثال: يمكن تخزينها ، لكن يجب إعادة التحقق منها عند كل طلب
Cache-Control: no-cache

مثال: لا يمكن تخزينها مؤقتًا
Cache-Control: no-store

يعد رأس التحكم في ذاكرة التخزين المؤقت أحدث ويحتوي على المزيد من الخيارات ، ولكن في حالة عدم دعم التحكم في ذاكرة التخزين المؤقت ، ينجز رأس HTTP المنتهي الصلاحية نفس مهمة الرأس ويوجه إلى متى يكون الأصل صالحًا قبل الحاجة إلى إعادة التحقق من الصحة. (لاحظ أن توجيه max-age في رأس Cache-Control له الأسبقية على Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

تعديل تهيئة الخادم مباشرة

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

اباتشي

في خادم Apache HTTP ، يمكن إضافة المقتطف التالي إلى تعريف موقع أو ملف .htaccess.

يوضح هذا المقتطف ، أنه يقول أن أي أصل يتطابق فيه الامتداد مع .ico أو .pdf ، وما إلى ذلك ، سيكون له رأس Cache-Control المعين للأصل.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

مع Apache ، يمنحك العديد من مزودي الاستضافة خيار إضافة توجيهات إلى ملف htaccess. لاحظ أنه على الرغم من أن هذه طريقة سهلة للإضافة إلى تكوين الخادم ، إلا أن استخدام ملفات .htaccess يُعرف بأنه ينقل نتائج أداء سلبية على مستوى الخادم.

Nginx

في Nginx ، يمكن إضافة هذا المقتطف إلى كتلة الخادم.

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

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

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

الإصلاح باستخدام البرنامج المساعد WordPress

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

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

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

ما يجعل المكون الإضافي 10Web Booster هو الخيار الأفضل هنا هو أنه يقوم بكل هذا ويفعله تلقائيًا. لا تحتاج إلى إدارة أي تكوينات خادم أو ملفات .htaccess.

بدلاً من ذلك ، إذا كنت تستخدم 10Web Hosting ، فإنه يقوم تلقائيًا بتنفيذ التخزين المؤقت ولا داعي للقلق بشأن إضافة رؤوس للأصول الثابتة.

هل ما زلت لا تستطيع إصلاح المشكلة؟ جرب هاتين النصحتين

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

التحقق من الملفات مخبأ

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

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

في Chrome ، ضمن العرض والمطور ، حدد أدوات المطور:

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

قم بزيادة وقت التخزين المؤقت

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

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

خاتمة

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

تناولت هذه المقالة ماهية الأصول الثابتة ، وما هي رؤوس HTTP ، وبحثت في كيفية تمكين رؤوس التخزين المؤقت والتحقق منها.

لقد نظرنا في صواميل ومسامير تمكين الرؤوس يدويًا عن طريق تعديل تكوينات الخادم وكيف يمكننا تسهيل الأمر باستخدام مكون إضافي لبرنامج WordPress مثل 10Web Booster ، والاستفادة من تكامل 10Web مع Cloudflare للوصول إلى تعيين رؤوس HTTP للتحكم في ذاكرة التخزين المؤقت.

10Web Booster هو أكثر بكثير من مجرد مكون إضافي للتخزين المؤقت. يمكنك قراءة المزيد حول العديد من ميزات التخزين المؤقت وتحسين السرعة في مقالة 10Web Booster هذه .

التعليمات