سرعة الموقع: حلول عملية للصور والخطوط والسكربتات

المقدمة

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

ابدأ بالقياس لا بالتخمين

قبل تغيير أي شيء، خذ نقطة مرجعية حتى تثبت أن الإصلاح نجح.

1. افتح الصفحة الرئيسية وأهم صفحة خدمة في PageSpeed Insights (أداة مجانية من جوجل). ابدأ بنتيجة الجوال.
2. دوّن الأرقام الرئيسية وقائمة "الفرص" التي تعرضها، واحفظ لقطة شاشة.
3. جرّب على جوال حقيقي بباقة بيانات لا بواي فاي المكتب. إن بدا لك بطيئاً فهو بطيء عند عميلك.
4. أعد القياس بعد كل تغيير، وغيّر شيئاً واحداً في كل مرة لتعرف ما الذي نفع.

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

الصور: السبب الأكثر شيوعاً

في أغلب مواقع الأعمال تشكّل الصور الجزء الأكبر من وزن الصفحة. صورة مأخوذة مباشرة من الكاميرا أو الجوال قد تكون أكبر بأضعاف من الشاشة التي تُعرض عليها.

ماذا تفعل

• غيّر المقاس إلى مقاس العرض. صورة تُعرض بعرض 800 بكسل لا تحتاج 4000 بكسل. اترك هامشاً بسيطاً للشاشات الحادة لا أكثر.
• استخدم الصيغ الحديثة. WebP أو AVIF أصغر عادةً من JPEG وPNG بجودة قريبة، والمتصفحات الحالية تدعمها. أبقِ بديلاً احتياطياً إن احتاجته منصتك.
• اضغط بحكمة. مستوى جودة معتدل لا يُلاحَظ بالعين ويوفّر وزناً كبيراً. افحص النتيجة بصرياً.
• فعّل التحميل الكسول (lazy-load) للصور أسفل الشاشة. الصور البعيدة يمكن أن تنتظر حتى ينزل الزائر. لا تفعّله للصورة الرئيسية في أعلى الصفحة لأنه يؤخّر ما يراه الزائر أولاً.
• حدّد العرض والارتفاع لكل صورة ليحجز المتصفح مساحتها فلا تقفز الصفحة.
• استبدل فيديو الخلفية الثقيل. فيديو يعمل تلقائياً في الترويسة كثيراً ما يكون أثقل عنصر في الصفحة. استخدم صورة ثابتة أو مقطعاً قصيراً مضغوطاً.
• استخدم SVG للشعارات والأيقونات متى أمكن؛ تبقى حادة وحجمها ضئيل.

الخطوط: ملفات صغيرة وأثر كبير

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

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

في المواقع ثنائية اللغة قد تحمّل خطاً عربياً وآخر لاتينياً. راجع تصميم موقع ثنائي اللغة لاختيار زوج يعمل دون مضاعفة الوزن.

السكربتات والأدوات الخارجية

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

قواعد عملية:

• اكتب قائمة بكل سكربت في موقعك وسطراً أمام كل واحد: من يستخدمه، وأي قرار يخدمه. ما لا جواب له فاحذفه.
• حمّل السكربتات غير الأساسية بـdefer أو async، أو بعد أول تفاعل.
• احذر عند حذف أدوات التتبّع: اسأل أولاً من يقرأ تقاريرك، وحافظ على التحليلات وتتبّع التحويلات.
• إن كنت تستخدم مدير وسوم (Tag Manager) فراجع محتواه؛ الوسوم القديمة تتراكم.

الكاش والتوصيل

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

• كاش المتصفح: الملفات الثابتة كالصور وCSS وJavaScript والخطوط يجب أن تحمل ترويسات كاش تطلب من المتصفح الاحتفاظ بها مدة طويلة. استخدم أسماء ملفات بنسخ (versioned) حتى تصل التحديثات للزوار.
• كاش الصفحة: في المواقع المبنية على نظام إدارة محتوى يقدّم كاش الصفحة صفحة جاهزة بدل بنائها من قاعدة البيانات كل مرة. وهو غالباً من أكبر المكاسب في مواقع بأسلوب WordPress.
• الضغط: تأكد أن الخادم يضغط ملفات النص (HTML وCSS وJavaScript) بـGzip أو Brotli.
• CDN (شبكة توصيل المحتوى): تحتفظ بنسخ من ملفاتك على خوادم في أماكن عديدة وتخدم الزائر من الأقرب إليه. فائدتها أكبر حين يكون جمهورك موزعاً على مناطق أو خادمك بعيداً عن زوارك. اسأل أين تقع استضافتك قياساً بعملائك.
• بروتوكول حديث: HTTP/2 أو HTTP/3 يسمح للمتصفح بجلب ملفات كثيرة بكفاءة، ومعظم الاستضافات الجيدة تفعّله.

الاستضافة والخادم نفسه

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

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

قائمة تطبّقها اليوم

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

أخطاء شائعة

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

ماذا يفعل Xposio في هذا المجال؟

1. نقيس أولاً على الجوال، ونسجّل نقطة مرجعية لصفحاتك الأساسية حتى تُعرض التحسينات بالدليل لا بالادّعاء.
2. نعالج الأكبر أثراً بالترتيب: الصور ثم السكربتات ثم الخطوط والكاش، بدل تركيب إضافات عشوائية.
3. نبني السرعة في المواقع الجديدة من البداية: مقاسات صور مضبوطة، ومجموعة خطوط مقتصدة، وسكربتات لها غرض فقط.
4. نراجع أدوات التتبّع والأطراف الخارجية معك، كي لا يؤدي تخفيف الوزن إلى كسر تقاريرك.
5. نلتزم بالصدق في الحدود: السرعة تحسّن التجربة وقد تدعم الظهور في البحث، لكنها عامل من عوامل كثيرة ولا نعد بترتيب معيّن.

رابط داخلي: تعرّف على خدمة تصميم وتطوير المواقع عبر ‎/ar/services/website-design-development، وخدمة السيو التقني عبر ‎/ar/services/technical-seo.

ولمعرفة وضع موقعك اليوم يمكنك طلب تقرير اللمحة الرقمية عبر ‎/ar/report.

الخلاصة

• قِس أولاً على الجوال واحتفظ بنقطة مرجعية لتثبت أثر كل إصلاح.
• الصور غالباً أكبر مكسب: غيّر المقاس واضغط واستخدم الصيغ الحديثة وفعّل التحميل الكسول أسفل الشاشة.
• خطوط وسكربتات أقل تعني صفحة أسرع؛ راجعهما دورياً.
• الكاش والضغط واستضافة مناسبة تزيل تأخيراً لا تعالجه أعمال الواجهة.
• عالج شيئاً واحداً في كل مرة وأعد الاختبار. السرعة صيانة مستمرة لا مهمة لمرة واحدة.

قراءات ذات صلة

• Core Web Vitals ببساطة
• التصميم للجوال أولاً