كيف تحل مشاكل الأداء في موقعك باستخدام PageSpeed Insights

PageSpeed Insights هو الأداة التي تخبرك لماذا موقعك بطيء، وظهور اللون الأحمر في نتيجته لا يعني أن موقعك فاشل , بل يعني أن هناك أشياء محددة يمكن إصلاحها، والأداة تخبرك بها بالتفصيل.

في هذا الدليل سنقرأ التقرير خطوة بخطوة، ونحدد المشكلة التي تؤثر فعلًا على الزائر، ثم نطبق الحل. وسنشرح بالضبط أين تفتح كل ملف وأين تلصق كل كود، حتى لو كانت هذه أول مرة تعدّل فيها شيئًا في موقعك.

اخترنا WordPress لأنه الأكثر انتشارًا، وأغلب الحلول تنطبق على مواقع أخرى. وسنشير في كل مرحلة إلى ما يناسب الجميع، وما يناسب المطورين فقط.

لماذا حل مشاكل الأداء مهم لموقعك؟

• الزائر الذي ينتظر طويلًا غالبًا ما يغادر الصفحة قبل أن يقرأ شيئًا.
• مؤشرات تجربة المستخدم (Core Web Vitals) جزء من إشارات الترتيب في Google.
• الموقع السريع يحسّن تجربة الزائر، وهذا ينعكس على التفاعل والأرباح.

لكن هل يجب أن نصل إلى 100 من 100؟ ليس بالضرورة. الهدف أن يجتاز موقعك مؤشرات Core Web Vitals وأن يشعر الزائر بسرعة فعلية، لا أن نحصل على رقم مثالي.

ما الذي تحتاجه قبل البدء في حل مشاكل الأداء؟

1. رابط الصفحة التي تريد اختبارها
2. صلاحية الدخول إلى لوحة تحكم الموقع والاستضافة
3. نسخة احتياطية كاملة قبل أي تعديل
4. بعض الوقت والصبر 😄

المرحلة الأولى: كيف تقرأ تقرير PageSpeed Insights؟

توجه إلى pagespeed.web.dev، ضع رابط الصفحة، ثم اضغط تحليل. ستظهر النتيجة في قسمين:

• بيانات الزوار الحقيقيين (Field Data): بيانات تجمعها Google من متصفح Chrome لدى الزوار الفعليين خلال آخر 28 يومًا. وهي الأقرب لما يعتمد عليه Google، لكنها لا تتوفر لكل صفحة.
• بيانات المختبر (Lab Data): اختبار مباشر على جهاز افتراضي، وهو مفيد لتجربة التعديلات ومعرفة أثرها فورًا. ولا تخلط بينها وبين بيانات الزوار.

بعد ذلك اختر تبويب الجوال (Mobile) أولًا، لأنه غالبًا الأكثر تحديًا من ناحية الأداء. ثم اختبر الحاسوب أيضًا، فقد تكون نسبة زوارك منه كبيرة.

انزل إلى قسم Diagnostics (التشخيص)، فهو يخبرك ما الذي يبطئ صفحتك تحديدًا. وهذا ما سنعتمد عليه: لا نطبق حلًا إلا إذا ظهرت مشكلته في تقريرك.

المرحلة الثانية: فهم مؤشرات Core Web Vitals

المؤشر	ماذا يقيس؟	الهدف
LCP	سرعة ظهور أكبر عنصر في الصفحة (صورة أو عنوان)	أقل من 2.5 ثانية
INP	سرعة استجابة الصفحة عند النقر أو الضغط	أقل من 200 ملّي ثانية
CLS	ثبات العناصر وعدم قفزها أثناء التحميل	أقل من 0.1

وهناك مؤشرات تساعد في التشخيص، مثل FCP (أول ظهور للمحتوى) وTBT (مدة حجب الصفحة بسبب الجافاسكريبت) وTTFB (سرعة استجابة السيرفر).

