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 có một quy trình kiểm tra.
| Mục tiêu | Tại sao? | Cần kiểm thử những gì? |
|---|---|---|
| Đả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ạnh mẽ | Tầm quan trọng của HTTPS | HTTPS được triển khai cho tất cả các trang/tuyến và thành phần của trang web. |
| Cải thiện hiệu suất tải | 53% người dùng rời khỏi 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 trì hoãn. Đặt mục tiêu cho 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 quy mô trang | • Giảm chi phí dữ liệu cho người dùng có gói dữ liệu 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 sử dụng 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 dịch vụ phân phát | Đặt ngân sách cho quy mô trang: ví dụ: lần tải đầu tiên 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 có kích thước quá lớn. Tìm hình ảnh có thể tải chậm và kiểm tra mã không dùng đến bằng công cụ mức độ sử dụng. |
| Giảm yêu cầu tài nguyên | • Giảm 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 ở 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 chậm). |
| Tối ưu hóa 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ụ của Chrome để so sánh mức sử dụng bộ nhớ của trang web của bạn với các trang web khác 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à 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ông cụ 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 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 tra trực tuyến
- Công cụ mô phỏng
- Analytics
- Các 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 cách tiếp cận phù hợp cho từng loại quy trình kiểm tra.
Ghi lại các yêu cầu tài nguyên: Số lượng, kích thước, loại và thời gian
Khi kiểm tra một trang web, bạn nên bắt đầu bằng việc kiểm tra các trang bằng công cụ mạng của trình duyệt. Nếu bạn không chắc chắn về cách thực hiện, hãy xem Hướng dẫn bắt đầu sử dụng bảng điều khiển mạng của Chrome DevTools. Các công cụ tương tự cũng có sẵn cho Firefox, Safari, Internet Explorer và Edge.
Hãy nhớ lưu 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ể chỉ cần chụp ảnh màn hình hoặc lưu dữ liệu hồ sơ dưới dạng tệp JSON. Dưới đây là thông tin chi tiết về cách lưu và chia sẻ kết quả kiểm tra.
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 một trình chạy dịch vụ, hãy xoá bộ nhớ 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 tắt bộ nhớ đệm của 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 cốt lõi và chỉ số mà bạn nên kiểm tra bằng các công cụ của trình duyệt:
- Hiệu suất tải: Lighthouse cung cấp thông tin 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 trên dòng thời gian để 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 phân tích bộ nhớ và JavaScript.
- Tổng quy mô 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ẻ nào có kích thước đặ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ách sử dụng công cụ mức độ phù hợp của Chrome.
- Tổng số lượng và dung lượng của các tệp hình ảnh.
- Bất kỳ tệp hình ảnh riêng lẻ nào có kích thước đặc biệt lớn.
- Định dạng hình ảnh: có PNG nào có thể là JPEG hoặc SVG không? WebP có được dùng với 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 tệp CSS.
- CSS không dùng đến. (Trong Chrome, hãy sử dụng bảng điều khiển mức độ sử dụng.)
- 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 cả phông chữ biểu tượng) hay không.
- Kiểm tra dòng thời gian của Công cụ cho nhà phát triển để xem có nội dung nào chặn quá trình tải trang hay không.
Nếu bạn đang làm việc với kết nối Wi-Fi nhanh hoặc kết nối di động nhanh, hãy thử nghiệm bằng mô phỏng băng thông thấp và độ trễ cao. Hãy nhớ kiểm tra 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 mức sử dụng bộ nhớ và 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ụ trong trình đơn Cửa sổ. Đây là cách đơn giản để kiểm tra các yêu cầu của một trang web.
Kiểm tra hiệu suất tải lần đầu và các lần tiếp theo
Lighthouse, WebPagetest và Pagespeed Insights là những công cụ 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 phản hồi byte đầu tiên và liệu trang web của bạn có sử dụng CDN 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 hiện đã có dữ liệu của 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ủa Chrome DevTools 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 sẽ kiểm tra xem trang web của bạn có triển khai thành công các tính năng của PWA như trình chạy 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 trên Chrome, bạn có thể 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 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à chỉ số kinh doanh để theo dõi hiệu suất thực tế
Nếu có thể, hãy lưu giữ bản ghi 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 cứ điều gì 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 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 hoạt động kiểm thử độ bền và kiểm thử áp lực. 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ể sẽ được cải thiện nếu bạn giảm quy mô trang và số lượng yêu cầu tài nguyên.
Nếu bạn chưa triển khai số liệu phân tích, thì bây giờ là lúc để làm việc đó! Các chỉ số và số liệu phân tích về doanh nghiệp là yếu tố quyết định cuối cùng cho việc trang web của bạn có hoạt động hiệu quả 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 phân tích luồng mục tiêu: các đường dẫn mà người dùng của bạn di chuyển đến "lượt chuyển đổi".
Bạn có thể theo dõi báo cáo 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à chỉ số kinh doanh. Ví dụ: "trang chủ tải nhanh như thế nào?" so với "việc 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ừ API Thời gian điều hướng.
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 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 thực tế, trực tiếp từ người dùng thực tế.
Trải nghiệm thực tế: Ghi màn hình và quay video
Quay video về quá trình tải trang trên thiết bị di động và máy tính. Cách này 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 có thể lưu bản ghi màn hình. Có nhiều ứng dụng ghi lại bản ghi màn hình cho Android, iOS và nền tảng máy tính (và các tập lệnh để thực hiện việc tương tự).
Tính năng tải trang quay video hoạt động tương tự 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ẽ 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 những điểm cải tiến sau này.
Việc so sánh song song trước và sau khi cải thiện có thể là một cách hiệu quả để minh hoạ những điểm cải thiện!
Còn gì nữa không?
Nếu có liên quan, hãy lấy Điểm số về mức độ cồng kềnh của trang web. Đây là một thử nghiệm thú vị, nhưng cũng có thể là một cách hấp dẫn để minh hoạ mã phình to hoặc cho thấy bạn đã cải thiện.
What Does My Site Cost? (Trang web của tôi tốn bao nhiêu chi phí?), được trình bày dưới đây, đưa ra 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.
Nhiều công cụ trực tuyến và độc lập khác cũng có sẵn: hãy xem perf.rocks/tools.