Google Lighthouse – Top 1 Công cụ hỗ trợ các Web Developers

Thiết kế Website là một công việc đòi hỏi nhiều quy trình xử lý phức tạp do những chuyên gia và nhà phát triển Website cài đặt. Vì thế để hỗ trợ các Web Developers, Google đã tạo ra một công cụ giúp tự động đo lường chất lượng của Website được gọi là Lighthouse.

Vậy quy trình hoạt động của Lighthouse diễn ra như thế nào? Hãy cùng tìm hiểu trong bài viết dưới đây nhé !

Google Lighthouse là gì ?

Theo Wikipedia, Google Lighthouse là một công cụ tự động, open-sources để đo lường chất lượng của các Wesbite. Nó có thể được chạy trên bất kỳ Website nào, công khai hoặc yêu cầu xác thực. Các chức năng bao gồm: kiểm tra hiệu suất, khả năng truy cập và tối ưu hóa công cụ tìm kiếm của các Website.

Nó cũng bao gồm khả năng kiểm tra các ứng dụng web tiến bộ để tuân thủ các tiêu chuẩn và thực tiễn nhằm mục đích trợ giúp các nhà phát triển web.

Các cách để sử dụng Google Lighthouse

Chọn quy trình làm việc 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 của bạn ở định dạng thân thiện với người dùng.
• Từ Command Line. Tự động hóa việc chạy Lighthouse của bạn thông qua các tập lệnh shell.
• Sử dụng như một Node Module. Tích hợp Lighthouse vào hệ thống tích hợp liên tục của bạn.
• Từ giao diện UI của Website. Chạy Lighthouse và liên kết đến các báo cáo mà không cần cài đặt bất kỳ thứ gì.

Các bước vận hành trong Chrome DevTools

Các quyền kiểm soát và sử dụng Lighthouse thông qua Audit panel của Chrome DevTools, các bước để kiểm tra bao gồm:

• Download Google Chrome for Desktop.
• Trong Google Chrome, hãy truy cập URL bạn muốn kiểm tra. Bạn có thể kiểm tra bất kỳ URL nào trên web.
• Mở Chrome DevTools.
• Nhấp vào Audit tab.

• Nhấp vào Perform an Audit. DevTools hiển thị cho bạn danh sách các danh mục kiểm tra. Để tất cả chúng được bật.
• Nhấp vào Run Audit. Sau 30 đến 60 giây, ứng dụng sẽ cung cấp cho bạn một báo cáo trên trang.

Để cài đặt Node Module:

• Download Google Chrome for Desktop.
• Cài đặt phiên bản Hỗ trợ dài hạn hiện tại của Node .
• Cài đặt Lighthouse. Các cờ -g cài đặt nó như là một module toàn cầu.

npm install -g lighthouse

 

Để chạy kiểm tra:

lighthoust <url>

 

lighthouse --help

Cách vận hành dưới dạng Chrome Extension

Lưu ý: Trừ khi bạn có lý do cụ thể, bạn nên sử dụng quy trình làm việc của Chrome DevTools hơn là quy trình làm việc của Chrome Extension. Quy trình làm việc của DevTools cho phép kiểm tra các trang cục bộ và các trang được xác thực, trong khi Extension thì không.

Để cài đặt tiện ích mở rộng:

• Download Google Chrome for Desktop.
• Cài đặt Lighthouse Chrome Extension từ Cửa hàng Chrome trực tuyến.

Để chạy kiểm tra:

Trong Chrome, truy cập trang bạn muốn kiểm tra.

Nhấp vào Lighthouse .Nó sẽ nằm bên cạnh thanh địa chỉ Chrome. Nếu không, hãy mở menu chính của Chrome và truy cập nó ở đầu menu. Sau khi nhấp, menu Lighthouse sẽ mở rộng.

• Nhấp vào Tạo báo cáo. Lighthouse thực hiện kiểm tra đối với trang hiện đang được chú trọng, sau đó mở ra một tab mới với báo cáo kết quả.

Cách để xem và chia sẻ báo cáo của Lighthouse

Chia sẻ báo cáo dưới dạng JSON

Lighthouse Viewer cần đầu ra JSON của báo cáo. Danh sách bên dưới giải thích cách nhận đầu ra JSON, tùy thuộc vào quy trình làm việc mà bạn đang sử dụng:

• Chrome DevTools. Click vào Download Report .
• Command line. Chạy mã: lighthouse --output json --output-path <path/for/output.json>

 

• Lighthouse Viewer. Click vào Export > Save as JSON.

Các bước để xem dữ liệu báo cáo:

• Mở ứng dụng 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 để mở trình điều hướng tệp của bạn và chọn tệp.

Chia sẻ báo cáo dưới dạng GitHub Gists

Nếu không muốn chuyển các tệp JSON theo cách thủ công, 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à kiểm soát phiên bản miễn phí.

Để xuất báo cáo dưới dạng Gist từ báo cáo:

• (Nếu đã có Viewer hãy bỏ qua bước này) Click Export > Open In Viewer. Báo cáo sẽ được mở trong Viewer, địa chỉ tại đây.
• Trong Viewer click vào Share ,Lần đầu tiên bạn làm điều này, một cửa sổ bật lên yêu cầu quyền truy cập dữ liệu GitHub cơ bản của bạn để đọc và ghi vào Gists của bạn.

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

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

• Thêm vào ?gist=<ID>URL của người xem, <ID>ID của Gist ở đâu.https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
• Mở Trình xem và dán URL của Gist vào đó.

ATPWeb mong rằng bài viết trên sẽ cung cấp nhiều thông tin bổ ích cho các doanh nghiệp và các Web Developers trong việc xây dựng một Website chất lượng và hoạt động hiệu quả hơn.

Nếu như bạn đang có nhu cầu thiết kế Website thì hãy liên hệ ngay với ATPWeb để đội ngũ nhân có chuyên môn tư vấn miễn phí và nhận nhiều ưu đãi hấp dẫn nhé !

 

• Hotline: 0707 6666 56
• Fanpage: http://facebook.com/atpweb.vn
• Website: http://atpweb.vn