أساسيات الويب الأساسية: 7 أدوات وتقنيات لتحديد معوقات الأداء

تعد "حيوية الويب الأساسية" (CWV) موضوعًا ساخنًا في الوقت الحالي. هنا ، سنلقي نظرة على بعض الأدوات التي يمكننا استخدامها للمساعدة في تحديد مشكلات أداء موقع الويب ، استعدادًا لتحديث التصنيف القادم من Google في مايو 2021.

هل تحتاج إلى تجديد معلومات حول Core Web Vitals؟ تعرف على ماهيتها وكيفية تحسينها في مقالتي الموضحة حول "أساسيات الويب الأساسية".

المراقبة الآلية لمقاييس CWV

إذا كان لديك العديد من مواقع الويب أو الصفحات الرئيسية التي تريد مراقبتها بمرور الوقت ، دون الحاجة إلى إجراء اختبار بعد اختبار يدويًا ، فقد يكون جدول البيانات هذا بواسطة Digital Inspiration مناسبًا لك. ما عليك سوى الحصول على مفتاح Lighthouse PageSpeed ​​API ، وإضافة بعض عناوين URL وتذهب بعيدًا!

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

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

PageSpeed ​​Insights

تُعد PageSpeed ​​Insights من Google أداة الانتقال الخاصة بي لإجراء تحقيقات أولية على أعلى مستوى في الأداء والمشكلات المتعلقة بـ CWV ، لكل من الأجهزة المحمولة وأجهزة سطح المكتب. تحتوي التقارير على "بيانات ميدانية" ؛ كيف يختبر المستخدمون في العالم الحقيقي موقع الويب جنبًا إلى جنب مع بيانات Lighthouse 'Lab' التي تحاكي تحميل الصفحة ، وهو أمر مفيد للاختبار المتسق والقابل للتكرار.

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

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

مراقب أداء Chrome DevTools

للحصول على تحليل أكثر تفصيلاً للأداء والمشكلات المتعلقة بـ CWV ، غالبًا ما ألجأ إلى مراقب أداء Chrome داخل DevTools وبعض مؤشرات CWV الرئيسية التي أستخدمها مرقمة في لقطة الشاشة أدناه.

1. أولاً ، ستحتاج إلى التأكد من تشغيل شاشة الأداء بالدقة الصحيحة ، حيث غالبًا ما تتغير عناصر LCP و CLS بدرجات دقة مختلفة. لقد تم ضبطها على 350 × 636 بكسل لتكرار عرض PageSpeed ​​Insights للجوال.
2. قبل تشغيل التقرير ، قد ترغب أيضًا في محاكاة اتصال الجهاز المحمول وقوته. غالبًا ما أختار Fast 3g و 4x CPU.
3. يؤدي تحديد مقياس LCP بمجرد إنشاء تقرير إلى تحديد العنصر الأكبر. يجب أن يكون هذا أقرب ما يكون إلى FCP (أول رسم مضمون) قدر الإمكان. إذا كانت هناك فجوة ، فستحتاج إلى تحديد وتبسيط تسليم العنصر الأكبر.
4. يتم تمييز مهام CPU الطويلة بالأقطار الحمراء على الأشرطة الرمادية. غالبًا ما يحدث هذا بسبب وجود JavaScript أثقل ، يتم تمثيله بالأشرطة الصفراء وسيؤثر على مقاييس التفاعل (FID و TBT و TTI). عادةً ما يشير التنقل لأسفل للأشرطة أدناه إلى ملفات ووظائف JavaScript المخالفة.
5. يتم تمييز تحولات التخطيط بواسطة هذه الأشرطة الحمراء ، وعادةً ما يؤدي تحديدها إلى إبراز العنصر الذي تم إزاحته. سيؤدي عدد كبير من هذه القيم إلى إنشاء قيم CLS أعلى.
6. يمكن أن يكون عرض الإطار طريقة رائعة لتسليط الضوء بشكل مرئي على كيفية ظهور المحتوى وتغيير التخطيط أثناء تحميله. بالنسبة لقيم CLS العالية ، غالبًا ما يكون السبب واضحًا من الإطارات. في هذا المثال ، يتسبب إعلان بانر كبير لملف تعريف الارتباط في تغيير التخطيط كمحتوى يتم دفعه لأسفل.

ملحقات Chrome الحيوية للويب

العناصر الحيوية الأساسية لـ SERP

