Bạn nên đo lường điều gì để cải thiện hiệu suất?

Các chiến lược đo lường hiệu suất ở từng giai đoạn trong phễu mua hàng.

Các bước khác nhau của phễu mua hàng dễ gặp vấn đề về hiệu suất theo những cách khác nhau, do đó cần có biện pháp đo lường và tối ưu hoá khác nhau:

Trong hướng dẫn này, chúng tôi sẽ trình bày cách đo lường các bước khác nhau. Để làm được điều này, bạn nên xem trong phòng thí nghiệm cũng như dữ liệu thực tế.

Dữ liệu của phòng thí nghiệm được thu thập bằng cách chạy các kiểm thử cục bộ, chẳng hạn như bằng cách sử dụng Lighthouse và các công cụ khác. Nhờ đó, bạn có thể so sánh hiệu suất của trang web theo thời gian với các đối thủ cạnh tranh thông qua một môi trường ổn định và có kiểm soát. Tuy nhiên, hiệu suất đó có thể không đại diện được cho trải nghiệm thực tế của người dùng.

Dữ liệu trường được thu thập thông qua số liệu phân tích của người dùng thực tế. Do đó, dữ liệu này thể hiện trải nghiệm của người dùng. Tuy nhiên, không dễ dàng được so sánh theo thời gian hoặc với các đối thủ cạnh tranh. Kết nối mạng và phần cứng điện thoại thông minh phát triển theo thời gian và các đối tượng mục tiêu khác nhau có thể có các thiết bị khác nhau, do đó khiến việc so sánh với dữ liệu trường trở nên khó khăn. Xem thêm bài viết Đo lường hiệu suất tại hiện trường.

Cần có cả hai nguồn dữ liệu để có được cái nhìn toàn diện. Các phần sau đây cho biết cách thu thập dữ liệu thực tế và dữ liệu trong phòng thí nghiệm cho các dấu hiệu hiệu suất có liên quan trên phễu.

Chiến dịch Khám phá

Tối ưu hoá cho hoạt động khám phá có nghĩa là tối ưu hoá cho lượt tải đầu tiên (là những gì người dùng mới sẽ nhận được), đồng thời cũng là trình thu thập dữ liệu của Google Tìm kiếm và mạng xã hội. Bạn có thể dễ dàng thu thập dữ liệu phòng thí nghiệm cho lần tải đầu tiên thông qua Lighthouse, trong khi dữ liệu trường (ít nhất là dành cho Chrome) có sẵn thông qua báo cáo về trải nghiệm người dùng trên Chrome. Bạn có thể kết hợp cả hai phương pháp này trong PageSpeed Insights. Bạn cũng nên tự theo dõi các chỉ số có liên quan từ trường: Việc đo lường những chỉ số này trên thiết bị của người dùng thực sẽ đem lại thông tin tổng quan tốt.

Từ góc độ người dùng, các chỉ số quan trọng nhất là:

• Thời gian hiển thị nội dung đầu tiên (FCP): Thời gian người dùng nhìn vào một màn hình trống. Đây là khi hầu hết người dùng thoát trang vì họ không thấy tiến trình.
• Hình ảnh có ý nghĩa đầu tiên (FMP): Khi người dùng bắt đầu thấy nội dung chính mà họ tìm kiếm. Đây thường là hình ảnh chính, nhưng đối với một trang đích, đó thậm chí có thể là một lời kêu gọi hành động, chẳng hạn như nút Mua, vì có thể người dùng đã có ý định rõ ràng (ví dụ: thông qua chiến dịch quảng cáo được nhắm mục tiêu).
• Thời gian phản hồi lần tương tác đầu tiên (FID): Thời gian trang web cần phản hồi với nội dung mà người dùng nhập đầu tiên. Việc sử dụng quá nhiều JavaScript và các vấn đề khác về việc tải tài sản có thể chặn tình trạng này, dẫn đến các lượt nhấn hoặc lượt nhấp không thành công, dữ liệu nhập sai và trang bị bỏ qua.

Có nhiều chỉ số khác mà bạn có thể xem xét, nhưng đây là những chỉ số cơ sở tốt. Ngoài ra, hãy nhớ nắm bắt tỷ lệ thoát, số lượt chuyển đổi và mức độ tương tác của người dùng để có thể thiết lập mối liên hệ giữa các chỉ số này.

Lượt tương tác và lượt chuyển đổi

Sau lượt tải đầu tiên của trang đích, người dùng sẽ tiếp tục truy cập trang web của bạn, hy vọng là chuyển đổi thành công.

