Google Lighthouse là gì? Tối ưu website hiệu quả với Lighthouse

Google Lighthouse là công cụ mã nguồn mở do Google phát triển, được sử dụng để đánh giá và tối ưu hiệu suất, khả năng truy cập cũng như chuẩn SEO của website. Công cụ này giúp dễ dàng nhận biết các vấn đề cần cải thiện, từ tốc độ tải trang đến trải nghiệm người dùng. Để hiểu rõ cách tận dụng Google Lighthouse nâng cao hiệu quả website, cùng Nhân Hòa khám phá nhé.

Google Lighthouse là gì?

Google Lighthouse là một công cụ mã nguồn mở miễn phí, được phát triển bởi Google, dùng để tự động kiểm tra chất lượng các trang web. 

Nói cách khác: bạn đưa URL của một trang web, Lighthouse sẽ chạy một loạt bài kiểm tra và cuối cùng tạo ra báo cáo cho thấy trang web đó hoạt động như thế nào và bạn cần cải thiện ở đâu. Lighthouse đánh giá trang web theo nhiều khía cạnh chính như:

• Hiệu suất (Performance): tốc độ tải trang, thời gian người dùng thấy nội dung, thời gian trang sẵn sàng để tương tác,… (cần >75 điểm)
• Khả năng truy cập (Accessibility): trang web có dễ dùng, sử dụng đúng thẻ alt trên hình ảnh, có tương phản màu tốt,… 
• Thực tiễn tốt (Best Practices): các quy tắc phát triển web hiện đại, bảo mật, kết nối an toàn,...
  SEO (Tối ưu tìm kiếm): đảm bảo trang có thể được công cụ tìm kiếm thu thập, có thẻ meta, thẻ canonical, cấu trúc dữ liệu,...
• Ứng dụng Web Tiến bộ (Progressive Web App - PWA): nếu bạn xây dựng PWA, Lighthouse kiểm tra các yếu tố như offline‑cơ bản, khả năng cài đặt,..

>>> Xem thêm: World Wide Web là gì

Cách Google Lighthouse hoạt động như thế nào?

Google Lighthouse kiểm tra website bằng cách giả lập hành vi truy cập và thao tác của một người dùng ảo. Công cụ này thường tải trang trên môi trường thiết bị di động, đồng thời mô phỏng các điều kiện mạng chưa tối ưu.

Trong quá trình kiểm tra, Lighthouse tự động chạy nhiều bài đánh giá dựa trên tiêu chí do Google thiết lập. Sau khi hoàn tất, Lighthouse score báo cáo chi tiết với điểm số từ 0 đến 100 cho từng hạng mục. 

• Điểm từ 90-100 được xem là “Good” (Tốt)
• Điểm từ 50-89 là “Needs Improvement”(Cần cải thiện), dưới 50 là “Poor”(Yếu)

Báo cáo còn liệt kê các vấn đề cần cải thiện và gợi ý giải pháp, giúp nâng cao hiệu suất và chất lượng website.

Cách audit website dựa trên tiêu chuẩn của Google Lighthouse

Google Lighthouse giúp đánh giá toàn diện chất lượng website dựa trên 5 nhóm tiêu chuẩn quan trọng bao gồm:

Performance

Performance (hiệu suất) phản ánh trực tiếp tốc độ tải trang và mức độ mượt mà khi người dùng tương tác với website. 

Lighthouse đánh giá hiệu suất dựa trên 6 chỉ số chính:

• FCP - Thời gian nội dung đầu tiên xuất hiện.
• SI - Tốc độ hiển thị tổng thể của trang.
• LCP - Thời gian hiển thị nội dung lớn nhất.
• TTI - Thời gian trang sẵn sàng để người dùng tương tác.
• TBT - Tổng thời gian các tác vụ chặn hiển thị.
• CLS - Mức độ dịch chuyển bố cục khi tải trang.

