دليل PageSpeed Insights
كيف تقرأ النتائج وتحصل على 100/100؟

لماذا نستخدم PageSpeed Insights؟

أداة Google PageSpeed Insights (PSI) هي المقياس الرسمي من جوجل لمعرفة مدى سرعة وكفاءة صفحة الويب. لم تعد السرعة مجرد "ميزة إضافية"، بل هي عامل أساسي في ترتيب نتائج البحث وتجربة المستخدم.

عندما يكون موقعك بطيئاً، فإن جوجل يزحف إلى صفحات أقل، والمستخدمون يغادرون قبل رؤية محتواك، مما يرفع من معدل الارتداد (Bounce Rate) ويدمر مبيعاتك. كل ما يحدث خلف الكواليس التقنية ينعكس مباشرة على أرباحك وتصنيفك.

كيف تطورت أداة PageSpeed عبر السنين؟

لم تصل PageSpeed Insights إلى شكلها الحالي دفعة واحدة. فهم تطورها يساعدك على فهم لماذا تُعطى الأولوية لمقاييس بعينها اليوم.

بيانات المختبر (Lab Data) مقابل البيانات الحقيقية (Field Data)

أول ما يُربك المستخدمين في أداة PageSpeed هو وجود مجموعتين من الأرقام. لكي تفهم النتائج بشكل صحيح، يجب أن تفرق بينهما:

شرح مؤشرات Core Web Vitals الحديثة

للحصول على العلامة الخضراء، يجب أن تنجح في المقاييس الثلاثة الرئيسية التي تحددها جوجل. (ملاحظة: تم استبدال مقياس FID بمقياس INP مؤخراً).

الجوال مقابل سطح المكتب — أيهما يجب أن تركز عليه أولاً؟

PageSpeed Insights يعطيك تقريرين منفصلين: واحد للموبايل وواحد للديسكتوب. غالباً ما تكون نتيجة الديسكتوب أعلى بكثير. إليك لماذا وكيف تتعامل مع كل منهما:

كيف تشخّص مشاكل موقعك خطوة بخطوة؟

قبل البدء في إصلاح أي شيء، عليك أولاً تحديد المشكلة الحقيقية. إليك المنهجية الصحيحة لتشخيص أداء موقعك:

أكثر الأخطاء شيوعاً وكيفية إصلاحها

بعد تحليل مئات المواقع العربية، هذه هي التنبيهات الأكثر تكراراً في أداة PageSpeed وما الذي يسببها وكيف تحلها:

كيف تحصل على 100/100 فعلياً؟

للوصول للعلامة الخضراء، يجب عليك معالجة التنبيهات التي تظهر في أسفل أداة PageSpeed. إليك أهم الخطوات العملية للقضاء على هذه التنبيهات:

أمثلة برمجية عملية جاهزة للنسخ

إليك أكواداً جاهزة يمكنك تطبيقها مباشرة في مشروعك لتحسين مقاييس PageSpeed:

تحميل صورة LCP بأعلى أولوية

<!-- صورة Hero بأعلى أولوية تحميل -->
<link rel="preload" as="image"
      href="/images/hero.webp"
      fetchpriority="high">

<img
  src="/images/hero.webp"
  width="1200"
  height="630"
  alt="وصف الصورة"
  fetchpriority="high"
  decoding="sync"
>

<!-- باقي الصور: Lazy Load -->
<img
  src="/images/other.webp"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
>

تحسين تحميل الخطوط

<!-- في <head> — Preconnect + Preload للخط -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

/* في CSS: استخدم font-display: swap */
@font-face {
  font-family: 'Cairo';
  src: url('/fonts/cairo.woff2') format('woff2');
  font-display: swap; /* مهم جداً لمنع CLS */
  font-weight: 400 900; /* Variable font */
}

تأجيل الجافاسكريبت الثقيل

// تحميل الأكواد الثقيلة بعد تفاعل المستخدم
function loadScriptsOnInteraction() {
  // Google Analytics
  const script = document.createElement('script');
  script.src = 'https://www.googletagmanager.com/gtag/js';
  script.async = true;
  document.head.appendChild(script);
}

// تنفيذ عند أول تفاعل فقط (scroll/click/touchstart)
['scroll', 'mousemove', 'touchstart'].forEach(evt => {
  window.addEventListener(evt, loadScriptsOnInteraction, {
    once: true,
    passive: true
  });
});

دور الاستضافة في سرعة موقعك — اختر بحكمة

كثيرون يضيعون وقتهم في ضغط الصور وتأجيل الـ JS بينما سيرفرهم بطيء أصلاً. TTFB الجيد (أقل من 200ms) هو الأساس — لا يمكنك بناء موقع سريع على سيرفر بطيء.

أفضل الإضافات والأدوات للتسريع

لا تحتاج للقيام بكل شيء يدوياً. إذا كنت تستخدم ووردبريس أو أنظمة مشابهة، هذه الأدوات ستنجز 80% من العمل عنك:

قائمة مراجعة شاملة لمواقع ووردبريس

ووردبريس يحتل 43% من مواقع الإنترنت، لكنه بدون تحسين صحيح يكون أحد أبطأ الأنظمة. إليك قائمة مراجعة شاملة مقسمة بحسب الأولوية:

وهم الـ 100/100 المطلق

أكبر خطأ يقع فيه أصحاب المواقع هو الهوس بالوصول إلى النتيجة 100/100 في المختبر (Lab Data) على حساب تجربة المستخدم أو جودة التصميم.

أسئلة يسألها الجميع عن PageSpeed

إليك إجابات واضحة ومباشرة على أكثر الأسئلة التي تتكرر حول PageSpeed Insights وسرعة المواقع: