كيف تحسّن سرعة موقعك — أدوات وتقنيات

«الموقع بطيء» ليست مشكلة واحدة بل عدة مشاكل مختلفة تُوصف بنفس الكلمة. الخطوة الأولى ليست التحسين بل القياس — ومعرفة أي مقياس تحديداً هو السيئ.

المقاييس الثلاثة التي تهم

جوجل يلخّص تجربة الصفحة في ثلاثة مقاييس تُقاس من زيارات حقيقية:

• LCP — زمن ظهور أكبر عنصر مرئي، أي متى يشعر الزائر أن الصفحة «ظهرت». الهدف 2.5 ثانية أو أقل. غالباً هو صورة الغلاف أو العنوان الرئيسي.
• INP — استجابة الصفحة للتفاعل. الهدف 200 مللي ثانية أو أقل. حلّ محل FID وهو أدق منه لأنه يقيس كل التفاعلات لا الأول فقط.
• CLS — مقدار قفز المحتوى أثناء التحميل. الهدف 0.1 أو أقل. سببه شبه الدائم صورة أو إعلان بلا أبعاد محجوزة.

لاحظ أن أياً منها ليس «حجم الصفحة». الحجم مؤشر مفيد وسهل القياس قبل النشر، لكنه ليس ما يُقاس فعلاً.

الصور: أكبر مكسب دائماً

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

حوّل إلى WebP أو AVIF

WebP يوفّر عادة 25–35٪ مقارنة بـ JPEG بنفس الجودة البصرية، وAVIF أكثر. الدعم اليوم واسع في كل المتصفحات الحديثة.

قدّم مقاسات متعددة

<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  width="800" height="450" alt="…"
>

بلا هذا، يحمّل هاتف بعرض 375 بكسل الصورة نفسها المعدّة لأكبر شاشة — وإن كانت بعرض 1600 بكسل فهي أكبر مما يحتاجه غالباً حتى مع كثافة البكسل العالية.

أجّل ما تحت الطي فقط

loading="lazy" لكل صورة أسفل الشاشة الأولى. لكن لا تضعها على صورة الغلاف: تأجيل عنصر LCP يؤخّره بدل أن يسرّعه، وهذا خطأ شائع يعكس النتيجة المرجوة.

الخطوط العربية

الخطوط العربية أثقل من نظيرتها اللاتينية لكثرة أشكال الحروف. ثلاث قواعد:

• حمّل الأوزان المستخدمة فقط. كل وزن ملف مستقل. أربعة أوزان تكفي معظم المواقع؛ تحميل تسعة يضيف مئات الكيلوبايتات بلا فائدة.
• استخدم font-display: swap ليظهر النص فوراً بخط احتياطي بدل أن يبقى مخفياً.
• استضف الخط محلياً بدل جلبه من نطاق آخر — يوفّر اتصالاً كاملاً قبل بدء التحميل.

احجز مساحة كل شيء متأخر

CLS هو أسهل المقاييس إصلاحاً وأكثرها إهمالاً. أي عنصر يصل متأخراً — صورة، إطار، إعلان، خط — يجب أن تُحجز مساحته مسبقاً:

<!-- ❌ يقفز عند وصول الصورة -->
<img src="/photo.webp" alt="…">

<!-- ✅ المساحة محجوزة -->
<img src="/photo.webp" width="800" height="450" alt="…">

الأبعاد لا تفرض حجم العرض — CSS يظل يتحكم، مع max-width: 100% وheight: auto معاً كي لا تتشوّه النسبة — لكنها تخبر المتصفح بنسبة الأبعاد فيحجز المكان.

قلّل JavaScript قبل أن تحسّنه

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

وما لا يمكن حذفه يمكن تأجيله: defer لما يحتاج DOM، وasync لما هو مستقل تماماً، والتحميل عند الطلب لما لا يظهر إلا بعد تفاعل.

أدوات القياس

• PageSpeed Insights — يجمع بيانات المختبر والبيانات الميدانية الحقيقية معاً. ابدأ منه.
• Lighthouse في أدوات المطوّر — للتكرار السريع أثناء العمل. شغّله في نافذة خفية بلا إضافات.
• WebPageTest — لمخطط زمني تفصيلي ولاختبار من مواقع جغرافية وسرعات مختلفة.
• تبويب الشبكة مع تقييد السرعة إلى 4G بطيء — أقرب محاكاة لتجربة زائر حقيقي.

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

الترتيب الصحيح للأولويات

1. اقس أولاً واعرف أي مقياس هو السيئ.
2. أصلح الصور — أكبر عائد في أغلب المواقع.
3. احجز الأبعاد لإصلاح CLS — الأرخص كلفة والأسرع أثراً.
4. راجع الخطوط والأوزان.
5. احذف JavaScript غير الضروري ثم أجّل الباقي.
6. فعّل الضغط والتخزين المؤقت على الخادم.
7. أعد القياس، ولا تفترض أن التحسين نجح.

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

ما مقاييس Core Web Vitals وما القيم المستهدفة لكل منها؟

هي ثلاثة مقاييس تُقاس من زيارات حقيقية: LCP لزمن ظهور أكبر عنصر مرئي وهدفه أقل من 2.5 ثانية، وINP لاستجابة الصفحة للتفاعل وهدفه أقل من 200 مللي ثانية. أما CLS فيقيس مقدار قفز المحتوى أثناء التحميل وهدفه أقل من 0.1.

هل يسرّع التحميل المؤجل للصور موقعي في كل الحالات؟

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

كيف أمنع قفز المحتوى أثناء تحميل الصفحة وأحسّن CLS؟

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

كيف أخفف تأثير الخطوط العربية على سرعة تحميل الموقع؟

الخطوط العربية أثقل من اللاتينية لكثرة أشكال الحروف، لذا حمّل الأوزان المستخدمة فقط لأن كل وزن ملف مستقل. واستخدم font-display: swap ليظهر النص فوراً بخط احتياطي، واستضف الخط محلياً بدل جلبه من نطاق آخر لتوفير اتصال كامل قبل بدء التحميل.

ما الأدوات التي أستخدمها لقياس سرعة موقعي وأين أبدأ؟

ابدأ بـ PageSpeed Insights لأنه يجمع بيانات المختبر والبيانات الميدانية الحقيقية معاً، واستخدم Lighthouse في أدوات المطوّر للتكرار السريع أثناء العمل. ولمخطط زمني تفصيلي واختبار من مواقع جغرافية وسرعات مختلفة استخدم WebPageTest، أما تبويب الشبكة مع تقييد السرعة إلى 4G بطيء فهو أقرب محاكاة لتجربة زائر حقيقي.

خلاصة

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