Điểm hiệu suất tốt thường từ 75 trở lên, nhưng mục tiêu quan trọng hơn là cải thiện trải nghiệm thực tế và giảm tối đa độ trễ khi người dùng truy cập.

Để tối ưu hiệu suất, bạn nên:

• Nén và chuyển đổi hình ảnh (WebP/AVIF), dùng lazy-load.
• Rút gọn và gom CSS/JS, hạn chế script bên thứ ba.
• Tối ưu backend: caching, CDN, giảm truy vấn nặng.
• Ưu tiên nội dung quan trọng hiển thị trước.

Accessibility

Accessibility (khả năng truy cập) đánh giá mức độ dễ sử dụng của website cho mọi nhóm người dùng, bao gồm cả người khiếm thị, khiếm thính hoặc gặp hạn chế về thao tác.

Lighthouse kiểm tra Accessibility dựa trên các yếu tố chính:

• Nút và liên kết: Cần được mô tả rõ ràng để người dùng hiểu chức năng.
• Hình ảnh: Phải có alt text để hỗ trợ trình đọc màn hình.
• Tương phản màu sắc: Văn bản cần đủ tương phản với nền để dễ đọc.
• Cấu trúc tiêu đề: Sắp xếp hợp lý để hỗ trợ điều hướng nhanh và mạch lạc. Mỗi trang chỉ có 1 H1, không bỏ qua cấp bậc tiêu đề khiến trình đọc khó hiểu.

Progressive Web App

Progressive Web App là tập hợp các kỹ thuật giúp website mang đến trải nghiệm như ứng dụng trên thiết bị di động. PWA chú trọng vào tối ưu trải nghiệm người dùng như hoạt động ngoại tuyến, nhận thông báo và lưu trữ cục bộ để tăng tốc độ tải và tiết kiệm dữ liệu.

Lighthouse đánh giá PWA dựa trên các kiểm tra quan trọng như đăng ký service worker, khả năng hoạt động offline và phản hồi HTTP 200. 

• Service Worker: Thiết lập để cache tĩnh và tự làm mới khi có phiên bản mới.
• Hoạt động offline: Tạo trang offline (offline.html) và cache các file quan trọng trước.
• HTTP 200: Cấu hình service worker trả về phản hồi 200 từ cache khi mạng yếu.
• Web App Manifest: Điền đầy đủ tên app, icon nhiều kích cỡ, theme color, start_url.
• Giao diện thân thiện: Ưu tiên tốc độ, responsive, tránh popup gây phiền.

Best Practices

Best Practices trong Lighthouse đánh giá mức độ tuân thủ các tiêu chuẩn phát triển web hiện đại và bảo mật. Tiêu chí này phân tích các yếu tố như:

• Giao thức HTTPS và HTTP/2: Dùng chứng chỉ SSL hợp lệ, bật HTTP/2 để tăng tốc độ tải trang và bảo mật dữ liệu.
• Nguồn tài nguyên: Kiểm tra tất cả tài nguyên có xuất phát từ nguồn an toàn.
• Lỗ hổng JavaScript: Phát hiện các thư viện có nguy cơ tiềm ẩn.
• Kết nối database: Sử dụng kết nối an toàn, hạn chế trực tiếp truy cập từ frontend, dùng prepared statements để tránh SQL injection.
• Lệnh và API: Cảnh báo các lệnh không an toàn như document.write() hoặc API lỗi thời.

Hiệu quả SEO

Hiệu quả SEO là tiêu chí dùng để đánh giá mức độ tối ưu hóa website cho các công cụ tìm kiếm. Công cụ thực hiện 13 bài kiểm tra chính, tập trung vào các yếu tố như thân thiện với thiết bị di động, dữ liệu có cấu trúc, thẻ title và meta description, thẻ canonical và hreflang, cũng như khả năng thu thập thông tin của bot trên website.

Bạn có thể tham khảo tối ưu dưới đây:

• Title: 50-60 ký tự, chứa từ khóa chính, thu hút
• Meta description: Ngắn gọn, 150-160 ký tự, chứa từ khóa chính, có CTA
• Heading: 1 heading 1, h2,h3,..theo thứ tự logic dùng từ khóa phụ phù hợp
• Link nội bộ: Tạo menu và liên kết rõ ràng; dùng anchor text chứa từ khóa
• Mobile friendly: Dùng responsive design, kiểm tra viewport, font đủ lớn, button dễ click
• Structured data (Schema): Tích hợp JSON-LD cho sản phẩm, bài viết, sự kiện để Google hiển thị rich snippets

>>> Xem thêm: Cookie là gì? Cách bật, xóa cookies trên Chrome dễ dàng

4 cách sử dụng Google Lighthouse

Google Lighthouse được nhiều đơn vị tối ưu website đánh giá là công cụ mang lại hiệu quả rõ rệt. Bạn có thể khai thác 4 cách sử dụng công cụ này để cải thiện toàn diện chất lượng website.

Cách 1: Chạy Lighthouse trong Chrome DevTools

Để chạy Google Lighthouse trong Chrome DevTools, bạn chỉ cần thực hiện theo các bước đơn giản sau:

• Bước 1: Tải và cài đặt Google Chrome trên máy tính. Mở Chrome và truy cập vào URL của trang web bạn muốn kiểm tra.
• Bước 2: Mở Công cụ dành cho nhà phát triển (Developer Tools) trong Chrome, bạn có thể dùng Ctrl + Shift + J hoặc F12 (đối với Windows) và Shift + Cmnd + I (đối với Mac). Hoặc nhấn chuột phải, sau đó chọn Inspect (Kiểm tra).

• Bước 3: Chọn thẻ Lighthouse (biểu tượng tháp hải đăng) trong bảng điều khiển.

• Bước 4: Ở bên trái là khung xem trang web, bên phải là bảng điều khiển Lighthouse.
• Bước 5: Chọn các danh mục kiểm tra mà bạn muốn đánh giá (để tất cả bật nếu muốn kiểm tra toàn diện).

• Bước 6: Nhấn Chạy quy trình kiểm tra và chờ khoảng 30-60 giây để Lighthouse tạo báo cáo chi tiết.

Cách 2: Cài đặt và chạy công cụ dòng lệnh Node

Để sử dụng Google Lighthouse qua công cụ dòng lệnh Node, bạn cần thực hiện các bước sau:

• Cài đặt Google Chrome trên máy tính, vì Lighthouse yêu cầu trình duyệt để chạy các bài kiểm tra.
• Cài đặt Node.js phiên bản mới nhất hỗ trợ Long-Term Support (LTS) nếu máy tính chưa có.
  • Cài đặt Lighthouse bằng lệnh: npm install -g lighthouse
  • Chạy kiểm tra website bằng lệnh: lighthouse
  • Xem tất cả các tùy chọn audit và hướng dẫn sử dụng bằng lệnh: lighthouse --help

Cách 3: Chạy Lighthouse Extension Google 

Chạy Lighthouse Extension Google, bạn hãy làm theo sau: 

• Bước 1: Truy cập Chrome Web Store, tìm kiếm Lighthouse Chrome Extension và nhấn Thêm vào Chrome để cài đặt.

• Bước 2: Mở website cần kiểm tra 
• Bước 3: Nhấp vào biểu tượng Lighthouse internet ở góc trên bên phải thanh địa chỉ Chrome. Nếu không thấy, chọn biểu tượng Tiện ích mở rộng bên cạnh thanh địa chỉ để bật extension.

• Bước 4: Chọn biểu tượng Cài đặt để tùy chỉnh các chỉ số và thiết bị muốn phân tích, sau đó nhấn Generate report. Lighthouse sẽ thực hiện kiểm tra và trả về báo cáo chi tiết sau vài phút.

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