ابدأ بالمؤشر الأحمر في بيانات الزوار الحقيقيين. وإن كانت كلها خضراء، فلا داعي للمبالغة في التحسين.

المرحلة الثالثة: خطوات حل مشاكل الأداء في ووردبريس

أين نضع الأكواد بالضبط؟

هذه أهم مرحلة للمبتدئ، لأن أغلب الأخطاء تحدث هنا. لديك طريقتان، اختر واحدة فقط ولا تخلط بينهما.

الطريقة الأولى (الأسهل والأكثر أمانًا): إضافة Code Snippets

أي خطأ في الكود يُوقف الكود وحده، ولا ينهار الموقع. والخطوات:

1. من لوحة ووردبريس: الإضافات ← أضف جديدة.
2. ابحث عن Code Snippets، ثم اضغط تثبيت ثم تفعيل.
3. من القائمة الجانبية اختر Snippets ← Add New.
4. اكتب في خانة Title اسمًا يذكّرك بوظيفة الكود، مثل تحميل الخط مسبقًا.
5. الصق الكود في المحرر.
6. اضغط Save Changes and Activate.

الطريقة الثانية: ملف functions.php في القالب الفرعي

هذه الطريقة تناسب من اعتاد على الملفات. اتبع الخطوات بالترتيب.

أولًا: تأكد أنك تستخدم قالبًا فرعيًا (Child Theme).
إن عدّلت functions.php في القالب الأصلي مباشرة، فسيمحو التحديث القادم تعديلاتك. إن لم يكن لديك قالب فرعي، فالتزم بالطريقة الأولى. أما قالب MisahaTech فيعدّله صاحبه مباشرة، فهذا مستثنى.

ثانيًا: افتح الملف. في استضافة Hostinger:

1. ادخل إلى hPanel ← المواقع ← إدارة بجانب موقعك.
2. اختر مدير الملفات (File Manager).
3. افتح المجلدات بهذا الترتيب: public_html ← wp-content ← themes ← مجلد قالبك (مثلًا misahatech-child).
4. ستجد الملف functions.php. حمّل نسخة منه إلى حاسوبك أولًا (انقر بالزر الأيمن ← Download)، فهي طوق النجاة إن أخطأت.
5. انقر عليه بالزر الأيمن ← Edit.

ثالثًا: ألصق الكود في المكان الصحيح.

• انزل إلى آخر الملف.
• إن وجدت في آخره ?> فألصق الكود قبله. وأغلب القوالب لا تضعه.
• ألصق الكود على سطر جديد، وبعد آخر دالة، لا في وسطها.
• لا تكرر <?php في أول الكود، فهو موجود أصلًا في أول الملف.

الشكل الصحيح يشبه هذا:

<?php
// ... محتوى الملف الأصلي كما هو ...

// هنا نلصق الكود الجديد، بعد آخر سطر في الملف
add_action( 'wp_head', function () {
    // الكود
} );

رابعًا: احفظ وجرّب. اضغط Save، ثم افتح موقعك في نافذة جديدة، وتأكد أنه يعمل.

الطريقة الأسرع: ملف جاهز

جمعنا أغلب أكواد هذا الدليل في ملف واحد اسمه performance.php: الخطوط، والاتصال المسبق، وتأجيل السكريبتات، وإزالة الإيموجي، ودالة الصورة البارزة. وجعلنا إعداداته في أول الملف لتعدّلها بسهولة.

1. من مدير الملفات، افتح مجلد القالب، وأنشئ بداخله مجلدًا جديدًا اسمه inc (إن لم يكن موجودًا).
2. ارفع performance.php إلى هذا المجلد، ليصبح مساره wp-content/themes/اسم-القالب/inc/performance.php.
3. افتح functions.php كما شرحنا، وألصق هذا السطر في آخره:

require_once get_template_directory() . '/inc/performance.php';

وإن كنت تستخدم قالبًا فرعيًا ووضعت الملف في مجلده، فاستخدم هذا السطر بدله:

