شرح إعدادات WP Rocket المثالية مع Cloudflare و CDN في 2023

هل أنت جاهز لتكوين أفضل إعدادات اضافة WP Rocket؟

إعدادات WP Rocket لم تتغير منذ وقت بعيد، بالنظر أنها أصدرت ميزة جديدة واحدة فقط بعد عام 2020 بحسب سجل التغيير الخاص بهم.

على الرغم من أن WP Rocket أصدرت ميزات جديدة محدودة جداً في العامين الماضيين، إلا أنها رفعت الأسعار. وعند مقارنتها بـ FlyingPress (ما أستخدمه) و LiteSpeed Cache، تخلفت WP Rocket عن الركب.

هنالك العديد من الأسباب التي أدت إلى تراجع كبير لإضافة WP Rocket في تحسين مؤشرات أداء الويب الأساسية، منها هذه القائمة السريعة:

• ليس لديهم ميزة لإستبعات وعمل Preload للصور الحرجة.
• ميزة Unused CSS تعمل على طباعة ملف Used-CSS بشكل مضمن “Inline”. هذا يضيف حجم كبير من أكواد CSS للصفحة ويؤدي لإبطاء TTFB ،FCP، و LCP.
• لا يمكنها إستضافة خطوط جوجل محلياً.
• RocketCDN هو سيئ جداً. لا يقوم بتحسين الصور وتحويلها الى WebP وهو يستخدم خوادم Stackpath البطيئة.
• حجم كود الإضافة أصبح ثقيل جداً (+3MB)، ومزاياها تستهلك CPU كبير.

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

يتجاوز هذا الدليل شرح WP Rocket وتكوين الاعدادات. أشرح كيف أن تعطيل “تحسين تحميل ملفات CSS” يمكن أن يصلح مشكلات متغيرات التصميم التراكمية (CLS)، وكيفية الجلب المسبق لطلبات DNS الخارجية، وتأخير تنفيذ جافا سكريبت، والتحميل المسبق للخطوط، ولماذا أوصي بـ Cloudflare أو BunnyCDN ولا أوصي ب RocketCDN.

إذا لم تكن قد اشتريت اضافة WP Rocket بعد، فسأكون ممتنًا لك باستخدام رابط الإحالة الخاص بي. كما أنني أستخدم هذه العمولات في استمرار تشغيل مدونتي. يمكنك الحصول على خصم 10% بالانتقال إلى صفحة القسائم الخاصة بهم، والاشتراك في قائمة بريدهم الإلكتروني، وسيقومون بإرسال قسيمة عبر البريد الإلكتروني.

حظا سعيداً – تذكر أن تقيس هذه النتائج في PageSpeed Insights!

شرح WP Rocket الإعدادات المثالية

1. لوحة التحكم

اترك خيار تحليلات الاضافة في وضع إيقاف التشغيل إلا إذا كنت تريد السماح لإضافة WP Rocket بجمع بياناتك بشكل مجهول مما يؤدي إلى انخفاض (صغير جدًا) في الأداء. أوصي بـ BunnyCDN أو Cloudflare بدلاً من RocketCDN/StackPath (موضح في قسم CDN). يمكنك مسح ذاكرة التخزين المؤقت أو إعادة إنشاء Critical CSS إذا أجريت تغييرات على التصميم/الاضافة.

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

2. التخزين المؤقت

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

التخزين المؤقت للأجهزة المحمولة – قم بتمكين التخزين المؤقت للأجهزة المحمولة ، لتسريع موقعك على الجوال. فقط قم بتمكين “إنشاء ملفات منفصلة للتخزين المؤقت للأجهزة المحمولة.” إذا كنت تستخدم إضافة لتصميم صفحات الجوال (مثل الإصدار المجاني من WP Touch و AMP).

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

Specify Time After Which The Global Cache Is Cleared – يعني الرقم الأقل أن ذاكرة التخزين المؤقت سيتم تحديثها بشكل متكرر، ولكنها تستهلك المزيد من الموارد. فيما يعني عمر ذاكرة التخزين المؤقت الأعلى أنه لن يتم تحديث ملف الكاش بشكل متكرر، ولكنه يحفظ الموارد. يعتمد ذلك كذلك على مدة نشرك للمقالات ففي حال كنت تنشر مقال واحد كل يومين، فأختر مدة 24 ساعة وهكذا.

3. تحسين الملفات

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

إذا كنت تخطط لاستخدام Perfmatters لإزالة CSS غير المستخدمة (وهي أسرع وأكثر موثوقية من WP Rocket)، فاترك جميع إعدادات CSS في وضع الإيقاف واستخدم فقط إعدادات JS.

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

Combine Files – ما إذا كان يجب عليك دمج ملفات CSS و JavaScript أمر قابل للنقاش. من ناحية، قد يؤدي ذلك إلى تحسين نتائج PageSpeed Insights. من ناحية أخرى، يمكن أن يؤدي في الواقع إلى إبطاء أو تعطل موقعك. في النقيب للمعلوماتية، نحن نوصي بعدم دمج ملفات JavaScripts لكل المواقع وذلك لأن دمج JS يسبب دائماً ارتفاع في وقت استجابة الخادم TTFB وابطاء موقعك.

استثناء ملفات CSS + JS – إذا كان خيار التصغير يسبب مشكلة في مضهر موقعك لسبب ما، حدد موقع الملف المسبب للمشكل وأضفه هنا. انظر شرح WP Rocket حول حل المشكلات في التصغير.

تحسين تحميل ملفات CSS: لا تفعله إذا كنت تستخدم Perfmatters لإزالة CSS غير المستخدمة. يتيح لك تحسين ملفات CSS و إزالة CSS غير المستخدمة بطريقتين:

Remove Unused CSS – حتى بعد تجديد WP Rocket هذه الميزة في 3.11، فإنه لا يزال يحمل CSS بشكل مضمن (Inline). في حين أن هذا أفضل لنتائج أدوات السرعة، إلا أنه أبطأ للمستخدمين الحقيقيين نظرًا لأنه لا يمكن تخزين الملف مؤقتًا ويزيد من حجم HTML. حتى وثائق Perfmatters تقول إن المضمنة أفضل لنتائج PageSpeed بينما يكون “الملف المنفصل” أفضل للأداء الملحوظ. يقوم كل من FlyingPress و Perfmatters و LiteSpeed Cache بتحميل ملفات CSS المستخدمة في ملف خارجي، بينما WP Rocket هو المكون الإضافي الوحيد لذاكرة التخزين المؤقت الذي يقوم بتحميله بشكل مضمّن.

CSS safelist – يمكنك إدخال ملفات CSS (أو فئات CSS أو المعرفات) التي لا تريد إزالتها. مفيد في حال كان هناك بعض ملفات CSS الضرورية والتي يتم حذفها بواسطة هذه الميزة. يمكنك إستبعاد ملف كامل او CSS Class أو ID بشكل بسيط جداً.

Load CSS Asynchronously – إذا كان إزالة CSS غير المستخدم في WP Rocket يسبب تعطيل موقعك، فقم بتحميل CSS بشكل غير متزامن (لكنه لن يمنحك نتائج جيدة). اتبع هذه الخطوات للتأكد من أنها تعمل بشكل صحيح، واختبر النتائج باستخدام هذا الإعداد وإيقاف تشغيله لمعرفة ما إذا كان له تأثير إيجابي.

1. تفعيل تحسين تحميل ملفات CSS.
2. قم بمسح موقع الويب الخاص بك باستخدام critical CSS generator.
3. انسخ الكود وألصقه في اضافة WP Rocket حقل (Fallback critical CSS).
4. استبعاد الملفات ذات المشكلات من تحسين تحميل CSS باستخدام الإضافة المساعدة ل WP Rocket.

Load JavaScript Deferred – يقوم بتحميل JavaScript بعد انتهاء تحليل الصفحة. إنها إحدى أفضل الطرق للتخلص من موارد حظر العرض (في PSI).

Delay JavaScript Execution – يؤخر تحميل JavaScript حتى تفاعل المستخدم (مثل التمرير أو لمس الشاشة على الهاتف المحمول). إذا أدى هذا إلى كسر موقع الويب الخاص بك، فراجع استثناءات التوافق الخاصة بـ WP Rocket واستبعد أي مكونات إضافية/قوالب/خدمات من التأخير.

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

