Tìm hiểu và bắt đầu sử dụng Lighthouse

Dưới đây là danh sách Lighthouse là gì hot nhất hiện nay được bình chọn bởi người dùng

Lighthouse là một công cụ audits web mới của Google. Vậy công cụ hữu ích này có gì mới, giúp ích gì cho website của bạn? Bizfly Cloud chia sẻ về Google lighthouse audit trong bài viết sau đây.

Lighthouse là gì?

Lighthouse là một công cụ open-source tự động nhằm cải thiện chất lượng của các trang web. Bạn có thể áp dụng nó cho bất kỳ trang web nào, từ website công khai đến website yêu cầu xác thực. Công cụ audit google chrome này sẽ kiểm tra về hiệu suất, khả năng truy cập, các ứng dụng web… trên trang.

Bạn có thể chạy Lighthouse trong Chrome DevTools, từ command line hoặc dưới dạng Node module. Bạn cung cấp cho Lighthouse một URL, sau đó Lighthouse chạy một loạt các kiểm tra đối với trang, cuối cùng nó sẽ tạo ra một báo cáo về mức độ hoạt động của trang. Từ đó, bạn hãy sử dụng kết quả của bài kiểm tra, cải thiện các chỉ số chưa đạt để cải thiện trang.

Xem video dưới đây để tìm hiểu thêm về cách sử dụng của Lighthouse trong sự kiện Google I/O 2017: https://youtu.be/NoRYn6gOtVo

Bắt đầu sử dụng Google Lighthouse

Chọn cách chạy Lighthouse phù hợp nhất với bạn:

– Trong Chrome DevTools. Dễ dàng kiểm tra các trang yêu cầu xác thực và đọc báo cáo trong định dạng thân thiện với người dùng.

– Từ command line. Tự động chạy Lighthouse qua các shell scripts.

– Node module. Tích hợp Lighthouse vào hệ thống tích hợp liên tục của bạn (continuous integration systems).

Lưu ý: Mọi Lighthouse workflow yêu cầu bạn phải cài đặt Google Chrome trên máy của mình.

1. Chạy Lighthouse trong Chrome DevTools

Lighthouse hiện đang cấp quyền cho Audits panel của Chrome DevTools. Để chạy báo cáo bạn nhấn F12 hoặc Ctrl Shift I sau đó chọn tab Audits:

Click Perform an audit. DevTools hiển thị danh sách các audit categories. Chọn kích hoạt tất cả.

Click Run audit. Sau 60s đến 90s, Lighthouse sẽ hiển thị báo cáo cho trang.

Cài đặt và chạy Node command line tool

Các bước cài đặt Node module

Xem thêm: Hướng dẫn tạo file robots.txt cho WordPress – Hostinger

– Download Google Chrome for Desktop.

– Cài đặt phiên bản Long-Term Support hiện tại của Node.

– Cài đặt Lighthouse. -g flag tức là global module.

npm install -g lighthouse

Tiến hành một audit:

lighthouse <url>

– Hiển thị tùy chọn audit:

lighthouse -help

2. Chạy Lighthouse bằng Chrome Extension

Lưu ý: Trừ khi bạn có lý do cụ thể, nếu không bạn nên sử dụng Lighthouse trên Chrome DevTools thay vì Chrome Extension này. Làm việc trên DevTools cung cấp các tính năng giống như Extension, ngoài ra có điểm tối ưu hơn đó là không cần cài đặt.

Để cài đặt extension:

Xem thêm: Hướng dẫn tạo file robots.txt cho WordPress – Hostinger

– Download Google Chrome for Desktop.

– Cài đặt Lighthouse Chrome Extension từ the Chrome Webstore.

Để chạy audit:

Xem thêm: 60+ Lời chào bán hàng Online hay và ấn tượng, tăng tỷ lệ chốt đơn

– Trong Chrome, đi tới trang bạn muốn tiến hành audit.

Click Lighthouse nằm bên cạnh Chrome address bar. Nếu không thấy, hãy mở menu chính của Chrome và truy cập vào phần đầu tiên của menu. Sau click, Lighthouse menu sẽ mở rộng.

