Kiểm tra hiệu suất

Sam Dutton

Tại sao và điều gì?

Có thể bạn đã nghe nói về tất cả những điều tốt đẹp mà các kỹ thuật Ứng dụng web tiến bộ có thể mang lại cho trang web của bạn. Bạn có thể muốn bắt tay ngay vào việc thêm các tính năng PWA. Bạn có thể làm như vậy, nhưng tốt hơn hết là bạn nên "chuẩn bị sẵn sàng cho PWA" trước.

Không có phép thuật nào của PWA có thể khắc phục các vấn đề như chặn JavaScript hoặc hình ảnh bị đầy bộ nhớ. 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 tình trạng của trang web? Bước đầu tiên là kiểm tra trang web: một bài đánh giá khách quan về những điểm hoạt động hiệu quả và những điểm (cũng như cách) có thể cải thiện.

Việc kiểm tra trang web hoặc ứng dụng sẽ giúp bạn xây dựng trải nghiệm linh hoạt, hiệu quả và làm nổi bật những điểm cải tiến nhanh chóng có thể được triển khai mà không cần phê duyệt nhiều. Quy trình kiểm tra cũng cung cấp cho bạn một đường cơ sở để phát triển dựa trên dữ liệu. Việc thay đổi có giúp cải thiện tình hình không? Trang web của bạn có gì khác so với trang web của đố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ể để khoe khoang sau khi cải thiện.

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

Chạy Lighthouse trên trang chủ và lưu dữ liệu báo cáo. Bạn sẽ nhận được một đường 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à khả năng tối ưu hoá cho công cụ tìm kiếm (SEO).

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

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

  • Bảng điều khiển Bảo mật trong Chrome DevTools: Mức sử dụng HTTPS.
  • Bảng điều khiển mạng trong 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ụ của 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 so với các ứng dụng khác, thì bạn có thể cần khắc phục sự cố rò rỉ bộ nhớ, chạy tác vụ hoặc tải tài nguyên. Hãy nhớ kiểm thử 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, lưu vào bộ nhớ đệm, thời gian tải 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 của 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 trang web tương tự và ước tính cơ hội doanh thu tiềm năng khi cải thiện tốc độ trang web.

Hãy nhớ kiểm tra trang web của bạn dưới góc nhìn của người dùng lần đầu tiên truy cập. Mở trang web bằng Cửa sổ ẩn danh (Riêng tư) hoặc sử dụng các công cụ của 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 có được thông tin chính xác về hiệu suất tải lần đầu.

Không gì có thể đánh bại việc kiểm thử trong thực tế – hãy thử trang web của bạn bằng chính thiết bị và kết nối mà người dùng sử dụng, đồng thời ghi lại trải nghiệm chủ quan của bạn.

Nếu bạn thấy danh sách công cụ này quá phức tạp…

Hãy xem hướng dẫn của chúng tôi: Cách suy nghĩ về các công cụ tốc độ.

Nếu không, bạn chỉ cần sử dụng Lighthouse để kiểm tra:

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

Mức độ ưu tiên của việc tái cấu trúc phụ 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? Họ sử dụng ứng dụng đó vì lý do gì và như thế nào? Ngân sách hiệu suất của bạn là gì? 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ử các bài tập thu thập yêu cầu trong tài nguyên đào tạo về PWA: Đối tượng, nội dung của bạn và Thiết kế cho tất cả người dùng.

Ai là bên liên quan và họ ưu tiên điều 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, hãy kiểm tra số liệu phân tích trang để biết những điểm cần tập trung. Tỷ lệ thoát cao, thời gian trên trang thấp và các trang thoát không mong muốn có thể là chỉ báo hữu ích về nơi bắt đầu. Tương tự như các chỉ số kinh doanh như chi phí lưu trữ, lượt nhấp vào quảng cáo và lượt chuyển đổi. Nhận thông tin tổng quan từ các bên liên quan về dữ liệu quan trọng đối với họ.

Kiểm thử, ghi lại, khắc phục, lặp lại

Ghi lại trạng thái của 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 việc cải thiện hoặc hồi quy. Nhờ đó, bạn có dữ liệu để biện minh và khen thưởng nỗ lực phát triển.

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

Phản hồi