Có thể bạn đã nghe nói về những lợi ích mà các kỹ thuật Ứng dụng web tiến bộ (PWA) có thể mang lại cho trang web của bạn. Bạn có thể cảm thấy muốn thêm các tính năng PWA mà không cải thiện nền tảng hiệu suất của trang web. Nhưng không có tính năng PWA nào có thể khắc phục các vấn đề về việc chặn JavaScript và hình ảnh có kích thước quá lớn.
Thay vào đó, bước đầu tiên bạn cần làm là thực hiện kiểm tra trang web, một quy trình đánh giá khách quan về những điểm hoạt động hiệu quả và những điểm cần cải thiện.
Việc kiểm tra trang web hoặc ứng dụng giúp bạn xây dựng một trải nghiệm có hiệu suất cao và khả năng phục hồi. Ngoài ra, hãy nêu bật những điểm cải thiện nhanh chóng có thể triển khai mà không cần nhiều quy trình phê duyệt. Một bản kiểm tra sẽ tạo ra cơ sở cho quá trình phát triển dựa trên dữ liệu. Có phải một thay đổi đã giúp 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 đố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.
Chỉ với 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 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 tiếp cận, tính bảo mật và SEO.
Chỉ với 30 phút
Lighthouse có lẽ vẫn là nơi tốt nhất để bắt đầu, nhưng nếu có thêm 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 của Công cụ dành cho nhà phát triển của Chrome: Mức sử dụng HTTPS.
- Bảng điều khiển Yêu cầu mạng của Công cụ cho nhà phát triển Chrome: 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 thường xuyên sử dụng CPU đáng kể hoặc nhiều bộ nhớ hơn các ứng dụng khác, thì bạn có thể cần phải khắc phục các vấn đề về rò rỉ bộ nhớ, tác vụ đang chạy hoặc tải tài nguyên.
- WebPagetest: lưu vào bộ nhớ đệm, thời gian cho 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 trong 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 trong thực tế.
Hãy nhớ kiểm thử trang web của bạn khi người dùng nhìn thấy trang web lần đầu tiên. Mở trang web ở 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 hình ảnh chính xác về hiệu suất tải lần đầu.
Không có gì hiệu quả hơn việc kiểm thử trong thực tế. Hãy nhớ kiểm thử trang web của bạn trên các thiết bị và với khả năng kết nối đại diện cho người dùng của bạn, đồng thời ghi lại trải nghiệm chủ quan của bạn.
Nếu bạn cảm thấy bối rối khi dùng các công cụ
Hãy xem hướng dẫn của chúng tôi: Cách suy nghĩ về các công cụ đo tốc độ.
Nếu không còn cách nào khác, hãy sử dụng Lighthouse để kiểm tra:
- HTTPS: mọi trang web đều phải phân phối tất cả các thành phầ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 đúng cách, sử dụng HTTP/2 và bao gồm các tiêu đề thích 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ể được di chuyển xuống cuối trang hoặc được chỉ định thuộc tính async hoặc defer.
- JavaScript và các thư viện có thể bị xoá.
- Mã không dùng đến, chẳng hạn như các thư viện CSS và JavaScript.
- Cơ hội giảm kích thước pixel của hình ảnh.
- Các thay đổi về định dạng tệp có thể cải thiện kích thước của hình ảnh, chẳng hạn như thay đổi tệp PNG thành tệp JPG.
Đối tượng, các bên liên quan, bối cảnh
Mức độ ưu tiên cho 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? Vì sao và bằng cách nào họ sử dụng tính năng này? Ngân sách hiệu suất của bạn là bao nhiêu?
Các bên liên quan của bạn là ai và họ ưu tiên điều gì? Điều này ảnh hưởng đến cách bạn cấu trúc, 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 kiểm tra số liệu phân tích trang để biết bạn 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à một chỉ báo tốt về nơi cầ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ề những 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 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 bắt đầu cho các điểm cải thiện hoặc hồi quy. Điều này giúp bạn có dữ liệu để biện minh và khen thưởng nỗ lực phát triển.
Thử nghiệm nhiều loại trang trong trang web của bạn. Đối với các ứng dụng một trang, hãy kiểm thử các thành phần, tuyến đường và luồng trải nghiệm người dùng, thay vì chỉ kiểm thử trải nghiệm tải lần đầu.