require_once get_stylesheet_directory() . '/inc/performance.php';

للتراجع: احذف هذا السطر من functions.php، فيعود الموقع كما كان.

المرحلة الرابعة: حل مشكلة LCP البطيء

أولًا: حدد عنصر LCP في موقعك. لا نفترض أنه صورة المقال. في تقرير PageSpeed، ابحث في قسم Diagnostics عن Largest Contentful Paint element، وسيعرض لك العنصر نفسه. قد يكون صورة بارزة، أو صورة أخرى، أو عنوانًا كبيرًا.

1. تسريع الصورة (للجميع)

إن كان العنصر صورة:

• حوّلها إلى صيغة WebP أو AVIF، واضغطها بأدوات مثل Squoosh أو إضافة ShortPixel.
• لا ترفع صورة بعرض 3000 بكسل لتُعرض بعرض 400 بكسل.
• لا تفعّل عليها التحميل الكسول (Lazy Load)، لأنها أول ما يراه الزائر.

2. إعطاء الصورة أولوية (للمطورين)

نفذ هذا فقط إذا كان عنصر LCP هو صورة المقال البارزة، ولا تعطِ الأولوية العالية لكل الصور.

افتح ملف single.php في القالب (من نفس المجلد في مدير الملفات)، وابحث عن السطر الذي يستدعي الصورة البارزة، وغالبًا هو the_post_thumbnail(...). استبدله بهذا:

<?php
the_post_thumbnail( 'large', [
    'fetchpriority' => 'high',
    'loading'       => 'eager',
    'decoding'      => 'async',
] );
?>

لماذا لا تظهر fetchpriority على صورتي رغم أنني أضفتها؟

ووردبريس (من الإصدار 6.3) يعطي fetchpriority="high" تلقائيًا لأول صورة كبيرة في الصفحة. وفي أغلب القوالب أول صورة هي الشعار، فيأخذ الأولوية قبل الصورة البارزة، بينما هي التي يقيسها PageSpeed غالبًا كعنصر LCP.

كيف تتأكد؟ افتح المقالة، واضغط Ctrl+U لعرض مصدر الصفحة، ثم ابحث عن fetchpriority:

• إن وجدتها على صورة الشعار (custom-logo) فقط، فالشعار هو من يأخذ الأولوية.
• المطلوب أن تظهر على صورة المقال البارزة.

الحل: أزل الأولوية العالية من الشعار في صفحات المقالات:

add_filter('get_custom_logo_image_attributes', function ($attr) {
    if (is_singular('post') && has_post_thumbnail()) {
        $attr['fetchpriority'] = 'auto';
    }
    return $attr;
});

ضع هذا الكود بإحدى الطريقتين الموضّحتين في المرحلة الثالثة (Code Snippets أو functions.php).

ملاحظة: الأولوية العالية تُعطى لصورة واحدة فقط، هي صورة LCP. لا تضعها على عدة صور، وإلا فلن يتغيّر شيء. ولا تستعمل loading="lazy" على صورة LCP.

وإن كنت استخدمت ملف performance.php، فيكفي أن تكتب مكان:

<?php
the_post_thumbnail( 'large', [
    'fetchpriority' => 'high',
    'loading'       => 'eager',
    'decoding'      => 'async',
] );
?>

هذا السطر:

<?php misaha_lcp_thumbnail(); ?>

3. تحميل الخط بذكاء (للمطورين)

الأفضل أن يكون الخط مستضافًا على موقعك بصيغة woff2. ارفع الملف إلى مجلد fonts داخل مجلد القالب، ثم أضف هذا الكود في ملف CSS الخاص بالقالب، أو في المظهر ← تخصيص ← CSS إضافي:

@font-face {
  font-family: 'Cairo';
  src: url('https://example.com/wp-content/themes/اسم-القالب/fonts/cairo-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

الخاصية font-display: swap تجعل النص يظهر فورًا بخط بديل ريثما يكتمل تحميل الخط. ثم أضف هذا الكود (في functions.php أو Code Snippets) ليبدأ المتصفح تحميل الخط مبكرًا:

add_action( 'wp_head', function () {
    $font = get_template_directory_uri() . '/fonts/cairo-regular.woff2';
    echo '<link rel="preload" href="' . esc_url( $font ) . '" as="font" type="font/woff2" crossorigin>' . "\n";
}, 1 );

4. الاتصال المسبق بالدومينات الخارجية (للمطورين)

إن كنت تستخدم AdSense أو Google Analytics، فهذا الكود يوفر بعض الوقت قبل أن يبدأ تحميلهما:

add_action( 'wp_head', function () {
    echo '<link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin>' . "\n";
    echo '<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>' . "\n";
}, 2 );

5. تقليل زمن استجابة السيرفر (للجميع)

• فعّل التخزين المؤقت للصفحات (Page Cache) عبر LiteSpeed Cache أو WP Rocket.
• استخدم CDN مثل Cloudflare.
• حدّث نسخة PHP من لوحة الاستضافة إلى نسخة حديثة مستقرة تدعمها إضافاتك وقالبك.

لكن إذا كانت الاستضافة نفسها ضعيفة، فلن تنفعك أغلب التحسينات الأخرى، وقد يكون الحل في الانتقال إلى خطة أعلى.

المرحلة الخامسة: حل مشكلة CLS (قفزات المحتوى)

CLS هو الشعور المزعج عندما تحاول الضغط على زر فيقفز المحتوى فجأة. أبرز أسبابه الإعلانات، والصور بلا أبعاد، والعناصر التي تظهر فجأة.

1. الإعلانات (للجميع)

الفكرة أن نحجز للإعلان مساحة ثابتة قبل أن يظهر. والتنفيذ على خطوتين:

الخطوة الأولى: أضف CSS. من لوحة ووردبريس: المظهر ← تخصيص ← CSS إضافي، والصق في الخانة:

.ad-slot {
  min-height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .ad-slot { min-height: 250px; }
}

ثم اضغط نشر.

الخطوة الثانية: ضع الإعلان داخل الحاوية. في المقال أو الودجت، أضف كتلة HTML مخصص (Custom HTML) واكتب فيها:

<div class="ad-slot">
  <!-- كود وحدة AdSense هنا -->
</div>

2. الصور والفيديو (للمطورين)

أضف هذا في CSS إضافي كما سبق:

img {
  max-width: 100%;
  height: auto;
}

.video-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

وتأكد أن كل صورة في ملفات القالب تحمل width وheight. أما صور مكتبة الوسائط فيضيفهما ووردبريس تلقائيًا. وتجنب إدخال عناصر جديدة (بانرات أو إشعارات) فوق المحتوى بعد تحميل الصفحة.

المرحلة السادسة: حل مشكلة INP و TBT (الجافاسكريبت الثقيل)

تظهر هذه المشكلة عندما يكون الجافاسكريبت ثقيلًا فتتأخر الصفحة في الاستجابة.

1. ابدأ بالأسهل: تقليل الأثقال (للجميع)

• احذف الإضافات التي لا تستخدمها.
• راجع السكريبتات الخارجية (إعلانات، تحليلات، أزرار مشاركة)، وأبقِ ما تحتاجه فعلًا.
• في إضافة الكاش، جرّب خيار Delay JavaScript أو Defer JavaScript، واحدًا واحدًا، مع فحص الموقع بعد كل خيار.

2. تأجيل السكريبتات يدويًا (للمطورين فقط)

تنبيه: تأجيل سكريبت يعتمد عليه سكريبت آخر قد يعطل وظائف في الموقع (القوائم، والبحث، والإعلانات). لذلك جرّب كل سكريبت وحده، وافتح الموقع بعد كل تغيير.

إن كنت تسجل سكريبتات القالب بنفسك، فووردبريس 6.3 فما فوق يدعم التأجيل مباشرة. ضع هذا في functions.php:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'misaha-main',
        get_template_directory_uri() . '/js/main.js',
        [],
        '1.0',
        [ 'strategy' => 'defer', 'in_footer' => true ]
    );
} );

