لا يقتصر أداء الموقع الإلكتروني على سرعة تحميل الصفحة. فحتى لو ظهر المحتوى خلال ثوانٍ، فإن بطء استجابة الأزرار أو التغيّرات المفاجئة في تخطيط الصفحة قد تُزعج الزوار وتؤثر في تجربتهم. فكيف يمكنك معرفة ما إذا كان موقعك يعمل بأداء جيد؟ مؤشرات أداء الويب الأساسية (Core Web Vitals) هي مقاييس الأداء الرئيسية لدى Google، وتقيس سرعة التحميل والتفاعلية والاستقرار البصري. ستتعرّف في هذا الدليل على مقاييس Core Web Vitals الثلاثة، والحدود الموصى بها لكلٍّ منها، والأدوات التي يمكنك استخدامها لقياس أداء موقعك وتحسينه.
ما هي مؤشرات أداء الويب الأساسية (Core Web Vitals)؟
مؤشرات أداء الويب الأساسية (Core Web Vitals) هي مجموعة من مقاييس الأداء التي قدّمتها Google لقياس جوانب مهمة من تجربة المستخدم على الموقع الإلكتروني. وتركّز هذه المقاييس على ثلاثة عوامل رئيسية: أداء التحميل، والتفاعلية، والاستقرار البصري. بعبارة أخرى، تساعد أصحاب المواقع على فهم مدى سرعة تحميل الصفحة، ومدى سلاسة تفاعل المستخدمين معها، وما إذا كان محتواها يبقى مستقرًا أثناء التحميل.
لا يتعلق أداء الموقع بسرعة فتح الصفحة فحسب. فقد يُحمِّل الموقع محتواه في وقت قصير، لكن إذا اضطر المستخدمون إلى الانتظار قبل أن يتمكنوا من النقر على زر ما، أو إذا تغيّر تخطيط الصفحة بشكل غير متوقع، فقد تظل التجربة العامة سيئة. وتساعد Core Web Vitals على تحديد هذه المشكلات، وتوفّر أهدافًا قابلة للقياس لتحسين أداء الموقع.
تعتمد Google حاليًا ثلاثة مقاييس ضمن Core Web Vitals، هي: أكبر عرض للمحتوى (LCP)، والتفاعل حتى العرض التالي (INP)، والتحوّل التراكمي في التخطيط (CLS). ويقيس كل مقياس جانبًا مختلفًا من تجربة المستخدم، لذا فإن تحسين أحدها لا يعني بالضرورة تحسّن المقياسين الآخرين أيضًا.
لماذا تُعدّ Core Web Vitals مهمة؟
ينبغي أن يوفّر الموقع الإلكتروني تجربة سلسة وموثوقة لزواره. فعندما تستغرق الصفحة وقتًا طويلًا في التحميل، قد يغادر المستخدمون قبل الوصول إلى المعلومات التي يحتاجون إليها. وبالمثل، إذا كانت الأزرار بطيئة الاستجابة أو تحرّكت عناصر الصفحة بشكل غير متوقع، فقد يشعر الزوار بالإحباط ويجدون صعوبة في إنجاز مهامهم.
تساعد Core Web Vitals أصحاب المواقع على تحديد هذه المشكلات من خلال بيانات أداء قابلة للقياس بدلًا من الاعتماد على الانطباعات الشخصية وحدها. فعلى سبيل المثال، قد يختبر أحد المطورين موقعًا على حاسوب قوي فيجد أنه يُحمَّل بسرعة، في حين قد يواجه الزوار الذين يستخدمون أجهزة محمولة قديمة أو اتصالات إنترنت أبطأ أوقات تحميل أطول بكثير.
هذه الاختلافات تجعل مراقبة الأداء أمرًا مهمًا. فمن خلال تحليل بيانات Core Web Vitals، يستطيع المطورون تحديد أجزاء الموقع التي تحتاج إلى تحسين، والتأكد مما إذا كانت جهود التحسين تحقق النتائج المتوقعة.
كما ترتبط Core Web Vitals بتحسين محركات البحث (SEO). إذ تستخدم Google إشارات تجربة الصفحة ضمن أنظمة الترتيب الخاصة بها، لكن الحصول على نتائج جيدة في Core Web Vitals لا يضمن ترتيبًا أعلى، فالمحتوى ذو الصلة وعوامل أخرى كثيرة تظل مهمة. لذلك، ينبغي النظر إلى تحسين هذه المقاييس على أنه جزء من استراتيجية أشمل لبناء موقع مفيد وسهل الوصول وموثوق.
ما هي مقاييس Core Web Vitals الثلاثة؟
يركّز كل مقياس من مقاييس Core Web Vitals على جانب محدد من أداء الموقع. وفهم آلية عملها يسهّل تحديد مشكلات الأداء واختيار أساليب التحسين المناسبة.
ما هو مقياس أكبر عرض للمحتوى (LCP)؟
يقيس مقياس أكبر عرض للمحتوى (LCP) المدة التي يستغرقها ظهور أكبر صورة أو كتلة نصية مرئية في منطقة العرض الأولية. ويساعد هذا المقياس على تقدير الوقت الذي يصبح فيه المحتوى الرئيسي للصفحة مرئيًا للمستخدم.
على سبيل المثال، تخيّل أن زائرًا يفتح مقالًا في مدونة. قد تظهر خلفية الصفحة وقائمة التنقل فورًا تقريبًا، بينما قد يستغرق العنوان الرئيسي أو الصورة البارزة عدة ثوانٍ حتى يُحمَّل. في هذه الحالة، قد يشعر الزائر بأن الصفحة لا تزال قيد التحميل، رغم أن بعض عناصرها ظاهرة بالفعل. وتُعدّ نتيجة LCP جيدة إذا كانت 2.5 ثانية أو أقل. أما إذا تراوحت القيمة بين 2.5 و4 ثوانٍ، فالصفحة تحتاج إلى تحسين. وتُعدّ قيمة LCP التي تتجاوز 4 ثوانٍ ضعيفة.
هناك عدة عوامل قد تؤثر في LCP، منها بطء زمن استجابة الخادم، والصور الكبيرة، وملفات CSS وJavaScript التي تعيق العرض، والتأخر في اكتشاف المحتوى الرئيسي.
لتحسين LCP، يمكن لأصحاب المواقع اتباع الخطوات التالية:
- تحسين الصور: قلّل أحجام ملفات الصور، واستخدم الصيغ الحديثة مثل WebP أو AVIF عند الاقتضاء.
- تحسين زمن استجابة الخادم: استخدم موارد استضافة فعّالة، والتخزين المؤقت، وشبكة توصيل المحتوى (CDN) متى كانت مناسبة للموقع.
- إعطاء الأولوية للمحتوى الرئيسي: تأكد من أن المتصفح يستطيع اكتشاف الصور المهمة مباشرة من مصدر HTML، وامنح تحميلها الأولوية عند الحاجة.
- تقليل الموارد التي تعيق العرض: حسّن ملفات CSS وJavaScript التي تمنع المتصفح من عرض المحتوى الرئيسي.
- تجنّب التحميل الكسول لصورة LCP: إذا كان من المرجح أن تكون الصورة هي عنصر LCP، فإن تأخير تحميلها قد يجعل الصفحة تبدو أبطأ.
يمكن لهذه الأساليب أن تقلّل الوقت الذي يقضيه المستخدمون في انتظار ظهور المحتوى الرئيسي. ومع ذلك، يعتمد الحل الأكثر فاعلية على سبب التأخير، لذا من المهم قياس أداء الصفحة قبل إجراء أي تغييرات.
ما هو مقياس التفاعل حتى العرض التالي (INP)؟
يقيس مقياس التفاعل حتى العرض التالي (INP) مدى سرعة استجابة الموقع عند تفاعل المستخدمين معه. فهو يقيّم التأخير بين تفاعل المستخدم، كالنقر على زر أو الضغط على مفتاح، والتحديث المرئي التالي الذي يعرضه المتصفح.
لنأخذ مثالًا متجرًا إلكترونيًا ينقر فيه الزائر على زر الإضافة إلى السلة. إذا استغرق المتصفح وقتًا ملحوظًا لتحديث السلة، فقد يظن الزائر أن الزر لم يعمل فينقر عليه مرة أخرى. وقد يسبب ذلك ارتباكًا، بل قد يؤدي إلى تكرار الإجراء.
يساعد INP على تحديد هذا النوع من المشكلات من خلال قياس سرعة استجابة الصفحة طوال مدة زيارة المستخدم. وعلى عكس مقياس تأخر الإدخال الأول (FID)، الذي كان يقيس فقط التأخير قبل أن يبدأ المتصفح في معالجة التفاعل الأول، يأخذ INP في الحسبان تجربة التفاعل الأشمل على امتداد عمر الصفحة. وتُعدّ نتيجة INP جيدة إذا كانت 200 ملي ثانية أو أقل. أما القيم التي تتجاوز 200 ملي ثانية وتصل إلى 500 ملي ثانية فتحتاج إلى تحسين، في حين تُعدّ القيم التي تتجاوز 500 ملي ثانية ضعيفة.
تُعدّ JavaScript سببًا شائعًا لضعف INP، لأن المتصفح قد يحتاج إلى تنفيذ السكربتات قبل أن يتمكن من الاستجابة لإدخال المستخدم وعرض التحديث. كما أن المهام الطويلة قد تمنع المتصفح من معالجة التفاعلات بسرعة.
لتحسين INP، يمكن للمطورين استخدام عدة أساليب:
- تقليل JavaScript غير الضرورية: أزل الشيفرة غير المستخدمة، وتجنّب تحميل السكربتات التي لا تحتاج إليها الصفحة الحالية.
- تقسيم المهام الطويلة: قسّم مهام JavaScript الكبيرة إلى مهام أصغر لتمنح المتصفح فرصًا أكثر لمعالجة تفاعلات المستخدم.
- تحسين معالجات الأحداث: اجعل الدوال المرتبطة بالتفاعل بسيطة وفعّالة قدر الإمكان.
- تجنّب تحديثات DOM غير الضرورية: تحديث عدد كبير جدًا من العناصر دفعة واحدة قد يزيد وقت العرض ويؤخر التحديث المرئي التالي.
- تقليل سكربتات الجهات الخارجية: قد تستهلك أدوات التحليلات وسكربتات الإعلانات والخدمات المضمّنة موارد المعالجة وتؤثر في سرعة الاستجابة.
لا يقتصر تحسين INP على تقليل الحجم الإجمالي لملفات JavaScript، بل يحتاج المطورون أيضًا إلى فهم توقيت تنفيذ السكربتات ومقدار العمل الذي يتعين على المتصفح إنجازه بعد كل تفاعل.
ما هو مقياس التحوّل التراكمي في التخطيط (CLS)؟
يقيس مقياس التحوّل التراكمي في التخطيط (CLS) الاستقرار البصري لصفحة الويب. ويركّز على التغيّرات غير المتوقعة في مواضع العناصر المرئية أثناء عرض الصفحة.
على سبيل المثال، تخيّل أن زائرًا يقرأ مقالًا ثم يرى النص يتحرك فجأة إلى الأسفل بسبب ظهور إعلان فوقه. وإذا كان الزائر على وشك النقر على رابط، فقد تتسبب هذه الحركة غير المتوقعة في نقره على عنصر آخر. ويمكن لهذه التغيّرات في التخطيط أن تجعل استخدام الموقع صعبًا، لا سيما على الأجهزة المحمولة حيث تكون المساحة المرئية محدودة. وتُعدّ نتيجة CLS جيدة إذا كانت 0.1 أو أقل. أما النتائج التي تتجاوز 0.1 وتصل إلى 0.25 فتحتاج إلى تحسين، في حين تُعدّ النتائج التي تتجاوز 0.25 ضعيفة.
هناك عدة مشكلات شائعة قد تسبب تحولات غير متوقعة في التخطيط، فالصور التي لم تُحدَّد أبعادها، والإعلانات المُدرجة ديناميكيًا، والمحتوى الذي يُحمَّل متأخرًا، وخطوط الويب التي تغيّر مظهر النص، كلها قد تؤثر في الاستقرار البصري.
يمكن للأساليب التالية أن تساعد على تحسين CLS:
- تحديد أبعاد الصور: حدّد عرض الصور وارتفاعها، أو استخدم نسب العرض إلى الارتفاع في CSS لحجز المساحة اللازمة قبل تحميل الصورة.
- حجز مساحة للإعلانات: خصّص مساحة كافية لحاويات الإعلانات لمنع تحرّك المحتوى المحيط بها عند ظهورها.
- تجنّب إدراج محتوى فوق المحتوى الموجود: إذا كان لا بد من عرض عناصر جديدة، فضعها في مكان لا يحرّك بشكل مفاجئ المحتوى الذي يشاهده المستخدمون بالفعل.
- تحسين تحميل الخطوط: استخدم استراتيجيات مناسبة لتحميل الخطوط وخطوطًا احتياطية للحد من التغيّرات غير المتوقعة في تخطيط النص.
- استخدام رسوم متحركة مناسبة في CSS: فضّل قدر الإمكان الرسوم المتحركة المعتمدة على خصائص مثل transform وopacity، بدلًا من الخصائص التي تُحدث تغييرات في التخطيط.
من المهم أن تدرك أن ليس كل تحوّل في التخطيط ضارًا، فالتغيير الذي يحدث استجابةً مباشرة لتفاعل المستخدم قد يكون متوقعًا. ويركّز CLS على عدم الاستقرار البصري غير المتوقع، ويعتمد طريقة احتساب تستند إلى تأثير تحوّل التخطيط والمسافة التي يقطعها.
ما هي الحدود الموصى بها لمقاييس Core Web Vitals؟
تحدّد Google حدودًا معيّنة لمساعدة أصحاب المواقع على معرفة ما إذا كانت صفحاتهم توفّر تجربة مستخدم جيدة. وتقسّم هذه الحدود الأداء إلى ثلاث فئات: جيد، ويحتاج إلى تحسين، وضعيف.
تساعد هذه الحدود المطورين على تقييم كل مقياس على حدة. ومع ذلك، لا يكفي اختبار واحد لتحديد ما إذا كان الموقع يقدّم تجربة جيدة بشكل مستمر.
توصي Google بتقييم Core Web Vitals عند الشريحة المئوية الخامسة والسبعين من زيارات الصفحة، مع النظر إلى نتائج الأجهزة المحمولة وأجهزة سطح المكتب كلٍّ على حدة. وهذا يعني أن 75% على الأقل من الزيارات المُقاسة ينبغي أن تستوفي الحد الجيد لكل مقياس.
على سبيل المثال، لنفترض أن قيمة LCP لموقع ما تبلغ ثانيتين عند الشريحة المئوية الخامسة والسبعين. هذا يعني أن 75% من زيارات الصفحة المُقاسة سجّلت LCP بمقدار ثانيتين أو أقل، وهو ما يستوفي الحد الموصى به.
ينبغي أن يسعى الموقع إلى استيفاء الحدود الجيدة للمقاييس الثلاثة جميعها، بدلًا من التركيز على أفضل نتائجه فقط.
ما هي أدوات قياس Core Web Vitals؟
يمكن قياس Core Web Vitals باستخدام عدة أدوات توفّرها Google. وتساعد هذه الأدوات المطورين على فهم أداء الموقع وتحديد الجوانب التي تحتاج إلى تحسين.
PageSpeed Insights
تُعدّ أداة PageSpeed Insights من أكثر الأدوات فائدة لفحص Core Web Vitals. فهي توفّر بيانات المستخدمين الفعليين عند توفّرها، إلى جانب بيانات مختبرية تُجمع عبر اختبار محاكاة. كما تقدّم اقتراحات لتحسين أداء الصفحة.
Google Search Console
يتضمن Google Search Console تقريرًا خاصًا بـ Core Web Vitals يوضح مجموعات الصفحات التي توفّر تجربة مستخدم جيدة وتلك التي تحتاج إلى تحسين. ويعتمد على بيانات واقعية لمساعدة أصحاب المواقع على تحديد مشكلات الأداء عبر صفحات متعددة.
Chrome DevTools وLighthouse
تساعد أداتا Chrome DevTools وLighthouse المطورين على اختبار أداء الصفحة في بيئة خاضعة للتحكم. ويمكنهما تحديد المشكلات المتعلقة بتنفيذ JavaScript، وتحميل الصور، وتحولات التخطيط، وغيرها من العوامل التي تؤثر في Core Web Vitals.
ما الفرق بين البيانات الميدانية والبيانات المختبرية؟
يمكن تقييم Core Web Vitals باستخدام نوعين من البيانات: البيانات الميدانية والبيانات المختبرية. ويساعد فهم الفرق بينهما المطورين على تفسير نتائج الاختبارات واختيار النهج المناسب لتحسين أداء الموقع.
البيانات الميدانية
تُجمع البيانات الميدانية من المستخدمين الفعليين أثناء تصفحهم للموقع. وهي تعكس ظروف التصفح الحقيقية، بما في ذلك اختلاف الأجهزة واتصالات الشبكة وتفاعلات المستخدمين.
وتُعدّ هذه البيانات مفيدة بشكل خاص لمعرفة ما إذا كان الموقع يستوفي الحدود الموصى بها من Google لمقاييس Core Web Vitals في الظروف الواقعية.
البيانات المختبرية
تُجمع البيانات المختبرية في بيئة اختبار خاضعة للتحكم باستخدام أدوات مثل Lighthouse. وهي تساعد المطورين على إعادة إنتاج مشكلات الأداء والتحقيق في أسبابها المحتملة.
وعلى عكس البيانات الميدانية، لا تمثّل البيانات المختبرية كل تجارب المستخدمين الواقعية. لذلك، قد يحصل الموقع على نتائج مختلفة بين الاختبارات المختبرية وقياسات المستخدمين الفعليين.
كيفية تحسين Core Web Vitals
يتطلب تحسين Core Web Vitals تحديد المشكلات التي تؤثر في سرعة التحميل والتفاعلية والاستقرار البصري. ويعتمد الحل المناسب على المقياس الذي يُظهر أداءً ضعيفًا.
تحسين أكبر عرض للمحتوى (LCP)
لتحسين LCP، ينبغي أن يركّز المطورون على تحميل أكبر عنصر محتوى مرئي بأسرع ما يمكن. ومن التحسينات الشائعة: تحسين الصور، واختيار خدمة استضافة مواقع موثوقة، وتقليل زمن استجابة الخادم، وتفعيل التخزين المؤقت، وتجنّب أي تأخير غير ضروري في تحميل الموارد المهمة.
تحسين التفاعل حتى العرض التالي (INP)
يمكن تحسين INP عبر تقليل مهام JavaScript الطويلة والحد من العمل غير الضروري على الخيط الرئيسي. كما ينبغي للمطورين تحسين معالجات الأحداث وتجنّب تحميل المتصفح عملًا مفرطًا بعد نقر المستخدم أو لمسه للشاشة أو كتابته.
تحسين التحوّل التراكمي في التخطيط (CLS)
لتقليل CLS، ينبغي للمطورين حجز مساحة للصور ومقاطع الفيديو والإعلانات وغيرها من العناصر قبل تحميلها. وتجنّب إدراج محتوى جديد فوق المحتوى الموجود بشكل مفاجئ، واستخدم أبعادًا ثابتة للعناصر المرئية كلما أمكن ذلك.
الخلاصة
تساعد Core Web Vitals المطورين على فهم تجربة المستخدمين مع الموقع من حيث أداء التحميل والتفاعلية والاستقرار البصري. ومن خلال قياس LCP وINP وCLS، يستطيع أصحاب المواقع تحديد مشكلات الأداء وترتيب أولويات التحسينات التي تجعل صفحاتهم أسهل استخدامًا.
ويمكن للمراقبة المنتظمة وبيانات المستخدمين الفعليين والتحسين الموجّه أن تساعد المواقع على الحفاظ على نتائج جيدة في Core Web Vitals على المدى الطويل
الأسئلة الشائعة
1. ما الفرق بين البيانات الميدانية والبيانات المختبرية؟
تأتي البيانات الميدانية من المستخدمين الفعليين الذين يزورون الموقع، بينما تُجمع البيانات المختبرية في بيئة اختبار خاضعة للتحكم. وتعكس البيانات الميدانية تجارب المستخدمين الحقيقية، في حين تساعد البيانات المختبرية المطورين على إعادة إنتاج مشكلات الأداء وتشخيصها.
2. كيف يمكنني تحسين نتائج Core Web Vitals؟
يمكنك تحسين Core Web Vitals من خلال تحسين الصور، وتقليل JavaScript غير الضرورية، وتحسين زمن استجابة الخادم، وتفعيل التخزين المؤقت، ومنع التحولات غير المتوقعة في التخطيط.
