Từ A-Z về Google Lighthouse. Chi tiết cách audit website bằng Google Lighthouse

Google Lighthouse là một công cụ tự động, mã nguồn mở được Google phát triển để đo lường chất lượng của các trang web. Nó cung cấp một báo cáo chi tiết về hiệu suất, khả năng tiếp cận, các thực tiễn tốt nhất, SEO và khả năng trở thành ứng dụng web tiến bộ (PWA) của một trang web.

Tặng miễn phí bộ Plugin 359$ giúp khách hàng tối ưu SEO website

5 tiêu chuẩn audit của Google Lighthouse

Performance

Hiệu suất (performance) là yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng (UX) và thứ hạng SEO của website. Để đạt điểm cao, cần tối ưu hóa nhiều yếu tố như tối ưu hóa hình ảnh, thu nhỏ CSS/JS, tăng tốc website và sử dụng plugin nếu cần. Mức đánh giá chấp nhận được trên Google Lighthouse là 75 điểm, nhưng thay vì chỉ tập trung vào điểm số, cần hướng tới mục tiêu cải thiện hiệu suất thực tế và mang đến trải nghiệm mượt mà cho người dùng.

Accessibility

Tiêu chí Accessibility giúp đánh giá mức độ tối ưu hóa website cho nhiều đối tượng người dùng khác nhau. Lighthouse cung cấp các đánh giá cụ thể theo thang điểm, giúp xác định những yếu tố cần cải thiện để nâng cao khả năng truy cập cho tất cả mọi người. Các tiêu chí đánh giá bao gồm: button và liên kết, hình ảnh, tương phản màu sắc, cấu trúc tiêu đề.

Accessibility trong Google Lighthouse

Progressive Web App

Progressive Web App (PWA) là một tập hợp các kỹ thuật tiên tiến nhằm mang đến trải nghiệm vượt trội cho người dùng, tập trung vào việc tối ưu hóa trải nghiệm trên thiết bị di động, với nhiều tính năng hấp dẫn như hoạt động ngoại tuyến, nhận thông báo, và lưu trữ cục bộ. Lighthouse ban đầu được phát triển với mục tiêu đánh giá hiệu quả của PWA, và hiện tại đã phát triển mạnh mẽ với 5 hạng mục đánh giá chi tiết.

Best Practices

Lighthouse kiểm tra các khía cạnh bảo mật và tiêu chuẩn phát triển web hiện đại trong tiêu chí Best Practices, bao gồm: sử dụng HTTPS và HTTP/2, nguồn tài nguyên an toàn, lỗ hổng JavaScript, kết nối cơ sở dữ liệu an toàn, và sử dụng các lệnh và API an toàn.

Hiệu quả SEO

Lighthouse thực hiện nhiều bài kiểm tra khác nhau để đánh giá mức độ tối ưu hóa SEO của website hoặc ứng dụng. Tuy nhiên, các bài kiểm tra SEO trong Lighthouse được đánh giá là khá hạn chế và chỉ mang tính tham khảo. Để khai thác tối đa tiềm năng SEO, cần thực hiện các bước tối ưu hóa chuyên sâu hơn sau khi đã thực hiện các sửa lỗi theo gợi ý của Lighthouse.

Hiệu quả SEO do Lighthouse đánh giá

Hướng dẫn 3 cách sử dụng Google Lighthouse dễ dàng

Kích hoạt Lighthouse trong Chrome DevTools

• Bước 1: Truy cập vào website mà bạn cần kiểm tra trong trình duyệt Chrome.
• Bước 2: Mở Chrome DevTools bằng cách nhấn tổ hợp Ctrl + Shift + J hoặc F12 (đối với Windows) và Shift + Cmnd + I (đối với Mac). Hoặc nhấp chuột phải trên trang, sau đó chọn Inspect.
• Bước 3: Nhấp chọn dấu 2 mũi tên " >> " nằm trên thanh công cụ và chọn Lighthouse.
• Bước 4: Chọn thiết bị mà website hiển thị như Mobile (hiển thị trên điện thoại), hoặc Desktop (hiển thị trên máy tính).
• Bước 5: Lựa chọn tùy chọn các danh mục muốn Lighthouse phân tích (hiệu suất, SEO, khả năng truy cập…). Tiếp đó là lựa chọn Analyze page load để Lighthouse chạy các bài kiểm tra và hiển thị kết quả phân tích sau khoảng 30 – 60 giây.

