3 حاجات اعملهم دلوقتي — هترفع الدرجة لـ 90+
- حدد أبعاد كل صورة — أضف
widthوheightلكل وسم<img>— هيمنع CLS فوراً - قلل وحدات أدسنس لـ 3-4 بس — كل وحدة بتحمل 100-150KB — هتوفر 300-600KB
- تأجيل JavaScript — أضف
deferلكل سكربت مش ضروري — هيحسّن INP مباشرة
ملخص سريع: 5 نقاط مهمة عن Core Web Vitals
- CLS (Cumulative Layout Shift) بيقيس استقرار الصفحة — جوجل عايزه أقل من 0.1
- INP (Interaction to Next Paint) بيقيس سرعة الاستجابة — جوجل عايزه أقل من 200ms
- الاتنين دول جزء من Core Web Vitals اللي جوجل بيستخدمهم في الترتيب من 2021 — ولو عايز تفهم أكتر راجع دليل SEO الكامل لبلوجر 2026
- إعلانات أدسنس الكتير بتأثر على CLS و INP مع بعض — 3-4 وحدات بس هي الحل الأمثل
- المراقبة المستمرة هي اللي بتحافظ على النتائج — روتين أسبوعي 15 دقيقة كفاية
لو وصلت لهنا يبقى أنت طبّقت الخطوات الأساسية في المقال الأول — ضغطت الصور، فعّلت Lazy Loading، شلت الخطوط الخارجية، نظّفت CSS/JS، واختارت قالب خفيف. درجتك بقى حوالي 75-80. بس عايز توصل 90+ وتخلّي Core Web Vitals كلها خضرا. المقال ده هو اللي هيوصّلك هناك.
Core Web Vitals هى تلات مؤشرات جوجل بيقيس بيها جودة تجربة المستخدم في موقعك: LCP (سرعة عرض أكبر عنصر — اتكلمنا عنه في المقال الأول)، CLS (استقرار الصفحة وإزاحة العناصر)، و INP (سرعة استجابة الموقع للنقر). الاتنين التانيين هما اللي هنتكلم عنهم هنا — وهم اللي بيفرّقوا بين درجة 80 ودرجة 90+.
كمان هنشرح إزاي تظبط إعلانات أدسنس من غير ما تبطّئ الموقع — لأن الإعلانات بتأثر على CLS و INP مع بعض. وفي الآخر هنبنى روتين مراقبة أسبوعي عشان تحافظ على النتائج. ولو لسه مش فاهم ليه السرعة مهمة لـ SEO، راجع دليل SEO الكامل لبلوجر 2026.
INP حل مكان FID من مارس 2024 — والمؤشر الجديد أصرم بكتير. FID كان بيقيس أول تفاعل بس، بس INP بيقيس كل التفاعلات خلال زيارة الزائر. يعنى لو عندك أكورديون FAQ بيتفتح ببطء، أو أزرار بتتأجل ترد — INP هيلقطك.
مقالات كتير بتشرح Core Web Vitals بس من ناحية تقنية بحتة. المقال ده بيديك خطوات عملية لبلوجر بالذات — كل حاجة جربناها على مدونات بلوجر حقيقية ومعها النتائج الفعلية.
LCP: 5.4s → 1.8s (تحسن 67%)
CLS: 0.31 → 0.02 (تحسن 94%)
INP: 380ms → 130ms (تحسن 66%)
عدد الطلبات: 142 → 61 (تقليل 57%)
حجم الصفحة: 4.2MB → 1.1MB (تقليل 74%)
السر: ضغط الصور + شيل Google Fonts (في المقال الأول) + تقليل الإعلانات من 7 لـ 3 + تأجيل JavaScript + حجز مكان للإعلانات (في المقال ده). التغييرات كلها اتطبقت في 3 ساعات.
إزاي تقلل CLS — إزاحة التخطيط المزعجة؟
CLS (Cumulative Layout Shift) بيقيس استقرار الصفحة — يعنى هل العناصر بتتحرك وتقفز فجأة لما الصفحة بتتحمل؟ لو أي زائر بيدوس على حاجة وفجأة العنصر بيتحرك وحاجة تانية بتاخد مكانه — ده CLS عالي وتجربة مستخدم سيئة. جوجل عايز CLS أقل من 0.1 عشان يعتبره "كويس". ولو أكتر من 0.25 = فاشل. المشكلة إن CLS العالي مش بس بيأثر على الترتيب — كمان بيخلي الزائر يضغط على حاجات غلط (زي إعلان بدل الرابط اللي كان عايزه) وده بيخلّي تجربة الاستخدام كارثية.
أكتر أسباب CLS العالي في بلوجر: (1) صور من غير أبعاد محددة — لما الصورة تتحمل بتدفع المحتوى تحت فجأة، (2) إعلانات أدسنس بتتحمل فجأة وبتبدّل مكان العناصر، (3) خطوط خارجية بتتأخر في التحميل وبعدين بتغيّر حجم النص. الحلول بسيطة ومباشرة: حدد أبعاد كل صورة، حجز مكان للإعلانات مسبقاً، واستخدم خطوط النظام — واتكلمنا عن الخطوط في المقال الأول.
| سبب CLS | الحل | الكود |
|---|---|---|
| صور من غير أبعاد | حدد width + height | <img width="800" height="450"> |
| إعلانات مفاجئة | احجز مكان ثابت | style="min-height:280px" |
| خطوط خارجية (FOUT) | استخدم خطوط النظام | font-display: optional |
| iframes من غير أبعاد | حدد الأبعاد أو استخدم container | aspect-ratio: 16/9 |
/* حجز مكان لوحدة إعلانية */
.ad-slot {
min-height: 280px;
width: 100%;
background: #f5f5f5;
}
/* حجز مكان لفيديو YouTube */
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
لو لسه ما حددتش أبعاد الصور في مقالاتك — ارجع لـ الخطوة 1 في المقال الأول. CLS مش هيتحسن لو الصور لسه من غير width و height!
إزاي تحسّن INP — سرعة استجابة موقعك للنقر؟
INP (Interaction to Next Paint) هو المؤشر اللي حل مكان FID من مارس 2024. بيقيس سرعة استجابة الموقع لما الزائر بيعمل أي تفاعل — دوسة، كتابة، سكرول. جوجل عايز INP أقل من 200 مللي ثانية عشان يعتبره "كويس". لو أكتر من 500ms = فاشل. المؤشر ده مهم خصوصاً لو عندك عناصر تفاعلية كتير زي أزرار تبديل، قوائم منسدلة، أو أكورديون أسئلة شائعة — يعنى لو الزائر بيضغط على سؤال في الـ FAQ والموقع بياخد نص ثانية يرد، INP هيلقطك.
أكتر أسباب INP العالي في بلوجر: (1) JavaScript كتير بيشتغل في الـ main thread وبيمنع المتصفح يرد على النقر، (2) إعلانات أدسنس بتستهلك موارد كتير خصوصاً لو كتير، (3) CSS animations كثيرة أو heavy. الحل الأساسي هو تقليل JavaScript اللي بيشتغل في الصفحة وتأجيل اللي مش ضروري — واتكلمنا عن defer و async في المقال الأول.
شاملة INP — إزاي تخلّي موقعك سريع الاستجابة
- قلل عدد وحدات أدسنس — 3-4 وحدات بس
- تأجيل JavaScript غير الضروري بـ
deferأوasync - احذف jQuery لو مش محتاجه — كل مكتبة بتزوّد INP
- استخدم
requestIdleCallbackللعمليات الغير عاجلة - اختبر INP بـ PageSpeed Insights و WebPageTest
بطء تحميل الصور
الإعلانات بتزحزح الصفحة
الموقع بيتأخر يرد على النقر
القالب نفسه ثقيل
أكتر الناس بتختار الخيار التاني والتالت — وده بياعكس إن CLS و INP هم اللي بيفرّقوا بين درجة 80 و 90+.
المقال الأول (6 خطوات) ← CLS ← INP (أنت هنا!) ← أدسنس ← المراقبة ← أخطاء قاتلة
إزاي تظبط إعلانات أدسنس من غير ما تبطّئ الموقع؟
أدسنس بيجيب فلوس — بس كل وحدة إعلانية بتحمل JavaScript خارجي من سيرفرات جوجل، وده بيأثر على السرعة. وحدة إعلانية واحدة بتحمل حوالي 100-150KB من JavaScript + CSS + الصور. يعنى لو عندك 6 وحدات = حوالي 600-900KB بس من الإعلانات! مش بس كده — الإعلانات بتأثر على CLS (بتزحزح المحتوى) و INP (بتستهلك موارد). ولو عايز تفاصيل أكتر عن إزاي توازن بين الأرباح والسرعة، راجع دليل تحسين أرباح أدسنس بدون خسارة السرعة.
الحل مش إنك تشيل أدسنس — الحل إنك تظبطه صح. أولاً، قلل عدد الوحدات لـ 3-4 كحد أقصى. ثانياً، حجز مكان ثابت لكل وحدة عشان متزحزحش المحتوى (اتكلمنا عن ده في CLS). ثالثاً، استخدم مواضع استراتيجية: وحدة فوق المقال + وحدة في النص + وحدة تحت المقال — وده بيدي أفضل أداء مالي مع أقل تأثير على السرعة.
إعلانات كتير (بطيء)
6-8 وحدات إعلانية
إعلان Pop-up يقفل المحتوى
CLS عالي (0.35+)
INP ضعيف (450ms+)
أرباح أكتر بس زوار أقل
إعلانات استراتيجية (سريع)
3-4 وحدات بس
مواضع: فوق + جوه + تحت
CLS منخفض (0.05)
INP كويس (120ms)
أرباح أقل شوية بس زوار أكتر
| الموضع | نوع الإعلان | التأثير على السرعة | العائد المالي |
|---|---|---|---|
| فوق المقال | Display / Auto Ads | متوسط | عالى |
| جوه المقال (In-article) | In-article Ad | متوسط-عالى | عالى جدًا |
| تحت المقال | Display / Matched Content | منخفض | متوسط |
| الشريط الجانبي | Display | منخفض | منخفض |
| Pop-up / Interstitial | — | عالى جدًا (ممنوع!) | عالى بس ممنوع |
إزاي تراقب السرعة وتحافظ عليها على المدى الطويل؟
تحسين السرعة مش حاجة بتعملها مرة وبس — ده عملية مستمرة. كل مقال جديد بتنشره، كل إضافة بتحطها، كل تحديث للقالب — كل ده ممكن يأثر على السرعة. عشان كده لازم تبني روتين مراقبة أسبوعي عشان تلاقي أي تراجع في السرعة وتصلحه فوراً. أحسن طريقة هي تستخدم أدوات بلوجر المجانية اللي بتديك بيانات حقيقية من زوارك الفعليين.
الأداتين الأساسيتين هم: Google Search Console (بيديك بيانات Core Web Vitals من زوارك الحقيقيين) و PageSpeed Insights (بيديك تحليل مفصّل لأي صفحة). كمان GTmetrix أداة ممتازة بتديك تقرير مفصّل بالحاجات اللي لازم تصلحها. المهم إنك تتخطن مرة في الأسبوع على الأقل — ولو لقيت أي مؤشر بيتغيّر من أخضر لبرتقالي، ابدأ صلّحه فوراً قبل ما يتحول لأحمر.
لو وصلت لهنا تكون عملت أكتر من 90% من أصحاب المدونات! كتير بيحسّنوا السرعة مرة وبعدين بينسوا المراقبة — وده بيخلي النتائج تتراجع مع الوقت. نصيحة: حط تذكير أسبوعي على موبايلك عشان تفحص Search Console.
5 أخطاء بتدمّر سرعة بلوجر بدون ما تاخد بالك
بعد ما مشينا على الخطوات الأساسية والمتقدمة، فيه أخطاء معينة بيتكرر أكتر من غيرها وبتكون السبب الرئيسي إن درجة PageSpeed تفضل ضعيفة رغم كل المحاولات. الأخطاء الخمسة دي مش بس بتأثر على السرعة — كمان بتخلي جوجل يخفض ترتيبك وبتخسر زوار محتملين كل يوم.
| # | الخطأ | تأثيره | الحل |
|---|---|---|---|
| 1 | رفع صور PNG كبيرة بدون ضغط | بيزوّد حجم الصفحة 3-5 أضعاف | حوّلها WebP بجودة 75-80 |
| 2 | تفعيل Auto Ads العشوائية | إعلانات كتير + CLS عالي + INP ضعيف | 3-4 وحدات بس في مواضع محددة |
| 3 | تحميل 5-10 خطوط Google Fonts | كل خط بيعمل HTTP request + بيسد الـ render | شيلهم واستخدم خطوط النظام |
| 4 | ودجات خارجية كتير (widgets) | كل ودجة بتحمل JS + CSS خارجي | احذف اللي مش بتستخدمه |
| 5 | أكواد نسخ/لصق مجهولة المصدر | ممكن فيها tracking scripts أو أكواد مشفرة | استخدم أكواد من مصادر موثوقة بس |
| الأداة | الاستخدام | السعر | الرابط |
|---|---|---|---|
| PageSpeed Insights | قياس سرعة الصفحة + توصيات | مجاني | pagespeed.web.dev |
| Search Console | Core Web Vitals من زوار حقيقيين | مجاني | searchconsole.google.com |
| GTMetrix | تحليل مفصّل + تقرير Waterfall | مجاني (محدود) | gtmetrix.com |
| Lighthouse | تحليل شامل (مدمج في Chrome DevTools) | مجاني | Chrome F12 → Lighthouse |
| WebPageTest | اختبار من مواقع مختلفة حول العالم | مجاني | webpagetest.org |
حدد أبعاد كل صورة (width + height) واحجز مكان ثابت للإعلانات بـ min-height. ده بيلغي CLS تقريباً وبيخلى الصفحة مستقرة أثناء التحميل. وتأجل كل JavaScript مش ضروري بـ defer.
تفعيل Auto Ads العشوائية — أدسنس بيحط إعلانات في أي مكان وده بيسبب CLS عالي و INP ضعيف. لو عايز أرباح كويسة مع سرعة كويسة، استخدم 3-4 وحدات بس في مواضع محددة.
استخدام CDN أو كاش (زي Cloudflare) ممكن يحسّن السرعة — بس بلوجر نفسه عنده CDN مدمج (Google CDN) فالتحسن مش هيكون كبير. جرّب بس متعتمدش عليه كحل أساسي.
أيوا، ممكن — بالترتيب الصح. المقال الأول رفعك من 40 لـ 80+ بالخطوات الأساسية (صور + Lazy Loading + خطوط + CSS/JS + قالب + LCP). المقال ده بيوصلك لـ 90+ عبر تحسين CLS و INP وظبط أدسنس وبناء روتين مراقبة. النتائج بتختلف حسب القالب وعدد المقالات، بس أغلب المدونات تقدر توصل 85-95+ لو طبقت كل الخطوات في المقالين.
المصادر والمراجع
- web.dev، "Optimize Cumulative Layout Shift" — دليل تحسين CLS — web.dev/cls
- web.dev، "Optimize Interaction to Next Paint" — دليل تحسين INP — web.dev/inp
- Google Search Central، "Core Web Vitals" — الدليل الرسمي — web.dev/vitals
- Google Search Console، "تقارير تجربة الصفحة" — بيانات CWV من زوارك — searchconsole.google.com
تحسين Core Web Vitals لبلوجر 2026: دليل عملي لتقليل CLS و INP والوصول لـ PageSpeed 90+. تعلّم إزاي تقلل إزاحة التخطيط بتحديد أبعاد الصور وحجز مكان للإعلانات، تحسّن سرعة الاستجابة بتأجيل JavaScript، تظبط إعلانات أدسنس من غير ما تبطّئ الموقع، وتبني روتين مراقبة مستمر. الجزء الثاني من سلسلة تحسين سرعة بلوجر.
تحسين Core Web Vitals لبلوجر بيوصلك لدرجة PageSpeed 90+. ابدأ بتقليل CLS بتحديد أبعاد الصور وحجز مكان للإعلانات. بعدين حسّن INP بتأجيل JavaScript وتقليل وحدات أدسنس لـ 3-4 بس. وابني روتين مراقبة أسبوعي عشان تحافظ على النتائج. ده الجزء التاني من سلسلة تحسين سرعة بلوجر — الجزء الأول بيغطي الخطوات الأساسية.
الأسئلة الشائعة عن Core Web Vitals لبلوجر
1 إيه الفرق بين LCP و CLS و INP؟
2 هل إعلانات أدسنس بتأثر على سرعة بلوجر؟
3 إيه هو INP وليه حل مكان FID؟
4 لو طبقت كل الخطوات ومش وصلت 90+، إيه السبب؟
مقالات ممكن تهمك
الجزء الأول من المقال ده:
دليل تحسين سرعة بلوجر 2026 — 6 خطوات أساسية
SEO بلوجر:
دليل SEO كامل 2026 | تحسين أرباح أدسنس
دليل بلوجر:
أدوات بلوجر المجانية | إعداد بلوجر من الصفر