لو موقعك بطيء، الزائر بيخرج بسرعة… وجوجل كمان بياخد “إشارة” إن تجربة المستخدم مش أفضل شيء.
عشان كده تحسين السرعة مش رفاهية، ده أساس لزيادة الزيارات، رفع معدل التحويل، وتقليل الارتداد.
في هذا الدليل هنعمل حاجتين بشكل منظم:
نقيس أداء موقعك صح، ثم نحسن أهم 3 مؤشرات في Core Web Vitals:
LCP
INP
CLS
بخطوات سهلة ومباشرة بدون تعقيد أو حشو.
1) ما هي Core Web Vitals؟ ولماذا تهمك؟
Core Web Vitals هي مجموعة مؤشرات تقيس تجربة المستخدم “الحقيقية” على موقعك: سرعة التحميل،
سرعة الاستجابة عند التفاعل، وثبات الصفحة أثناء التحميل.
الجميل هنا إنك لا تحتاج تخمين؛ جوجل يعطيك بيانات واقعية من مستخدمين حقيقيين (Field Data)
عبر تقارير مثل Search Console وPageSpeed Insights.
المؤشرات الثلاثة الأساسية
- LCP: يقيس سرعة ظهور أكبر عنصر محتوى في الشاشة (صورة كبيرة أو عنوان أو بلوك نص).
- INP: يقيس استجابة الصفحة للتفاعل (نقرة/لمس/كتابة) حتى يظهر تأثير التفاعل على الشاشة.
- CLS: يقيس مدى “اهتزاز” عناصر الصفحة بشكل مفاجئ أثناء التحميل.
متى ستلاحظ فرقًا بعد التحسين؟
- انخفاض معدل الارتداد (Bounce Rate) لأن الصفحة صارت أسرع.
- زيادة مدة بقاء الزائر لأن القراءة أسهل بدون قفزات وتهنيج.
- تحسن تدريجي في الأداء العضوي (SEO) خصوصًا على الموبايل.
- تجربة إعلان أفضل لاحقًا (لو تستخدم أدسنس) لأن الصفحة ليست “مكتومة”.
2) الأرقام التي تستهدفها (Good / Needs Improvement / Poor)
قبل ما نشتغل، لازم نعرف الهدف بالأرقام. هذه المؤشرات لها حدود واضحة، والأفضل دائمًا إنك تستهدف “Good”.
| المؤشر | Good (جيد) | Needs Improvement (يحتاج تحسين) | Poor (ضعيف) |
|---|---|---|---|
| LCP | ≤ 2.5 ثانية | من 2.5 إلى 4 ثوانٍ | > 4 ثوانٍ |
| INP | ≤ 200 مللي ثانية | من 200 إلى 500 مللي ثانية | > 500 مللي ثانية |
| CLS | ≤ 0.1 | من 0.1 إلى 0.25 | > 0.25 |
لو LCP عالي → عندك مشكلة في “التحميل/الصور/الخادم”.
لو INP عالي → عندك مشكلة “تفاعل/جافاسكربت/تهنيج”.
لو CLS عالي → عندك مشكلة “عناصر تتحرك لأن المساحات غير ثابتة”.
3) كيف تقيس الأداء بالطريقة الصحيحة؟ (Field Data vs Lab Data)
أكبر خطأ يقع فيه المبتدئ: يعتمد على اختبار واحد فقط ويقرر “الموقع سريع أو بطيء”.
الحقيقة إن القياس له نوعان:
1) Field Data (بيانات فعلية)
دي بيانات مستخدمين حقيقيين خلال فترة زمنية (عادة 28 يومًا).
تظهر في: Search Console وPageSpeed Insights (قسم Field).
وهي أهم شيء لأن جوجل يعتمد عليها لتقييم تجربة المستخدم.
2) Lab Data (اختبار معملي)
دي نتيجة اختبار في بيئة محاكاة (Lighthouse).
مفيدة جدًا للتشخيص ومعرفة “إيه السبب”، لكنها ليست دائمًا مثل الواقع 100%.
الأدوات التي تحتاجها (مجانية)
- PageSpeed Insights: يعطيك Field + Lab + توصيات عملية.
- Lighthouse: داخل Chrome DevTools للتشخيص (خصوصًا للـ JS وCSS).
- Google Search Console: تقرير Core Web Vitals + مشاكل الصفحة على مستوى الموقع.
4) أسرع مكاسب خلال ساعة واحدة (قبل الدخول في التفاصيل)
لو عايز تحسين سريع قبل ما تعمل أي تعديل كبير، نفّذ الخطوات دي أولًا. غالبًا ستلاحظ فرقًا واضحًا فورًا:
- ضغط الصور وتحويلها لـ WebP (أو JPEG مضغوط) وتقليل أبعادها.
- تفعيل كاش المتصفح (Browser Caching) من الاستضافة/الإضافة.
- تقليل الإضافات والسكربتات (خصوصًا الإعلانات/الدردشة/التتبع) إلى الضروري فقط.
- تأجيل تحميل الصور أسفل الصفحة (Lazy Load).
- تقليل الخطوط: خط واحد أو اثنين فقط، ووزن/وزنين كحد أقصى.
5) تحسين LCP بسهولة: خلي “أكبر محتوى” يظهر بسرعة
LCP غالبًا يتأثر بثلاث أشياء: الخادم (TTFB) + الصورة/العنصر الأكبر + CSS/JS التي تمنع العرض.
لذلك سنشتغل كده: نحدد عنصر الـ LCP، ثم نُسرّع وصوله للمتصفح.
الخطوة 1: اعرف عنصر الـ LCP في PageSpeed
افتح PageSpeed Insights → في توصيات الأداء ستجد ذكر لعنصر “Largest Contentful Paint element”.
غالبًا يكون صورة الهيرو أعلى الصفحة أو عنوان كبير.
الخطوة 2: لو LCP صورة… اعمل التالي
- اضبط الأبعاد: لا ترفع صورة 3000px وتعرضها 900px.
- حوّل لـ WebP أو على الأقل JPEG مضغوط.
- لا تجعلها Lazy لو هي صورة الهيرو الأساسية فوق الصفحة (لأنها أهم عنصر).
- استخدم preload لصورة الهيرو لو تقدر في قالبك.
مثال بسيط لتحسين صورة الهيرو (فكرة عامة):
اجعل الصورة بحجم مناسب، واكتب في HTML:
<img src="hero.webp" width="1200" height="630" alt="...">
تحديد width/height يقلل أيضًا CLS (سنشرح لاحقًا).
الخطوة 3: قلّل CSS/JS التي تمنع أول عرض
أحيانًا السبب ليس الصورة، بل ملفات CSS ضخمة أو سكربتات كثيرة تُحمل قبل أن يظهر المحتوى.
هدفك هنا:
- دمج/تقليل ملفات CSS الكبيرة أو استخدام “Critical CSS” للجزء الظاهر أولًا.
- تأجيل سكربتات غير ضرورية إلى نهاية الصفحة أو باستخدام
defer. - تقليل المكتبات الثقيلة إن كانت بدون داعٍ.
الخطوة 4: راقب عناصر الطرف الثالث (Third-Party)
سكربتات مثل: الشات، أدوات التتبع الزائدة، بعض إضافات المشاركة الاجتماعية… ممكن تقتل LCP.
اسأل نفسك: “هل هذه الأداة تزيد أرباحي/تجربتي فعلاً؟” لو لا، احذفها أو حمّلها بعد التفاعل.
6) تحسين INP بسهولة: خلّي الموقع “يرد” بسرعة بدون تهنيج
INP يقيس استجابة الصفحة لتفاعلات المستخدم. لو عندك INP سيء، غالبًا المشكلة أن
الخيط الرئيسي (Main Thread) مشغول بتنفيذ JavaScript أو حسابات ثقيلة،
فيتأخر رد الواجهة.
علامات تدل أن INP عندك هو المشكلة
- القائمة أو زر البحث يتأخر في الفتح.
- التمرير (Scroll) متقطع.
- النقر على زر “تحميل المزيد” يتأخر أو يعلق.
- الإعلانات/السكربتات تعمل “تشنج” بعد تحميل الصفحة.
خطوات عملية لتحسين INP (بدون برمجة معقدة)
- احذف السكربتات غير الضرورية: كل سكربت يزيد الحمل على Main Thread.
- فعّل defer لمعظم ملفات JS (عدا الضروري جدًا لعرض الجزء العلوي).
- قلّل إضافات ووردبريس التي تضيف JS (سلايدر/Popups/Builder ثقيل).
- استخدم نسخة خفيفة من الخطوط وتجنب تحميل 6 أوزان للخط.
- خفف DOM: صفحات فيها عناصر كثيرة جدًا تضعف التفاعل (خصوصًا صفحات المقالات الثقيلة).
لو عندك فريق تطوير (نصائح “تقنية أكثر”)
- قسّم المهام الثقيلة إلى أجزاء صغيرة (Break up long tasks).
- استخدم
requestAnimationFrameللتحديثات البصرية بدل تنفيذ عشوائي. - انقل الحسابات الثقيلة إلى Web Worker عندما يكون ذلك ممكنًا.
- قلّل مراقبي الأحداث (Event Listeners) الزائدين خاصة على scroll/resize.
تذكر: INP يعتمد على “التجربة عبر الزيارة”، لذلك حتى لو التحميل سريع، سكربت واحد
يشتغل كل ثانية ممكن يفسد الاستجابة.
7) تحسين CLS بسهولة: امنع اهتزاز الصفحة (خصوصًا مع الإعلانات والصور)
CLS هو أكثر شيء يزعج المستخدم: يبدأ يقرأ وفجأة النص يتحرك لأن صورة ظهرت، أو إعلان اتسع، أو خط تغيّر.
الخبر الحلو: تحسين CLS غالبًا سهل جدًا بمجرد تثبيت المساحات.
أسباب CLS الشائعة
- صور بدون تحديد
widthوheight. - إعلانات تظهر فجأة بدون مساحة مخصصة.
- خطوط web fonts تُسبب تغيّر القياسات (FOIT/FOUT).
- عناصر يتم حقنها أعلى الصفحة (مثل شريط إشعارات أو بانر) بعد تحميل المحتوى.
حلول عملية سريعة
- حدد أبعاد الصور والفيديو دائمًا (حتى لو CSS ستغير الحجم).
- احجز مكان للإعلانات: ضع حاوية (div) بارتفاع ثابت أو حد أدنى.
- استخدم font-display: swap لتقليل اهتزاز الخطوط.
- لا تضع عناصر جديدة أعلى المحتوى بعد التحميل؛ لو لازم، ضعها أسفل أو استخدم مساحة محفوظة.
- تجنب السلايدر الثقيل أعلى الصفحة إن كان يسبب تحركًا وتهنيجًا.
اجعل أماكن الإعلانات ثابتة قدر الإمكان، ولا تضع إعلانات تدفع المحتوى للأسفل عند ظهورها.
8) تحسين الخادم (Server) وTTFB: الأساس الذي يرفع LCP من جذوره
لو استضافتك بطيئة، ستعاني حتى لو ضغطت الصور وخففت القالب.
الخادم يؤثر في وقت “أول بايت” (TTFB)، وهو بداية كل شيء.
أفضل تحسينات خادم سهلة للمبتدئين
- استخدم CDN (مثل Cloudflare) لتقريب المحتوى للمستخدمين.
- فعّل Cache على مستوى الخادم إن كانت استضافتك تدعم ذلك.
- فعّل ضغط Gzip/Brotli لتقليل حجم الملفات.
- استخدم HTTP/2 أو HTTP/3 إن كان متاحًا (غالبًا متاح تلقائيًا مع CDN).
- قلّل طلبات قاعدة البيانات (لو ووردبريس): حذف إضافات ثقيلة + استخدام كاش.
إشارة مهمة: لا تعالج المشكلة في النهاية
كثيرون يضيفون إضافات “سحرية” لتحسين السرعة، لكنها تضيف سكربتات جديدة وتزيد INP سوءًا.
الأفضل: قلّل “الأسباب” بدل إضافة طبقات جديدة.
9) خطوات خاصة بووردبريس + بلوجر (عملية ومباشرة)
ووردبريس (WordPress)
- استخدم قالب خفيف (لا يعتمد على 10 مكتبات JS).
- قلّل الإضافات: كل إضافة = احتمال ملفات CSS/JS إضافية.
- فعّل كاش (Page Cache) + تحسين الصور + Lazy Load.
- استبدل السلايدر/الـ Page Builder الثقيل إن كان يسبب تهواض في INP.
- نظّف قاعدة البيانات بشكل دوري (بدون مبالغة).
بلوجر (Blogger)
- اختر قالب سريع ومتجاوب وتجنب القوالب “المزدحمة”.
- قلّل الإضافات/الودجات الثقيلة في الشريط الجانبي.
- ضغط الصور قبل رفعها (مهم جدًا لبلوجر).
- تجنب خطوط كثيرة + مؤثرات حركة مبالغ فيها.
- راجع أكواد الإعلانات: لا تكرر سكربتات، واحجز مساحات للإعلانات لتقليل CLS.
10) Checklist جاهزة قبل وبعد التحسين (انسخها)
قبل التحسين (قياس وتشخيص)
- ✅ افحص صفحة رئيسية + صفحة مقال عبر PageSpeed Insights.
- ✅ لاحظ: هل المشكلة LCP أم INP أم CLS؟
- ✅ راقب عناصر الطرف الثالث (Analytics/Ads/Chat) وتأثيرها.
- ✅ صوّر النتائج (سكرين) حتى تقارن بعد التحسين.
بعد التحسين (تنفيذ ومراجعة)
- ✅ ضغط الصور وتحويلها WebP + أبعاد صحيحة.
- ✅ تفعيل كاش + CDN إن أمكن.
- ✅ تأجيل JS غير الضروري (defer) وتقليل السكربتات.
- ✅ تثبيت مساحات الصور/الإعلانات لمنع CLS.
- ✅ اختبار مرة أخرى بنفس الصفحة ونفس الجهاز تقريبًا.
- ✅ متابعة تقرير Core Web Vitals في Search Console خلال الأسابيع التالية.
| لو مشكلتك الأساسية | ابدأ بهذه الخطوات | ثم انتقل إلى |
|---|---|---|
| LCP مرتفع | ضغط صورة الهيرو + كاش + تحسين الخادم | تقليل CSS/JS المانعة للعرض |
| INP مرتفع | تقليل سكربتات وإضافات + defer | تحسين التفاعل/تقليل DOM/تفكيك المهام |
| CLS مرتفع | تحديد أبعاد الصور + مساحة للإعلانات | حل الخطوط/العناصر التي تُحقن أعلى الصفحة |
11) أسئلة شائعة حول تسريع الموقع وتحسين Core Web Vitals
هل تحسين Core Web Vitals وحده يرفع ترتيب موقعي فورًا؟
لا تعتمد على “فورًا”. التحسين يساعد تجربة المستخدم وقد يدعم الأداء العام،
لكن الترتيب يعتمد أيضًا على المحتوى، نية البحث، الروابط، والثقة.
اعتبره: “إزالة عائق كبير” أمام النمو.
لماذا PageSpeed يعطي نتيجة مختلفة كل مرة؟
لأن الاختبار يعتمد على عوامل مثل الشبكة، وقت الاختبار، الكاش، ومكان السيرفر.
ركّز على الاتجاه العام، وراقب Field Data في Search Console مع الوقت.
هل الإعلانات (أدسنس) تؤثر على CWV؟
نعم ممكن تؤثر، خصوصًا CLS وINP، لكن يمكن تقليل الضرر بحجز مساحة للإعلانات،
وتقليل عددها، وتجنب الإعلانات التي تدفع المحتوى للأسفل فجأة.
ما هو أسرع شيء يرفع نتيجتي عادة؟
غالبًا: ضغط الصور + تفعيل كاش + تقليل سكربتات الطرف الثالث.
هذه الثلاثة تعطي فرقًا سريعًا وملحوظًا في مواقع كثيرة.
هل أركز على الموبايل أم الديسكتوب؟
ابدأ بالموبايل لأن أغلب الزيارات اليوم من الموبايل في كثير من المجالات،
ولأن الموبايل أكثر حساسية للبطء والسكربتات الثقيلة.