وإن أردت تأجيل سكريبت سجّلته إضافة أخرى، فاستخدم هذا الكود، واكتب داخل القائمة أسماء الـ handles التي تريدها:

add_filter( 'script_loader_tag', function ( $tag, $handle ) {
    $defer_list = [ 'prism' ]; // أضف أسماء السكريبتات هنا، واحدًا واحدًا بعد الاختبار

    if ( in_array( $handle, $defer_list, true ) && false === strpos( $tag, ' defer' ) ) {
        return str_replace( ' src=', ' defer src=', $tag );
    }
    return $tag;
}, 10, 2 );

3. إزالة ما لا تحتاجه (للمطورين)

// إزالة سكريبت وأنماط الإيموجي
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

// إزالة سكريبت التضمين (oEmbed): نفّذ ذلك فقط إن كنت لا تضمّن روابط ووردبريس
add_action( 'wp_footer', function () {
    wp_dequeue_script( 'wp-embed' );
} );

المرحلة السابعة: العناصر المعطِّلة للعرض وحجم DOM

إذا ظهر لك تحذير Eliminate render-blocking resources، فهذا يعني أن ملفات CSS أو JS تمنع ظهور الصفحة قبل تحميلها. الحل (للجميع) عبر إضافة الكاش:

• فعّل Critical CSS (أو Optimize CSS Delivery)، فيُحمَّل المهم أولًا والباقي لاحقًا.
• فعّل Remove Unused CSS إن كانت إضافتك تدعمه، وراجع شكل الموقع بعده.

وإذا ظهر تحذير Avoid an excessive DOM size، فبسّط التصميم وقلل الحاويات المتداخلة، وتجنب منشئات الصفحات الثقيلة عند الإمكان، وقسّم القوائم والتعليقات الطويلة إلى صفحات.

المرحلة الثامنة: ضغط ملفات CSS وJavaScript

كل مسافة وتعليق وسطر فارغ في ملفات CSS وJavaScript يزيد حجم الملف، رغم أن المتصفح لا يحتاج إليه. وضغط الملفات (Minify) يحذف ذلك دون أن يغيّر عمل الموقع. وهو الذي يظهر في التقرير باسم Minify CSS وMinify JavaScript.

1. الطريقة الأسهل: إضافة الكاش (للجميع)

فعّل خيار Minify CSS وMinify JS في إضافتك (مثل LiteSpeed Cache أو WP Rocket)، ثم افتح موقعك وتأكد أن التصميم سليم. فعّل الخيارات واحدًا واحدًا، لأن بعض الملفات القديمة قد لا تتحمل الضغط.

2. ضغط كود بسرعة دون تركيب شيء (للجميع)

استخدم أداة ضغط CSS وJavaScript أونلاين في موقعنا. الصق الكود، واضغط، وانسخ النتيجة أو حمّلها. والضغط يتم داخل متصفحك ولا يُرسل الكود إلى أي مكان.

3. إن كنت تطوّر قالبك بنفسك (للمطورين)

جهزنا ملفًا باسم minify.php يضيف صفحة في لوحة التحكم تضغط ملفات CSS الخاصة بالقالب وتنشئ نسخًا .min.css بجانب الأصل دون المساس به.

1. ارفع الملف إلى المجلد inc داخل مجلد القالب (كما فعلنا مع performance.php).
2. أضف في آخر functions.php:

require_once get_template_directory() . '/inc/minify.php';

3. ستجد الصفحة في المظهر ← ضغط الملفات.

ولكي يحمّل قالبك النسخة المضغوطة تلقائيًا، ابحث في functions.php عن الاستدعاء القديم لملف الأنماط، وغالبًا هو wp_enqueue_style( 'misaha-style', ... )، واستبدله بهذا:

add_action( 'wp_enqueue_scripts', function () {
    misaha_enqueue_css( 'misaha-style', '/style.css' );
} );

تحمّل الدالة style.min.css وتنشئه تلقائيًا إن كان مفقودًا أو أقدم من الأصل، وتحمّل الملف الأصلي إن كان WP_DEBUG مفعّلًا.

المرحلة التاسعة (اختيارية للمتقدمين): التخزين المؤقت والضغط عبر .htaccess

هذه خطوة اختيارية. كثير من الاستضافات وإضافات الكاش تفعّل الضغط والتخزين المؤقت وحدها، فلا تضف شيئًا قبل أن تتأكد:

1. افتح ملف .htaccess من مدير الملفات (في public_html، وقد تحتاج إلى تفعيل «إظهار الملفات المخفية»).
2. ابحث عن كلمات مثل ExpiresActive وDEFLATE. إن وجدتها فلا تضف شيئًا.
3. وإن لم تجدها، فخذ نسخة من الملف أولًا، ثم أضف الكود أعلى السطر # BEGIN WordPress:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/png  "access plus 1 month"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
</IfModule>

المرحلة العاشرة: كيف نتأكد أن التعديل نجح؟

1. افتح الموقع في نافذة خاصة، وانقر بالزر الأيمن ← Inspect ← تبويب Network، وأعد تحميل الصفحة.
2. تأكد أن الخط والصورة الرئيسية يُحمَّلان مبكرًا.
3. أعد اختبار الصفحة في PageSpeed Insights على الجوال، وقارن النتيجة بما قبل التعديل.
4. كرر القياس أكثر من مرة، لأن النتائج تتغير قليلًا من اختبار لآخر.
5. تصفّح الموقع بنفسك: القائمة، والبحث، والإعلانات، والتعليقات، فقد تتعطل وظيفة لا يلتقطها التقرير.
6. إن تضرر شيء، فعطّل آخر كود أضفته فقط.
7. تابع Search Console ← Core Web Vitals لترى أثر التحسينات على الزوار الحقيقيين، وقد يستغرق ظهوره بضعة أسابيع.

أخطاء شائعة

• مطاردة الرقم 100 بأي ثمن على حساب التصميم والوظائف.
• تجاهل نسخة الجوال والاكتفاء باختبار الحاسوب.
• نسيان النسخة الاحتياطية قبل التعديل.
• لصق عدة أكواد دفعة واحدة، فلا تعرف أيها سبب المشكلة.
• ضغط الملفات دون الاحتفاظ بنسخة من الأصل، فيصعب عليك التعديل لاحقًا.
• تثبيت إضافة جديدة لكل مشكلة، فتزيد المشكلة بدل أن تُحل.

الخلاصة

PageSpeed Insights ليست مجرد أداة تعطيك رقمًا، بل هي تقرير يرشدك إلى أماكن مشاكل الأداء. ابدأ بالأساسيات: الصور، والخطوط، والتخزين المؤقت، والاستضافة. ثم انتقل إلى الجافاسكريبت وCSS وضغط الملفات، وانتبه خصوصًا لمساحات الإعلانات إن كنت تعتمد على AdSense. وإن أردت ضغط الأكواد سريعًا، فجرّ بأداتنا المجانية.

وبهذا تكون قد تعلمت كيف تبدأ حل مشاكل الأداء في موقعك خطوة بخطوة، وكيف تقرأ تقرير PageSpeed Insights . في الجزء الثاني، سنطبق هذه الخطوات على موقع حقيقي، ونعرض النتائج قبل التحسين وبعده، مع الإعدادات التي استخدمناها في إضافات الكاش.

أسئلة شائعة عن PageSpeed Insights

الموارد

• PageSpeed Insights
• Google Search Console
• أداة ضغط CSS وJavaScript أونلاين
• تحميل ملف performance.php