تعرف على المزيد حول ميزة تأخير JavaScript الجديدة من خلال قراءة شرح WP Rocket الرسمي.

بينما يقوم WP Rocket بتأخير التحميل حتى تفاعل المستخدم، فإن Flying Scripts مشابه ولكنه ينشئ فترة مهلة (بالثواني) حتى يتم تحميل JavaScript. يمكنك اختبار كل منها بنفسك. يتطلب الأمر بعض الاختبارات، لكن تأخير ملفات JavaScript الثقيلة مثل التعليقات أو Gravatars أو أزرار المشاركة يمكن أن يحسن وقت التحميل بشكل كبير.

يجب أن يكون لتأخير ملفات JavaScript هذا تأثير مباشر على مقياسي مؤشرات أداء الويب الأساسية (Core Web Vitals) المذكورين: LCP (أداء التحميل) و FID (التفاعلية) فيما يتعلق بتوصيات Google حول “الحد من محتوى JavaScript غير المستخدم” – “استبعاد موارد حظر العرض” و “تقليل تنفيذ JavaScript”

Media .4

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

لا يمكن لـ WP Rocket التحميل البطيء لصور الخلفية في CSS. لا يوجد أيضًا حل بسيط لاستبعاد الصور في الجزء المرئي من التحميل البطيء إلى جانب استخدام الإضافات المساعدة أو استبعاد أسماء/سمات الفئات. لا يمكنه أيضًا تحميل الصور مسبقًا. إذا كنت تخطط لاستخدام Perfmatters للتحميل البطيء (وهو ما يفعل كل ذلك)، فاترك الإعدادات في WP Rocket.

التحميل الكسول – يؤخر تحميل الصور، و iframes، ومقاطع الفيديو حتى تقوم بالتمرير لأسفل الصفحة وتصبح مرئية. هذا يقلل بشكل كبير من أوقات التحميل الأولية وطلبات HTTP. لن تتمكن WP Rocket من التحميل الكسول لصور الخلفية نظرًا لأنه يتم تحميلها من CSS، مما يؤدي إلى أخطاء Defer offscreen images. بعد قولي هذا، لديك بعض الخيارات:

• يقوم Perfmatters بتحميل صور الخلفية ل CSS بشكل كسول (استخدم أيضًا مُعرف perfmatters-lazy-css-bg).
• يمكن لـ GeneratePress الآن تضمين صور الخلفية في هذه الحالة، سيتم تحميلها بشكل كسول.
• يقوم Optimole بتحميلها بشكل كسول باستخدام محددات CSS (ستستخدم Chrome Dev Tools للعثور عليها).
• أضف فئة lazy-bg الخاصة بك – أو قم بالتبديل إلى FlyingPress الذي يحتوي بالفعل على هذه الفئة مضمنة.

Exclude Images Or Iframes – من غير المنطقي أن يتم التحميل البطيء للصور والإطارات المرئية حيث يراها الزوار على الفور. يمكن لـ WP Rocket استبعاد الصور يدوياً بحسب عنوان URL أو الفئة أو السمة أو:

• يمكن لإضافة Perfmatters تحميل الصور المهمة مسبقًا بشكل تلقائي حيث تحدد عدد الصور التي يتم تحميلها عادةً في الجزء المرئي من الصفحة (أي 2-3) بحيث يتم استبعادها من التحميل البطيء + التحميل المسبق تلقائيًا.
• هناك عدد قليل من المكونات الإضافية لتحميل الصور أو الصور المميزة أو صور المنتج مسبقًا.

Add Missing Image Dimensions – سيضيف WP Rocket خصائص العرض والارتفاع المفقودة إلى صور HTML والتي يجب أن تحدد “use explicit width and height on image elements” في PageSpeed Insights.

لا تقوم WP Rocket + RocketCDN بضغط الصور أو استخدام WebP أو تغيير حجمها للجوال. راجع قسم تحسين الصورة للحصول على بدائل أفضل من Imagify.

5. التحميل المسبق