Kích hoạt Lighthouse trong Chrome DevTools

Cài đặt và khởi chạy Google Lighthouse trong Node Command line tool

• Bước 1: Bạn mở cài đặt Google Chrome trên máy tính.
• Bước 2: Cài đặt phiên bản NodeJS mới nhất hỗ trợ Long-Term Support (LTS).
• Bước 3: Cài đặt Lighthouse bằng lệnh sau: npm install -g lighthouse
• Bước 4: Sử dụng lệnh bên cạnh để chạy kiểm tra tình trạng website: lighthouse <url>
• Bước 5: Để xem tất cả các tùy chọn audit, nhập lệnh như sau: lighthouse --help

Chạy Lighthouse thông qua Lighthouse Extension

Lưu ý: Nếu không vì nguyên do đặc biệt, người dùng nên chạy Lighthouse trong Chrome DevTools thay vì thông qua Lighthouse Extension. Bởi vì Chrome DevTools cho phép thử nghiệm các website nội bộ và đã được xác thực, trong khi đó Lighthouse Extension thì không thể.

• Bước 1: Truy cập Chrome Web Store và tìm kiếm Lighthouse Chrome Extension, sau đó nhấp Thêm vào Chrome để cài đặt tiện ích.
• Bước 2: Truy cập website bạn muốn kiểm tra.
• Bước 3: Bạn nhấp vào biểu tượng Lighthouse Extension ở góc trên bên phải của thanh địa chỉ Chrome. Khi mà biểu tượng này không hiển thị, nhấp chọn biểu tượng Tiện ích mở rộng nằm ngay bên phải thanh địa chỉ để kích hoạt extension này.
• Bước 4: Click chọn biểu tượng Cài đặt để chọn chỉ số và thiết bị mà bạn muốn Lighthouse phân tích. Tiếp đó hãy Generate report để chạy kiểm tra website đang hiển thị và nhận về kết quả sau vài phút.

Chạy Lighthouse thông qua Lighthouse Extension

Hướng dẫn cách chia sẻ và xem báo cáo trực tuyến Google Lighthouse

Sử dụng Lighthouse Viewer với file JSON

• Tạo file JSON: Lưu báo cáo từ Chrome DevTools hoặc Command line dưới dạng file JSON.
• Mở trong Lighthouse Viewer: Kéo thả file JSON vào Lighthouse Report Viewer hoặc chọn file từ máy tính.
• Chia sẻ: Sao chép link của báo cáo để chia sẻ với người khác.

Chia sẻ trên GitHub Gist

• Tạo Gist: Tạo một Gist mới trên GitHub và dán nội dung file JSON vào đó.
• Xem báo cáo: Dán link của Gist vào Lighthouse Report Viewer để xem.

Kết luận

Google Lighthouse là một công cụ vô cùng hữu ích cho các nhà phát triển web, giúp họ tạo ra những trang web chất lượng cao, đáp ứng được nhu cầu của người dùng và các tiêu chuẩn của công cụ tìm kiếm.

Tặng miễn phí bộ Plugin 359$ giúp khách hàng tối ưu SEO website

Bài liên quan

• So sánh chi tiết Wix và WordPress: Đâu là sự lựa chọn tốt nhất?
• Hướng dẫn cài đặt WordPress & những plugin thông dụng nhất
• Kinh nghiệm chống Spam WordPress hiệu quả cao cho người mới
• WordPress Multisite là gì? Hướng dẫn chi tiết cách cài đặt và thiết lập WordPress Multisite
• 7 thủ thuật cải thiện tốc độ website WordPress cho người mới
• Hướng dẫn test tốc độ website chi tiết và dễ thực hiện
• Litespeed là gì? Hướng dẫn tăng tốc website với Litespeed
• Check performance website là gì? Cách check nhanh nhất
• TTFB là gì? Hướng dẫn cải thiện TTFB cho website
• Một số công cụ Test Speed Website bạn không nên bỏ qua
• IP domain check là gì? Cách check nhanh IP của domain/website
• Xoá website
• Ping là gì? Ý nghĩa thông số Ping, cách kiểm tra tốc độ mạng