ما هي حيوية الشبكة الأساسية وكيف يمكنها تحسين تجربة المستخدم الخاصة بك؟ – CloudSavvy IT

يهدف مشروع “أساسيات الويب الأساسية” من Google إلى تقديم “إرشادات موحدة حول إشارات الجودة” على الويب. وهي مصممة لتقديم رؤى قابلة للتنفيذ لمساعدة مشرفي المواقع على تحسين تجربة المستخدم الخاصة بهم.

تخطط Google لاستخدام Main World wide web Vitals كإشارة لمؤشر تصنيف البحث الخاص بها. كان من المقرر أصلاً في مايو 2021 ، ولكن تم تأجيله الآن إلى يونيو. إذا لم تكن حالة Web Critical الخاصة بك قد اكتملت بعد ، فيجب عليك اتخاذ إجراء الآن لجعل تغييرات البحث سارية المفعول.

ثلاثة مؤشرات

يعالج مشروع Net Vitals الأوسع جوانب متعددة من تجربة الويب. بالنسبة لـ Core Internet Vitals ، تركز Google على ثلاثة مؤشرات محددة. يمكن أن تؤدي التقييمات المنخفضة لهذه العوامل المهمة إلى جعل تجربة المستخدم للموقع محبطة.

هذه هي المؤشرات الثلاثة التي يجب الانتباه إليها:

• أقصى محتوى للدهان (LCP) – يقيس هذا المقياس أداء تحميل الصفحة. LCP أقل من 2.5 ثانية هو “جيد” ؛ أي وقت يزيد عن 4. ثانية يكون “سيئًا”.
• تأخير الإدخال الأول (FID) – يقيس تأخير الإدخال الأول الوقت الذي تستغرقه الصفحة للرد على تفاعلات المستخدم (مثل النقر والتمرير). سيتفاعل الموقع الجيد في غضون 100 مللي ثانية ؛ وسيستغرق الموقع الرديء أكثر من 300 مللي ثانية.
• التحول في التخطيط التراكمي (CLS) – CLS هو مقياس لمقدار “إزاحة التخطيط” الذي يحدث عند تحميل الصفحة. بعد باقي الصفحة ، تظهر عناصر الصفحة التي تم تحميلها بشكل غير متزامن (مثل الصور واللافتات الإعلانية) فجأة ، مما يتسبب في انتقال المحتوى الموجود أسفلها بشكل ملحوظ ، ثم ينتقل التخطيط. قد يجعل هذا التأثير المروع المستخدمين يشعرون بالإحباط والارتباك.

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

الهدف الموصى به من Google هو الوصول إلى الحد “الجيد” عند 75 بالمائة من تحميل الصفحة. إذا تمكنت الصفحة من الوصول إلى هذا المستوى من التناسق ، فيُعتبر أنها “اجتازت” اختبار Main Net Vitals. بعد تفعيل تغيير فهرس Google ، قد تجد المواقع التي تقل باستمرار عن عتبة 75 بالمائة نفسها في المرتبة الأدنى في نتائج البحث.

قياس عمر الشبكة الأساسية

يمكنك استخدام مجموعة متنوعة من الخيارات لمساعدتك على تحسين أداء Web Vitals. الخيار الأول للمطور هو تقرير Lighthouse المتاح في أدوات مطور F12 من Google Chrome.

قم بزيارة موقع الويب الخاص بك في Chrome. ابدأ تشغيل أدوات المطور ، ثم قم بالتبديل إلى علامة التبويب Lighthouse. انقر فوق الزر “إنشاء تقرير” لبدء تحليل Lighthouse. قد يستغرق الأمر بضع ثوان حتى يكتمل.

بعد تحميل التقرير ، مرر لأسفل إلى قسم “الأداء”. سيتم عرض ستة مقاييس ، بما في ذلك المقاييس الثلاثة التي تشكل حيوية الويب الأساسية. في Chrome ، يمثل “الرسم المنسق الأول” “الرسم الغني الأكبر” ، و “وقت التفاعل” هو نفسه “تأخير الإدخال الأول”.

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

يجب تشغيل Lighthouse مرتين ، مرة في وضع “Desktop” ، ثم تحديد زر الاختيار “Cellular” مرة أخرى. حدد تقريري “الهاتف المحمول” و “سطح المكتب” في صفحة تسجيل الدخول بعلامة التبويب “المنارة” ، وسيتم عرض الزر “إنشاء تقرير”. تختلف المقاييس حسب نوع الجهاز ؛ سيحترم بحث Google أيضًا هذا التقسيم. إذا كان أداء موقع الويب للجوال الخاص بك أفضل من تجربة سطح المكتب ، فقد يحتل موقع الويب الخاص بك مرتبة أعلى عند عرضه من هاتف ذكي (والعكس صحيح).

تنشر بعض أنظمة إدارة الويب من Google أيضًا بيانات Core Web Vitals. يمكنك عرض المقاييس في تقرير تجربة مستخدم Chrome و PageSpeed ​​Insights ولوحة تحكم Google Research Console.

