Cách mà tôi kiểm tra tốc độ website

Mình đoán hầu hết mọi người đều sử dụng Lighthouse hay Google PageSpeed Insights để đánh giá tốc độ hiệu suất của website.

Nhìn xanh xanh là khoái rồi đúng không. Nhưng khoan, dừng quảng chừng là 5 giây. Liệu chỉ số mà Lighthouse đưa ra có thực sự chính xác.

Ở trang web trên mặc dù có điểm số 100 tuyệt đối nhưng nó chỉ là một trang web không có bất kỳ nội dung hay hình ảnh gì cả ngoại trừ 1 dòng text duy nhất. Vậy tại sao mọi người lại dựa vào điểm số đó để đánh giá rằng nó ảnh hưởng đến SEO.

Ví dụ tiếp theo mà mình đo được cho ra kết quả của 2 website FPTShop và Lazada. Bạn cho rằng web số 1 hay 2 là tốt hơn.

Web bên trái FPTShop mặc dù điểm hiệu suất lên tới 97 điểm, nhưng Core Vitals lại "Failed". Còn Lazada chỉ có 33 điểm mà lại "Passed" mới hay.

Tóm lại, theo ý kiến của mình thì điểm hiệu suất thấp chưa chắc website đã chậm. Nhưng điểm Core Vitals mà "Failed" thì chắc chắn website đang gặp vấn đề.

Từ khi Google cập nhật chỉ số Core Vitals thì cách kiểm tra tốc độ website cũng thay đổi luôn. Mình không chắc cách đo của mình là chuẩn xác 100% nhưng theo cảm nhận cá nhân thì nó cho ra kết quả khá tương đối.

Bước 1: Tải tiện ích Core Vitals

Thay vì chờ đợi lượng traffic đủ lớn thì mới xuất hiện thông số trên PageSpeed Insights. Chúng ta có thể sử dụng một vài tiện ích trên kho ứng dụng Chrome để kiểm tra điểm Core Vitals một cách chủ động.

Hiện tại mình đang sử dụng 2 tiện ích này

• Web Vitals
• Core Web Vitals Visualizer

Một lưu ý nhỏ: hãy bật tùy chọn cho 2 tiện ích này hoạt động ở "chế độ ẩn danh".

Bước 2: Sử dụng công cụ Developer tools (F12)

Developer tools là một công cụ khá mạnh mẽ được tích hợp trong trình duyệt Chrome. Tại đây bạn có thể kiểm tra trực tiếp Lighthouse mà không cần phải lên web PageSpeed Insights.

Ngoài ra bạn có thể thay đổi kích thước màn hình cho giống với thiết bị thực tế. Hay thay đổi thông số băng thông mạng. Áp dụng 2 điều vừa nêu, mình sẽ tùy chỉnh cho 2 thiết bị Mobile và Desktop cho giống như một con bot mà PageSpeed Insights đang sử dụng.

Tùy chỉnh 2 kích thước màn hình cho Mobile và Desktop

Tại giao diện Developer tools bạn bấm vào icon Toggle device toolbar hoặc nhấn phím tắt Ctrl+Shift+M để mở thanh công cụ tùy chỉnh kích thước màn hình thiết bị.

Bấm vào thanh Dimensions → Edit

Tìm đến và tích vào ô Moto G Power để thiết lập cho màn hình Mobile.

Bấm vào nút Add custom device → điền tên thiết bị Desktop → điền kích thước màn hình theo tỷ lệ 1350x940 → mục User agent string chọn Desktop → sau đó bấm Save.

Tùy chỉnh tốc độ mạng cho Mobile và Desktop

Cũng trên giao diện Developer tools bạn bấm vào mục Network ở thanh trên cùng → bấm vào No throttling → Add → Add custom profile...

MOBILE download: 1638 kbit/s, Upload: 1638 kbit/s, Latency: 150ms

DESKTOP download: 10240 kbit/s, Upload: 10240 kbit/s, Latency: 40ms

Tới bước này sẽ có bạn thắc mắc những thông số kích thước, tốc độ mạng mình lấy đâu ra. Thì mình xin trả lời là từ chính công cụ PageSpeed Insights nhé. Nó nằm ở đây:

Tương lai chắc chắn những thông số này sẽ thay đổi, vì thế bạn cần cập nhật theo Google để cho ra kết quả chính xác nhất.

Bước 3: Kiểm tra thông số

Để mang lại kết quả chuẩn nhất thì mình sẽ chia ra 2 trường hợp Mobile và Desktop. Dựa vào những thông số đã được thiết lập ở trên chúng ta sẽ tùy chọn đồng bộ theo từng loại thiết bị riêng biệt.

1. Mở tab ẩn danh để kiểm tra website như một người dùng thực.
2. Chọn kích thước màn hình Mobile + network cũng của Mobile luôn. Thiết lập tương tự cho trường hợp Desktop.
3. Sau khi thiết lập xong, bạn có thể truy cập trang web để biết thực tế website của bạn load như thế nào.
4. Nếu như tiện ích đã cài ở bước 1 hiện màu xanh thì web của bạn đã đạt yêu cầu rồi đấy.

Ngoài ra, bạn cũng cần kiểm tra thời gian load của DOMContentLoaded và Load ở phía dưới cùng. Mình chưa rõ thông số này bao nhiêu là đạt. Mình thì hay lấy mốc 3 giây làm chuẩn, tuy nhiên nếu website có chứa hình ảnh lớn hay bố cục phức tạp chắc chắn sẽ mất nhiều thời gian hơn, miễn sao đừng quá lâu là được.

Vậy PageSpeed Insights bây giờ bỏ luôn à? Không nhé, mặc dù nó không đo được tốc độ load website nhưng nó có thể cho bạn biết website đang gặp lỗi ở đâu. Kết hợp cả PageSpeed Insights và Core Vitals giúp bạn khắc phục vấn đề tốc độ load mà không ảnh hưởng đến trải nghiệm người dùng.