Click Generate report. Lighthouse chạy kiểm tra của nó đối với trang hiện tại, sau đó mở ra một tab mới với báo cáo kết quả.

Chia sẻ và xem báo cáo trực tuyến

Sử dụng Lighthouse Viewer để xem và chia sẻ báo cáo online.

Chia sẻ báo cáo bằng JSON

Lighthouse Viewer cần JSON output của báo cáo Lighthouse. Danh sách dưới đây hướng dẫn cách lấy JSON output, tùy thuộc vào Lighthouse workflow mà bạn đang sử dụng:

– Chrome DevTools. Click Download Report.

– Command line. Chạy lệnh sau:

lighthouse -output json -output-path <path/for/output.json>

– Chrome Extension. Click Export > Save as JSON.

Để xem dữ liệu báo cáo:

– Mở Lighthouse Viewer trong Google Chrome.

– Kéo tệp JSON vào Viewer hoặc nhấp vào bất kỳ đâu trên Viewer để navigator tệp và chọn tệp.

Chia sẻ báo cáo như GitHub Gists

Nếu bạn không muốn tự xem các tệp JSON, bạn cũng có thể chia sẻ báo cáo của mình dưới dạng GitHub Gists bí mật. Một lợi ích của Gists là free version control.

Xem thêm: Club house là gì? Giá trị clubhouse đối với các khu đô thị

Để xuất báo cáo dưới dạng Gist từ Chrome Extension version của Lighthouse Chrome:

– Click Export > Open In Viewer. Báo cáo mở ra trong Viewer, tại vị trí https://googlechrome.github.io/lighthouse/viewer/.

  1. Để xuất báo cáo dưới dạng Gist từ phiên bản CLI của Lighthouse, chỉ cần tạo Gist theo cách thủ công và sao chép-dán JSON output của báo cáo vào Gist. Tên tệp Gist chứa JSON output phải kết thúc bằng .lighthouse.report.json.

Để xem báo cáo được lưu dưới dạng Gist:

– Thêm ?gist=<ID> vào URL của Viewer, nơi <ID> là ID của Gist.

https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>

– Mở Viewer, và dán URL của Gist vào đó.

Các tiêu chuẩn audits của Lighthouse

– Performance

– Progressive Web App

– Accessibility

– Best Practices

– SEO

Tham khảo: developers.google.com/web/tools/lighthouse/

>> Có thể bạn quan tâm: Google PageSpeed Insights là gì? Tiêu chuẩn đánh giá website

Bản quyền nội dung thuộc Nhất Việt Edu

Bài viết liên quan

Cách tìm kiếm sản phẩm trên TikTok Shop Hot Trend
5 Cách tìm kiếm sản phẩm trên TikTok Shop Hot Trend 2023
Trí tuệ nhân tạo AI là gì? Ứng dụng như thế nào trong cuộc sống?
Trí tuệ nhân tạo AI là gì? Ứng dụng như thế nào trong cuộc sống?
So Sánh Các Loại Hình Công Ty Theo Luật Doanh Nghiệp 2020
So Sánh Các Loại Hình Công Ty Theo Luật Doanh Nghiệp 2020
Đại sứ truyền thông là gì và có ảnh hưởng như thế nào với doanh
Đại sứ truyền thông là gì và có ảnh hưởng như thế nào với doanh
Cloud Storage – Lưu trữ đám mây là gì? Tính năng và lợi ích khi sử
Cloud Storage – Lưu trữ đám mây là gì? Tính năng và lợi ích khi sử
Cấu Trúc và Cách Dùng từ Respond trong câu Tiếng Anh
Cấu Trúc và Cách Dùng từ Respond trong câu Tiếng Anh
App Momo Bảo Trì Đến Khi Nào, Thông Báo Bảo Trì Tính Năng
App Momo Bảo Trì Đến Khi Nào, Thông Báo Bảo Trì Tính Năng
Branding là gì? Tìm hiểu đầy đủ và chi tiết về Branding – Mona Media
Branding là gì? Tìm hiểu đầy đủ và chi tiết về Branding – Mona Media