لماذا السرعة مهمة
نصف الناس يغلقون موقعاً يستغرق تحميله أكثر من 3 ثوانٍ. زوارك لن يكونوا جميعاً بهاتف جديد على Wi-Fi سريع – بعضهم على هاتف قديم في قطار. مدير المشروع يفكّر بهم أيضاً.
خبر سار: أكبر تعزيز للسرعة من شيء واحد – الصور. صورة من الهاتف قد تكون 5 MB بسهولة؛ الموقع يحتاج العُشر فقط.
شاهد معي: القياس بـ Lighthouse
Lighthouse أداة قياس مدمجة في Chrome:
- افتح موقعك (النسخة الحية، لا localhost).
- F12 → تبويب Lighthouse → Analyze page load.
- تحصل على درجة 0–100 للأداء وإمكانية الوصول وSEO – والأهم، قائمة نصائح محددة لما تحسّنه.
أكثر النصائح شيوعاً وماذا تفعل:
| نصيحة Lighthouse | ماذا تفعل |
|---|---|
| Properly size images | صغّر صورك (انظر أدناه) |
| Serve images in next-gen formats | احفظها WebP |
| Image elements do not have width/height | أضف سمات width وheight |
| Links do not have descriptive text | بدلاً من «click here»، قل إلى أين يذهب الرابط |
صغّر صورك
- الأبعاد: الموقع يحتاج حوالي 1200px عرضاً (صورة hero) أو 600px (صورة عادية). يمكنك تغيير الحجم في أي محرر، حتى online (مثل squoosh.app).
- الصيغة: WebP أصغر بحوالي الثلث من JPG بنفس الجودة.
- Lazy loading: الصور أسفل الشاشة تُحمَّل فقط عندما يمرّر الزائر إليها:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />الآن دورك 💪
- قِس موقعك بـ Lighthouse وسجّل درجة الأداء – خط البداية.
- ابحث عن 3 أكبر صور (F12 → Network → sort by Size).
- صغّرها (أبعاد + WebP) وأضف
loading="lazy"لكل شيء ما عدا أول صورة في الأعلى. - قِس مرة أخرى وقارن. اكتب في
LAUNCH.md: قبل ← بعد. - مكافأة: اختبر موقعك على هاتفك مع Wi-Fi مغلق. كيف هو؟
💡
لا تتوقع 100 نقطة. حتى المواقع الكبيرة تحصل 70–90. المهم التقدّم: من 60 إلى 85 انتصار يلاحظه الزوار.
✅
تحقق: تعرف درجة Lighthouse قبل وبعد. صورك مُعاد حجمها، WebP، وتستخدم lazy loading. موقعك يحمّل أسرع بوضوح على الجوال.
ما ستخرج به من هذا الدرس
- السرعة = الزوار يبقون. 3 ثوانٍ هي الحد.
- Lighthouse يخبرك بالضبط ما تحسّنه.
- أكبر رافعة: صور أصغر (أبعاد، WebP، lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · شروط استخدام المحتوى