برای بهبود عملکرد چه چیزی را باید اندازه گیری کنید؟

استراتژی هایی برای اندازه گیری عملکرد در هر مرحله در قیف خرید.

مارتین شیرله

توییتر گیت هاب

مراحل مختلف یک قیف خرید به طرق مختلف مستعد مشکلات عملکردی هستند و بنابراین به اندازه گیری و بهینه سازی متفاوتی نیاز دارند:

در این راهنما به نحوه اندازه گیری مراحل مختلف خواهیم پرداخت. برای این منظور به شما توصیه می کنیم که به داده های آزمایشگاهی و میدانی نیز نگاه کنید.

داده‌های آزمایشگاهی با اجرای آزمایش‌های محلی، برای مثال با استفاده از Lighthouse و ابزارهای دیگر، جمع‌آوری می‌شوند. این می تواند مقایسه عملکرد وب سایت در طول زمان و با رقبا را از طریق یک محیط کنترل شده و پایدار ممکن کند، اما ممکن است نماینده عملکردی که کاربران در زندگی واقعی تجربه می کنند نباشد.

داده‌های میدانی از طریق تجزیه و تحلیل از کاربران واقعی جمع‌آوری می‌شوند و بنابراین نماینده تجربه آن‌ها هستند. با این حال، نمی توان آن را به راحتی در طول زمان یا با رقبا مقایسه کرد. اتصالات شبکه و سخت افزار گوشی های هوشمند در طول زمان تکامل می یابند و مخاطبان هدف مختلف ممکن است دستگاه های متفاوتی داشته باشند، بنابراین مقایسه با داده های میدانی سخت می شود. همچنین به اندازه گیری عملکرد در میدان مراجعه کنید.

برای بدست آوردن یک تصویر کامل، به هر دو منبع داده نیاز است. بخش‌های زیر نحوه جمع‌آوری داده‌های آزمایشگاهی و میدانی را برای علائم عملکرد مرتبط مختلف در سراسر قیف نشان می‌دهند.

کشف

بهینه‌سازی برای اکتشاف به معنای بهینه‌سازی برای بار اول است، چیزی که کاربران جدید و همچنین خزنده‌های جستجو و اجتماعی دریافت خواهند کرد. داده های آزمایشگاهی برای بار اول را می توان به راحتی از طریق Lighthouse به دست آورد، در حالی که داده های میدانی (حداقل برای Chrome) به راحتی از طریق گزارش های Chrome UX در دسترس هستند. ترکیبی مناسب از هر دو را می توان در PageSpeed ​​Insights یافت. شما همچنین باید معیارهای مربوطه را در این زمینه دنبال کنید: اندازه‌گیری این معیارها در دستگاه‌های کاربران واقعی یک نمای کلی خوب ارائه می‌دهد.

از دیدگاه کاربر، مهمترین معیارها عبارتند از:

• First Contentful Paint (FCP) : زمانی که کاربر به یک صفحه خالی خیره می شود. این زمانی است که اکثر کاربران از آنجایی که پیشرفتی را مشاهده نمی کنند، پرش می کنند.
• First Meaningful Paint (FMP) : هنگامی که کاربر شروع به دیدن محتوای اصلی می کند که برای آن آمده است. این اغلب تصویر قهرمان است، اما برای یک صفحه فرود حتی ممکن است یک فراخوان برای اقدام مانند دکمه خرید باشد، زیرا کاربر ممکن است با قصد واضحی وارد شده باشد (مثلاً از طریق یک کمپین تبلیغاتی هدفمند).
• تأخیر ورودی اول (FID) : زمانی که وب سایت نیاز دارد تا به اولین ورودی کاربر واکنش نشان دهد. جاوا اسکریپت بیش از حد و سایر مشکلات بارگیری دارایی می تواند این مشکل را مسدود کند و منجر به ضربه یا کلیک ناموفق، ورودی های اشتباه و رها شدن صفحه شود.

معیارهای بیشتری وجود دارد که می توانید به آنها نگاه کنید، اما اینها پایه خوبی هستند. علاوه بر این، مطمئن شوید که نرخ پرش، تبدیل‌ها و تعامل کاربر را ثبت کرده‌اید تا بتوانید این‌ها را در ارتباط قرار دهید.

تعامل و تبدیل

پس از اولین بارگذاری یک صفحه فرود، یک کاربر از طریق سایت شما حرکت می کند، امیدوارم به سمت تبدیل موفقیت آمیز.

در این مرحله ناوبری و تعاملات سریع و پاسخگو مهم است. متأسفانه اندازه‌گیری جریان کامل ناوبری و رویدادهای تعاملی در این زمینه بی‌اهمیت نیست، زیرا هر کاربر مسیرهای مختلفی را در صفحه طی می‌کند. بنابراین توصیه می‌کنیم زمان مورد نیاز برای تبدیل یا تبدیل (" زمان برای اقدام ") را با برنامه‌نویسی و اندازه‌گیری جریان در یک آزمایش آزمایشگاهی اندازه‌گیری کنید تا عملکرد در طول زمان یا با رقبا مقایسه شود.

