Sử dụng các công cụ để đo lường hiệu suất

Sam Dutton

Có một số mục tiêu cốt lõi để xây dựng một trang web hiệu quả, linh hoạt với chi phí dữ liệu thấp.

Bạn cần có một quy trình kiểm tra cho mỗi mục tiêu.

Có nhiều công cụ và kỹ thuật để kiểm tra trang web:

• Công cụ hệ thống
• Công cụ tích hợp sẵn trong trình duyệt
• Tiện ích trên trình duyệt
• Ứng dụng kiểm thử trực tuyến
• Công cụ mô phỏng
• Số liệu phân tích
• Chỉ số do máy chủ và hệ thống kinh doanh cung cấp
• Ghi màn hình và quay video
• Bài kiểm tra thủ công

Dưới đây, bạn sẽ tìm hiểu phương pháp phù hợp với từng loại quy trình kiểm tra.

Ghi lại các yêu cầu về tài nguyên: số lượng, kích thước, loại và thời gian

Bạn nên bắt đầu kiểm tra trang bằng các công cụ mạng của trình duyệt khi kiểm tra một trang web. Nếu bạn không biết cách thực hiện, hãy tham khảo Hướng dẫn bắt đầu về bảng điều khiển mạng trong Công cụ của Chrome cho nhà phát triển. Các công cụ tương tự cũng có sẵn cho Firefox, Safari, Internet Explorer và Edge.

Hãy nhớ ghi lại kết quả trước khi bạn thực hiện thay đổi. Đối với các yêu cầu mạng, bạn có thể lưu dưới dạng ảnh chụp màn hình. Bạn cũng có thể lưu dữ liệu hồ sơ dưới dạng tệp JSON. Bạn có thể xem thêm thông tin bên dưới về cách lưu và chia sẻ kết quả kiểm thử.

Trước khi bắt đầu kiểm tra mức sử dụng mạng, hãy nhớ tắt bộ nhớ đệm của trình duyệt để đảm bảo bạn nhận được số liệu thống kê chính xác về hiệu suất tải lần đầu. Nếu bạn đã lưu vào bộ nhớ đệm thông qua worker dịch vụ, hãy xoá bộ nhớ API bộ nhớ đệm. Bạn nên sử dụng cửa sổ Ẩn danh (Riêng tư) để không phải lo lắng về việc tắt bộ nhớ đệm trình duyệt hoặc xoá các mục đã lưu vào bộ nhớ đệm trước đó.

Sau đây là một số tính năng và chỉ số cốt lõi mà bạn nên kiểm tra bằng các công cụ trình duyệt:

• Hiệu suất tải: Lighthouse cung cấp bản tóm tắt về các chỉ số tải. Addy Osmani đã viết một bản tóm tắt tuyệt vời về các khoảnh khắc quan trọng của người dùng khi tải trang.
• Sự kiện tiến trình để tải và phân tích cú pháp tài nguyên cũng như mức sử dụng bộ nhớ. Nếu bạn muốn tìm hiểu sâu hơn, hãy chạy trình phân tích tài nguyên bộ nhớ và JavaScript.
• Tổng trọng lượng trang và số lượng tệp.
• Số lượng và trọng số của tệp JavaScript.
• Mọi tệp JavaScript riêng lẻ đặc biệt lớn (ví dụ: trên 100 KB).
• JavaScript không dùng đến. Bạn có thể kiểm tra bằng công cụ đo lường mức độ sử dụng của Chrome.
• Tổng số lượng và trọng lượng của các tệp hình ảnh.
• Mọi tệp hình ảnh riêng lẻ đặc biệt lớn.
• Định dạng hình ảnh: có tệp PNG nào có thể là tệp JPEG hoặc SVG không? WebP có được dùng với các phương án dự phòng không?
• Liệu có sử dụng các kỹ thuật hình ảnh thích ứng (chẳng hạn như srcset) hay không.
• Kích thước tệp HTML.
• Tổng số lượng và trọng số của các tệp CSS.
• CSS không dùng đến. (Trong Chrome, hãy sử dụng bảng điều khiển phạm vi.)
• Kiểm tra việc sử dụng các thành phần khác có vấn đề hay không, chẳng hạn như Phông chữ web (bao gồm cả phông chữ biểu tượng).
• Kiểm tra tiến trình của Công cụ cho nhà phát triển để xem có điều gì chặn việc tải trang không.

