خمس خطوات سريعة لموقع أسرع.

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

ابدأ بالقياس لتعرف ما الذي تغيّر: افحص صفحتك على PageSpeed Insights (pagespeed.web.dev)، أو افتح أدوات المطوّر في كروم واستخدم Lighthouse. مؤشرات Core Web Vitals من جوجل تعطيك ثلاثة أرقام تستهدفها:

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

1. صغّر الصور

الصور غالبًا أثقل ما في الصفحة. احفظها بصيغة WebP أو AVIF بدلًا من PNG أو JPEG، ولا ترسل صورة بعرض 3000 بكسل إلى شاشة هاتف.

<img
  src="/images/team-800.webp"
  srcset="/images/team-400.webp 400w, /images/team-800.webp 800w, /images/team-1600.webp 1600w"
  sizes="(min-width: 900px) 50vw, 100vw"
  alt="فريقنا في المكتب"
/>

يختار المتصفح أصغر ملف يبقى واضحًا على شاشة الزائر.

2. أجّل تحميل ما هو أسفل الصفحة

الصور البعيدة في أسفل الصفحة لا تحتاج إلى التحميل فورًا.

<img src="/images/gallery-1.webp" alt="…" loading="lazy" width="800" height="600" />

3. حدّد العرض والارتفاع دائمًا

عندما لا يكون للصورة حجم محدد، لا يعرف المتصفح كم مساحة يحجز لها، فينزل النص فجأة عند تحميلها. هذا ما يقيسه CLS. إضافة width وheight (أو aspect-ratio في CSS) تحجز المساحة مسبقًا.

4. حمّل الخطوط بذكاء

الخطوط المخصصة قد تُخفي النص إلى أن تصل.

@font-face {
  font-family: 'Brand';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;
}

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

5. احذف جافاسكريبت غير المستخدمة

كل سكربت يجب أن يُنزَّل ويُقرأ ويُنفَّذ قبل أن تستجيب الصفحة بسلاسة.

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