Tìm hiểu và bắt đầu sử dụng Lighthouse
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? Cùng với Bizfly Cloud tìm hiểu về công cụ 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.
Hình 1. Bên trái là khung nhìn của trang sẽ được kiểm tra. Bên phải là Audits panel của Chrome DevTools, hiện được hỗ trợ bởi Lighthouse.
Cài đặt và chạy Node command line tool
Các bước cài đặt Node module
- 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
>>> Xem thêm: Tại sao có thể giảm băng thông khi sử dụng CDN?
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:
- Download Google Chrome for Desktop.
- Cài đặt Lighthouse Chrome Extension từ the Chrome Webstore.
Để chạy audit:
- 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.
Hình 3: Lighthouse menu
- 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ả.
Hình 4: Bản báo cáo của Lighthouse
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.
Hình 5. Lighthouse Viewer
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.
Để 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/.
- Để 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
