كيفية قياس مؤشرات أداء الويب الأساسية (Web Vitals) لتطبيقات Next.js باستخدام Quickmetrics

مقدمة إلى مؤشرات أداء الويب الأساسية (Web Vitals) وأهميتها

يقضي مطورو الويب وقتاً طويلاً في تحسين المواقع الإلكترونية بهدف تقديم أفضل تجربة ممكنة للمستخدمين. في هذا السياق، تبرز مؤشرات أداء الويب الأساسية (Web Vitals) كمجموعة من المقاييس الحيوية التي تهدف إلى قياس وتحديد مدى جودة تجربة المستخدم على صفحة الويب. هذه المؤشرات ليست مجرد أرقام، بل هي معايير أساسية تعتمدها محركات البحث، مثل جوجل، لتقييم أداء الموقع وتأثيره على رضا الزوار. في هذا المقال، سنتناول هذه المؤشرات بالتفصيل ونستكشف كيفية تتبعها وتصويرها لتطبيقات Next.js باستخدام أداة Quickmetrics.

المؤشرات الأساسية لأداء الويب التي يجب تتبعها

تتكون مؤشرات أداء الويب الأساسية من عدة مقاييس رئيسية، كل منها يركز على جانب مختلف من تجربة المستخدم. دعنا نتعرف على هذه المقاييس وأهميتها:

زمن أول بايت (Time to First Byte – TTFB)

يقيس TTFB الوقت الذي يستغرقه متصفح العميل لتلقي أول بايت من بيانات الصفحة من خادم الويب بعد إرسال المستخدم للطلب. يُعد هذا المقياس مؤشراً حاسماً على سرعة استجابة الخادم. يجب أن يكون الهدف هو تحقيق قيمة تتراوح بين 200-500ms. إذا استغرق موقعك وقتاً أطول من ذلك، فمن الضروري البحث عن طرق لتحسين هذا الرقم، مثل تحسين استجابة الخادم أو استخدام شبكة توصيل المحتوى (CDN).

أول رسم محتوى (First Contentful Paint – FCP)

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

أكبر رسم محتوى (Largest Contentful Paint – LCP)

يقيس LCP الوقت المستغرق لعرض أكبر صورة أو كتلة نصية مرئية على الصفحة بعد بدء تحميلها. هذا المقياس يعكس مدى سرعة تحميل المحتوى الرئيسي والأكثر أهمية للمستخدم. لتقديم تجربة مستخدم ممتازة، يجب أن يحدث LCP في غضون 2.5 ثانية من بدء تحميل الصفحة.

تأخير الإدخال الأول (First Input Delay – FID)

يقيس FID أي تأخير في معالجة أول تفاعل للمستخدم مع الصفحة، مثل النقر على زر، التمرير، أو النقر على رابط. على سبيل المثال، يقيس الوقت المستغرق من لحظة نقر المستخدم على زر حتى يبدأ المتصفح في معالجة هذا الحدث. لتقديم تجربة مستخدم سلسة، يجب أن يكون FID أقل من 100 مللي ثانية.

تراكم تحول التخطيط (Cumulative Layout Shift – CLS)

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

لتقديم تجربة مستخدم جيدة، يجب أن تحافظ الصفحات على CLS أقل من 0.1.

تتبع مؤشرات أداء الويب الأساسية لتطبيقات Next.js باستخدام Quickmetrics

Next.js هو إطار عمل React يوفر إمكانيات عرض من جانب الخادم (SSR) وتوليد المواقع الثابتة. في هذا الجزء، سنوضح لك كيفية تتبع كل من مؤشرات أداء الويب هذه لتطبيق Next.js الخاص بك باستخدام Quickmetrics.

إنشاء حساب Quickmetrics

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

بعد التسجيل بنجاح، ستحصل على API_KEY الخاص بك. يرجى تخزين هذا المفتاح في مكان آمن لاستخدامه لاحقاً.

كيفية قياس مؤشرات أداء الويب في تطبيق Next.js الخاص بك