Trong giai đoạn này, điều quan trọng là phải có các thao tác điều hướng và tương tác nhanh chóng và thích ứng. Tuy nhiên, việc đo lường toàn bộ các sự kiện tương tác và điều hướng trong trường này không phải là đơn giản, vì mỗi người dùng đều có các đường dẫn khác nhau qua trang. Do đó, bạn nên đo lường thời gian cần thiết cho mục tiêu lượt chuyển đổi hoặc lượt chuyển đổi ("Thời gian hành động") bằng cách viết tập lệnh và đo lường luồng trong một thử nghiệm trong phòng thí nghiệm, để so sánh hiệu suất theo thời gian hoặc với các đối thủ cạnh tranh.

Có hai cách thuận tiện để làm việc này:

WebPageTest

WebPageTest cung cấp giải pháp viết tập lệnh rất linh hoạt. Ý tưởng cơ bản là:

• Yêu cầu WebPageTest di chuyển qua các trang của luồng bằng lệnh navigate.
• Nếu cần, hãy nhấp vào các nút bằng lệnh clickAndWait và điền vào các trường văn bản qua setValue. Để kiểm thử Ứng dụng trang đơn, hãy sử dụng các lệnh clickAndWait thay vì các lệnh navigate cho tất cả các bước sau bước đầu tiên, vì navigate sẽ tải toàn bộ thay vì tải trang ảo nhẹ.
• Hãy nhớ kết hợp các bước khác nhau của quy trình trong bản phân tích thông qua combineSteps để tạo một báo cáo kết quả tổng thể duy nhất cho quy trình hoàn chỉnh.

Một tập lệnh như vậy có thể có dạng như sau:

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

Khi có sẵn một tập lệnh như thế này, bạn có thể dễ dàng đo lường và so sánh hiệu suất theo thời gian. Việc này thậm chí có thể được tự động hoá thông qua API WebPageTest.

Con rối

Một lựa chọn tuyệt vời khác để kiểm thử tập lệnh là thông qua Chrome không có giao diện người dùng. Bạn có thể kiểm soát Chrome thông qua Node API Puppeteer. Ý tưởng chung là khởi động trình duyệt thông qua Puppeteer, điều hướng đến trang đích thông qua hàm goto, chèn JavaScript để điền vào các trường hoặc nhấp vào nút và tiếp tục qua phễu thông qua các lệnh gọi goto (nếu cần).

Là một chỉ số, bạn có thể đo trực tiếp thời lượng của luồng, nhưng cũng có thể tính tổng các giá trị FCP, FMP hoặc TTI của các lượt tải riêng lẻ trong luồng. Bài viết Kiểm tra hiệu suất của trang web bằng Puppeteer cung cấp thông tin tổng quan về cách nhận chỉ số hiệu suất thông qua Puppeteer. Tập lệnh Nút mẫu rất đơn giản có thể có dạng như sau:

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

Tập lệnh này có thể dễ dàng được tự động hoá và thậm chí được đưa vào quy trình xây dựng hoặc ngân sách hiệu suất, đồng thời được theo dõi thường xuyên.

Tương tác lại

Người dùng sẽ quay lại trang web của bạn trong những khoảng thời gian khác nhau. Tuỳ thuộc vào thời gian đã trôi qua, trình duyệt có thể có ít tài nguyên của trang web được lưu vào bộ nhớ đệm hơn, cần nhiều yêu cầu mạng hơn. Điều này gây khó khăn cho việc ước tính sự khác biệt về hiệu suất giữa các lượt truy cập lặp lại trong các thử nghiệm trong phòng thí nghiệm. Tuy nhiên, bạn vẫn nên theo dõi vấn đề này. Một công cụ kiểm tra trong phòng thí nghiệm tuyệt vời dành cho các lượt truy cập lặp lại là WebPageTest. Công cụ này có một tuỳ chọn dành riêng cho lượt truy cập lặp lại trực tiếp:

Để nắm rõ hơn về hiệu suất truy cập nhiều lần trong trường này, hãy sử dụng gói phân tích mà bạn chọn để phân đoạn các chỉ số hiệu suất theo kiểu người dùng. Dưới đây là ví dụ về một báo cáo như vậy trong Google Analytics:

Một báo cáo như thế này cũng sẽ cho bạn biết thời gian tải trang đối với người dùng mới và người dùng cũ.

Recap

Hướng dẫn này chỉ cho bạn cách đo lường lượt tải đầu tiên, luồng và tải lặp lại thông qua thử nghiệm thực địa và thử nghiệm trong phòng thí nghiệm. Nhớ tối ưu hoá các bước khác nhau của phễu cho phù hợp để tăng tối đa khả năng khám phá (lượt tải đầu tiên), mức độ tương tác (thao tác và luồng) và tương tác lại (tải lặp lại).