تسريع موقع ووردبريس العربي: كيف تحسن مؤشرات Core Web Vitals والخطوط والكاش

This article is available in English — Read in English

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

إزاي جوجل بتقيس السرعة: مؤشرات Core Web Vitals

جوجل تقيس تجربة المستخدم الحقيقية بثلاثة مؤشرات اسمها مؤشرات أداء الويب الأساسية (Core Web Vitals). وبحسب موقع web.dev، هذه هي الحدود لتجربة «جيدة»:

المؤشر	ماذا يقيس	جيد	ضعيف
LCP (أكبر عرض للمحتوى)	سرعة ظهور المحتوى الرئيسي	2.5 ثانية أو أقل	أكثر من 4 ثوان
INP (التفاعل حتى العرض التالي)	سرعة استجابة الصفحة للمس والنقر	200 ملي ثانية أو أقل	أكثر من 500 ملي ثانية
CLS (إزاحة التصميم التراكمية)	مقدار تحرك عناصر الصفحة أثناء التحميل	0.1 أو أقل	أكثر من 0.25

وتوصي جوجل بقياس هذه المؤشرات عند الشريحة 75 من الزيارات الحقيقية، مع فصل الموبايل عن الكمبيوتر. ومؤشر INP حل محل المؤشر القديم FID ضمن المؤشرات الأساسية في مارس 2024، وهو غالبا الأصعب على المواقع المليانة سكربتات.

عشان تعرف أرقامك، استخدم PageSpeed Insights لصفحة واحدة، وتقرير مؤشرات أداء الويب الأساسية في Google Search Console للموقع كله. الاختبارات المعملية مفيدة لاكتشاف المشاكل، لكن بيانات المستخدمين الحقيقيين هي اللي تقول لك تجربة زوارك الفعلية.

إزاي تقرأ تقرير PageSpeed Insights

لما تدخل رابط صفحتك في الأداة، ستجد جزأين مختلفين، وناس كثيرة تخلط بينهما:

• الجزء الأول: تجربة المستخدمين الحقيقيين. يظهر لو صفحتك أو موقعك عنده زيارات كافية، ويعرض مؤشرات LCP وINP وCLS من زيارات فعلية خلال آخر فترة. ده الجزء اللي يهمك أكثر.
• الجزء الثاني: التشخيص المعملي. اختبار محاكاة على جهاز وشبكة افتراضيين، ويعطيك درجة من 100 مع قائمة اقتراحات. مفيد جدا لمعرفة أسباب البطء، لكن الدرجة نفسها ليست الهدف.

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

ليه المواقع العربية عندها تحديات سرعة إضافية؟

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

خطوات تسريع موقع ووردبريس العربي

1. ابدأ باستضافة جيدة قريبة من جمهورك

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

2. فعل كاش الصفحات

من غير كاش، ووردبريس يبني كل صفحة من الصفر بكود PHP واستعلامات قاعدة بيانات مع كل زيارة. كاش الصفحات يحفظ نسخة HTML جاهزة ويقدمها فورا. استضافات كثيرة توفر كاشا على مستوى السيرفر، ولو استضافتك لا توفره، فإضافة كاش موثوقة تؤدي المهمة. وفي المواقع الديناميكية زي متاجر ووكومرس، أضف كاشا دائما للكائنات (Object Cache) مثل Redis لو الاستضافة تدعمه، وتأكد أن صفحات السلة والدفع والحساب مستبعدة من كاش الصفحات.

3. تعامل مع الخطوط العربية بحرص

الخطوط هي المكان اللي المواقع العربية تقدر تكسب فيه أكبر فرق في أسرع وقت:

• قلل عدد الخطوط والأوزان. عائلة عربية واحدة بوزنين، عادي وعريض، تكفي أغلب المواقع.
• استخدم صيغة WOFF2، فهي مضغوطة ومدعومة في المتصفحات الحديثة.
• استضف الخطوط على نطاقك لما تقدر، حتى لا يحتاج المتصفح اتصالات إضافية بسيرفر خارجي.
• قلص الخط للحروف اللي تحتاجها فعلا، واستخدم unicode-range حتى لا يتحمل الخط اللاتيني إلا مع النص اللاتيني.
• استخدم font-display: swap حتى يظهر النص فورا بخط بديل، واختر خطا بديلا قريب المقاسات لتقليل القفزة.
• اعمل preload لخط واحد فقط، المستخدم في العنوان الرئيسي أو النص أعلى الصفحة. تحميل كل الخطوط مسبقا يبطئ الصفحة بدل ما يسرعها.

4. حسن الصور، وبالذات صورة LCP

