Kiểm tra hiệu suất

Sam Dutton

Vì sao và như thế nào?

Có thể bạn đã nghe nói về tất cả những lợi ích mà kỹ thuật Ứng dụng web tiến bộ mang lại cho trang web. Bạn có thể muốn truy cập ngay và thêm các tính năng của PWA. Điều đó là có thể, nhưng bạn sẽ có lợi hơn nhiều nếu trước tiên bạn có "sẵn sàng cho PWA".

Không có sự kỳ diệu nào của PWA có thể khắc phục các sự cố như chặn JavaScript hoặc hình ảnh bị phình to. PWA cần có một nền tảng vững chắc.

Vậy làm cách nào để kiểm tra trạng thái của trang web? Bước đầu tiên là kiểm tra trang web: đánh giá khách quan về những gì hoạt động tốt và những khía cạnh (và cách thức) có thể cải thiện.

Việc kiểm tra trang web hoặc ứng dụng của bạn sẽ giúp bạn xây dựng một trải nghiệm bền bỉ, hiệu quả — và làm nổi bật các chiến thắng nhanh chóng có thể triển khai mà không cần phải quá nhiều lần phê duyệt. Quá trình kiểm tra cũng cung cấp cho bạn cơ sở để phát triển theo hướng dữ liệu. Sự thay đổi có làm cho mọi thứ trở nên tốt hơn không? Trang web của bạn có gì khác biệt so với các đối thủ cạnh tranh? Bạn sẽ nhận được các chỉ số để ưu tiên nỗ lực và bằng chứng cụ thể để tự hào về sau khi bạn đã cải thiện.

Nếu bạn chỉ có 5 phút...

Chạy Lighthouse trên trang chủ của bạn và lưu dữ liệu báo cáo. Bạn sẽ nhận được thông tin cơ sở có định lượng và danh sách việc cần làm để cải thiện hiệu suất, khả năng hỗ trợ tiếp cận, tính bảo mật và SEO.

Nếu bạn chỉ có 30 phút...

Lighthouse có thể vẫn là nơi tốt nhất để bắt đầu, nhưng bạn cũng có thể ghi lại kết quả từ các công cụ khác sau nếu muốn dành thêm thời gian:

  • Bảng điều khiển bảo mật Công cụ của Chrome cho nhà phát triển: Sử dụng HTTPS.
  • Bảng điều khiển mạng Công cụ của Chrome cho nhà phát triển: thời gian tải; kích thước tài nguyên và số lượng yêu cầu đối với HTML, CSS, JavaScript, hình ảnh, phông chữ và các tệp khác.
  • Trình quản lý tác vụ Chrome: nếu trang web của bạn liên tục sử dụng nhiều CPU hoặc bộ nhớ hơn các ứng dụng khác, thì có thể bạn cần khắc phục sự cố rò rỉ bộ nhớ, các vấn đề khi chạy tác vụ hoặc tải tài nguyên. Hãy nhớ kiểm tra trang web của bạn trên các thiết bị đại diện cho người dùng của bạn.
  • WebPagetest: hiệu suất cho nhiều vị trí và loại kết nối, tính năng lưu vào bộ nhớ đệm, thời gian truyền byte đầu tiên, mức sử dụng CDN.
  • Pagespeed Insights: hiệu suất tải, chi phí dữ liệu và mức sử dụng tài nguyên, bao gồm cả dữ liệu báo cáo Trải nghiệm người dùng trên Chrome nêu bật số liệu thống kê về hiệu suất thực tế.
  • Thẻ điểm tốc độ và Công cụ tính tác động: so sánh tốc độ trang web với các ứng dụng ngang hàng và ước tính cơ hội tăng doanh thu tiềm năng nhờ cải thiện tốc độ trang web.

Hãy nhớ thử nghiệm trang web của bạn khi người dùng mới nhìn thấy trang web đó. Mở một Cửa sổ ẩn danh (Riêng tư) cho trang web hoặc sử dụng các công cụ trình duyệt để tắt tính năng lưu vào bộ nhớ đệm và xoá bộ nhớ. Điều này đảm bảo rằng mọi thành phần đều được truy xuất từ mạng chứ không phải từ bộ nhớ đệm cục bộ, nhờ đó, bạn sẽ nắm được chính xác hiệu suất của lượt tải đầu tiên.

Không gì sánh được với việc thử nghiệm trong thế giới thực – hãy dùng thử trang web của bạn trên cùng thiết bị và khả năng kết nối như người dùng, đồng thời lưu giữ bản ghi về trải nghiệm chủ quan của bạn.

Nếu bạn thấy một loạt các công cụ gây khó hiểu...

Hãy xem hướng dẫn của chúng tôi: Cách tìm hiểu các công cụ liên quan đến tốc độ.

Nếu không có vấn đề nào khác, bạn chỉ cần sử dụng Lighthouse để kiểm tra:

Đối tượng, các bên liên quan, bối cảnh

Các ưu tiên tái cấu trúc tuỳ thuộc vào đối tượng, nội dung và chức năng của bạn. Ai truy cập vào trang web của bạn? Lý do và cách họ sử dụng công cụ này? Ngân sách hiệu suất của bạn là bao nhiêu? Nếu bạn không chắc chắn về câu trả lời cho những câu hỏi này, hãy thử thu thập các bài tập từ tài nguyên đào tạo cho PWA của chúng tôi: Đối tượng, nội dung của bạn và Thiết kế cho tất cả người dùng.

Các bên liên quan của bạn là ai và họ ưu tiên những gì? Điều này sẽ ảnh hưởng đến cách bạn sắp xếp, trình bày và chia sẻ dữ liệu kiểm tra.

Nếu bạn không thể kiểm tra toàn bộ trang web của mình, hãy xem số liệu phân tích trang để biết nơi cần tập trung. Tỷ lệ thoát cao, thời gian trên trang thấp và trang thoát không mong muốn có thể là chỉ báo phù hợp về nơi nên bắt đầu. Tương tự như vậy, các chỉ số kinh doanh như chi phí lưu trữ, số lượt nhấp vào quảng cáo và số lượt chuyển đổi. Xem thông tin tổng quan của các bên liên quan về những dữ liệu quan trọng đối với họ.

Thử nghiệm, ghi lại, sửa lỗi, lặp lại

Ghi lại trạng thái trang web trước khi thực hiện bất kỳ thay đổi nào để phát hiện vấn đề và đặt điểm xuất phát cho những điểm cải tiến hoặc cải thiện. Điều đó cung cấp cho bạn dữ liệu để chứng minh và tưởng thưởng nỗ lực phát triển.

Hãy nhớ thử nghiệm nhiều loại trang trong trang web của bạn, chứ không chỉ mỗi trang chủ. Đối với các ứng dụng trang đơn, hãy kiểm thử nhiều thành phần, tuyến và luồng trải nghiệm người dùng, chứ không chỉ trải nghiệm tải đầu tiên.

Ý kiến phản hồi