![[Tên người]](https://web.dev/images/authors/samdutton.jpg?hl=vi)
Tại sao và như thế nào?
Có thể bạn đã nghe về tất cả những điều tốt mà kỹ thuật Ứng dụng web tiến bộ có thể mang lại cho trang web của mình. Bạn có thể muốn đi thẳng vào vấn đề và thêm các tính năng PWA. Điều đó có thể xảy ra, nhưng bạn sẽ tốt hơn nhiều nếu bạn "sẵn sàng cho PWA" trước.
Sẽ không có giải pháp PWA nào giúp khắc phục các sự cố như chặn JavaScript hoặc hình ảnh cồng kềnh. PWA cần một nền tảng vững chắc.
Vậy làm cách nào để bạn 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 nội dung hoạt động hiệu quả 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 sẽ giúp bạn xây dựng một trải nghiệm phục hồi và hiệu quả, đồng thời làm nổi bật những thành công nhanh chóng có thể triển khai mà chỉ cần đăng xuất ở mức tối thiểu. Quy 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. Một thay đổi có làm cho mọi thứ 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ẽ có chỉ số để ưu tiên nỗ lực, cũng như có 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ẽ có một 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 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 một chút thời gian:
- Bảng điều khiển bảo mật của Công cụ của Chrome cho nhà phát triển: Mức sử dụng HTTPS.
- Bảng điều khiển mạng của 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 cho 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 đáng kể CPU hoặc bộ nhớ hơn các ứng dụng khác thì có thể bạn cần phải khắc phục rò rỉ bộ nhớ, sự cố chạy tác vụ hoặc tải tài nguyên. Hãy nhớ thử nghiệm 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 bắt đầu 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, trong đó nêu bật các 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 kiếm doanh thu tiềm năng nhờ cải thiện tốc độ trang web.
Hãy nhớ kiểm thử trang web của bạn như một người dùng lần đầu nhìn thấy trang web. Mở trang web trong 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 sẽ có được thông tin chính xác về hiệu suất trong lần tải đầu tiên.
Không gì khác ngoài việc thử nghiệm trong thế giới thực — hãy 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 và ghi lại trải nghiệm chủ quan của bạn.
Nếu bạn thấy khó khăn khi sử dụng nhiều công cụ...
Hãy xem hướng dẫn của chúng tôi: Cách nghĩ về các công cụ tốc độ.
Nếu không có gì khác, chỉ cần sử dụng Lighthouse để kiểm tra:
- HTTPS: mọi trang web phải phân phối tất cả tài sản qua HTTPS.
- Chế độ cài đặt máy chủ: máy chủ web hoặc CDN của bạn phải sử dụng tính năng nén chính xác, sử dụng HTTP/2 và thêm tiêu đề phù hợp để cho phép trình duyệt lưu tài nguyên vào bộ nhớ đệm.
- Các phần tử tập lệnh có thể di chuyển xuống cuối trang và/hoặc được cung cấp thuộc tính không đồng bộ hoặc trì hoãn.
- JavaScript và các thư viện có thể bị xoá.
- CSS không dùng và JavaScript không dùng đến.
- Hình ảnh có thể được lưu với độ nén cao hơn hoặc kích thước pixel nhỏ hơn.
- Tệp hình ảnh có thể nhỏ hơn được lưu bằng định dạng khác, ví dụ: ảnh lưu dưới dạng PNG.
Đối tượng, bên liên quan, bối cảnh
Mức độ ưu tiên 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? Tại sao và họ sử dụng như thế nào? 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ử làm theo các yêu cầu thu thập thông tin từ tài nguyên đào tạo về 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à ưu tiên của họ là 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 của mình.
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 cần tập trung vào đâu. 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 tốt 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. 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 tra, ghi lại, sửa lỗi, lặp lại
Ghi lại trạng thái trang web của bạn 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 để cải thiện hoặc hồi quy. Điều đó cung cấp cho bạn dữ liệu để biện minh và đền đáp nỗ lực phát triển của bạn.
Hãy nhớ thử nghiệm 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ử các thành phần, tuyến và luồng trải nghiệm người dùng khác nhau, chứ không chỉ là trải nghiệm tải đầu tiên.