• قدم الصور بصيغ حديثة مثل WebP أو AVIF، وووردبريس يدعمها في مكتبة الوسائط.
• ارفع الصور بالمقاس اللي بتظهر به فعلا، مش مباشرة من الكاميرا.
• ووردبريس يؤجل تحميل الصور تلقائيا (Lazy Loading)، وده كويس للصور اللي تحت في الصفحة. لكن تأكد أن الصورة الرئيسية أعلى الصفحة، وهي غالبا عنصر LCP، لا يتأجل تحميلها.
• اعط كل صورة عرضا وارتفاعا محددين، حتى يحجز المتصفح مكانها ولا يتحرك التصميم.

5. خفف الجافاسكربت

السكربتات الثقيلة هي العدو الأول لمؤشر INP. راجع ما يتحمل في كل صفحة:

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

6. استخدم ميزات السرعة الموجودة أصلا في ووردبريس

أضاف ووردبريس 6.8 ميزة التحميل الاستباقي (Speculative Loading) باستخدام واجهة Speculation Rules في المتصفح. وافتراضيا، يجلب الروابط الداخلية مسبقا بشكل متحفظ، لما الزائر يبدأ يضغط على الرابط، فتفتح الصفحة التالية أسرع. ولا تعمل الميزة للمستخدمين المسجلين دخولهم ولا في المواقع اللي مش مفعل فيها الروابط الدائمة الجميلة. ويقدر المطور يعدلها من خلال الفلتر wp_speculation_rules_configuration، ويستبعد مسارات مثل روابط السلة والدفع.

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

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

8. راجع طريقة تعامل القالب مع الاتجاه من اليمين لليسار

ووردبريس يحمل ملف rtl.css الخاص بالقالب تلقائيا لما تكون لغة الموقع من اليمين لليسار، وده طبيعي. لكن راجع ما يتحمل فعلا في صفحاتك العربية. بعض الإعدادات تحمل ملف التنسيق الكامل للاتجاه من اليسار لليمين، ثم ملفا ثانيا كبيرا يلغي أغلبه، وبعض الإضافات تضيف ملفات RTL خاصة بها كمان. افتح أدوات المطور في المتصفح، وبص على ملفات CSS في صفحة عربية، واحذف أي ملف يتحمل مرتين أو غير مستخدم. والقوالب المبنية بخصائص CSS المنطقية، اللي تتكلم عن «البداية» و«النهاية» بدل «اليمين» و«اليسار»، تحتاج عادة كود RTL إضافيا أقل بكثير. ولو المشكلة أكبر من السرعة والتصميم نفسه بيتكسر في العربي، دليلنا عن إصلاح مشاكل التصميم من اليمين لليسار في ووردبريس بيمشي معاك على الأسباب الشائعة وحلولها.

أخطاء نراها كثيرا في المواقع العربية

• تحميل نفس الخط العربي من مصدرين، مثلا من القالب ومرة ثانية من أداة بناء الصفحات.
• تحميل كل أوزان الخط من الرفيع للأسود، والتصميم مستخدم وزنين بس.
• تثبيت ثلاث إضافات سرعة مرة واحدة، فتتعارض مع بعض، وأحيانا تبطئ الموقع أو تكسر التصميم.
• الاختبار على الكمبيوتر فقط وعلى إنترنت المكتب السريع، بينما أغلب الزوار على الموبايل.
• مطاردة درجة مثالية في الاختبار المعملي بدل تحسين أرقام المستخدمين الحقيقيين في Search Console.

قائمة مراجعة لسرعة مواقع ووردبريس العربية

1. قس الوضع الحالي بأداة PageSpeed Insights وSearch Console، وسجل الأرقام.
2. تأكد من جودة الاستضافة، وأضف شبكة توزيع محتوى.
3. فعل كاش الصفحات، مع الاستثناءات الصحيحة للمتاجر.
4. قلل الخطوط لعائلة عربية واحدة ووزنين، بصيغة WOFF2، مع swap.
5. اضغط الصور، واستخدم الصيغ الحديثة، ولا تؤجل تحميل الصورة الرئيسية.
6. احذف السكربتات غير الضرورية أو أجلها.
7. نظف قاعدة البيانات بعد أخذ نسخة احتياطية.
8. قس مرة ثانية، وقارن أرقام الموبايل تحديدا.

السرعة والظهور في البحث

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

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

أسئلة شائعة

كلمة أخيرة

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

المراجع

• مؤشرات أداء الويب، web.dev
• كيف تم تحديد حدود مؤشرات الأداء الأساسية، web.dev
• تحسين مؤشر INP، web.dev
• التحميل الاستباقي في ووردبريس 6.8
• تحسينات الأداء في ووردبريس 6.8
• أداة PageSpeed Insights