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

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

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

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

• 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 يظل يتحكم — لكنها تخبر المتصفح بنسبة الأبعاد فيحجز المكان.

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

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

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

أدوات القياس

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

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

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

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

خلاصة

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