يوفر Next.js طريقة مدمجة لقياس مختلف مقاييس الأداء. لقياس أي من المقاييس المدعومة، ستحتاج إلى إنشاء مكون App مخصص وتحديد دالة reportWebVitals. إذا لم يكن لديك تطبيق جاهز، يرجى الرجوع إلى هذا الدليل لإنشاء واحد.

 import "../styles/globals.css";

 export function reportWebVitals(metric) {
   switch (metric.name) {
     case 'FCP':
       // handle FCP results
       break;
     case 'LCP':
       // handle LCP results
       break;
     case 'CLS':
       // handle CLS results
       break;
     case 'FID':
       // handle FID results
       break;
     case 'TTFB':
       // handle TTFB results
       break;
     default:
       break;
   }
 }

 function MyApp({ Component, pageProps }) {
   return <Component { ...pageProps } />;
 }

 export default MyApp;

في المثال أعلاه، نستخدم metric.name لتصفية مؤشرات أداء الويب. بمجرد تصفية المقاييس وتوفر بيانات مؤشرات أداء الويب لديك، نحتاج إلى إرسال هذه المقاييس إلى Quickmetrics.

 const sendMetric = ({ name, value }) => {
   const url = `https://qckm.io?m=${name}&v=${value}&k=${process.env.NEXT_PUBLIC_QUICK_METRICS_API_KEY}`;

   // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
   if (navigator.sendBeacon) {
     navigator.sendBeacon(url);
   } else {
     fetch(url, {
       method: "POST",
       keepalive: true
     });
   }
 };

الآن، سنحصل على الاسم (name) والقيمة (value) من كائن metric الذي توفره دالة reportWebVitals. نقوم بتمرير هذه القيمة إلى الدالة sendMetric. داخل هذه الدالة، نقوم ببناء عنوان URL الخاص بـ Quickmetrics لإرسال المقاييس (يمكنك الرجوع إلى الوثائق لمعرفة المزيد حول هذا). نستخدم navigator.sendBeacon لإرسال المقياس إلى Quickmetrics إذا كان متاحاً. إذا لم يكن كذلك، نعود إلى استخدام fetch (يتم توفيره بواسطة Next.js، ولا تحتاج إلى تثبيت أي شيء). لمعرفة المزيد حول سبب استخدام sendBeacon، يرجى قراءة هذا المقال.

الآن ما عليك سوى استدعاء sendMetric من كل حالة switch. هكذا يجب أن يبدو الكود الخاص بك في هذه المرحلة:

 import "../styles/globals.css";

 const sendMetric = ({ name, value }) => {
   const url = `https://qckm.io?m=${name}&v=${value}&k=${process.env.NEXT_PUBLIC_QUICK_METRICS_API_KEY}`;

   // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
   if (navigator.sendBeacon) {
     navigator.sendBeacon(url);
   } else {
     fetch(url, {
       method: "POST",
       keepalive: true
     });
   }
 };

 export function reportWebVitals(metric) {
   switch (metric.name) {
     case "FCP":
       sendMetric(metric);
       break;
     case "LCP":
       sendMetric(metric);
       break;
     case "CLS":
       sendMetric(metric);
       break;
     case "FID":
       sendMetric(metric);
       break;
     case "TTFB":
       sendMetric(metric);
       break;
     default:
       break;
   }
 }

 function MyApp({ Component, pageProps }) {
   return <Component { ...pageProps } />;
 }

 export default MyApp;

يمكنك الاطلاع على الكود كاملاً في هذا المستودع.

الآن، قم بتخزين مفتاح API الخاص بـ Quickmetrics داخل ملف .env لإرسال المقاييس:

NEXT_PUBLIC_QUICK_METRICS_API_KEY=your_key

بعد ذلك، قم بتشغيل موقع الويب الخاص بك باستخدام الأمر yarn dev أو npm run dev. قم بزيارة موقع الويب الخاص بك على http://localhost:3000. قم بتحديثه عدة مرات لتوليد بيانات كافية للتصور.

تصور المقاييس على Quickmetrics

الآن، انتقل إلى صفحة مقاييس Quickmetrics. يجب أن ترى المقاييس كما في الصورة التالية:

يمكنك النقر على هذه المقاييس الفردية لرؤية البيانات وتفسير النتائج.

يمكنك النقر على أيقونة الإعدادات كما هو موضح في الصورة أعلاه لتخصيص الرسوم البيانية. يمكنك تعيين نوع الرسم البياني والوحدة وعمليات القيمة مثل المتوسط (avg)، المجموع (sum)، الحد الأقصى (max)، الحد الأدنى (min)، إلخ. دعنا نلقي نظرة على هذه الرسوم البيانية لفهمها بمزيد من التفصيل.

مقياس FCP

يمثل الرسم البياني أعلاه مقاييس FCP لموقعي. أنا آخذ المتوسط هنا. إذا نظرت إلى الرسم البياني، يمكنك أن ترى أن قيمة FCP لموقعي تتراوح حوالي 600-700ms، وهو أمر جيد جداً (حيث نتوقع أن تكون أقل من ثانية واحدة).

مقياس LCP

يوضح الرسم البياني أعلاه مقياس LCP للموقع. إنه حوالي 600-700ms، وهو أقل بكثير من القيمة الموصى بها وهي 2.5 ثانية. لذا، هذا جيد أيضاً.

مقياس TTFB

يوضح هذا الرسم البياني مقياس TTFB للموقع. إنه حوالي 30ms، وهو أفضل بكثير من القيمة المتوقعة التي تتراوح بين 200-300ms.

مقياس CLS

أنا أستخدم حالياً موقع Next.js البدائي الذي يحتوي على CLS شبه معدوم. يجب أن تكون هذه القيمة دائماً أقل من 0.1.

مقياس FID

في الرسم البياني أعلاه، يبلغ FID حوالي 23.5ms. مرة أخرى، هذه القيمة أقل من 100ms، وهي أفضل بكثير من الوقت الموصى به وهو أقل من 100ms.

إنشاء لوحة تحكم مخصصة للمقاييس

لعرض جميع هذه المقاييس من صفحة واحدة، يمكنك إنشاء لوحة تحكم (dashboard) ثم إضافة هذه المقاييس داخلها.

يمكنك النقر على "إنشاء لوحة تحكم" (create dashboard) لإنشاء لوحة تحكم مخصصة. داخل لوحة التحكم، يمكنك المضي قدماً والنقر على "إضافة رسوم بيانية" (add charts) لإنشاء رسوم بيانية فردية للمقاييس.

بمجرد النقر على "إضافة رسم بياني"، يمكنك بعد ذلك تحديد المقاييس التي تريد رسمها. يمكنك أيضاً تحديد عملية القيمة المراد رسمها في الرسوم البيانية (مثل المتوسط avg، المجموع sum، الحد الأدنى min، الحد الأقصى max).

بمجرد إنشاء جميع الرسوم البيانية داخل لوحة التحكم، يجب أن تبدو لوحة التحكم الخاصة بك كما يلي:

الخلاصة التقنية

تُعد مؤشرات أداء الويب الأساسية (Web Vitals) معياراً لا غنى عنه في عالم تطوير الويب الحديث. إنها توفر للمطورين والمحللين رؤى قابلة للتنفيذ حول كيفية تفاعل المستخدمين الحقيقيين مع تطبيقاتهم. بدلاً من الاعتماد على الاختبارات المحلية في بيئة مثالية، يتيح لنا تتبع هذه المقاييس من أجهزة الزوار الفعلية فهم التحديات الحقيقية التي يواجهونها. إن دمج Quickmetrics مع تطبيقات Next.js يقدم حلاً فعالاً ومباشراً لجمع هذه البيانات وتحليلها، مما يمكننا من اتخاذ قرارات مستنيرة لتحسين الأداء بشكل مستمر. هذا النهج الاستباقي لا يضمن فقط تجربة مستخدم أفضل، بل يعزز أيضاً تصنيف الموقع في محركات البحث، مما يؤدي إلى زيادة الوصول والرضا العام.

المراجع

• Next.js Docs: Measuring Performance
• Quickmetrics Docs: Getting Started
• Web.dev: Web Vitals