قم بتنشيط التحميل المسبق، ثم التحميل المسبق للروابط (preload links) التي تقوم بتحميل الصفحة في الخلفية عندما يحوم المستخدمون فوق أحد الروابط. تعد ميزة الجلب المسبق لنظام أسماء النطاقات والتحميل المسبق للخطوط أنواعًا من تلميحات موارد المستعرض. يتم إجراء الجلب المسبق باستخدام العناصر الموجودة في تقليل تأثير رمز الجهات الخارجية في تقرير PageSpeed Insights.

التحميل المسبق – يطلب من المتصفحات أن تبدأ في جلب الموارد التي ستكون مطلوبة قريبًا.

Preload Links – وفقًا لمقالة WP Rocket ، فإنه إذا قام المستخدم بالتمرير فوق ارتباط أو لمسه لمدة 100 مللي ثانية أو أكثر، فسيتم جلب HTML لتلك الصفحة في الخلفية، بحيث عندما ينقرون بالفعل على الرابط، ستظهر الصفحة وكأنها يتم تحميلها على الفور تقريبًا.

Prefetch DNS Requests – انظر إلى تقرير رمز الجهة الخارجية في Lighthouse. يمكن أن تكون هذه خطوط جوجل أو Tag Manager أو AdSense أو YouTube أو حتى أزرار Facebook/Twitter أو الودجات.

احصل على كل عناوين URL هذه من تقريرك والصقها في قسم Prefetch DNS Requests في اضافة WP Rocket. سيساعد هذا المتصفحات على توقع تلك الطلبات الخارجية وتحميلها بشكل أسرع.

Preload Fonts – لست بحاجة إلى القيام بأي شيء هنا إذا كانت إزالة CSS غير المستخدمة قيد التشغيل لأن WP Rocket سيعمل على تحميل الخطوط مسبقًا بشكل تلقائي. إذا لم يكن قيد التشغيل، فستحتاج إلى تحميل الخطوط يدويًا مسبقًا. يمكن تحميل الخطوط المستضافة محلياً فقط مسبقًا (الخطوط التي يتم تقديمها من موقعك، وليس fonts.gstatic.com).

انسخ ملفات الخطوط من GTmetrix Waterfall (لديهم علامة تبويب لملفات الخطوط) والصقها في حقل خطوط التحميل المسبق في اضافة WP Rocket.

6. الاعدادات المتقدمة

الاعدادات المتقدمة مخصصة بشكل أساسي لمواقع التجارة الإلكترونية، ولكن WP Rocket متوافق بالفعل مع معظم الحلول مثل WooCommerce و BigCommerce. ولكن إذا كنت تواجه مشكلات مع أدوات سلة التسوق أو التخزين المؤقت أو أي شيء متعلق بالتجارة الإلكترونية، فإن WP Rocket لديها وثائق لذلك.

خلاف ذلك، اترك هذا فارغًا.

Never Cache URLs – إذا كنت تستخدم عربة تسوق للتجارة الإلكترونية غير مدعومة من اضافة WP Rocket، فقم بإضافة صفحات عربة التسوق والدفع هنا والتي ستستبعد هذه الصفحات من الكاش.

Never Cache Cookies – نفس مبدأ الخيار السابق والذي يعتمد فقط على ملفات تعريف الارتباط.

Never Cache User Agents – منع Googlebot أو وكلاء المستخدم الآخرين من تخزين الصفحات في ذاكرة التخزين المؤقت.

Always Purge URLs – لنفترض أن لديك قائمة مقالات على صفحتك الرئيسية. إذا قمت بإنشاء مقال جديد، فأنت تريد تحديث قائمة المقالات بالصفحة الرئيسية على الفور عن طريق إفراغ ذاكرة التخزين المؤقت للصفحة الرئيسية. هذا ما يفعله هذا الإعداد، ومع ذلك، يقوم WP Rocket تلقائيًا بمسح ذاكرة التخزين المؤقت لصفحتك الرئيسية والفئات والعلامات بمجرد إنشاء محتوى جديد… لذلك لا داعي لهذا عادةً. ولكن إذا كانت هناك ذاكرة تخزين مؤقت لصفحة أخرى تريد مسحها عند نشر محتوى جديد، فأضفها.

