Có một số mục tiêu chính của việc xây dựng một trang web hoạt động hiệu quả, bền bỉ với chi phí dữ liệu thấp.
Bạn cần kiểm tra mỗi mục tiêu.
| 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 một cách hiệu quả | Tại sao HTTPS lại quan trọng | HTTPS được triển khai cho tất cả các trang/tuyến và nội dung trên trang web. |
| Cải thiện hiệu suất tải | 53% người dùng bỏ qua những trang web mất hơn 3 giây để tải | 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 cho kích thước tải trọng và mức độ tương tác, ví dụ như TTI trên 3G. Đặt ngân sách hiệu suất. |
| Giảm quy mô trang | • Giảm chi phí dữ liệu đối với người dùng có gói dữ liệu bị giới hạn • Giảm yêu cầu lưu trữ 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ối • Cải thiện hiệu suất phân phối, độ tin cậy và khả năng phục hồi | Đặt ngân sách trọng lượng trang, ví dụ: lần tải đầu tiên dưới 400 kB. Kiểm tra JavaScript nặng. Kiểm tra kích thước tệp để tìm hình ảnh tăng lên, nội dung nghe nhìn, HTML, CSS và JavaScript. Tìm những hình ảnh có thể tải từng phần và kiểm tra để tìm mã không dùng đến bằng công cụ khám phá. |
| Giảm số lượng yêu cầu 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 phân phát, độ tin cậy và khả năng phục hồi | 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 không 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 điểm tắc nghẽn 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 JavaScript nặng. Hãy tìm JavaScript và CSS không dùng đến bằng công cụ theo dõi mức độ sử dụng. Kiểm tra kích thước DOM quá lớn và các tập lệnh chạy không cần thiết 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 ký kiểm tra 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 doanh nghiệp cung cấp
- Ghi màn hình và video
- Kiểm thử theo cách thủ công
Dưới đây là 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
Một nơi tốt để bắt đầu khi kiểm tra trang web là kiểm tra các trang bằng công cụ mạng của trình duyệt. Nếu bạn chưa nắm rõ cách thực hiện việc này, hãy xem qua Hướng dẫn bắt đầu sử dụng bảng điều khiển mạng Công cụ của Chrome cho nhà phát triển. Các công cụ tương tự có sẵn cho Firefox, Safari, Internet Explorer và Edge.
Hãy nhớ lưu giữ 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, việc này 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 bên dưới về cách lưu và chia sẻ kết quả xét 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 trong lần tải đầu tiên. Nếu bạn đã lưu vào bộ nhớ đệm thông qua một trình chạy dịch vụ, hãy xoá bộ nhớ của Cache API. 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 vô hiệu hoá bộ nhớ đệm của trình duyệt hoặc xoá các mục nhập đã lưu vào bộ nhớ đệm trước đó.
Dưới đây là một số tính năng và chỉ số cốt lõi mà bạn nên kiểm tra thông qua các công cụ trình duyệt:
- Hiệu suất tải: Lighthouse cung cấp một bản tóm tắt về 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 chính của người dùng trong quá trình tải trang.
- Các sự kiện về 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 quy trình phân tích 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 (ví dụ: 100KB).
- JavaScript không dùng đến. Bạn có thể kiểm tra bằng công cụ phạm vi cung cấp của Chrome.
- Tổng số lượng và trọng lượng của các tệp hình ảnh.
- Bất kỳ tệp hình ảnh riêng lẻ đặc biệt lớn nào.
- Định dạng hình ảnh: có PNG có thể là JPEG hoặc SVG không? WebP có được dùng với tính năng dự phòng không?
- Liệu có sử dụng 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 lượng của các tệp CSS.
- CSS không sử dụng. (Trong Chrome, hãy sử dụng bảng điều khiển mức độ sử dụng.)
- Kiểm tra việc sử dụng các thành phần khác có vấn đề, 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ông cụ cho nhà phát triển để tìm bất kỳ yếu tố nào chặn trang tải.
Nếu bạn đang làm việc từ Wi-Fi nhanh hoặc một kết nối di động nhanh, hãy kiểm thử bằng mô phỏng băng thông thấp và độ 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ân tích cú pháp UA để phân phối các thành phần và bố cục cho nhiều thiết bị. Có thể bạn 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 hoạt động mô phỏng thiết bị.
Kiểm tra bộ nhớ và tải CPU
Trước khi 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 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 trước tiên rồi đến tải tiếp theo
Lighthouse, WebPagetest và Pagespeed Insights rất hữu ích trong việc 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 cho byte đầu tiên và xem trang web của bạn có sử dụng CDNs một cách hiệu quả 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 nay bao gồm dữ liệu báo cáo Trải nghiệm người dùng trên Chrome nêu bật các số liệu thống kê về hiệu suất thực tế.
- Lighthouse: lưu báo cáo từ bảng điều khiển Kiểm tra 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 chính đối với Ứng dụng web tiến bộ
Lighthouse giúp bạn thử nghiệm độ bảo mật, chức năng, khả năng 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 hay không, chẳng hạn như trình chạy dịch vụ và tệp kê khai Ứng dụng web.
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 bạn đang sử dụng tiện ích Lighthouse của Chrome, hãy chia sẻ báo cáo dưới dạng GitHub Gist: 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 và 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à chỉ số kinh doanh để theo dõi hiệu suất 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ỳ điều gì có 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 để có thể so sánh kết quả sau khi thực hiện 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 số liệu thống kê ghi lại để kiểm tra mức độ căng thẳng và sức bền. 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 cải thiện nếu bạn cắt giảm trọng lượng trang và yêu cầu về tài nguyên.
Nếu bạn không triển khai Analytics, thì giờ là lúc 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ó đang 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 như lượt nhấp vào nút và lượt phát video. Bạn cũng có thể muốn triển khai phân tích luồng mục tiêu: các lộ trình mà người dùng di chuyển tới "lượt chuyển đổi".
Bạn có thể theo dõi Tốc độ trang web của Google Analytics để kiểm tra mối 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 "lượt truy cập qua trang chủ có dẫn đến lượt bán hàng không?"
Google Analytics sử dụng dữ liệu từ Navigation Timing API.
Bạn nê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 mình, 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 xem trình duyệt có ngừng sử dụng và cảnh báo can thiệp hay không. Đây là một trong nhiều API để lấy kết quả đo lường trực tiếp, trong thực tế từ người dùng thực.
Trải nghiệm thực tế: ghi màn hình và quay video
Quay video về lượt tải trang trên thiết bị di động và máy tính. Tính năng này hoạt động thậm chí còn hiệu quả hơn ở 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 các bản ghi màn hình. Có nhiều ứng dụng ghi màn hình dành cho nền tảng Android, iOS và máy tính (cùng với các tập lệnh để thực hiện điều tương tự).
Tải trang quay video hoạt động giống như chế độ xem cuộn 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 thông tin thực tế về tốc độ tải thành phần trang: cái nào nhanh và 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.
Việc so sánh song song trước và sau có thể là một cách hay để thể hiện sự cải thiện!
Còn gì nữa?
Nếu phù hợp, hãy nhận Điểm số trang web bị lỗi. Đây là một kiểm thử thú vị, nhưng cũng có thể là một cách hấp dẫn để chứng minh sự phình ra mã hoặc để cho thấy bạn đã cải thiện.
Chi phí trang web của tôi là gì? (hiển thị 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 ở nhiều khu vực.
Ngoài ra còn có nhiều công cụ độc lập và trực tuyến khác: tìm hiểu perf.rocks/tools.