Công cụ tất cả trong một để kiểm tra hiệu suất trang web của Google hiện tại là Lighthouse, một tiện ích tích hợp sẵn trong Google Chrome.

Kiểm tra hiệu suất trang web với Lighthouse

Công cụ Lighthouse

Để mở Lighthouse, bạn vào trang web cần kiểm tra rồi bấm phím F12 hoặc Ctrl + Shift + I hoặc vào Công cụ khác > Công cụ dành cho Nhà phát triển.

Sau đó, bạn qua tab Lighthouse rồi chọn Mobile hoặc Desktop tùy vào thiết bị bạn muốn kiểm tra, sau đó bấm nút Analyze page load.

Sau khoảng 30 giây, công cụ sẽ phân tích trang web của bạn và đưa ra các gợi ý tối ưu hiệu suất.

Các mục kiểm tra

Performance

Mục này kiểm tra hiệu suất tổng thể trang web, một số gợi ý cho mục này đạt điểm cao:

  • Sử dụng ảnh có định đạng Webp, ảnh có kích thước vừa phải, không quá lớn
  • Phải có thông số width và height cho ảnh
  • Nén CSS và JavaScript, không dùng quá nhiều thư viện không cần thiết
  • Sử dụng máy chủ có chất lượng tốt, kết nối ổn định

Accessibility

Mục này kiểm tra khả năng tiếp cận của trang web, ví dụ như độ tương phản màu sắc, kích thước của liên kết, nút, v.v… Một số gợi ý cho mục này đạt điểm cao:

  • Sử dụng màu sắc có độ tương phản cao, không dùng màu quá mờ
  • Các liên kết phải có mô tả
  • Kích thước chữ không quá nhỏ

Best Practices

Bạn có thể bỏ qua mục này.

SEO

Có nhiều cách để tối ưu SEO, các bạn có thể tham khảo các bài viết:

Trên đây là hướng dẫn kiểm tra hiệu suất trang web với Lighthouse. Chúc các bạn thành công!

5/5 (1 bình chọn)
Chia sẻ
Series: Thủ thuật Front-end