5.1تحسين الأداء والسرعة
الأساسي في 30 ثانية
- السرعة رهان كبير: موقع بطيء يُنفّر ويضرّ بالظهور في المحرّكات.
- الرافعة رقم 1: الصور — اضغطها وحدّد أبعادها جيدًا.
- أكمِل بـ: كاش، استضافة جيّدة، قالب خفيف، خيارات تحسين Elementor.
الخيط الناظم — نادية تُسرّع الموقع
قبل التسليم، تختبر نادية سرعة موقع النجّار: بطيء، خاصّة على الجوّال. صور الورشة تزن عدّة ميغابايت لكلٍّ. تضغطها، تُثبّت إضافة كاش، تُفعّل خيارات أداء Elementor. ينتقل الموقع من «متثاقل» إلى «سريع» — ويبقى الزوّار.
بداية المستوى 5 — تهيئة موقع جاهز للتسليم.
1. الصور، الرافعة رقم 1
الأداء (سرعة التحميل) رهان كبير: موقع بطيء يُنفّر الزوّار ويُعاقَب في الظهور. والصور غالبًا أول سبب للبطء: تُضغَط، وتُحدَّد أبعادها بحجم العرض، ويُستخدَم تنسيق حديث (WebP) متى أمكن.
تُقلّص نادية صور ورشتها من عدّة ميغابايت إلى بضع مئات من الكيلوبايت: الربح فوريّ.
2. الكاش، الاستضافة، Elementor
رافعات أخرى: إضافة كاش (تخزين الصفحات مؤقتًا، تصغير CSS/JS، تحميل محسَّن)؛ استضافة جيّدة (موارد، PHP حديث)؛ قالب خفيف (Hello Elementor)؛ وخيارات تحسين Elementor (حاويات Flexbox أخفّ من الأقسام/الأعمدة، تحميل محسَّن للخطوط/الأيقونات).
مرجع: Core Web Vitals (مؤشّرات Google) تقيس السرعة المُحَسّة. تختبر نادية بأداة قياس قبل/بعد وتستهدف الأخضر.
🔎 مثال ملموس — التسريع قبل التسليم (حالة نادية)
القياس الأوّليّ: بطيء (جوّال).
1. ضغط الصور (ميغابايت → مئات الكيلوبايت، WebP).
2. تثبيت إضافة كاش (تصغير، كاش صفحات).
3. قالب خفيف (Hello Elementor) + حاويات Flexbox.
4. القياس من جديد: Core Web Vitals في الأخضر.النتيجة: موقع أسرع بوضوح.
الدرس: الصور أولًا، ثم الكاش والخيارات.
مفردات القسم
- الأداء (السرعة)
- سرعة تحميل الموقع — رهان كبير للتجربة والـ SEO.
مثال بسيط: موقع سريع يُبقي الزوّار.
ما ليس كذلك: الحكم بأنه «سريع كفاية» دون قياس.
رد فعل: قِس السرعة، خاصّة على الجوّال.
- تحسين الصور (الرافعة رقم 1)
- ضغط الصور وتحديد أبعادها (WebP): أول سبب للبطء.
مثال بسيط: صور قُلّصت من ميغابايت إلى مئات الكيلوبايت.
ما ليس كذلك: رفع صور خام بعدّة ميغابايت.
رد فعل: اضغط دائمًا قبل الإدراج.
- الكاش والتحسين
- تخزين الصفحات مؤقتًا، تصغير CSS/JS، تحميل محسَّن (إضافة كاش).
مثال بسيط: إضافة كاش تُسرّع العرض.
ما ليس كذلك: لا تخزين مؤقت على موقع عموميّ.
رد فعل: إضافة كاش على موقع في الإنتاج.
- الاستضافة والقالب الخفيف
- استضافة جيّدة (PHP حديث) وقالب بسيط (Hello Elementor).
مثال بسيط: قالب خفيف + استضافة جيّدة = أساس سليم.
ما ليس كذلك: قالب متعدّد الأغراض ثقيل + استضافة محدودة.
رد فعل: أساس خفيف منذ البداية.
- Core Web Vitals
- مؤشّرات السرعة المُحَسّة (Google)، تُستهدَف في الأخضر.
مثال بسيط: القياس قبل/بعد التحسين.
ما ليس كذلك: تجاهل القياس والتسليم «بالحدس».
رد فعل: قِس، حسِّن، أعِد القياس.
في التطبيق — تحسين سرعة موقع
- قِس السرعة (أداة Core Web Vitals)، خاصّة على الجوّال.
- اضغط الصور وحدّد أبعادها (تنسيق WebP إن أمكن).
- ثبّت إضافة كاش (تصغير، تخزين مؤقت).
- تحقّق من القالب الخفيف وخيارات Elementor، ثم أعِد القياس.
نصّ جاهز للقول — إبراز السرعة للزبون (20 ث)
«حسّنتُ سرعة موقعك، خاصّة على الجوّال حيث يزورك أغلب زبائنك. بضغط الصور وتفعيل التخزين المؤقت، تُحمَّل الصفحات أسرع بكثير — ما يُبقي الزوّار ويساعد ظهورك.»
اربطي السرعة ← الاحتفاظ ← الظهور ← الأعمال.
قالب للنسخ واللصق — تحقّق الأداء
القياس الأوّليّ (جوّال): _______________
الصور مضغوطة / WEBP / مُحدَّدة الأبعاد: نعم / لا
الكاش مُثبَّت (تصغير): نعم / لا
قالب خفيف + استضافة OK: نعم / لا
CORE WEB VITALS بعدها (أخضر؟): _______________صور كثيرة
أولوية مطلقة للضغط والتنسيق الجيّد (WebP).
استضافة متواضعة
كاش + قالب خفيف + PHP حديث يُعوّضان جزئيًا.
الجوّال
قِس أولًا على الجوّال: هناك يُعاقِب البطء أكثر.
قبل التسليم
أعِد القياس دائمًا بعد التحسين، استهدف الأخضر.
✓ ممارسات جيدة
- اضغط الصور كأولوية.
- ثبّت إضافة كاش في الإنتاج.
- قِس قبل/بعد (Core Web Vitals).
✗ أخطاء شائعة
- رفع صور ثقيلة غير مضغوطة.
- نسيان الكاش على موقع عموميّ.
- الحكم على السرعة «بالحدس» دون قياس.
النقاط الأساسية
- السرعة رهان تجاريّ و SEO.
- الصور = الرافعة رقم 1 (ضغط، WebP).
- كاش + استضافة + قالب خفيف + خيارات Elementor.
- قِس Core Web Vitals، استهدف الأخضر.
تحدّي 48 ساعة — طبّق غدًا
قِس سرعة صفحة على الجوّال، اضغط صورها (WebP)، فعّل كاشًا، ثم أعِد القياس. سجّل الربح. 30 دقيقة.
- أضغط وأحدّد أبعاد صوري.
- أُفعّل كاشًا في الإنتاج.
- أقيس Core Web Vitals قبل/بعد.
أسئلة شائعة
ما أول ما يُحسَّن؟
الصور: غالبًا السبب الرئيسيّ للبطء. اضغطها، حدّد أبعادها بحجم العرض واستخدم تنسيق WebP متى أمكن.
ما Core Web Vitals؟
مؤشّرات من Google تقيس السرعة والاستقرار المُحَسّين لصفحة. يُستهدَف «الأخضر» ويُقاس قبل/بعد التحسين.
هل تكفي إضافة كاش؟
تساعد كثيرًا (تخزين مؤقت، تصغير)، لكنها تُجمَع مع صور مُحسَّنة واستضافة لائقة وقالب خفيف لنتيجة دائمة.
موقع النجّار بطيء على الجوّال، بصور من عدّة ميغابايت. بمَ نبدأ؟