Cache Query Strings – تُستخدم بشكل أساسي لتخزين صفحات نتائج البحث + عوامل تصفية الأسعار في التجارة الإلكترونية.

7. قاعدة البيانات

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

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

احذف جداول الإضافات غير المستخدمة (ليس مع WP Rocket) – هناك شيء واحد لا يفعله WP Rocket هو السماح لك بالاطلاع على جداول قاعدة البيانات الفردية وحذف الجداول التي خلفتها الإضافات القديمة التي لم تعد مثبتة. أوصي بتثبيت WP-Optimize وتصفح الجداول الخاصة بك بين الحين والآخر، خاصة إذا قمت بحذف الاضافات (بالإضافة إلى أنها تظهر لك الحجم الفعلي للجداول). الجداول التي تقول “غير مثبتة” هي تلك التي تركتها المكونات الإضافية القديمة غير المثبتة.

8. شبكة توصيل المحتوى CDN

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

ما هي أفضل شبكة CDN؟

• BunnyCDN – موصى به بشدة في مجموعات متعددة على فيسبوك. يستخدم CDN عالي الأداء. تتطلب التعليمات إنشاء pull zone ثم نسخ/لصق عنوان CDN في اضافة WP Rocket. أو فقط استخدم اضافة BunnyCDN. إذا كنت تريد تحسين الصور وتحويلها الى WebP فسيتعين عليك الاشتراك في خدمة Bunny Optimizer كذلك والتي سعرها 9.5$/شهر.
• FlyingCDN – تستخدم خوادم BunnyCDN مع خدمة Bunny Optimizer لتحسين الصور وتحويلها الى WebP. سعر الاشتراك هو فقط 3$/شهر/100GB، بينما لو اشتركت بنفس الخدمة من موقع BunnyCDN فسيكون سعرها 9.5$/شهر.
• Cloudflare – أكبر شركة CDN مع +200 مركز بيانات حول العالم، ولكن لا يقدم ميزات تحسين الصور في الاشتراك المجاني وتحتاج إلى Cloudflare Pro الذي يكون سهره 25$/شهر. هم الشركة الوحيدة التي تقدم خدمة Full HTML Cache والتي يسموها APO وهي متوافقة 100% مع WP Rocket. إذا كنت تخطط لشراء APO بسعر 5$/شهر فسيكون كلاود فلير هو الخيار الأفضل لك للسرعة.
• RocketCDN – شبكة CDN مدفوعة، أسهل في الإعداد من خلال WP Rocket، تستخدم مراكز بيانات StackPath، لكن RocketCDN لا تعمل دائمًا بشكل جيد ويمكنها بالفعل زيادة TTFB.
• تحقق من مراكز البيانات الخاصة بهم – تمتلك شبكات CDN مراكز بيانات في جميع أنحاء العالم. إذا كان لدى أحدهم مراكز بيانات مركزة بشكل كبير في المنطقة التي تريدها، فهذا شيء يستحق التفكير فيه.

علامة التبويب CDN مخصصة لـ RocketCDN و BunnyCDN/FlyingCDN و شبكات CDN التي تستخدم عنوان URL لـ CDN. إنه ليس لكلاود فلير الذي يتطلب تغيير خوادم الأسماء ثم استخدام علامة التبويب Cloudflare.

إليك كيفية إعداد شبكة BunnyCDN + Bunny Optimizer مع WP Rocket من خلال هذا الفيديو:

بعد التسجيل في شبكة CDN، الصق عنوان URL لـ CDN في حقل CDN CNAME الخاص بـ WP Rocket.

• Exclude Files From CDN – يتيح لك عرض الملفات محليًا بدلاً من CDN. عادة، تأتي هذه الملفات من المكونات الإضافية المصممة لتجاهل تحميل النطاق. في معظم الحالات، ليست هناك حاجة لإستبعاد أي شيء.

Heartbeat .9

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

10. اضافات

إذا كنت تستخدم أيًا من هذه الخدمات، فعليك تنشيطها كميزة إضافية.

