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

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.

Đối với mỗi mục tiêu, bạn cần kiểm tra.

Mục tiêu Tại sao? Nội dung cần kiểm thử?
Đảm bảo quyền riêng tư, tính bảo mật và tính toàn vẹn của dữ liệu, đồng thời cho phép sử dụng API hiệu quả Tại sao HTTPS lại quan trọng HTTPS được triển khai cho tất cả các trang/lộ trình và thành phần của trang web.
Cải thiện hiệu suất tải 53% người dùng bỏ qua các trang web tải lâu hơn 3 giây JavaScript và CSS có thể được tải không đồng bộ hoặc bị trì hoãn. Đặt mục tiêu về thời gian tương tác và kích thước tải trọng: ví dụ: TTI trên 3G. Đặt ngân sách hiệu suất.
Giảm kích thước trang • Giảm chi phí dữ liệu cho người dùng có gói dữ liệu có giới hạn • Giảm yêu cầu về bộ nhớ của ứng dụng web — đặc biệt quan trọng đối với người dùng trên thiết bị có thông số kỹ thuật thấp • Giảm chi phí lưu trữ và phân phát • Cải thiện hiệu suất, độ tin cậy và khả năng phục hồi của việc phân phát Đặt ngân sách trọng lượng trang: ví dụ: tải lần đầu dưới 400 kB. Kiểm tra xem có JavaScript nặng không. Kiểm tra kích thước tệp để tìm hình ảnh, nội dung nghe nhìn, HTML, CSS và JavaScript bị phồng to. Tìm những hình ảnh có thể tải lười và kiểm tra mã không dùng đến bằng công cụ đo lường mức độ sử dụng mã.
Giảm số lượng yêu cầu về tài nguyên • Giảm các vấn đề về độ trễ • Giảm chi phí phân phát • Cải thiện hiệu suất, độ tin cậy và khả năng phục hồi của hoạt động phân phát Tìm các yêu cầu quá mức hoặc không cần thiết đối với bất kỳ loại tài nguyên nào. Ví dụ: các tệp được tải nhiều lần, JavaScript được tải trong nhiều phiên bản, CSS không bao giờ được sử dụng, hình ảnh chưa bao giờ được xem (hoặc có thể tải từng phần).
Tối ưu hoá việc sử dụng bộ nhớ Bộ nhớ có thể trở thành nút thắt cổ chai mới, đặc biệt là trên thiết bị di động Sử dụng Trình quản lý tác vụ Chrome để so sánh trang web của bạn với các trang web khác về mức sử dụng bộ nhớ khi tải trang chủ và sử dụng các tính năng khác của trang web.
Giảm tải CPU Thiết bị di động có CPU hạn chế, đặc biệt là các thiết bị có thông số kỹ thuật thấp Kiểm tra xem có JavaScript nặng không. Tìm JavaScript và CSS không dùng đến bằng các công cụ đo lường mức độ sử dụng. Kiểm tra kích thước DOM quá lớn và các tập lệnh không cần thiết chạy trong lần tải đầu tiên. Tìm JavaScript được tải trong nhiều phiên bản hoặc các thư viện có thể tránh được bằng cách tái cấu trúc nhỏ.

Có rất 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 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 ExplorerEdge.

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, có thể đơn giản như ả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 dưới đây về cách lưu và chia sẻ kết quả thử nghiệm.

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. Có thể bạn muố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 của trình duyệt hoặc xoá các mục đã lưu 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.
  • Bất kỳ tệp JavaScript riêng lẻ đặc biệt lớn nào (hơn 100KB).
  • 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 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 phương thức 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 xem có vấn đề gì khi sử dụng các thành phần khác như Phông chữ web (bao gồm 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 để tìm những yếu tố chặn quá trình tải trang.

Nếu bạn đang làm việc trên Wi-Fi nhanh hoặc kết nối di động nhanh, hãy kiểm thử bằng băng thông thấp và mô phỏng độ trễ cao. 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 tải 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.

Trình quản lý tác vụ của Chrome cho biết mức sử dụng bộ nhớ và CPU cho bốn thẻ trình duyệt đang mở
Trình quản lý tác vụ của Chrome – hãy chú ý đến những ứng dụng ngốn nhiều bộ nhớ và CPU!

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

Lighthouse, WebPagetestPageSpeed 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ả

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 thử 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 ngoại tuyến chấp nhận được 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.

Ảnh chụp màn hình minh hoạ cách xuất báo cáo Lighthouse của Chrome dưới dạng một gist
Xuất báo cáo sang một bản tóm tắt từ Tiện ích Lighthouse cho Chrome — nhấp vào nút chia sẻ

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ê để kiểm tra mức độ căng thẳng và sức bền. Chi phí lưu trữ phụ trợ, các yêu cầu về CPU, chi phí phân phát và khả năng phục hồi có thể sẽ cải thiện nếu bạn cắt giảm trọng số trang và 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ố kinh doanh và số liệu phân tích 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 có thể triển khai tính năng phân tích luồng mục tiêu: lộ trình mà người dùng di chuyển đế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 đến mức nào?" so với 'mục nhập qua trang chủ có bán hàng không?'

Ảnh chụp màn hình cho thấy chỉ số Tốc độ trang web của Google Analytics

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 để lấy số liệu đ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

Tạo bản ghi video về 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ẽ có được một bản ghi trong thực tế về tốc độ tải thành phần trang: cái nào nhanh và cái 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 tuyệt vời để 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.

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

Ảnh chụp màn hình từ whatdoesmysitecost.com

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