دو راه راحت برای انجام این کار وجود دارد:

WebPageTest

WebPageTest یک راه حل برنامه نویسی بسیار انعطاف پذیر ارائه می دهد. ایده اصلی این است که:

• به WebPageTest بگویید با دستور navigate در صفحات جریان حرکت کند.
• در صورت نیاز اسکریپت کلیک روی دکمه ها از طریق دستورات clickAndWait و پر کردن فیلدهای متنی از طریق setValue . برای آزمایش برنامه‌های کاربردی یک صفحه، به‌جای فرمان‌های navigate برای همه مراحل بعد از مرحله اول، از clickAndWait استفاده کنید، زیرا navigate به جای بارگذاری سبک صفحه مجازی، بارگذاری کامل را انجام می‌دهد.
• مطمئن شوید که مراحل مختلف جریان را در تجزیه و تحلیل از طریق combineSteps ترکیب کرده اید تا یک گزارش نتیجه کلی برای جریان کامل ایجاد کنید.

چنین اسکریپتی می تواند به شکل زیر باشد:

combineSteps
navigate    https://www.store.google.com/landingpage
navigate    https://www.store.google.com/productpage
clickAndWait    innerText=Buy Now
navigate    https://www.store.google.com/basket
navigate    https://www.store.google.com/checkout

با استفاده از اسکریپتی مانند این می توانید به راحتی عملکرد را در طول زمان اندازه گیری و مقایسه کنید. این حتی می تواند از طریق WebPageTest API خودکار شود.

عروسک گردان

یکی دیگر از گزینه های عالی برای تست اسکریپت از طریق کروم بدون هدلس است که می تواند از طریق Node API Puppeteer کنترل شود. ایده کلی این است که مرورگر را از طریق Puppeteer راه‌اندازی کنید، از طریق تابع goto به صفحه فرود بروید، جاوا اسکریپت را برای پر کردن فیلدها یا کلیک کردن روی دکمه‌ها تزریق کنید و در صورت نیاز از طریق قیف از طریق تماس‌های goto بعدی ادامه دهید.

به عنوان یک معیار، مدت زمان جریان را می توان مستقیماً اندازه گیری کرد، اما می توانید مقادیر FCP، FMP یا TTI بارهای مجزای جریان را نیز خلاصه کنید. تست عملکرد وب سایت با Puppeteer یک نمای کلی از نحوه دریافت معیارهای عملکرد از طریق Puppeteer ارائه می دهد. یک مثال بسیار ساده‌شده Node اسکریپت می‌تواند به شکل زیر باشد:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const start = performance.now();
  await page.goto('https://www.store.google.com/landingpage');
  await page.goto('https://www.store.google.com/productpage');
  // click the buy button, which triggers overlay basket
  await page.click('#buy_btn');
  // wait until basket overlay is shown
  await page.waitFor('#close_btn');
  await page.goto('https://www.store.google.com/basket');
  await page.goto('https://www.store.google.com/checkout');
  console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
  await browser.close();
})();

این اسکریپت به راحتی می تواند خودکار شود، و حتی بخشی از فرآیند ساخت یا بودجه های پرفکت شود، و به طور منظم نظارت شود.

نامزدی مجدد

کاربران در بازه های زمانی مختلف به سایت شما بازخواهند گشت. بسته به زمان سپری شده، ممکن است مرورگر منابع کمتری از وب سایت را در حافظه پنهان داشته باشد و به درخواست های شبکه بیشتری نیاز داشته باشد. این امر تخمین تفاوت عملکرد در بازدیدهای مکرر در آزمایشات آزمایشگاهی را دشوار می کند. با این حال، همچنان توصیه می شود که مراقب این موضوع باشید، و یک ابزار تست آزمایشگاهی عالی برای بازدیدهای مکرر، WebPageTest است که یک گزینه اختصاصی برای بازدید تکرار مستقیم دارد:

برای اینکه احساس بهتری نسبت به عملکرد بازدیدهای مکرر در میدان داشته باشید، از بسته تحلیلی انتخابی خود برای تقسیم بندی معیارهای عملکرد خود بر اساس نوع کاربر استفاده کنید. در اینجا نمونه ای از چنین گزارشی در Google Analytics آورده شده است:

گزارشی مانند این زمان بارگذاری صفحه را برای کاربران جدید و بازگشتی نیز به شما می دهد.

خلاصه

این راهنما نحوه اندازه‌گیری بار اول، جریان و بار تکراری را از طریق آزمایش‌های میدانی و آزمایشگاهی به شما نشان می‌دهد. مطمئن شوید که مراحل مختلف قیف را بر این اساس بهینه کنید تا کشف (بار اول)، درگیری (ناوبری و جریان) و درگیری مجدد (بار تکرار) به حداکثر برسد.