← جميع المقالات >
magento 2core web vitalsperformance optimizationlcpinpclsseoe-commerce

Core Web Vitals في Magento 2: دليل التحسين (2026)

F
Faouzi Yahyaoui Jun 29, 2026 · 7 min read
Share: LinkedIn X Facebook

Core Web Vitals هي مقاييس أداء Google التي تؤثر بشكل مباشر على ترتيب البحث. متاجر Magento 2 تواجه تحديات فريدة — JavaScript ثقيل وحزم CSS ضخمة وعرض مدفوع بقاعدة البيانات وإضافات طرف ثالث تضيف ثقلًا. يغطي هذا الدليل استراتيجيات محددة لتحسين LCP و INP و CLS لـ Magento 2 في الإنتاج، من ضبط الخادم إلى تسليم الأصول الأمامية.

باختصار: Core Web Vitals تقيس التحميل (LCP) والتفاعل (INP) والاستقرار البصري (CLS). بالنسبة لـ Magento 2، أكبر المكاسب تأتي من: تخزين Varnish المؤقت لـ LCP، و JavaScript محسّن لـ INP، وسمات أبعاد صريحة لـ CLS. اطلع على دليل استراتيجيات التخزين المؤقت للطبقة الأساسية.

جدول المحتويات

  1. ما تقيسه Core Web Vitals
  2. LCP: Largest Contentful Paint
  3. INP: Interaction to Next Paint
  4. CLS: Cumulative Layout Shift
  5. اختناقات الأداء الخاصة بـ Magento
  6. قياس ومراقبة Core Web Vitals
  7. ضبط مستوى الخادم لـ Magento 2
  8. تحسين الأصول الأمامية
  9. إدارة إضافات الطرف الثالث
  10. الأسئلة الشائعة

ما تقيسه Core Web Vitals

المقياسما يقيسهالحد الجيدتأثير Magento 2
LCPLargest Contentful Paint (سرعة التحميل)≤ 2.5sاعتماد كبير على FPC، صفحات فئات غنية بالصور
INPInteraction to Next Paint (الاستجابة)≤ 200msRequireJS، Knockout، ودجات طرف ثالث
CLSCumulative Layout Shift (الاستقرار البصري)≤ 0.1تحميل الخطوط، أبعاد الصور، حقن محتوى ديناميكي

متجر يجتاز الحدود الثلاثة عند الشريحة المئوية 75 لكل من الجوال وسطح المكتب يعتبر «جيدًا» في Google Search Console.

LCP: Largest Contentful Paint

LCP يقيس متى ينتهي أكبر عنصر مرئي (عادة صورة رئيسية أو عنوان) من التحميل. بالنسبة لـ Magento 2، LCP يهيمن عليه وقت استجابة الخادم (TTFB) وتسليم الصور.

تحسين TTFB باستخدام Varnish

أكبر تحسن في LCP لمعظم المتاجر هو تفعيل Varnish. الصفحة المخزنة مؤقتًا تُحمل في 5–20ms مقابل 300–800ms لصفحة ديناميكية. قم بتكوين Varnish باتباع دليل استراتيجيات التخزين المؤقت .

تحسين الصور الرئيسية

<!-- قبل: صورة منتج Magento الافتراضية -->
<img src="media/catalog/product/cache/.../image.jpg" alt="اسم المنتج">

<!-- بعد: WebP مع srcset وإيقاف التحميل البطيء للصورة الرئيسية -->
<picture>
  <source srcset="image-800w.webp" type="image/webp" media="(min-width: 768px)">
  <source srcset="image-400w.webp" type="image/webp">
  <img src="image-800w.jpg" alt="اسم المنتج" width="800" height="600" fetchpriority="high">
</picture>

التحسينات الرئيسية:

  • استخدم fetchpriority="high" على صورة LCP لإخبار المتصفح بتحميلها أولاً
  • حدد دائمًا سمات width و height صريحة (تمنع CLS أيضًا)
  • قدم WebP مع fallback JPEG لتوافق المتصفحات
  • حمّل مسبقًا صورة LCP في <head>:
<link rel="preload" as="image" href="image-800w.webp" imagesrcset="image-800w.webp 800w, image-400w.webp 400w" imagesizes="(min-width: 768px) 800px, 100vw">

CSS الحرج للمحتوى فوق الطية

ضمّن الحد الأدنى من CSS اللازم لعرض القسم الرئيسي:

<style>
/* الأنماط الحرجة فوق الطية */
.hero { display: flex; min-height: 60vh; /* ... */ }
.hero-title { font-size: 2rem; font-weight: 700; /* ... */ }
/* تحميل CSS الكامل بشكل غير متزامن */
</style>
<link rel="preload" as="style" href="/path/to/full.css" onload="this.onload=null;this.rel='stylesheet'">

CSS الحرج المدمج في Magento 2 يمكن توليده بـ:

