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
Các tiêu chuẩn audits của Lighthouse
Dưới đây là các nhóm tiêu chuẩn audit chính trong Lighthouse và cách chúng ảnh hưởng đến trải nghiệm người dùng lẫn chiến lược phát triển website.
Hiệu suất
Hiệu suất là tiêu chí quan trọng nhất mà Lighthouse đánh giá bởi nó ảnh hưởng trực tiếp đến trải nghiệm người dùng. Một trang web nhanh chóng tải lên, không gây cảm giác trì trệ hay giật lag sẽ giữ chân khách truy cập lâu hơn và giảm tỷ lệ thoát trang. Tiêu chuẩn hiệu suất không chỉ dừng lại ở tốc độ tải trang mà còn bao gồm khả năng phản hồi, tối ưu hóa hình ảnh, và xử lý các resource hiệu quả.
Thực tế, các yếu tố như tối ưu hóa hình ảnh, giảm thiểu mã nguồn, sử dụng cache hiệu quả hoặc bằng cách tối ưu hóa đường truyền dữ liệu đều đóng vai trò quan trọng trong việc nâng cao điểm số hiệu suất của website. Một website có hiệu suất tốt không chỉ giúp nâng cao xếp hạng SEO mà còn đem lại trải nghiệm mượt mà, liền mạch cho người dùng, nhất là với các thiết bị di động hiện nay ngày càng phổ biến.
Progressive Web App (PWA)
Các trang web đáp ứng các tiêu chí của PWA sẽ cung cấp trải nghiệm ứng dụng gốc chân thực hơn, dễ dàng thêm vào màn hình chính của điện thoại và đồng bộ dữ liệu một cách hiệu quả. Việc tối ưu PWA không chỉ nâng cao chất lượng trải nghiệm người dùng mà còn giúp website của bạn đột phá trong các chiến lược marketing, xây dựng thương hiệu, đặc biệt phù hợp với thời đại số hóa ngày nay. Để đạt được tiêu chuẩn này, người làm web cần chú ý tới các yếu tố như service workers, HTTPS, và các tính năng UI/UX thân thiện, linh hoạt.
Accessibility
Tiêu chuẩn Accessibility đề cập đến khả năng website có thể tiếp cận và sử dụng bởi tất cả mọi người, kể cả những người gặp khó khăn về thị giác, thính giác hoặc vận động. Một trang web thân thiện với Accessibility không chỉ giúp mở rộng đối tượng người dùng mà còn thể hiện trách nhiệm xã hội của tổ chức hoặc doanh nghiệp.
Việc đánh giá Accessibility trong Lighthouse thường xoay quanh các yếu tố như điều chỉnh màu sắc phù hợp, hỗ trợ phím tắt, mô tả hình ảnh bằng alternative text, hoặc cấu trúc hợp lý của các thành phần nội dung để phù hợp với các công cụ đọc màn hình. Tối ưu Accessibility là bước không thể bỏ qua, nhất là trong thị trường cạnh tranh gay gắt ngày nay, nơi mỗi người dùng đều là khách hàng tiềm năng.
Best Practices
Tiêu chuẩn này tập trung vào các nguyên tắc phát triển web tốt nhất để đảm bảo website không gặp lỗi bảo mật, cấu trúc rõ ràng và dễ cấu hình. Những thực hành tốt này không chỉ giúp giảm thiểu các lỗ hổng bảo mật, mà còn đảm bảo website vận hành liền mạch, dễ duy trì và phát triển lâu dài.
Các Best Practices từ Lighthouse sẽ kiểm tra từ việc sử dụng đúng định dạng script, tối ưu mã nguồn, xử lý lỗi, cho tới các cấu hình server phù hợp. Đối với các nhà quản trị và phát triển, việc tuân thủ các nguyên tắc này giúp nâng cao chất lượng sản phẩm và đảm bảo website hoạt động ổn định bất kể trong các điều kiện về tải cao hay tấn công mạng.
SEO
Tiêu chuẩn SEO trong Lighthouse đánh giá khả năng website của bạn có thể được hiển thị và xếp hạng cao trong các kết quả tìm kiếm hay không. Tiêu chí này liên quan tới cấu trúc nội dung, sử dụng đúng thẻ heading, tối ưu hóa các thẻ meta, URL thân thiện, cùng các yếu tố về tốc độ tải trang và khả năng tương thích di động.
Tối ưu SEO không đơn thuần chỉ dựa vào việc thêm từ khóa, mà còn bắt nguồn từ việc xây dựng nội dung chất lượng, tối ưu hóa về mặt kỹ thuật, và đảm bảo khả năng crawl của các công cụ tìm kiếm. Lighthouse giúp bạn phát hiện những điểm còn thiếu sót hoặc chưa tối ưu để có hành động điều chỉnh phù hợp, qua đó nâng cao khả năng hiển thị của website.
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ách chia sẻ và xem báo cáo Lighthouse
Sau khi thực hiện audits trên Lighthouse, việc chia sẻ và xem các báo cáo giúp quá trình tối ưu website trở nên rõ ràng và dễ quản lý hơn.
Cách chia sẻ và xem báo cáo Google Lighthouse gồm hai cách phổ biến: chia sẻ dưới dạng file JSON và chia sẻ dưới dạng GitHub Gists.
Chia sẻ và xem báo cáo dạng JSON
Khi chạy Lighthouse trong Chrome DevTools hoặc bằng lệnh CLI hoặc extension, sau khi có báo cáo, bạn có thể tải báo cáo dưới dạng file JSON bằng nút "Save as JSON" hoặc lệnh lighthouse --output json --output-path <đường dẫn/file.json>.
Để xem báo cáo đã lưu dưới dạng JSON, bạn mở trang Lighthouse Viewer trên Chrome, sau đó kéo thả file JSON vào hoặc chọn file từ trình duyệt tệp, báo cáo sẽ được hiển thị trực quan.
File JSON này có thể gửi cho người khác để họ cũng xem được báo cáo với trình xem trên trình duyệt mà không cần chạy lại audit.
Chia sẻ và xem báo cáo dạng GitHub Gists
Sau khi có báo cáo Lighthouse, bạn có thể mở báo cáo trong Lighthouse Viewer, sau đó chọn nút chia sẻ "Share" để lưu báo cáo dưới dạng Gist bí mật trên GitHub.
Để xem báo cáo dạng Gist, truy cập URL trình xem Lighthouse với tham số ?gist=
Kết luận
Lighthouse ngày nay đã trở thành một công cụ không thể thiếu trong quá trình phát triển và tối ưu website. Các tiêu chuẩn audits đa dạng của Lighthouse giúp bạn có một cái nhìn toàn diện về hiệu suất, khả năng tiếp cận, tối ưu hoá chuẩn PWA, SEO cũng như các Best Practices khác. Việc hiểu rõ cách chia sẻ và xem báo cáo Lighthouse cũng góp phần thúc đẩy quá trình cải thiện website trở nên linh hoạt, hiệu quả hơn.
Khi bạn chủ động khai thác các tính năng của Lighthouse, chỉnh sửa phù hợp dựa trên các đề xuất, thì website của bạn mới thực sự tối ưu, nâng cao trải nghiệm người dùng và cạnh tranh hiệu quả trên thị trường Internet.
Hãy bắt tay vào áp dụng Lighthouse ngay hôm nay để không bỏ lỡ cơ hội tối ưu website và nâng cao chất lượng dịch vụ hoặc doanh nghiệp của mình.
>> Có thể bạn quan tâm: Google PageSpeed Insights là gì? Tiêu chuẩn đánh giá website