يعرض امتداد SERP Vitals مؤشرًا مفيدًا لمقاييس LCP و FID و CLS مباشرة في نتائج البحث. إنه أمر رائع لتحليل المنافسين ويمكن أن يعطي مؤشرًا سريعًا لمدى السرعة التي من المحتمل أن تكون عليها صفحة الويب قبل زيارتها.

يتم تجميع البيانات بشكل مجهول من مستخدمين حقيقيين من خلال تقرير تجربة مستخدم Chrome (CrUX). ومع ذلك ، فهو غير متاح لكل موقع ، حيث إن المواقع الجديدة أو المواقع ذات حركة المرور القليلة لن تحصل على نقاط بيانات كافية.

حيوية الويب

يقيس ملحق Web Vitals المفيد 3 مقاييس CWV الرئيسية لمستخدمي سطح المكتب في Chrome في الوقت الفعلي ، ويوفر تلوين إشارات المرور مؤشرًا سريعًا أثناء تصفحك لموقع ويب. نظرًا لأنه لا يعتمد على بيانات المستخدم التي تم جمعها خارجيًا ، فقد يكون من الرائع للمطورين الذين يعملون في بيئة محلية اكتشاف أي مشكلات في وقت مبكر.

منارة

توفر Lighthouse Extensions مسارًا سريعًا إلى نفس ميزة إعداد التقارير المتوفرة في Chrome DevTools وتسحب بيانات Lab باستخدام Lighthouse API بدلاً من Field Data من مستخدمي العالم الحقيقي من خلال CrUX

تقرير الأداء مشابه جدًا لتحليل PageSpeed ​​Insights للجوال ، حيث يقدم تشخيصات وتوصيات مماثلة. يتم أيضًا إنشاء تقارير إضافية لتحسين محركات البحث وإمكانية الوصول وأفضل الممارسات.

مصور سرعة موقع تريو

يعرض المصور الموجود في https://treo.sh/sitespeed مقاييس CWV بمرور الوقت ، ويمكن تصفيتها حسب الجهاز والاتصال والمنطقة الجغرافية. يتم تحديثه أسبوعيًا ويستخدم بيانات من تقرير CrUX.

في المثال أدناه لموقع bbc.co.uk ، يمكننا أن نرى كيف انخفض مقياس CLS بشكل كبير في الأشهر الثلاثة الأخيرة ، مما يعطي نتائج "تمرير" خضراء لجميع المقاييس الأساسية. هذه طريقة رائعة لتحليل أداء مقاييس CWV بمرور الوقت أو لإجراء تحليل المنافسين.

تصور طلبات الجهات الخارجية

غالبًا ما يكون من الصعب استكشاف أخطاء مقاييس التفاعل لـ FID و TTI و TBT. يمكن أن تكون PageSpeed ​​Insights مفيدة من حيث تحديد بعض من أثقل نصوص الطرف الثالث ، ولكن في بعض الأحيان يمكن أن يؤدي التصور اللائق إلى توصيل تأثير هذه البرامج النصية بشكل أسهل.

أداة تعيين الطلب https://requestmap.herokuapp.com/ رائعة لهذا الغرض. تحتوي الخرائط التي تم إنشاؤها على عقد لكل طلب من جهات خارجية ، مع عقد أكبر تمثل نصوصًا ذات تأثير أعلى إذا كانت مقاييس التفاعل لديك ضعيفة ، فمن المحتمل أن ترى الكثير من العقد على هذه الخريطة.

فيما يلي مثال من موقع يحتوي على 26 ثانية مذهلة لمقياس TTI التفاعلي. تُظهر نظرة سريعة على الخريطة أداة دردشة مباشرة ، ممثلة بالعقد العديدة ذات اللون الأزرق الداكن في الأعلى ، والتي تمثل أكثر من نصف إجمالي الطلبات.

تُعد أداة خريطة الطلب أيضًا طريقة رائعة لتحديد مكان تحميل البرامج النصية أو الأصول الأخرى. يمكننا أن نرى أدناه عدة عقد قادمة مباشرة من عقدة Google Tag Manager الصفراء في هذا المثال.

الشلالات في WebPageTest

توفر تقارير WebPageTest تفاصيل أكثر بكثير من PageSpeed ​​Insights ويمكن إنشاؤها من أجهزة ومواقع مختلفة.

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

إذا لم تكن متأكدًا من كيفية تأثير CWV على موقعك ، فاتصل بنا اليوم.