إذا كنت تستخدم اضافة WebP أو خدمة خارجية لعرض الصور بصيغة WebP، مثل Bunny Optimizer أو Cloudflare Polish، فسيعرض بشكل عام صور WebP بالفعل ولا تحتاج الى تفعيل WebP Compatibility هنا.

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

WebP Caching – اتركه معطل. لا يقوم WP Rocket بإنشاء صور WebP (يمكن أن يعرضها فقط) وفي هذه الحالة ستفعل اضافة WebP هذا بالفعل. سيؤدي استخدام صور WebP إلى إصلاح مشكلة عرض الصور بتنسيقات الجيل القادم في PSI. يمكن إنشاؤها باستخدام مكونات إضافية مثل ShortPixel أو WebP Converter For Media. أنا أستخدم Cloudflare Polish لضغط وتحويل صور موقعي إلى صيغة WebP.

Cloudflare – فعلهُ إذا كنت تستخدم كلاود فلير.

Sucuri Cache – مكنها في حالة استخدامك Sucuri. يؤدي هذا تلقائيًا إلى مسح ذاكرة التخزين المؤقت لـ Sucuri عندما تمسح ذاكرة التخزين المؤقت لـ WP Rocket مما يساعد في الحفاظ على مزامنة المحتوى الخاص بك. بالنسبة لمفتاح API لجدار حماية Sucuri، قم بتسجيل الدخول إلى Sucuri هنا ، وحدد موقع الويب الخاص بك، وانتقل إلى علامة التبويب API، ثم انسخ مفتاح واجهة برمجة التطبيقات (For Plugin) والصقه في اضافة WP Rocket عند توسيع حقل Sucuri.

11. Cloudflare

هذا القسم فقط إذا كنت تستخدم Cloudflare بدلاً من CDN آخر.

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

قم بالتسجيل في كلاودفلير بإتباع الشرح في مقالتنا السابقة: شرح إعدادات كلاود فلير المثالية أو من خلال مشاهدة الفيديو أدناه. بعد التسجيل في كلاودفلير إتبع الخطوات في إدناه لضبط أفضل اعدادات التوافق بين اضافة WP Rocket و Cloudflare.

بعد قيامك بالتسجيل أضف معلومات كلاود فلير إلى WP Rocket.

يمكنك العثور على مفتاح API العام و Zone ID في لوحة معلومات Cloudflare.

• Global API Key – موجود في لوحة حسابي لموقع Cloudflare.
• البريد الإلكتروني للحساب – نفس البريد الإلكتروني الذي استخدمته للتسجيل في Cloudflare.
• Zone ID – موجود في لوحة معلومات Cloudflare.
• Optimal Settings – ينشط إعدادات Cloudflare المثلى: التصغير والتخزين المؤقت القوي وإلغاء تنشيط Rocket Loader لتحقيق توافق أفضل.
• Relative Protocol – في بعض الأحيان إذا قام الأشخاص بتنزيل الملفات من موقعك، فلا توجد محتويات فيها. سيؤدي ترك هذا الخيار “إيقاف” إلى منع حدوث ذلك.
• مسح ملفات التخزين المؤقت لكلاودفلير – افعل ذلك بعد الانتهاء من إعدادات WP Rocket.

ضبط لوحة Cloudflare – قم بتسجيل الدخول إلى لوحة التحكم الخاصة بك. هناك بعض الأشياء التي ينبغي القيام بها لجعل كلاودفلير يسرع موقعك لأقصى حد.

• تمكين Brotli (إعدادات السرعة)
• تعطيل Rocket Loader (إعدادات السرعة)
• تمكين حماية Hotlink (إعدادات Scrape Shield)
• إعداد أفضل قواعد الصفحة لووردبريس (إعدادات قواعد الصفحة، أدناه هي الثلاثة التي أوصي بها)

قاعدة الصفحة1: تخزين كل شيء مؤقتًا وإجبار HTTPS – تخزين موقع الويب الخاص بك مؤقتًا بشكل قوي.

ملاحظة: إذا كنت تخطط لإستخدام APO فلا تضيف قاعدة الصفحة هذه.

http://*yourwebsite.com/*