bin/magento dev:css:critical --area=frontend --locale=en_US

هذا ينتج CSS حرج لكل نوع صفحة (الصفحة الرئيسية، الفئة، المنتج، CMS) في pub/media/critical-css/.

INP: Interaction to Next Paint

INP يقيس التأخير بين تفاعل المستخدم (نقر، لمس، ضغط مفتاح) والاستجابة البصرية. طبقة JavaScript الثقيلة في Magento 2 — RequireJS و Knockout.js و jQuery وودجات الطرف الثالث — هي السبب الرئيسي لضعف INP.

تأجيل JavaScript غير الحرج

<script src="path/to/requirejs.js" defer></script>

تحميل البرامج النصية المدمج في Magento 2 يستخدم RequireJS الذي يُحمل بشكل متزامن افتراضيًا. للبرامج النصية للطرف الثالث (التحليلات، ودجات الدردشة، بكسلات إعادة الاستهداف):

<script>
  setTimeout(() => {
    const script = document.createElement('script');
    script.src = 'https://third-party.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }, 3000);
</script>

تقليل حجم حزمة RequireJS

شغّل أداة التجميع المدمجة للإنتاج:

bin/magento deploy:mode:set production
bin/magento setup:static-content:deploy -f

للتحسين المتقدم، فعّل تجميع RequireJS:

bin/magento config:set dev/js/enable_js_bundling 1
bin/magento config:set dev/js/minify_files 1

فكر في استبدال تجميع RequireJS بأداة تجميع وحدات (Webpack/Vite) للسمات المخصصة بشكل كبير.

تقليل اشتراكات Knockout.js

كل اشتراك قابل للمراقبة في Knockout يضيف عبء معالجة أثناء التفاعلات. تجنب الاشتراكات المتداخلة العميقة في مكونات الدفع:

// قبل: خمسة اشتراكات منفصلة
self.isLoading.subscribe(/* ... */);
self.cartItems.subscribe(/* ... */);
self.totals.subscribe(/* ... */);
self.shipping.subscribe(/* ... */);
self.payment.subscribe(/* ... */);

// بعد: اشتراك واحد مع معالجة دفعية
ko.computed(() => {
  const data = {
    isLoading: self.isLoading(),
    cartItems: self.cartItems(),
    totals: self.totals(),
    shipping: self.shipping(),
    payment: self.payment()
  };
  // معالجة مرة واحدة
}).extend({ throttle: 50 });

CLS: Cumulative Layout Shift

CLS يقيس الحركة البصرية غير المتوقعة. متاجر Magento 2 تعاني عادة من CLS بسبب الصور بدون أبعاد وتبديل الخطوط وحقن المحتوى الديناميكي.

حدد دائمًا أبعاد الصور

<!-- سيء — يسبب CLS -->
<img src="product.jpg" alt="منتج">

<!-- جيد — يمنع CLS -->
<img src="product.jpg" alt="منتج" width="400" height="500">

في قوالب phtml لـ Magento 2:

<img src="<?= $block->getImageUrl() ?>"
     alt="<?= $block->escapeAttr($product->getName()) ?>"
     width="<?= $block->getImageWidth() ?>"
     height="<?= $block->getImageHeight() ?>">

حجز مساحة للمحتوى الديناميكي

المحتوى المحقون بعد تحميل الصفحة — القوائم المنسدلة لمصغر السلة والرؤوس الثابتة وإشعارات الكوكيز وودجات الدردشة — يجب أن يحجز مساحة أو يستخدم position: fixed لتجنب إزاحة التخطيط:

.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* لا يؤثر على CLS لأنه خارج تدفق المستند */
}

استراتيجية عرض الخطوط

استخدم font-display: swap مع حجم خط احتياطي متطابق لتقليل CLS من خطوط الويب:

@font-face {
  font-family: 'خط مخصص';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%; /* طابق مقاييس الخط الاحتياطي إن أمكن */
}

اختناقات الأداء الخاصة بـ Magento

بعيدًا عن أداء الويب العام، لدى Magento 2 مشاكل خاصة بالبنية تضر بـ Core Web Vitals:

  1. TTFB بطيء على الصفحات غير المخزنة. صفحات الدفع وحساب العميل وسلة التسوق تتجاوز FPC. كل طلب يقوم بتحميل Magento كامل. حسّن هذه الصفحات تحديدًا بتقليل مراقبي وإضافات الوحدة على المسارات غير القابلة للتخزين المؤقت.

  2. زمن استجابة نتائج البحث. وقت استعلام Elasticsearch/OpenSearch يضاف إلى LCP في صفحات البحث. حسّن تعيينات الفهرس وتجنب الاستعلامات كثيرة الرموز البدل. اطلع على دليل المفهرسات لضبط فهرس البحث.

  3. حمولة JavaScript في الدفع. صفحة الدفع تحمّل Knockout.js وجميع وسائل الدفع والشحن ومكتبات التحقق من العنوان. استخدم أنماط x-magento-init لتحميل المكونات غير المرئية فورًا بشكل كسول.

قياس ومراقبة Core Web Vitals

الأداةما تقيسهمتى تستخدمها
Google Search Consoleبيانات ميدانية (مستخدمون حقيقيون)شهريًا — تظهر الدرجات المجمعة
Lighthouseبيانات مختبرية (محاكاة)قبل/بعد كل نشر
PageSpeed Insightsبيانات مختبرية + ميدانيةفحص انحدار سريع
إضافة Web Vitalsبيانات ميدانية في الوقت الفعليتصحيح أثناء التطوير
New Relic / DataDogتوقيت من جانب الخادممراقبة الإنتاج

ضبط مستوى الخادم لـ Magento 2

  • PHP-FPM: استخدم مدير العمليات ondemand مع pm.max_children مضبوطًا على نوى المعالج × 10. حافظ على pm.max_requests حوالي 500 لمنع تراكم تسرب الذاكرة.
  • MySQL: تأكد من أن innodb_buffer_pool_size لا يقل عن 70% من RAM المتاحة لخوادم قواعد البيانات المخصصة. فعّل ذاكرة التخزين المؤقت للاستعلامات للاستعلامات المتكررة للقراءة.
  • OPcache: اضبط opcache.memory_consumption=512 و opcache.max_accelerated_files=100000. أعد التحقق من صحة تغييرات الملفات فقط في التطوير — في الإنتاج، اضبط opcache.validate_timestamps=0.

للتحسين الكامل للخادم، اطلع على خدمة تحسين VPS .

إدارة إضافات الطرف الثالث

كل إضافة Magento 2 طرف ثالث تضيف إضافات ومراقبين وموارد أمامية. راجعها بشكل منهجي:

# عرض جميع الإضافات المسجلة
bin/magento dev:plugins:list

# التحقق من أي الوحدات تضيف أصولًا أمامية
grep -r "addJs\|addCss" app/code/*/*/view/frontend/layout/

للإضافات التي تضيف JavaScript، أرجئ ودجات الطرف الثالث في قالب السمة الخاص بك:

<?php
// نقل ودجة الطرف الثالث إلى التذييل مع async
$block->setData('script_attributes', ['async' => 'async', 'defer' => 'defer']);
?>

الأسئلة الشائعة

س: هل يجتاز Magento 2 Core Web Vitals بشكل افتراضي؟
ليس بشكل موثوق. سمة Luma الافتراضية مع بيانات تجريبية تحقق عادة 40-60 على Lighthouse للجوال. التحسين المخصص مطلوب للحصول على درجات خضراء.

س: ما هو أسرع تحسن فردي لـ LCP في Magento 2؟
فعّل Varnish FPC وتأكد من تحقيق معدل إصابة تخزين مؤقت 90%+. هذا وحده يخفض TTFB من 400ms+ إلى أقل من 50ms على الصفحات المخزنة مؤقتًا.

س: كيف أصلح CLS الناتج عن Google Tag Manager؟
حمّل GTM بعد عرض محتوى الصفحة. استخدم requestAnimationFrame أو تأخير 2 ثانية قبل حقن مقتطف GTM. احجز مساحة لأي لافتات محقونة.

س: هل يجب استخدام CSS الحرج أم الالتزام بتحميل CSS الافتراضي لـ Magento؟
CSS الحرج يحسن LCP بشكل كبير في الزيارة الأولى. استخدم مولد CSS الحرج المدمج في Magento وتحقق باستخدام Lighthouse من أن المحتوى فوق الطية يُعرض دون انتظار CSS الكامل.

س: لماذا درجة INP لصفحة الدفع سيئة جدًا؟
صفحة الدفع تحمّل جميع وسائل الدفع وحاسبات الشحن ونصوص التحقق من العنوان بشكل فوري. فكر في التحميل الكسول لوسائل الدفع المخفية واستخدام التمرير الافتراضي لقوائم العناوين الطويلة.

هل تحتاج إلى تحسين مخصص لـ Core Web Vitals؟ اطلع على خدمة تحسين الأداء للتدقيق الكامل والتنفيذ. ابدأ بـ دليل استراتيجيات التخزين المؤقت للإعداد الأساسي.

Tags:
magento 2core web vitalsperformance optimizationlcpinpclsseoe-commerce
Related articles

Magento 2 Observers & Events : دليل المطور الشامل

Jun 29, 2026 · 6 min read
Read article →

Magento 2 REST API : دليل أفضل الممارسات (2026)

Jun 29, 2026 · 8 min read
Read article →

استراتيجيات التخزين المؤقت في Magento 2: دليل كامل (2026)

Jun 29, 2026 · 7 min read
Read article →