Nếu bạn đang làm việc trên Wi-Fi tốc độ cao hoặc kết nối di động tốc độ cao, hãy kiểm thử bằng mô phỏng độ trễ cao và băng thông thấp. Hãy nhớ kiểm thử trên thiết bị di động cũng như máy tính — một số trang web sử dụng tính năng phát hiện UA để phân phối các thành phần và bố cục khác nhau cho các thiết bị khác nhau. Bạn có thể cần kiểm thử trên phần cứng thực tế bằng cách sử dụng tính năng gỡ lỗi từ xa, chứ không chỉ bằng tính năng mô phỏng thiết bị.

Kiểm tra bộ nhớ và mức sử dụng CPU

Trước khi thực hiện thay đổi, hãy ghi lại mức sử dụng bộ nhớ và CPU.

Trong Chrome, bạn có thể truy cập vào Trình quản lý tác vụ từ trình đơn Window (Cửa sổ). Đây là một cách đơn giản để kiểm tra các yêu cầu của trang web.

Kiểm thử hiệu suất tải đầu tiên và các lần tải tiếp theo

Lighthouse, WebPagetest và PageSpeed Insights rất hữu ích để phân tích tốc độ, chi phí dữ liệu và mức sử dụng tài nguyên. WebPagetest cũng sẽ kiểm tra việc lưu nội dung tĩnh vào bộ nhớ đệm, thời gian tải byte đầu tiên và liệu trang web của bạn có sử dụng hiệu quả CDN hay không.

Lưu kết quả

• WebPagetest: mỗi kết quả kiểm tra đều có URL riêng.
• PageSpeed Insights: công cụ PageSpeed Insights trực tuyến hiện bao gồm dữ liệu báo cáo Trải nghiệm người dùng của Chrome, làm nổi bật số liệu thống kê về hiệu suất trong thực tế.
• Lighthouse: lưu báo cáo từ bảng điều khiển Kiểm tra trong Công cụ của Chrome cho nhà phát triển bằng cách nhấp vào nút tải xuống:

  

Kiểm thử các yêu cầu cốt lõi của Ứng dụng web tiến bộ

Lighthouse giúp bạn kiểm tra tính bảo mật, chức năng, khả năng hỗ trợ tiếp cận, hiệu suất và hiệu suất của công cụ tìm kiếm. Cụ thể, Lighthouse kiểm tra xem trang web của bạn có triển khai thành công các tính năng PWA như worker dịch vụ và tệp kê khai Ứng dụng web hay không.

Lighthouse cũng kiểm tra xem trang web của bạn có thể cung cấp trải nghiệm chấp nhận được khi không có mạng hay không.

Bạn có thể tải báo cáo Lighthouse xuống dưới dạng JSON hoặc nếu đang sử dụng Tiện ích Lighthouse cho Chrome, hãy chia sẻ báo cáo dưới dạng Gist trên GitHub: nhấp vào nút chia sẻ, chọn Mở trong trình xem, sau đó nhấp lại vào nút chia sẻ trong cửa sổ mới rồi chọn Lưu dưới dạng Gist.

Sử dụng số liệu phân tích, tính năng theo dõi sự kiện và các chỉ số kinh doanh để theo dõi hiệu suất trong thực tế

Nếu có thể, hãy ghi lại dữ liệu phân tích trước khi bạn triển khai các thay đổi: tỷ lệ thoát, thời gian trên trang, trang thoát: bất kỳ dữ liệu nào liên quan đến yêu cầu kinh doanh của bạn.