قاعدة الصفحة2: تأمين لوحة تحكم ووردبريس وإستبعاد الكاش للأدمن – يعيّن مستوى أمان المسؤول إلى مرتفع ويتجاوز ذاكرة التخزين المؤقت لـ Cloudflare في صفحات المسؤول، نظرًا لأنك لا تريد تشغيل شبكات CDN (أو تطبيقات + ميزات الأداء مثل Rocket Loader) داخل المسؤول.

yourwebsite.com/wp-admin*

قاعدة الصفحة3: تقليل النطاق الترددي لعمليات تحميل WP – نظرًا لأن المحتوى الموجود في مجلد تحميلات WP لا يتغير بشكل متكرر، فإن زيادة مدة بقاء ذاكرة التخزين المؤقت لـ Edge إلى شهر يمكن أن توفر على النطاق الترددي (الباندوث)، نظرًا لأن ذاكرة التخزين المؤقت لمجلد WP Uploads لن يتم تحديثه كثيرًا.

yourwebsite.com/wp-content/uploads*

Cloudflare APO – يمكنك إعداد APO باستخدام إضافة Cloudflare، وهي متوافقة 100% مع WP Rocket. بعد إعداد الإضافة، سيقوم WPRocket بتفعيل ربط كلاود فلير تلقائياً لضمان التوافقية. هل يستحق APO تكلفة 5$ شهريًا؟ نعم بكل تأكيد… اختبر موقعك في أداة فحص KeyCDN وأجري اختبارًا معياريًا قبل/بعد APO لترى ذلك بنفسك. يخزن HTML مؤقتًا ويجب أن ترى تحسنًا كبيراً في TTFB.

فيما يلي فيديو من قناتي يشرح كيفية إعداد Cloudflare APO:

12. Image Optimization

يوصي WP Rocket بـ Imagify لأنه المكون الإضافي الخاص بهم.

ولكن حتى عند تحديد ضغط lossless، فهو بالتأكيد ليس lossless ولا حتى ShortPixel أيضًا. لقد استخدمت كلاهما لعدة أشهر وبعدما تحولت إلى Bunny Optimizer كنت سعيد جدًا به.

الآن انا استخدم Cloudflare Pro لتحسين الصور، ولكنني أستخدمت Bunny وكنت جداً سعيد بالأداء والجودة وأنصحكم به وبشدة. أنا أستخدم اشتراك Pro في كلاود فلير لضرورات أخرى ليس موضوع الصور فحسب!

13. أدوات

قم باستيراد أو تصدير إعدادات WP Rocket، أو التراجع إلى الإصدار السابق.

إستخراج الاعدادات – تصدير إعداداتك لاستخدامها في مواقع متعددة.

استيراد الإعدادات – استيراد الإعدادات التي تم تكوينها مسبقًا هنا.

التراجع عن التحديث – إذا قمت بالتحديث إلى إصدار جديد من اضافة WP Rocket وتسبب في حدوث مشكلات، فسيعيدك ذلك إلى الإصدار السابق.

14. فيديو تعليمي: شرح WP Rocket مع Cloudflare وشبكات CDN

فيما يلي فيديو من قناتي لشرح إعدادات WP Rocket المثالية مع CDN، في حال كنت تفضل مشاهدة فيديو بدلاً من الشرح المكتوب.

15. الإضافات التي ستحتاجها مع WP Rocket

هذه هي مجموعة الإضافات التي ستحتاج إلى تنصيبها مع WP Rocket في حال كنت تريد إجتياز مؤشرات أداء الويب الأساسية:

