Làm sao để chủ động đánh giá các tiêu chí và nâng cao chất lượng website trên Google? Công cụ Google Lighthouse có thể giúp giải quyết toàn bộ vấn đề này. Đây là một công cụ mã nguồn mở, tự động của Google được thiết kế để giúp bạn đo lường, đánh giá và đưa ra lời khuyên tốt nhất cho bạn về cách cải thiện trang web của mình. Bạn chưa rõ Google Lighthouse là gì thì đừng bỏ qua những thông tin sau khi sử dụng công cụ này.
Trong bài viết này, DK Tech sẽ giúp bạn tìm hiểu trọn bộ công cụ đo lường chất lượng website của Google Lighthouse là gì và hướng dẫn chi tiết cài đặt, sử dụng công cụ nhanh chóng, dễ dàng chỉ trong vài bước.
Mục Lục
Google Lighthouse là gì?
Lighthouse là công cụ mã nguồn mở tự động của Google để phân tích, đo lường và cải thiện chất lượng trang web. Công cụ này có thể được sử dụng với tất cả các loại trang web, từ trang web công cộng đến trang web yêu cầu xác thực.
Lighthouse giúp bạn có cái nhìn toàn diện về các tiêu chuẩn mà web của bạn cần để hoạt động hiệu quả.
Hiệu suất, khả năng truy cập, ứng dụng web tiến bộ, tính năng SEO,…
Lighthouse được cho là công cụ toàn diện nhất của Google hiện nay giúp người dùng xếp hạng website một cách chính xác nhất. Cùng với các tùy chọn phân tích mở rộng, công cụ này cũng cung cấp các mẹo hữu ích để cải thiện chất lượng trang web của bạn.
Cách sử dụng Google Lighthouse
Sau khi hiểu rõ Google Lighthouse là gì, chúng ta cần biết cách sử dụng. Có ba cách để sử dụng Google Lighthouse:
- Chạy Lighthouse với Chrome DevTools
- Cài đặt và chạy các công cụ dòng lệnh Node
- Chạy Ngọn hải đăng với tiện ích mở rộng của Chrome
Hướng dẫn cài đặt chi tiết cho cả ba phương pháp được cung cấp dưới đây.
Chạy Lighthouse trong Chrome DevTools
Bảng kiểm tra Chrome DevTools hiện được cấp phép để áp dụng Google Lighthouse cho trang web của bạn. Để nhận báo cáo phân tích trang web, bạn cần làm theo các bước sau:
Bước 1: Sử dụng trình duyệt Google Chrome, truy cập trang web bạn muốn kiểm tra.
Bước 2: Nhấn F12 hoặc nhấn Ctrl-Shift-I để mở các công cụ dành cho nhà phát triển. Sau đó chọn tab Kiểm tra.
Bước 3: Nhấp vào Run Audit devtools để xem danh sách các hạng mục kiểm tra.
Bước 4: Kiểm tra các mục bạn muốn phân tích (tất cả các mục được khuyến nghị cho báo cáo đầy đủ).
Bước 5: Nhấp vào nút Chạy Kiểm tra. Đợi 60-90 giây và Lighthouse sẽ tự động hiển thị kết quả phân tích trang.
Cài đặt và chạy Lighthouse trong Node Command line tool
Bạn cần đặt Node module theo các bước sau:
Bước 1: Download Google Chrome for Desktop.
Bước 2: Cài đặt phiên bản Long-Term Support mới nhất của Node.
Bước 3: Cài đặt Lighthouse.-g flag (Global Module) bằng lệnh:
npm install -g lighthouse.
Bước 4: Tạo một audit bằng lệnh:
npm install -g lighthouse.
Bước 5: Hiển thị tùy chọn audit:
lighthouse –help.
Chạy Lighthouse bằng Chrome Extension
Bạn có thể sử dụng Lighthouse bằng cách cài đặt tiện ích mở rộng của Chrome. Đây là cách nó được thực hiện:
Bước 1: Truy cập Chrome Webstore và tìm kiếm Lighthouse Chrome Extension -> Add to Chrome để cài đặt tiện ích mở rộng Lighthouse cho Google Chrome.
Bước 2: Truy cập trang web bạn muốn kiểm toán.
Bước 3: Nhấp vào biểu tượng Ngọn hải đăng của tiện ích mở rộng ở góc bên phải của thanh địa chỉ Chrome. Nếu bạn không thấy tiện ích này, hãy mở trình đơn Chrome, nhấp vào Ngọn hải đăng và bật tiện ích mở rộng.
Bước 4: Nhấp vào Tạo báo cáo. Lighthouse chạy thử nghiệm trên trang web của bạn và báo cáo kết quả.
Lưu ý rằng việc sử dụng Lighthouse với Chrome DevTools cung cấp chức năng tương tự như tiện ích mở rộng của Chrome nhưng vẫn là phương pháp nhanh nhất và hiệu quả nhất vì nó không yêu cầu cài đặt. Nếu không thể sử dụng Chrome DevTools, bạn nên chọn tiện ích mở rộng của Chrome.
Xem thêm: Dịch Vụ Thiết Kế Website Chuẩn SEO
Cách chia sẻ và xem báo cáo Google Lighthouse trực tuyến
Xem và chia sẻ báo cáo phân tích trang web trực tuyến bằng Lighthouse Viewer. Việc phân bổ cụ thể như sau.
Chia sẻ báo cáo bằng JSON
Lighthouse Viewer yêu cầu đầu ra JSON để chia sẻ báo cáo phân tích trang web. Dưới đây là các bước để nhận đầu ra JSON, tùy thuộc vào quy trình làm việc của Lighthouse mà bạn đang sử dụng:
Nếu bạn đang sử dụng Lighthouse với Chrome DevTools, chỉ cần nhấp vào nút Tải xuống báo cáo để tải xuống và chia sẻ báo cáo của bạn.
Nếu đang sử dụng Lighthouse trên dòng lệnh, bạn sẽ cần chạy lệnh sau:
lighthouse –output json –output-path <path/for/output.json>
Nếu đang sử dụng tiện ích mở rộng Lighthouse, bạn cần nhấp vào nút Export -> Save as JSON sau khi nhận được báo cáo.
Để xem dữ liệu phân tích của bạn, chỉ cần mở Lighthouse Viewer trong Google Chrome, kéo tệp JSON của bạn vào trang trình xem và xem báo cáo của bạn. Ngoài ra, bạn có thể nhấp vào bất kỳ đâu trên trang. Một cửa sổ mới sẽ xuất hiện và bạn sẽ phải chọn một tệp JSON để xem.
Chia sẻ báo cáo dưới dạng GitHub Gists
Nếu không muốn xem báo cáo của mình trong tệp JSON, bạn có thể chia sẻ phân tích trang web của mình dưới dạng GitHub Gist bí mật.
Để xuất báo cáo dưới dạng Gist từ tiện ích mở rộng của Chrome, bạn cần thực hiện như sau:
Bước 1: Khi bạn nhận được báo cáo, hãy nhấp vào Export -> Open In Viewer. Báo cáo sẽ mở trong trình xem tại đường link:
https://googlechrom.github.io/lighthouse/viewer/.
Bước 2:Trong Viewer, nhấp vào nút Share. Tại thời điểm này, bạn sẽ thấy một cửa sổ yêu cầu quyền truy cập dữ liệu GitHub của bạn để xem và lưu ý chính. Để xuất tệp báo cáo phân tích ý chính từ phiên bản Lighthouse CLI, bạn phải tạo tệp ý chính theo cách thủ công bằng cách sao chép và dán dữ liệu từ tệp đầu ra JSON vào ý chính. Lưu ý rằng tên tệp báo cáo chính phải ở định dạng .lighthouse.report.json.
Để xem báo cáo phân tích trang web được lưu dưới dạng Gist, cần thêm ?gist=<ID> vào URL của Viewer. Trong đó, <ID> chính là ID của Gist. Như vậy, URL lúc này sẽ có dạng: https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
Các tiêu chuẩn Audit của Google Lighthouse là gì?
Lighthouse cho phép bạn dễ dàng kiểm tra (audit) các trang web được phát triển trên localhost hoặc private server. Bao gồm:
Google Lighthouse – Performance là gì?
Hiệu suất phụ thuộc vào nhiều yếu tố, cả phụ trợ và giao diện người dùng. Để được Lighthouse xếp hạng, bạn cần:
Tối ưu hóa hình ảnh, nén css/js, tăng tốc trang web của bạn với tính năng lazy loading,…
Tuy nhiên, cải thiện trải nghiệm người dùng vẫn là điều tối quan trọng. Khi bạn phải hy sinh các yếu tố giúp cải thiện trải nghiệm (ví dụ: chất lượng hình ảnh) không cần đạt điểm performance cao. 75 điểm là một đánh giá chấp nhận được cho lớp hiệu suất này.
Google Lighthouse – Progressive Web App là gì?
Việc Google bổ sung tính năng này cho Lighthouse là một dự đoán sớm rằng Progressive Web Apps sẽ trở thành một tiêu chuẩn bắt buộc trong tương lai. Tuy nhiên, nếu bạn không có nguồn lực và thời gian ngay bây giờ, bạn không cần tập trung phát triển danh mục này. Tuy nhiên, có một số điều bạn nhất thiết phải làm, chẳng hạn như:
- Sử dụng HTTPS
- Chuyển hướng traffic HTTP qua HTTPS
- Nội dung được gói gọn trực quan
- Có một thẻ <meta name=”viewport”> Bạn có thể thay đổi chiều rộng và tỷ lệ
- Trả lại toàn bộ nội dung về lỗi Javascript
Google Lighthouse – Accessibility là gì?
Tính năng này trong Lighthouse cho biết trang web của bạn có được tối ưu hóa cho khả năng truy cập hay không. Có lẽ website còn một vài điều cần cải thiện như:
Văn bản quá nhỏ, đối tượng có độ tương phản thấp,… Bạn phải đạt 100 điểm trong phần này.
Google Lighthouse – Best Practices là gì?
Best Practices yêu cầu một số tiêu chuẩn trang web bắt buộc. Điểm tuyệt đối 100 là mục tiêu bạn phải đạt được trong phần này.
Google Lighthouse – Đánh giá SEO là gì?
Ở phần này bạn nên thực hiện đầy đủ các yếu tố để tối ưu hóa tính năng SEO cho website như: Sử dụng mô tả meta, chèn từ khóa vào tiêu đề bài viết, đơn giản hóa mã, sử dụng liên kết bên ngoài và bên trong,…
Các tính năng mới nhất của Google Lighthouse 3.0 là gì?
Lighthouse 3.0 là phiên bản mới nhất hiện được cung cấp bởi Google. Nó cung cấp thử nghiệm, phân tích nhanh hơn, ít lỗi hơn và nhiều tính năng thử nghiệm mới. Các tính năng mới đáng chú ý trong Google Lighthouse là gì?
- Thử nghiệm nhanh hơn, kết quả chính xác hơn với ít lỗi/biến thể hơn.
- Giao diện người dùng mới, đơn giản và thuận tiện hơn.
- Phiên bản Node của Lighthouse 3.0 tương thích với các tùy chọn cấu hình giống như phiên bản CLI.
- Kết quả báo cáo có thể được xuất sang tệp CSV.
- Audit mới: First Contentful Paint (báo cáo thời gian người dùng nhìn thấy phản hồi đầu tiên từ trang web), robots.txt không hợp lệ và thay thế tệp GIF bằng video có nội dung động.
Lighthouse là một công cụ rất quan trọng trong việc tạo, thiết kế và tối ưu hóa trang web. Do đó, để trang web của bạn có kết quả tốt hơn trong các tìm kiếm của Google, bạn cần hiểu cách sử dụng công cụ này. Chúng tôi hy vọng chia sẻ này sẽ giúp cải thiện hiệu suất của trang web. Bạn cũng nên liên hệ với nhà cung cấp dịch vụ lưu trữ và thiết kế trang web để họ có thể cung cấp cho bạn sự hỗ trợ tốt nhất có thể.