Nếu có thể, hãy ghi lại các chỉ số kinh doanh và kỹ thuật có thể bị ảnh hưởng để bạn có thể so sánh kết quả sau khi thực hiện các thay đổi. Ví dụ: một trang web thương mại điện tử có thể theo dõi số đơn đặt hàng mỗi phút hoặc ghi lại số liệu thống kê cho kiểm thử độ bền và kiểm thử tải. Chi phí lưu trữ phụ trợ, yêu cầu về CPU, chi phí phân phát và khả năng phục hồi có thể cải thiện nếu bạn giảm trọng lượng trang và các yêu cầu về tài nguyên.

Nếu bạn chưa triển khai số liệu phân tích, thì đây chính là thời điểm thích hợp! Chỉ số và số liệu phân tích kinh doanh là yếu tố quyết định cuối cùng về việc trang web của bạn có hoạt động hay không. Nếu thích hợp, hãy kết hợp tính năng theo dõi sự kiện cho các hành động của người dùng, chẳng hạn như lượt nhấp vào nút và lượt phát video. Bạn cũng nên triển khai tính năng phân tích luồng mục tiêu: các đường dẫn mà người dùng điều hướng đến "lượt chuyển đổi".

Bạn có thể theo dõi Tốc độ trang web của Google Analytics để kiểm tra mức độ tương quan giữa các chỉ số hiệu suất với các chỉ số kinh doanh. Ví dụ: "trang chủ tải nhanh như thế nào?" so với "lượt truy cập qua trang chủ có dẫn đến giao dịch bán hàng không?"

Google Analytics sử dụng dữ liệu từ Navigation Timing API.

Bạn có thể muốn ghi lại dữ liệu bằng một trong các API hiệu suất JavaScript hoặc chỉ số của riêng bạn, ví dụ:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

Bạn cũng có thể sử dụng ReportingObserver để kiểm tra các cảnh báo về việc ngừng sử dụng và can thiệp của trình duyệt. Đây là một trong nhiều API để nhận kết quả đo lường trực tiếp trong thực tế từ người dùng thực tế.

Trải nghiệm thực tế: ghi màn hình và video

Quay video quá trình tải trang trên thiết bị di động và máy tính. Cách này hoạt động hiệu quả hơn nữa ở tốc độ khung hình cao và nếu bạn thêm màn hình hẹn giờ.

Bạn cũng nên lưu video ghi lại chuyển động trên màn hình. Có nhiều ứng dụng quay video màn hình cho Android, iOS và các nền tảng máy tính (cũng như các tập lệnh để thực hiện việc tương tự).

Tính năng ghi lại video tải trang hoạt động giống như chế độ xem băng phim trong WebPagetest hoặc Chụp ảnh màn hình trong Công cụ của Chrome cho nhà phát triển. Bạn sẽ nhận được bản ghi thực tế về tốc độ tải thành phần trang: thành phần nào nhanh và thành phần nào chậm. Lưu bản ghi video và bản ghi màn hình để so sánh với các bản cải tiến sau này.

Hình ảnh so sánh trước và sau cạnh nhau có thể là một cách hiệu quả để minh hoạ những điểm cải tiến!

Còn gì nữa không?

Xem Điểm về tình trạng tăng kích thước trang web (nếu có liên quan). Đây là một bài kiểm thử thú vị, nhưng cũng có thể là một cách thuyết phục để minh hoạ tình trạng mã tăng kích thước — hoặc để cho thấy bạn đã cải thiện.

Phần Chi phí của trang web của tôi là bao nhiêu? ở bên dưới cung cấp hướng dẫn sơ bộ về chi phí tài chính để tải trang web của bạn ở các khu vực khác nhau.

Có nhiều công cụ trực tuyến và độc lập khác: hãy xem perf.rocks/tools.