موقع ووردبريس بأربع لغات يتخطى 90 في PageSpeed

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

المشروع: موقع عقارات فاخر بأربع لغات

الموقع لشركة عقارات في شمال قبرص، يبنيه ويديره كاتب المقال الأصلي منذ أبريل 2026. وهو ليس موقعاً تعريفياً بسيطاً:

• أربع لغات (الإنجليزية والألمانية والتركية والفارسية) تُدار بإضافة WPML، مع دعم كامل لـ الاتجاه من اليمين لليسار (RTL) في النسخة الفارسية.
• قالب عقارات مع Elementor، وقوائم عقارات وخرائط وفلاتر بحث ومدونة.
• هوية فاخرة: فيديو في الواجهة، وخطوط أنيقة، وحركات ناعمة، وصور كبيرة عالية الجودة.

عند البداية كانت نتيجة الصفحة الرئيسية في أداة قياس سرعة الصفحات من جوجل (PageSpeed Insights) حوالي 51 على الجوال و81 على سطح المكتب.

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

القاعدة الأولى: التصميم خط أحمر

أسهل طريق لدرجة 100 أن تحذف الفيديو والأنيميشن والخطوط. هذا لم يكن مطروحاً. كل تغيير كان يُختبر ويُقارَن قبل وبعد، وأي خطوة غيّرت شكل الموقع كانت تُلغى فوراً.

هذه القاعدة تستحق أن تكتبها في عرض السعر لعميلك: أنت تحسّن السرعة داخل حدود الهوية البصرية، لا على حسابها.

الخطوة 1: قِس بطريقة صحيحة

نتيجة PageSpeed قد تقفز 10 نقاط أو أكثر بين قياسين لنفس الصفحة. لذلك شُغّل كل اختبار عدة مرات، واعتُمد الوسيط (Median) لا قياس واحد.

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

الخطوة 2: تأكد أن الكاش يعمل فعلاً

الموقع يستخدم LiteSpeed Cache. أثناء المراجعة تبيّن أن كاش الصفحات (Page Cache) كان مطفأً، أي أن كل زيارة كانت تبني الصفحة من الصفر.

تفعيله والتحقق منه لكل لغة كان من أكبر التحسينات في المشروع كله. الدرس: افحص الأساسيات أولاً قبل أي حل معقد.

للتحقق بنفسك، افتح أدوات المطوّر في المتصفح، ثم تبويب Network، وابحث في ترويسات الصفحة عن x-litespeed-cache: hit. كرّر ذلك على رابط كل لغة، لأن WPML ينشئ روابط مستقلة لكل نسخة.

الخطوة 3: CDN بإعداد دقيق

شبكة توصيل المحتوى (CDN) تسلّم الملفات من سيرفر قريب من الزائر. بعد تفعيلها ظهرت مشكلة خفية: الشبكة قد تقدّم نسخة الجوال لزوار سطح المكتب والعكس.

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

وأُضيف روتين لـ تسخين الكاش (Cache Warming) بعد كل تحديث كبير، حتى لا يصادف الزائر صفحة فارغة الكاش وبطيئة.

لزوار القاهرة والرياض ودبي، يفرق كثيراً أن تكون الاستضافة في مركز بيانات أوروبي قريب مثل فرانكفورت، مع Cloudflare أمام الموقع.

الخطوة 4: خطوط مستضافة محلياً وشعار أخف

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

في المواقع العربية النقطة دي أهم، لأن ملفات الخطوط العربية مثل Cairo أو Tajawal أكبر عادة. ارفع الأوزان التي تستخدمها فقط بصيغة WOFF2، ثم حمّل الخط الأساسي مسبقاً:

<link rel="preload" href="/wp-content/uploads/fonts/cairo-arabic-700.woff2" as="font" type="font/woff2" crossorigin>

في Elementor: من Site Settings ← Custom Fonts ارفع ملفات الخط، ثم من Settings ← Advanced اضبط خيار Google Fonts ليتوقف عن تحميلها من الخارج.

الخطوة 5: “رجيم” للـ JavaScript

القوالب والإضافات كثيراً ما تحمّل سكربتاتها في كل صفحة حتى حيث لا تُستخدم. حُدّدت السكربتات غير اللازمة في صفحات بعينها وأوقف تحميلها هناك، مثل سكربت الخريطة في صفحة “من نحن”.

جُرّب أيضاً تأجيل كل الـ JavaScript دفعة واحدة، لكنه كسر بعض الخصائص التفاعلية كفلاتر البحث، فأُلغي. الاختبار الأمين أهم من مكسب سريع في الرقم.

الخطوة 6: صور أذكى

• صور WebP بالمقاسات المناسبة لكل شاشة.
• تحميل صورة البطل الرئيسية مسبقاً، فتظهر أهم صورة أولاً.
• التحميل الكسول (Lazy Loading) للصور الأبعد في الصفحة فقط.
• تأثير ظهور تدريجي ناعم، فتظهر الصور بأناقة بدل أن تُرسم سطراً سطراً.

النتائج وقراءتها بواقعية

الصفحة الرئيسية وصلت إلى 92–97 على سطح المكتب في كل اللغات، وإلى 76 كحد أقصى على الجوال، دون أي تغيير في التصميم.

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

نصيحة لعروض الأسعار: لا تعد العميل برقم محدد على الجوال قبل أن تقيس. اعرض عليه المقايضة بوضوح: كل عنصر بصري ثقيل له ثمن في السرعة.

دروس تطبّقها على موقعك

• ابدأ بالأساسيات: الكاش، والـ CDN، ومقاسات الصور، قبل أي شيء معقد.
• قِس عدة مرات وقارن الوسيط، لا القياس الواحد.
• غيّر شيئاً واحداً في كل مرة، واختبره، واحتفظ بنسخة احتياطية للتراجع.
• في المواقع متعددة اللغات، افحص كل لغة منفصلة، خاصة النسخة العربية RTL.
• السرعة تخدم البيزنس، ولا يجب أن تهدم البراند.

الأسئلة الشائعة

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

س: لماذا نتيجة الجوال أقل بكثير من سطح المكتب؟
ج: لأن PageSpeed يحاكي هاتفاً متوسطاً على شبكة بطيئة. الفيديو والأنيميشن والخطوط الثقيلة تؤثر في الجوال أكثر.

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

س: هل أستضيف خطوطي العربية محلياً بدل Google Fonts؟
ج: نعم غالباً. ارفع الأوزان المستخدمة فقط بصيغة WOFF2، وحمّل الخط الأساسي مسبقاً، فيظهر النص العربي أسرع.

الخلاصة

السرعة مش إنك تشيل كل حاجة حلوة من الموقع، السرعة إنك تعرف تقيس وتصلّح الأساسيات الأول. كاش شغال، CDN مظبوط، خطوط محلية، وصور بالمقاس الصح، وبعدها الأرقام بتتحرك لوحدها. ابن موقعك قطعة قطعة، وقيس بعد كل قطعة.

مرجع المقال (بالإنجليزية): How I Took a Multilingual WordPress Site to 90+ on Google PageSpeed
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.