تسريع الموقع - Page Speed
دليلك الشامل في تحسين محركات البحث
ليه السرعة عامل حاسم في السيو؟#
السرعة تؤثر على السيو من مسارين. المسار المباشر أنها ضمن إشارات تجربة الصفحة، لكن وزنها ترجيحي: تفرق عند تقارب الجودة، ولا ترفع صفحة ضعيفة فوق صفحة قوية.
المسار غير المباشر أهم بكثير: الزائر الذي ينتظر أكثر من ثلاث ثوانٍ يغادر قبل أن يرى محتواك أصلاً. أنت تخسره قبل أن تبدأ.
ما الذي يُقاس فعلاً#
| المقياس | يقيس | الهدف |
|---|---|---|
| LCP | ظهور أكبر عنصر مرئي | أقل من 2.5 ثانية |
| INP | استجابة الصفحة للتفاعل | أقل من 200 مللي ثانية |
| CLS | ثبات العناصر أثناء التحميل | أقل من 0.1 |
| TTFB | زمن أول بايت من الخادم | أقل من 800 مللي ثانية |
أدوات القياس#
- PageSpeed Insights: يجمع المعملي والميداني في صفحة واحدة
- تقرير Core Web Vitals في Search Console: يعرض الموقع كله مجمّعاً في مجموعات صفحات
- WebPageTest: اختبار من مواقع جغرافية وسرعات اتصال مختلفة
- Chrome DevTools: تبويب Performance لتشخيص ما يعطّل الخيط الرئيسي
اختبر دائماً من موقع جغرافي قريب من جمهورك الحقيقي. اختبار سيرفر مصري من فرانكفورت يعطي رقماً لا يعيشه أحد من زوارك.
الترتيب العملي للتحسين#
1. الصور أولاً
في أغلب المواقع العربية هذه وحدها تحل نصف المشكلة. حوّل إلى WebP، وحدد الأبعاد، وفعّل التحميل الكسول لما هو تحت الشاشة الأولى.
2. التخزين المؤقت و CDN
ترويسات تخزين صحيحة، وشبكة توصيل تقدّم الملفات من أقرب نقطة للزائر.
3. الخطوط
font-display: swap، وحمّل الأوزان التي تستخدمها فقط، واستخدم preconnect لمصدر الخطوط.
4. نظّف JavaScript
أجّل السكربتات غير الحرجة، واحذف الإضافات غير المستخدمة، وراجع سكربتات التتبع المتراكمة.
5. الخادم
استضافة مناسبة، وHTTP/2 أو HTTP/3، وتخزين مؤقت على مستوى الخادم.
6. صورة الغلاف
لا تجعلها كسولة أبداً، واستخدم fetchpriority="high". هذه غالباً هي عنصر LCP نفسه.
أخطاء تُبطئ بلا داعٍ#
- قالب محمّل بمزايا لا تستخدمها، يحمّل CSS و JS لكل شيء في كل صفحة
- سلايدر في أعلى الصفحة يحمّل خمس صور كبيرة قبل أي محتوى
- عشرون إضافة، كل واحدة تضيف ملفاتها الخاصة
- خطوط بأربعة أوزان بينما تستخدم وزنين
loading="lazy"على صورة الغلاف، فتتأخر بدل أن تتسارع