Lighthouse là một công cụ tự động, nguồn mở giúp bạn cải thiện chất lượng của các trang web. Bạn có thể chạy trình duyệt này trên bất kỳ trang web nào, công khai hoặc yêu cầu xác thực. Công cụ này có các quy trình kiểm tra về hiệu suất, khả năng tiếp cận, ứng dụng web tiến bộ, SEO và nhiều khía cạnh khác.
Bạn có thể chạy Lighthouse trong Công cụ dành cho nhà phát triển của Chrome, từ dòng lệnh hoặc dưới dạng mô-đun Node. Cung cấp cho Lighthouse một URL để kiểm tra, công cụ này sẽ 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 suất của trang. Sử dụng các quy trình kiểm tra không thành công làm chỉ báo cho cách cải thiện trang. Mỗi quy trình kiểm tra đều có một tài liệu tham khảo giải thích lý do quy trình kiểm tra đó quan trọng, cũng như cách khắc phục.
Bạn cũng có thể sử dụng Lighthouse CI để ngăn chặn tình trạng hồi quy trên trang web của mình.
Bắt đầu
Chọn quy trình làm việc phù hợp nhất với bạn trong Lighthouse:
- Trong Công cụ dành cho nhà phát triển của Chrome. 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 ngay trong trình duyệt.
- Trên dòng lệnh. Tự động hoá các lần chạy Lighthouse bằng tập lệnh shell.
- Dưới dạng mô-đun Nút. Tích hợp Lighthouse vào các hệ thống tích hợp liên tục.
- Từ giao diện người dùng web. Chạy Lighthouse và liên kết với 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:
- Tải Google Chrome cho máy tính xuống.
- Mở Chrome rồi truy cập vào 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ở Công cụ dành cho nhà phát triển của Chrome.
Nhấp vào thẻ Lighthouse (Tháp hải đăng).
Bên trái là khung nhìn của trang web cần được kiểm tra. Bên phải là bảng điều khiển Lighthouse của Công cụ của Chrome cho nhà phát triển. Nhấp vào Phân tích tốc độ tải trang. Công cụ cho nhà phát triển sẽ hiển thị danh sách các danh mục kiểm tra. Để tất cả các tính năng này ở trạng thái bật.
Nhấp vào Chạy quy trình kiểm tra. Sau 30 đến 60 giây, Lighthouse sẽ cung cấp cho bạn một báo cáo về trang.
Báo cáo Lighthouse trong Công cụ dành cho nhà phát triển của Chrome.
Cài đặt và chạy công cụ dòng lệnh Node
Cách cài đặt mô-đun Node:
- Tải Google Chrome cho máy tính xuống.
- Cài đặt phiên bản Node Hỗ trợ dài hạn hiện tại.
- Cài đặt Lighthouse. Cờ
-gsẽ cài đặt mô-đun này dưới dạng mô-đun toàn cục.
npm install -g lighthouse
Cách chạy quy trình kiểm tra:
lighthouse <url>
Cách xem tất cả các lựa chọn:
lighthouse --help
Chạy mô-đun Node 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 Node.
Chạy PageSpeed Insights
Cách chạy Lighthouse trên PageSpeed Insights:
- Chuyển đến PageSpeed Insights.
- Nhập URL của trang web.
Nhấp vào Phân tích.
Trang web PageSpeed Insights.
Chạy Lighthouse dưới dạng tiện ích Chrome
Cách cài đặt tiện ích:
- Tải Google Chrome dành cho máy tính xuống.
- Cài đặt tiện ích Lighthouse trên Chrome từ Cửa hàng Chrome trực tuyến.
Cách chạy quy trình kiểm tra:
- Trong Chrome, hãy truy cập vào trang bạn muốn kiểm tra.
Nhấp vào biểu tượng
Lighthouse (Tháp ánh sáng) bên cạnh thanh địa chỉ của Chrome hoặc trong trình đơn tiện ích của Chrome.
Sau khi nhấp, trình đơn Lighthouse sẽ mở rộng.
Tiện ích này sẽ nhắc bạn tạo báo cáo. Nhấp vào Tạo báo cáo. Lighthouse chạy quy trình kiểm tra trên trang đang được lấy làm tâm điểm, sau đó mở một thẻ mới có báo cáo về kết quả.
Báo cáo Lighthouse được tạo từ tiện ích.
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 đầu ra JSON của báo cáo Lighthouse. Tạo đầu ra JSON như sau:
- Từ một báo cáo Lighthouse. Nhấp vào để mở trình đơn, sau đó 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:
- Mở Lighthouse Viewer (Trình xem Lighthouse).
- 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 rồi chọn tệp.
Chia sẻ báo cáo dưới dạng Gist trên GitHub
Nếu không muốn truyền tệp JSON theo cách thủ công, bạn cũng có thể chia sẻ báo cáo dưới dạng gist GitHub bí mật. Một lợi ích của gist là tính năng kiểm soát phiên bản miễn phí.
Cách xuất báo cáo dưới dạng một bản tóm tắt:
- Nhấp vào trình đơn , rồi nhấp vào
Mở trong trình xem. Báo cáo này nằm ở https://googlechrome.github.io/lighthouse/viewer/. - Trong Trình xem, hãy nhấp vào trình đơn ,
sau đó nhấp vào
Lưu dưới dạng Gist. Lần đầu tiên bạn thực hiện việc này, một cửa sổ bật lên sẽ yêu cầu 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 các gist của bạn.
Để xuất báo cáo dưới dạng một bản tóm tắt từ phiên bản CLI của Lighthouse, hãy tạo bản tóm tắt theo cách thủ công rồi sao chép và dán đầu ra JSON của báo cáo vào bản tóm tắt đó. Tên tệp gist chứa đầu ra JSON phải kết thúc bằng .lighthouse.report.json. Hãy xem phần Chia sẻ báo cáo dưới dạng JSON để biết ví dụ về cách tạo đầu ra JSON từ công cụ dòng lệnh.
Cách xem báo cáo đã được lưu dưới dạng một gist:
- Thêm
?gist=<ID>vào URL của Trình xem, trong đó<ID>là mã nhận dạng của bản tóm tắt.text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID> - Mở Trình xem rồi dán URL của một bản tóm tắt vào đó.
Khả năng mở rộng của Lighthouse
Lighthouse hướng đến việc cung cấp hướng dẫn phù hợp và hữu ích cho tất cả 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ể của mình.
Gói ngăn xếp
Nhà phát triển sử dụng nhiều công nghệ khác nhau (phần phụ trợ, hệ thống quản lý nội dung và khung JavaScript) để tạo trang web. Thay vì đưa ra các đề xuất chung, Lighthouse cung cấp lời khuyên phù hợp và hữu ích, 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 nền tảng mà trang web của bạn được xây dựng và hiển thị các đề xuất cụ thể dựa trên ngăn xếp. Các đề xuất này do các chuyên gia trong cộng đồng xác định và tuyển chọn.
Để đóng góp gói ngăn xếp, hãy xem lại Nguyên tắc đóng góp.
Trình bổ trợ Lighthouse
Trình bổ trợ Lighthouse cho phép các chuyên gia trong lĩnh vực mở rộng chức năng của Lighthouse cho nhu cầu cụ thể của cộng đồng. Bạn có thể tận dụng dữ liệu mà Lighthouse thu thập để tạo các quy trình kiểm tra mới. Về cơ bản, trình bổ trợ Lighthouse là một mô-đun nút triển khai một bộ kiểm tra do Lighthouse chạy và được thêm vào báo cáo dưới dạng một 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ách hướng dẫn về trình bổ trợ trong kho lưu trữ GitHub của Lighthouse.
Tích hợp Lighthouse
Thật tuyệt nếu bạn là một công ty hoặc cá nhân đang tích hợp Lighthouse vào các sản phẩm hoặc dịch vụ mà bạn cung cấp! Chúng tôi muốn càng nhiều người càng tốt sử dụng Lighthouse.
Tham khảo Nguyên tắc và tài sản thương hiệu để tích hợp Lighthouse để cho thấy rằng Lighthouse được sử dụng, đồng thời bảo vệ thương hiệu của chúng tôi.
Đóng góp cho Lighthouse
Lighthouse là công cụ nguồn mở và chúng tôi rất hoan nghênh các nội dung đóng góp! Hãy xem Công cụ theo dõi lỗi của kho lưu trữ để tìm các lỗi mà bạn có thể khắc phục hoặc các quy trình kiểm tra mà bạn có thể tạo hoặc cải thiện. Các vấn đề là một nơi phù hợp để thảo luận về các chỉ số hiệu suất, ý tưởng cho các quy trình kiểm tra mới hoặc bất kỳ vấn đề nào khác liên quan đến Lighthouse.