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

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

بريندان كيني

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

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

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

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

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

الإعداد

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

# 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();

يُظهر التقرير الناتج أنّ النتائج جيدة بشكل عام، ولكن قد تكون هناك بعض معايير تسهيل الاستخدام التي يجب التحقّق منها يدويًا:

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

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

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

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

ستكون قيمة CLS تساوي 0 في عملية التنقّل العادية في Lighthouse. ومع ذلك، بعد الانتقال إلى الصفحة، ستظهر مشاكل في متغيّرات التصميم وسترتفع قيمة متغيّرات التصميم التراكمية (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) ضمن الفترات الزمنية، ولكن من الواضح أنّ المحتوى الكسول التحميل في هذه الصفحة يدمج متغيّرات التصميم التراكمية (CLS) للموقع الإلكتروني.

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

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

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

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