• Perfmatters – قم بإزالة الخدمات غير الضرورية وتحسين الصور بشكل أفضل عندما يتعلق الأمر بالتحميل المسبق وصور الخلفية وإزالة CSS غير المستخدمة بشكل أسرع ومدير البرنامج النصي لإلغاء تحميل CSS/JS. في حالة عدم رغبتك في الدفع مقابل ذلك، يمكنك تجربة المكونات الإضافية مثل Preload Images و Clearfy.
• Optimole – تحسينات أكثر من Imagify و ShortPixel، لكن شبكات CDN للصور أفضل (BunnyCDN أو FlyingCDN أو Cloudflare Pro).
• ShortPixel Adaptive Images – إذا كنت تستخدم ShortPixel، فهذا ضروري لتغيير حجم الصور للجوال، واستخدام CDN الخاص بـ ShortPixel، والميزات الأخرى المدرجة في صفحة المكون الإضافي.
• Cloudflare أو BunnyCDN – بافتراض أنك لا تستخدم RocketCDN، فمن المحتمل أنك ستستخدم Cloudflare أو BunnyCDN (أو كليهما) اللذين يمتلك كل منهما المكون الإضافي الخاص به.
• استبعد صور LCP من Lazy Load – يستبعد المكون الإضافي المساعد الخاص بهم عددًا محددًا من الصور الموجودة فوق الجزء المرئي من التحميل البطيء للحصول على LCP أفضل، بدلاً من استبعادها يدويًا.
• Redis Plugin – بينما تحتوي المكونات الإضافية الأخرى مثل LiteSpeed Cache على خيار لتوصيل Redis، فإن WP Rocket لا يتوفر، لذلك ستحتاج إلى تثبيت مكون إضافي منفصل. تتمثل الخطوة الأولى في تمكينه في حساب الاستضافة الخاص بك، وتنزيل إضافة Redis، ثم استخدمه للاتصال. يدعم معظم المضيفين Redis أو Memcached أو كليهما (يتمتع Redis بمزايا أكثر).

16. الإستضافة التي أوصي بها للسرعة: NakibVPS

يخفق فحص PageSpeed Insights الخاص بك عندما يتجاوز TTFB (وقت استجابة الخادم) 600ms.

كنت من عشاق Cloudways ولكن منذ أن أعلنت DigitalOcean عن شراء Cloudways مقابل مبلغ $350M أصبحت شركة ذات طابع ربحي وقامو بحذف سيرفرات Vultr و Linode وتقديم فقط DigitalOcean، بالإضافة الى تراجع فريق الدعم وإعادة تصميم الموقع بشكل أكثر تعقيداً.

تقدم Rocket.net خدمة Cloudflare Enterprise مع APO و Argo مجاناً مع كل خطة، وهذا يسمح لهم بفتح جميع الموارد للعملاء (يقدمون 32CPU + 128GB RAM بدون قيود). ولكن أسعارهم مرتفعة للغاية بالنظر لمن سيُنشئ موقع جديد للتو ولا يوفرون لوحة تحكم سهلة مثل cPanel.

بعد سنين من الترويج لهذه الشركات التي تفتقر أحياناً لمزايا السرعة، قمت بتأسيس شركة الإستضافة الخاصّة بي، NakibVPS لهدف واحد فقط وهو “تقديم أسرع إستضافة ووردبريس ممكنة”، والحمدلله فقد لاقت الخدمة رواجاً كبيراً بشكل سريع وهذا ينعكس في تقييمات TrustPilot الأخيرة.

أنا أستخدم استضافة NakibVPS مع اشتراك Cloudflare APO (سعرهُ 5$/شهر) ويمكنك تصفح مدونتي لمعرفة مدى سرعة تحميلها. في كل اختبار PageSpeed Insights تقريبًا، يكون TTFB أقل من 200ms.

لقد قمت بالترحيل من Cloudways إلى NakibVPS وإليك ما الذي حصل:

انخفضت أوقات التحميل بشكل ملحوظ وخاصةً صفحات المقالات وهذا بفضل سيرفر NakibVPS Cloud و Cloudflare APO.

إذاً… كيف هي نتائج Gtmetrix/PSI الآن؟ اسمحوا لي أن أعرف في التعليقات أو أخبرني إذا كنت عالقًا. لقد اشتريت أيضًا مكوّنًا إضافيًا متميزًا حيث يقدمون الدعم، لذلك يمكنك استخدام ذلك لمصلحتك أيضًا، أو أنظر الى وثائقهم.

شاهد أيضاً: كيف قمت بتسريع موقعي البطيء إلى 100% في GTmetrix و PageSpeed Insights

إذا وجدت أن شرح WP Rocket هذا مفيداً، فستكون المشاركة دائمًا موضع تقدير :)