تحسين Core Web Vitals في ووردبريس: دليل كامل

إذا كنت صاحب موقع ووردبريس، فربما لاحظت أن أداء موقعك يؤثر مباشرة على ترتيبك في جوجل. أدوات مثل PageSpeed Insights أو Lighthouse تركز على Core Web Vitals، وهي مجموعة مؤشرات مهمة لقياس تجربة المستخدم:

1. Largest Contentful Paint (LCP): الوقت الذي يستغرقه تحميل أكبر عنصر مرئي.
2. First Input Delay (FID): سرعة تفاعل المستخدم مع الموقع.
3. Cumulative Layout Shift (CLS): ثبات التصميم أثناء تحميل الصفحة.

في هذه المقالة، سنغطي الحلول العملية والأكواد الكبيرة جدًا لتحسين كل مؤشر، خطوة بخطوة.

---

1️⃣ تحسين LCP: تسريع تحميل المحتوى الرئيسي

أهم أسباب بطء LCP: صور كبيرة، خطوط غير محسّنة، جافاسكريبت ثقيل.

أ. تحميل الصور بصيغة WebP وضغطها تلقائيًا

add_filter('wp_handle_upload', function($file){
    if(in_array($file['type'], ['image/jpeg','image/png'])){
        $image = imagecreatefromstring(file_get_contents($file['file']));
        $webp_file = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file['file']);
        imagewebp($image, $webp_file, 80);
        imagedestroy($image);
        $file['file'] = $webp_file;
        $file['type'] = 'image/webp';
    }
    return $file;
});

يقلل حجم الصور بشكل كبير ويُسرّع تحميل الصفحة.

ب. تحميل الخطوط بشكل غير متزامن

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
</noscript>

هذا يمنع حجب الرندر بسبب خطوط الويب.

ج. تقليل JavaScript وCSS غير الضروري

استخدم هذا الكود في functions.php لتعطيل سكربتات غير مهمة في صفحات معينة:

function remove_unused_scripts() {
    if(!is_single()) {
        wp_dequeue_script('contact-form-7');
        wp_dequeue_style('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'remove_unused_scripts', 100);

---

2️⃣ تحسين FID: سرعة التفاعل

FID يعتمد على سرعة استجابة جافاسكريبت:

أ. تأجيل جافاسكريبت غير مهم

function defer_parsing_js($url) {
    if(is_admin()) return $url;
    if(strpos($url, '.js') === false) return $url;
    return "$url' defer='defer";
}
add_filter('clean_url', 'defer_parsing_js', 11, 1);

ب. استخدام Web Workers للعمليات الثقيلة

if(window.Worker){
    const worker = new Worker('worker.js');
    worker.postMessage({action:'calculateHeavy'});
    worker.onmessage = function(e){
        console.log('نتيجة المعالجة:', e.data);
    }
}

يفصل العمليات الثقيلة عن واجهة المستخدم، مما يقلل تأخير التفاعل.

---

3️⃣ تحسين CLS: منع التحرك العشوائي للعناصر

أ. تحديد أبعاد الصور والفيديوهات

<img src="hero.webp" width="1200" height="600" alt="Hero Image">
<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
</video>

يعطي المتصفح مساحة ثابتة قبل تحميل العناصر.

ب. تخصيص CSS لمكان الإعلانات أو الودجيتات

.ad-container {
    width: 300px;
    height: 250px;
    display: block;
}

يمنع تغيرات غير متوقعة أثناء تحميل الإعلانات.

---

4️⃣ استخدام الكاش والCDN لتسريع التحميل

أ. Page Caching

define('WP_CACHE', true);

ب. Cloudflare أو أي CDN مع Brotli/Gzip

gzip on;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
brotli on;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

يقلل وقت استجابة السيرفر ويزيد سرعة التحميل العالمية.

---

5️⃣ مراقبة Core Web Vitals بشكل مستمر

استخدم هذا السكربت لتسجيل مؤشرات Core Web Vitals في قاعدة بيانات:

if ('performance' in window) {
    const po = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
            fetch('/save-vitals.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(entry)
            });
        });
    });
    po.observe({type: 'largest-contentful-paint', buffered: true});
    po.observe({type: 'layout-shift', buffered: true});
}

سيساعدك على معرفة الصفحات التي تحتاج تحسينًا بشكل مستمر.

---

✅ خلاصة: خطوات عملية لكل Core Web Vital

المؤشر	الحلول العملية
LCP	ضغط الصور، WebP، Preload الخطوط، تقليل CSS/JS
FID	تأجيل الجافاسكريبت، Web Workers
CLS	تحديد أبعاد الصور والفيديو، CSS ثابت للعناصر الديناميكية

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

---

🚀 احصل على مساعدة احترافية مع سيو سمارتر

إذا كنت تريد تحسين Core Web Vitals لموقعك بسرعة وأمان، فريق سيو سمارتر يقدم:

• تحليل كامل لكل صفحة من موقعك.
• أكواد مخصصة لتسريع ووردبريس وحماية الأداء.
• دعم مستمر لضمان تجربة مستخدم مثالية.

📞 اتصل بنا الآن للحصول على استشارة مجانية وتحسين موقعك لمعايير Core Web Vitals:
سيو سمارتر | تواصل معنا