تدفقات مستخدم أداة Lighthouse

يمكنك تجربة واجهة برمجة تطبيقات Lighthouse الجديدة لقياس الأداء وأفضل الممارسات خلال مسار المستخدم.

Brendan Kenny

تُعدّ أداة Lighthouse أداة رائعة لاختبار الأداء وأفضل الممارسات أثناء التحميل الأولي للصفحة. مع ذلك، كان من الصعب عادةً استخدام أداة Lighthouse لتحليل الجوانب الأخرى من الصفحة، مثل:

• يتم تحميل الصفحة باستخدام ذاكرة تخزين مؤقت دافئة
• الصفحات التي تحتوي على مشغّل خدمات مفعّل
• مراعاة تفاعلات المستخدم المحتملة

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

تتضمّن أداة Lighthouse واجهة برمجة تطبيقات جديدة لتدفق المستخدم تسمح بالاختبار المعملي في أي مرحلة خلال فترة عرض الصفحة. يتم استخدام Puppeteer لكتابة نص برمجي لعمليات تحميل الصفحات وبدء تفاعلات اصطناعية مع المستخدمين، ويمكن استدعاء Lighthouse بطرق متعددة للحصول على الإحصاءات الرئيسية أثناء تلك التفاعلات. وهذا يعني أنّه يمكن قياس الأداء أثناء تحميل الصفحة والتفاعلات مع الصفحة. يمكن تنفيذ عمليات فحص إمكانية الوصول في CI، ليس فقط من حيث العرض الأولي، ولكن في عمق مسار الدفع للتأكد من عدم تراجع أي تراجع.

أصبح بالإمكان الآن إدراج Lighthouse في أي نص برمجي تم إنشاؤه من أجل Puppeteer لضمان عمل مسار المستخدم بشكل سليم في أي وقت لقياس الأداء وأفضل الممارسات خلال هذه العملية. سيشرح هذا الدليل التوجيهي أوضاع Lighthouse الجديدة التي يمكنها قياس أجزاء مختلفة من تدفقات المستخدم: التنقل واللقطات والفترات الزمنية.

ضبط إعدادات الجهاز

لا تزال واجهات برمجة التطبيقات الخاصة بتدفق المستخدم في مرحلة المعاينة، ولكنّها متاحة في Lighthouse حاليًا. لتجربة العروض التوضيحية الواردة أدناه، يجب استخدام الإصدار 14 من Node أو إصدار أحدث. أنشئ دليلاً فارغًا وشغِّله:

# Default to ES modules.
echo '{"type": "module"}' > package.json

# Init npm project without the wizard.
npm init -y

# Dependencies for these examples.
npm install lighthouse puppeteer open

التنقلات

ميزة "التنقّل" في Lighthouse الجديدة في الواقع، يُعطى هذا الوضع اسمًا لسلوك Lighthouse العادي (حتى الآن)، وهو: تحليل التحميل البارد للصفحة. هذا هو الوضع الذي يجب استخدامه لمراقبة أداء تحميل الصفحات، ولكن تدفقات المستخدمين تتيح أيضًا إمكانية الحصول على إحصاءات جديدة.

لاستخدام أداة Lighthouse في النص البرمجي الذي يلتقط تحميل صفحة، اتّبِع الخطوات التالية:

1. استخدِم الدُمى لفتح المتصفح.
2. ابدأ تدفق مستخدم Lighthouse.
3. انتقِل إلى عنوان URL المستهدف.

import fs from 'fs';
import open from 'open';
import puppeteer from 'puppeteer';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const flow = await startFlow(page, {name: 'Single Navigation'});
  await flow.navigate('https://web.dev/performance-scoring/');

  await browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

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

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

جارٍ تسجيل حمل دافئ

يمكنك أيضًا إضافة شريط تنقّل ثانٍ إلى هذا النص البرمجي، وإلا سيتم إيقاف محو ذاكرة التخزين المؤقت ومساحة التخزين التي تجريها أداة Lighthouse تلقائيًا في عمليات التنقل. يُحمِّل هذا المثال التالي مقالة على web.dev نفسه لمعرفة مدى استفادتها من التخزين المؤقت:

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const testUrl = 'https://web.dev/performance-scoring/';
  const flow = await startFlow(page, {name: 'Cold and warm navigations'});
  await flow.navigate(testUrl, {
    stepName: 'Cold navigation'
  });
  await flow.navigate(testUrl, {
    stepName: 'Warm navigation',
    configContext: {
      settingsOverrides: {disableStorageReset: true},
    },
  });

  await browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

يبدو تقرير التدفق الناتج كما يلي:

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

اللقطات

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