• Bước 1: Truy cập PageSpeed Insights qua link: https://pagespeed.web.dev/  
• Bước 2: Nhập URL trang web cần kiểm tra.
• Bước 3: Nhấn Phân tích để nhận báo cáo Lighthouse chi tiết.

Chia sẻ và xem báo cáo trực tuyến Google Lighthouse ở đâu?

Bạn có thể sử dụng Lighthouse Viewer để xem và chia sẻ báo cáo trực tuyến. Có hai cách chính để làm việc với báo cáo:

Xuất báo cáo dưới dạng JSON

Lighthouse Viewer chỉ hỗ trợ đọc báo cáo ở định dạng JSON, vì vậy bạn cần xuất báo cáo theo một trong các cách sau:

• Sử dụng Chrome DevTools: Nhấp vào biểu tượng ba chấm dọc ở góc báo cáo và chọn Save as JSON để lưu file về máy.

• Sử dụng Command Line: Mở terminal và chạy lệnh: shell lighthouse --output json --output-path <path/for/output.json>

Xem báo cáo trong Lighthouse Viewer

• Truy cập Lighthouse Viewer.
• Kéo tệp JSON vào trình xem hoặc mở tệp từ trình điều hướng.

Chia sẻ báo cáo dưới dạng Gist trên GitHub

Bạn có thể chia sẻ báo cáo Lighthouse dễ dàng bằng cách lưu chúng thành Gist bí mật trên GitHub.

• Bước 1: Mở báo cáo trong Lighthouse Viewer (nhấp biểu tượng ba chấm → Mở trong trình xem).

• Bước 2: Trong Viewer, nhấp biểu tượng ba chấm và chọn Save as Gist. Lần đầu sử dụng, hệ thống sẽ yêu cầu cấp quyền GitHub.

• Bước 3: Nếu chạy Lighthouse bằng dòng lệnh, tự tạo Gist và dán nội dung JSON (tên file phải có đuôi .lighthouse.report.json).
• Bước 4: Để xem Gist, thêm ?gist= vào URL của Lighthouse Viewer.

Câu hỏi FAQ liên quan tới Lighthouse

Lighthouse có miễn phí không?

Có. Google Lighthouse hoàn toàn miễn phí để sử dụng dưới dạng mã nguồn mở.

Google Lighthouse 3.0 có tính năng mới nào?

Google Lighthouse 3.0 mang đến nhiều tính năng mới giúp đánh giá hiệu suất và chất lượng website toàn diện hơn.

• Visual performance audits: Tích hợp kiểm tra hình ảnh và video trực quan, giúp đánh giá tác động của các media đến hiệu suất và trải nghiệm người dùng.
• Lighthouse CI: Cho phép tích hợp kiểm tra Lighthouse vào quy trình Continuous Integration (CI), tự động đánh giá mỗi khi mã nguồn thay đổi.
• Report categories: Báo cáo được phân loại rõ ràng thành Performance, Accessibility, Best Practices, SEO và PWA, giúp theo dõi dễ dàng hơn.
• Enhanced report format: Định dạng báo cáo cải tiến cung cấp chi tiết điểm số, cảnh báo, gợi ý cải thiện và thông tin kỹ thuật cho từng tiêu chí.

>>> Những bài viết liên quan:

• Landing Page là gì? Cách tạo Landing Page đơn giản, hút mắt
• Cách viết trang About Us (Giới thiệu) chuyên nghiệp, nổi bật

Lời kết

Google Lighthouse là công cụ mạnh mẽ giúp đánh giá và tối ưu toàn diện hiệu suất, khả năng truy cập, SEO và các tiêu chuẩn phát triển web. Sử dụng Lighthouse sẽ giúp website của bạn hoạt động mượt mà hơn, thân thiện với người dùng và công cụ tìm kiếm. Nếu muốn nhận hỗ trợ triển khai tối ưu website với Google Lighthouse, liên hệ Nhân Hòa nhé.