Tổng quan

Lighthouse là công cụ nguồn mở, tự động giúp nâng cao chất lượng trang web. Bạn có thể chạy mã trên bất kỳ trang web nào, ở chế độ công khai hoặc có yêu cầu xác thực. Công cụ này cung cấp các bài kiểm tra hiệu suất, khả năng tiếp cận, ứng dụng web tiến bộ, SEO, v.v.

Bạn có thể chạy Lighthouse trong Công cụ của Chrome cho nhà phát triển, từ dòng lệnh hoặc dưới dạng mô-đun Nút. Bạn cung cấp cho Lighthouse một URL để kiểm tra, công cụ này chạy một loạt quy trình kiểm tra trên trang, sau đó tạo báo cáo về hiệu quả hoạt động của trang. Từ đó, hãy sử dụng các bài kiểm tra không đạt làm chỉ báo về cách cải thiện trang. Mỗi lượt kiểm tra có một tài liệu tham khảo giải thích lý do tại sao quá trình kiểm tra lại quan trọng, cũng như cách khắc phục vấn đề đó.

Bạn cũng có thể sử dụng Lighthouse CI để ngăn chặn sự hồi quy trên trang web của mình.

Hãy xem video dưới đây tại Google I/O để tìm hiểu thêm về cách sử dụng và đóng góp cho Lighthouse.

Bắt đầu

Chọn quy trình làm việc của Lighthouse phù hợp với bạn nhất:

• Trong Công cụ của Chrome cho nhà phát triển. Dễ dàng kiểm tra những 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ừ dòng lệnh. Tự động hoá Lighthouse chạy thông qua tập lệnh shell.
• Làm mô-đun nút. 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 người dùng web. Chạy Lighthouse và liên kết đến các báo cáo mà không cần cài đặt.

Chạy Lighthouse trong Công cụ của Chrome cho nhà phát triển

Lighthouse có bảng điều khiển riêng trong Công cụ của Chrome cho nhà phát triển. Để chạy một báo cáo:

1. Tải Google Chrome dành cho máy tính xuống.
2. Trong Google Chrome, hãy chuyển tới URL mà bạn muốn kiểm tra. Bạn có thể kiểm tra bất kỳ URL nào trên web.
3. Mở Công cụ của Chrome cho nhà phát triển.

4. Nhấp vào thẻ Lighthouse.

   

5. Nhấp vào Phân tích tải trang. Công cụ cho nhà phát triển hiển thị cho bạn danh sách các danh mục kiểm tra. Hãy bật tất cả các chiến dịch đó.

6. Nhấp vào Chạy kiểm tra. Sau 30 đến 60 giây, Lighthouse sẽ cung cấp cho bạn một báo cáo trên trang.

   

Cài đặt và chạy công cụ dòng lệnh Nút

Cách cài đặt mô-đun Nút:

1. Tải Google Chrome dành cho máy tính xuống.
2. Cài đặt phiên bản Hỗ trợ dài hạn hiện tại của Nút.
3. Cài đặt Lighthouse Cờ -g sẽ cài đặt mô-đun đó dưới dạng mô-đun chung.

npm install -g lighthouse

Cách thực hiện quy trình kiểm tra:

lighthouse <url>

Cách xem tất cả lựa chọn:

lighthouse --help

Chạy mô-đun Nút theo phương thức lập trình

Hãy xem phần Sử dụng theo phương thức lập trình để biết ví dụ về cách chạy Lighthouse theo phương thức lập trình dưới dạng mô-đun Nút.

Chạy PageSpeed Insights

Cách chạy Lighthouse trên PageSpeed Insights:

1. Chuyển đến trang PageSpeed Insights.
2. Nhập URL của trang web.

3. Nhấp vào Phân tích.

   

Chạy Lighthouse dưới dạng tiện ích của Chrome

Cách cài đặt tiện ích:

1. Tải Google Chrome dành cho máy tính xuống.
2. Cài đặt Tiện ích Lighthouse dành cho Chrome từ Cửa hàng Chrome trực tuyến.

Cách thực hiện quy trình kiểm tra:

1. Trong Chrome, hãy truy cập vào trang bạn muốn kiểm tra.

2. Nhấp vào Ngọn hải đăng . Biểu tượng này phải nằm bên cạnh thanh địa chỉ của Chrome. Nếu không, hãy mở trình đơn tiện ích của Chrome rồi truy cập vào trình đơn đó. Sau khi nhấp, trình đơn Lighthouse sẽ mở rộng.

   

3. Nhấp vào Tạo báo cáo. Lighthouse sẽ chạy các quy trình kiểm tra trên trang hiện được lấy tiêu điểm, sau đó mở một thẻ mới chứa báo cáo kết quả.

   

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

Sử dụng Trình xem Lighthouse để xem và chia sẻ báo cáo trực tuyến.

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

Trình xem Lighthouse cần kết quả JSON của báo cáo Lighthouse. Danh sách dưới đây giải thích cách nhận kết quả JSON, tuỳ thuộc vào quy trình làm việc của Lighthouse mà bạn đang sử dụng:

• Báo cáo Lighthouse. Mở trình đơn ở trên cùng bên phải rồi nhấp vào Lưu dưới dạng JSON
• Dòng lệnh. Chạy: shell lighthouse --output json --output-path <path/for/output.json>

Cách xem dữ liệu báo cáo:

1. Mở Trình xem Lighthouse.
2. Kéo tệp JSON vào trình xem hoặc nhấp vào vị trí bất kỳ trong Trình xem để mở trình điều hướng tệp và chọn tệp.

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

Nếu không muốn chuyển 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 nắm giữ bí mật trên GitHub. Một lợi ích của tính năng chính là kiểm soát phiên bản miễn phí.

Cách xuất một báo cáo dưới dạng nội dung chính:

1. (Nếu đã có trên trình xem, hãy bỏ qua bước này) Mở trình đơn ở trên cùng bên phải, sau đó nhấp vào Mở trong trình xem. Báo cáo sẽ mở trong Trình xem ở https://googlechrome.github.io/lighthouse/viewer/.
2. Trong Trình xem, hãy mở trình đơn ở trên cùng bên phải, sau đó nhấp vào Lưu dưới dạng Gist. Lần đầu tiên bạn làm việc này, một cửa sổ bật lên sẽ yêu cầu cấp quyền truy cập vào dữ liệu cơ bản của bạn trên GitHub, cũng như quyền đọc và ghi vào gist của bạn.

Để xuất báo cáo dưới dạng gist từ phiên bản CLI của Lighthouse, hãy tạo gist theo cách thủ công rồi sao chép và dán kết quả JSON của báo cáo vào gist. Tên tệp gist chứa dữ liệu đầu ra JSON phải kết thúc bằng .lighthouse.report.json. Hãy xem bài viết Chia sẻ báo cáo dưới dạng JSON để biết ví dụ về cách tạo đầu ra JSON qua công cụ dòng lệnh.

Cách xem báo cáo đã được lưu dưới dạng thông tin chính:

• Thêm ?gist=<ID> vào URL của trình xem, trong đó <ID> là mã nhận dạng của nội dung chính. text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
• Mở Trình xem rồi dán URL của thông báo chính vào trình xem đó.

Khả năng mở rộng Lighthouse

Lighthouse nhằm cung cấp hướng dẫn phù hợp và thiết thực cho mọi nhà phát triển web. Để đạt được mục tiêu này, có hai tính năng cho phép bạn điều chỉnh Lighthouse theo nhu cầu cụ thể.

Gói ngăn xếp

Các nhà phát triển sử dụng nhiều công nghệ khác nhau (khung phụ trợ/CMS/JavaScript) để xây dựng các trang web của họ. Thay vì chỉ đưa ra các đề xuất chung, giờ đây, Lighthouse có thể đưa ra lời khuyên phù hợp và thiết thực hơn tuỳ thuộc vào các công cụ được sử dụng.

"Gói ngăn xếp" cho phép Lighthouse phát hiện trang web của bạn được xây dựng trên nền tảng nào và hiển thị các đề xuất cụ thể dựa trên ngăn xếp. Những đề xuất này do các chuyên gia từ cộng đồng xác định và tuyển chọn.

Để đóng góp một Gói ngăn xếp, hãy xem Nguyên tắc về việc đóng góp.

Trình bổ trợ Lighthouse

Trình bổ trợ Lighthouse cho phép các chuyên gia về miền mở rộng chức năng của Lighthouse để đáp ứng các nhu cầu cụ thể của cộng đồng. Giờ đây, bạn có thể tận dụng dữ liệu mà Lighthouse thu thập để tạo các lượt kiểm tra mới. Về cốt lõi, trình bổ trợ Lighthouse là một mô-đun nút triển khai một nhóm quy trình kiểm tra mà Lighthouse chạy và thêm vào báo cáo dưới dạng danh mục mới.

Để biết thêm thông tin về cách tạo trình bổ trợ của riêng bạn, hãy xem Sổ tay hướng dẫn về trình bổ trợ trong kho lưu trữ Lighthouse GitHub.

Tích hợp Lighthouse

Nếu bạn là công ty hoặc cá nhân đang tích hợp Lighthouse vào các sản phẩm / dịch vụ mà bạn cung cấp thì trước tiên, chúng tôi rất vui mừng vì bạn! Chúng tôi mong muốn nhiều người sử dụng Lighthouse nhất có thể và Nguyên tắc và Tài sản thương hiệu để tích hợp Lighthouse này sẽ giúp bạn dễ dàng chứng minh rằng Lighthouse hoạt động hiệu quả trong khi vẫn bảo vệ thương hiệu của chúng tôi.

Đóng góp cho Lighthouse

Lighthouse là một nguồn mở và chúng tôi hoan nghênh mọi đóng góp! Kiểm tra công cụ theo dõi lỗi của kho lưu trữ để tìm các lỗi bạn có thể khắc phục hoặc các bài kiểm tra mà bạn có thể tạo ra hoặc cải thiện. Công cụ theo dõi lỗi cũng là nơi phù hợp để thảo luận về các chỉ số hiệu suất, các ý tưởng cho quy trình kiểm tra mới hoặc bất kỳ vấn đề nào khác liên quan đến Lighthouse.