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 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. Dịch vụ này cung cấp các tính năng kiểm tra hiệu suất, khả năng hỗ trợ 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 chạy một loạt quy trình kiểm tra trên trang, sau đó tạo báo cáo về mức độ hiệu quả của trang. Hãy sử dụng các kết quả kiểm tra không thành công làm chỉ báo về 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 sự 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ụ của Chrome cho nhà phát triển. 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, 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 dành cho máy tính xuống.
- Mở Chrome rồi chuyển đến 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ụ của Chrome cho nhà phát triển.
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 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 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 loại quảng cáo.
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ụ của Chrome cho nhà phát triển.
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 dành cho máy tính xuống.
- 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ờ
-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 Analyze (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 hải đă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 kết quả 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 cho 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 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 các giá trị bí mật trên GitHub. Một lợi ích của Gist là quản lý 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 , sau đó 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 gốc 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.
Để xem báo cáo đã được lưu dưới dạng nội dung chính:
- 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 dùng nhiều công nghệ (phần phụ trợ, hệ thống quản lý nội dung và khung JavaScript) để xây dựng các trang web của họ. 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 một gói ngăn xếp, hãy xem 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ốt lõi, trình bổ trợ Lighthouse là một mô-đun nút triển khai một tập hợp các bước kiểm tra mà 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.
Hãy tham khảo Nguyên tắc và tài sản thương hiệu về việc tích hợp Lighthouse để cho thấy rằng Lighthouse được sử dụng trong khi vẫn bảo vệ thương hiệu của chúng tôi.
Đóng góp cho Lighthouse
Lighthouse là nguồn mở và chúng tôi hoan nghênh mọi đó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.