حتى إذا حصلت على نتائج جيدة باستخدام Lighthouse ، فمن المهم التحقق من هذه الأدوات. ستحسب خصائص Google درجة حيوية الشبكة بناءً على ما يلي: حقيقة قم بإخفاء هوية المستخدم من خلال تقرير تجربة مستخدم Chrome. لذلك ، من المهم التحقق من توافق إحصاءات Google مع اختبار Lighthouse الذي يعمل على جهاز الكمبيوتر الخاص بك.

إذا قمت باختبار قاعدة المستخدمين الخاصة بك من وقت لآخر ، فقد تحدث اختلافات بسهولة. بشكل عام ، يميل المطورون إلى تشغيل أجهزة متطورة ، وحتى مواقع الويب الأكثر تعقيدًا يمكنها العمل بسهولة. يمكن أن يمنحك هذا درجة Lighthouse مشجعة ، لكنها لا تعكس تجربة المستخدم الخاصة بك في العالم الحقيقي. إذا كان معظم المستخدمين يصلون إلى Google من هاتف ذكي متوسط ​​المدى ، فقد تكون الأرقام مختلفة تمامًا.

أضف أداتك الخاصة

لا يقتصر الأمر على أدوات Google التي يمكنها قياس “أساسيات الويب الأساسية”. يوفر المشروع أيضًا مكتبة npm يمكنك دمجها مع JavaScript الخاص بالموقع. يسمح لك هذا بتقييم أداء Net Vitals برمجيًا. يمكنك بعد ذلك إرسال البيانات المجمعة إلى خدمة التحليل الخاصة بك.

تعرض المكتبة وظيفة القياس لكل عنصر أساسي في الويب (على سبيل المثال ، LCP من أجل الحصول على الحد الأقصى من الطلاء المرضي). سيؤدي استدعاء هذه الوظيفة إلى قياس قيمة المؤشر. تقبل هذه الوظائف رد الاتصال ، والذي سيحصل على القيمة بعد اكتمال القياس.

import getLCP from "world wide web-vitals"
 
getLCP(lcp => 
    console.log(lcp)
    callAnalyticsService(lcp)    // use custom made analytics
)

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

لا تستدعي كل وظيفة قياس عدة مرات في جلسة واحدة. تسجل كل مكالمة مراقب الأداء ؛ ولن تطالب المكالمات المتتالية بالقياس الفوري ، وقد تتسبب في زيادة استخدام الذاكرة.

قد يتم استدعاء رد الاتصال الخاص بك عدة مرات. كلما تم تحديث القيمة المقاسة ، يتم الإبلاغ عن التغيير. ستراقب بعض المؤشرات الصفحة باستمرار وستضبط نفسها طوال دورة حياة الصفحة. سيتم استدعاء وظيفتك في كل مرة يتم فيها تحديد قيمة جديدة.

قياس باستخدام المتصفح API

بعيدا عن web-vitals npm ، إذا كنت بحاجة إلى طرق اختبار أداء عملية ، فيمكنك استخدام واجهة برمجة تطبيقات المتصفح الأساسية مباشرةً. يسمح لك هذا بضبط طريقة القياس بدقة ، ولكنه قد يتسبب في انحرافك عن مواصفات World wide web Vitals.

واجهة برمجة تطبيقات مراقبو الأداء هي آلية متصفح تتيح لك فهم أحداث الأداء التي تحدث على الصفحة. تستخدم مكتبة Website Vitals واجهة برمجة التطبيقات هذه داخليًا. يمكنك إرفاق مراقب الأداء الخاص بك لتلقي الأحداث الجديدة مباشرة من المتصفح. كل مراقب لديه مؤشر للرصد.

const observer = new PerformanceObserver(entries => 
    for (const entry of entries.getEntries()) 
        console.log(`New LCP entry at $entry.startTime`)
    
)
observer.observe(kind: "biggest-contentful-paint")

يوضح مقتطف الشفرة هذا كيفية إعداد نظام القياس الخاص بك لمقياس “رسم معظم المحتوى”.تم تمرير رد الاتصال إلى PerformanceObserver تلقي قائمة إدخالات مراقب الأداء. تصف هذه التحولات في حالة الأداء التي تحدث في المتصفح.

التعميم

تعني الدرجة العالية في Core World wide web Vitals أنه تم تحسين موقع الويب الخاص بك لثلاثة جوانب أساسية يمكن أن تؤدي إلى تجربة مستخدم جيدة. تقليل وقت التحميل ، وتقصير وقت التفاعل ووقت تحويل التخطيط ، والمساعدة في القضاء على احتكاك UX. هذا يزيد من فرصة عودة المستخدمين إلى موقعك.

دورة حياة الشبكة الأساسية الحالية ليست ثابتة. يمكن إضافة مؤشرات أخرى بمرور الوقت. سيستند هذا إلى التعليقات الواردة من مجتمع المطورين والملاحظات الفعلية لقضايا الأداء الشائعة. تم اختيار المؤشرات الثلاثة الحالية لأنها “ذات صلة بجميع صفحات الويب” ولها أكبر تأثير شامل على تجربة المستخدم.