على سبيل المثال، لنفترض أنّك تريد التحقّق من أنّ واجهة المستخدم الجديدة في "الإعدادات المتقدّمة" ضمن Squoosh تجتاز عمليات فحص Lighthouse الآلية. لا تظهر هذه الإعدادات إلا في حال تحميل صورة وتوسيع قائمة الخيارات لعرض الإعدادات المتقدّمة.

يمكن إنشاء نص برمجي لهذه العملية باستخدام Puppeteer ويمكنك في الواقع أخذ لقطة Lighthouse في كل خطوة:

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const flow = await startFlow(page, {name: 'Squoosh snapshots'});

  await page.goto('https://squoosh.app/', {waitUntil: 'networkidle0'});

  // Wait for first demo-image button, then open it.
  const demoImageSelector = 'ul[class*="demos"] button';
  await page.waitForSelector(demoImageSelector);
  await flow.snapshot({stepName: 'Page loaded'});
  await page.click(demoImageSelector);

  // Wait for advanced settings button in UI, then open them.
  const advancedSettingsSelector = 'form label[class*="option-reveal"]';
  await page.waitForSelector(advancedSettingsSelector);
  await flow.snapshot({stepName: 'Demo loaded'});
  await page.click(advancedSettingsSelector);

  await flow.snapshot({stepName: 'Advanced settings opened'});

  browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

يوضح التقرير الناتج أن النتائج جيدة بشكل عام، ولكن قد تكون هناك بعض معايير إمكانية الوصول التي يجب التحقق منها يدويًا:

الفترات الزمنية

يتمثل أحد أكبر الاختلافات بين نتائج الأداء في المجال (مثل نتائج تقرير تجربة المستخدم) وفي المختبر (مثل Lighthouse) في نقص البيانات التي يُدخلها المستخدمون. هذا هو المكان الذي يمكن أن يساعد فيه الفترة الزمنية - آخر وضع لتدفق المستخدم -.

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

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

وستكون قيمة متغيّرات التصميم التراكمية (CLS) في أي عملية تنقُّل عادية من خلال Lighthouse 0. ومع ذلك، بعد الانتقال في الصفحة، ستظهر بها مشاكل في متغيّرات التصميم وترتفع قيمة متغيّرات التصميم التراكمية (CLS).

ينتج النص البرمجي التالي تقرير تدفق المستخدم بكلا الإجراءين لإظهار الفرق.

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  // Get a session handle to be able to send protocol commands to the page.
  const session = await page.target().createCDPSession();

  const testUrl = 'https://pie-charmed-treatment.glitch.me/';
  const flow = await startFlow(page, {name: 'CLS during navigation and on scroll'});

  // Regular Lighthouse navigation.
  await flow.navigate(testUrl, {stepName: 'Navigate only'});

  // Navigate and scroll timespan.
  await flow.startTimespan({stepName: 'Navigate and scroll'});
  await page.goto(testUrl, {waitUntil: 'networkidle0'});
  // We need the ability to scroll like a user. There's not a direct puppeteer function for this, but we can use the DevTools Protocol and issue a Input.synthesizeScrollGesture event, which has convenient parameters like repetitions and delay to somewhat simulate a more natural scrolling gesture.
  // https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture
  await session.send('Input.synthesizeScrollGesture', {
    x: 100,
    y: 600,
    yDistance: -2500,
    speed: 1000,
    repeatCount: 2,
    repeatDelayMs: 250,
  });
  await flow.endTimespan();

  await browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

يؤدّي هذا إلى إنشاء تقرير يقارن بين التنقّل المعتاد وبين الفترة الزمنية التي تحتوي على كلّ من التنقّل والتمرير بعد ذلك:

من خلال التعمّق في كل خطوة، تعرض خطوة التنقّل فقط قيمة CLS بقيمة 0. موقع رائع.

ومع ذلك فإن زر "التنقل والتمرير" خطوة يروي قصة مختلفة. لا يتوفّر في الوقت الحالي سوى إجمالي وقت الحظر ومتغيّرات التصميم التراكمية، إلا أنّ المحتوى الكسول التحميل في هذه الصفحة يكشف بوضوح متغيّرات التصميم التراكمية (CLS) الخاصة بالموقع الإلكتروني.

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

جارٍ البحث عن ملاحظات

يمكن لواجهات برمجة التطبيقات الجديدة لتدفق المستخدم في Lighthouse إجراء العديد من المهام الجديدة، ولكن قد يكون قياس نوع السيناريوهات التي يواجهها المستخدمون أمرًا معقدًا.

يُرجى التواصل معنا إذا كانت لديك أي أسئلة في منتديات المناقشة أو الإبلاغ عن أي أخطاء أو اقتراحات في أداة تتبُّع المشاكل.