Google Lighthouse: Là gì và cách sử dụng

Google Lighthouse là gì?

Google Lighthouse là công cụ miễn phí của Google giúp bạn cải thiện chất lượng các webpage trên website của mình.

Công cụ này kiểm tra các trang của bạn về hiệu suất, khả năng tiếp cận, SEO và nhiều khía cạnh khác. Đồng thời đưa ra đề xuất để bạn cải thiện những yếu tố này.

Đây là phần mềm mã nguồn mở—bất kỳ ai cũng có thể sử dụng trên bất kỳ webpage nào.

Dù là web developer, chuyên gia SEO hay chủ sở hữu website, Google Lighthouse đều có thể giúp bạn nâng cao trải nghiệm tổng thể và hiệu suất của website.

Trong bài viết này, chúng tôi sẽ hướng dẫn cách Google Lighthouse hoạt động và cách bạn có thể dùng công cụ này để kiểm tra các webpage.

Cùng tìm hiểu nhé.

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

Google Lighthouse hoạt động bằng cách kiểm tra năm danh mục chính về tối ưu hóa website.

1. Hiệu suất

Trong lần kiểm tra này, Lighthouse đo tốc độ tải website và tốc độ người dùng có thể truy cập.

Công cụ báo cáo hiệu suất của bạn dựa trên năm chỉ số tốc độ, mỗi chỉ số đo lường một khía cạnh của page speed:

• First Contentful Paint (FCP): Đo thời gian để văn bản hoặc hình ảnh đầu tiên hiển thị với người dùng
• Largest Contentful Paint (LCP): Tính thời gian để phần tử lớn nhất trên trang tải xong đối với người dùng
• Total Blocking Time (TBT): Đo khoảng thời gian trang không thể phản hồi thao tác của người dùng, chẳng hạn như nhấp chuột
• Cumulative Layout Shift (CLS): Đo những thay đổi bố cục xảy ra khi người dùng truy cập trang
• Speed Index (SI): Cho biết nội dung trên trang tải nhanh đến mức nào

Lighthouse chấm điểm hiệu suất tổng thể cho trang dựa trên kết quả của tất cả các chỉ số này. Điểm số có thể nằm trong khoảng từ 0 đến 100.

Nếu điểm số nằm trong khoảng từ 90 đến 100, điều đó cho thấy trang của bạn được tối ưu tốt về trải nghiệm người dùng.

Điểm dưới 90 có nghĩa là nhiều tài nguyên trên trang đang làm chậm tốc độ, ảnh hưởng đến trải nghiệm tổng thể trên trang.

Lighthouse cũng đưa ra các đề xuất để bạn có thể áp dụng nhằm cải thiện hiệu suất.

2. Khả năng tiếp cận

Bài kiểm tra khả năng tiếp cận của Lighthouse phân tích mức độ thuận tiện khi người sử dụng công nghệ hỗ trợ truy cập website của bạn.

Cụ thể, công cụ xem xét các thành phần như nút và liên kết để đánh giá mức độ mô tả rõ ràng.

Công cụ cũng phân tích hình ảnh để kiểm tra xem Alt Text đã được chỉ định hay chưa. Nhờ vậy, khi người dùng có thị lực kém hoặc không nhìn thấy sử dụng trình đọc màn hình, họ vẫn hiểu được nội dung hình ảnh.

Tương tự báo cáo kiểm tra hiệu suất, báo cáo accessibility chấm điểm cho bạn trên thang điểm 100. Điểm càng cao thì càng tốt.

Công cụ cũng nêu bật những cơ hội giúp bạn cải thiện accessibility tổng thể.

3. Best Practices

Bài kiểm tra best practices trong Lighthouse kiểm tra xem trang của bạn có được xây dựng theo các tiêu chuẩn phát triển web hiện đại hay không.

Lighthouse kiểm tra xem:

• Tài nguyên có được tải từ máy chủ an toàn bằng HTTPS hay không.
• Tất cả hình ảnh có hiển thị với tỷ lệ khung hình chính xác và độ phân giải phù hợp hay không.
• Tất cả thư viện JavaScript có an toàn và không có lỗ hổng bảo mật hay không.
• Trang có khai báo HTML doctype hay không.
• Content Security Policy (CSP) có hiệu quả trong việc chống lại các cuộc tấn công cross-site scripting (XSS) hay không.
• Trang có không gặp lỗi trình duyệt nào hay không.
• Trang có không sử dụng framework và API lỗi thời hay không.
• Trang có source map hợp lệ hay không.
• Trang có không gặp các vấn đề hiển thị trong bảng Chrome DevTools hay không, chẳng hạn như yêu cầu mạng thất bại, biện pháp bảo mật chưa đầy đủ và các lỗi trình duyệt khác.
• Bảng mã ký tự của trang có được thiết lập bằng thẻ meta charset hay không.
• Trang có cho phép người dùng dán mật khẩu vào trường mật khẩu hay không.
• Trang có mang lại trải nghiệm tốt cho người dùng bằng cách chặn yêu cầu quyền truy cập vị trí địa lý và thông báo khi tải trang hay không.

Tất cả yếu tố này quyết định điểm số của bạn trên thang điểm 100.

Báo cáo best practices của Lighthouse cũng nêu bật những yếu tố cụ thể cần bạn chú ý. Khắc phục chúng có thể giúp cải thiện điểm số.

4. SEO

Lighthouse chạy một bài kiểm tra để phân tích một số khía cạnh kỹ thuật của SEO.

Cụ thể, công cụ kiểm tra xem:

• Trang web của bạn có thân thiện với thiết bị di động hay không.
• Trang có structured data hợp lệ hay không.
• Internal link có thể được crawl hay không.
• Trang có thuộc tính Hreflang hợp lệ hay không.
• Các thẻ title và meta description đã được thiết lập hay chưa.
• Trang có thể được index hay không.
• Robots.txt có hợp lệ hay không.
• Trang có trả về mã trạng thái HTTP 200 (OK) hay không.
• Trang có thẻ “rel=canonical” hợp lệ hay không.
• Nội dung trang có độc lập với plugin hay không.
• Các link trên trang có phần văn bản mô tả đi kèm hay không.
• Hình ảnh trên trang có Alt Text hay không.
• Trang có thẻ meta viewport được thiết lập width hoặc initial-scale hay không.

Sau đó, công cụ chấm điểm trên thang điểm 100.

Công cụ cũng nêu bật mọi vấn đề SEO phát hiện được trong quá trình kiểm tra.

Tuy nhiên, công cụ này không cung cấp cho bạn bức tranh toàn diện về SEO.

Nếu muốn website của mình có thứ hạng cao hơn trên Google, bạn cần đảm bảo website được tối ưu cho mọi khía cạnh của SEO. Hãy chắc chắn rằng không có vấn đề nào ảnh hưởng đến thứ hạng của bạn.

Đây là lúc các công cụ của Semrush có thể hữu ích.

Hãy bắt đầu với công cụ kiểm tra SEO miễn phí để có phần đọc nhập môn. Để tìm hiểu sâu hơn, Semrush Site Audit kiểm tra website của bạn trên hơn 140 khía cạnh SEO, chẳng hạn như Duplicate Content, redirect, internal link, URL Structure và nhiều yếu tố khác.

Để sử dụng công cụ, hãy thiết lập một project và chạy audit.

Sau khi audit hoàn tất, bạn sẽ nhận được tổng quan cấp cao về tình trạng SEO của website.

Bạn cũng có thể xem các vấn đề cụ thể đang ảnh hưởng đến hiệu suất của mình. Chỉ cần chuyển đến tab “Issues”.

Với mỗi vấn đề được phát hiện, công cụ sẽ đưa ra hướng dẫn khắc phục.

Hãy khắc phục từng vấn đề mà công cụ phát hiện trên website để duy trì tình trạng SEO lành mạnh.

5. Progressive Web App (PWA)

PWA audit trong Lighthouse xác minh xem ứng dụng web của bạn có sử dụng các khả năng web hiện đại để mang lại trải nghiệm người dùng tối ưu hay không.

Công cụ kiểm tra xem ứng dụng web của bạn có:

• Nhanh và đáng tin cậy trên mạng di động và cung cấp chức năng ngoại tuyến
• Có thể cài đặt trên nhiều loại thiết bị và có các tính năng như chức năng ngoại tuyến cùng thông báo đẩy
• Được tối ưu hóa cho PWA bằng cách chuyển hướng traffic HTTP sang HTTPS, thiết lập màn hình chờ tùy chỉnh, điều chỉnh kích thước nội dung trang web cho vừa màn hình mobile và triển khai tất cả các best practice khác do Lighthouse liệt kê

Bài kiểm tra đánh giá ứng dụng web của bạn dựa trên các yếu tố này và cấp một trong các huy hiệu PWA.

(Nguồn ảnh: Github)

Điều này có nghĩa là, không giống như bốn báo cáo đầu tiên, bạn sẽ được cấp một huy hiệu (chứ không phải điểm số 100) khi chạy PWA audit trong Lighthouse.

Ví dụ như sau:

Báo cáo audit cũng sẽ đề xuất cách cải thiện hiệu suất tổng thể của PWA, bao gồm các vấn đề cụ thể cần được khắc phục.

Cách sử dụng Google Lighthouse

Giờ bạn đã biết Google Lighthouse là gì và hoạt động ra sao, hãy cùng tìm hiểu những cách khác nhau để audit các trang của mình.

Sử dụng Lighthouse với Chrome DevTools

Trong trình duyệt Chrome, bạn có thể chạy Google Lighthouse audit bằng Chrome DevTools.

Mở trang web bạn muốn audit.

Sau đó, nhấp chuột phải vào bất kỳ vị trí nào trên trang và chọn “Inspect.”

Tính năng Inspect sẽ mở một bảng DevTools ở bên phải trang web.

Chọn “Lighthouse” trên thanh công cụ của bảng. (Nếu không tìm thấy tùy chọn Lighthouse, hãy nhấp vào biểu tượng hai mũi tên ở cuối thanh công cụ. Bạn sẽ thấy tùy chọn này ở đó.)

Tại đây, bạn có thể chọn một, nhiều hoặc tất cả danh mục, tùy theo khía cạnh nào của website bạn muốn phân tích. Sau đó, nhấp vào “Analyze page load.”

Sau đó, công cụ sẽ tạo báo cáo cho bạn. Điểm audit của từng danh mục sẽ xuất hiện ở trên cùng.

Bạn có thể nhấp vào một danh mục cụ thể để tìm hiểu thêm. Trong ví dụ này, chúng tôi đã nhấp vào “Hiệu suất”.

Lưu ý: Bạn sẽ thấy Lighthouse đo lường hiệu suất dựa trên sáu chỉ số tốc độ (thay vì năm) khi chạy kiểm tra hiệu suất bằng DevTools.

Chỉ số bổ sung đó là Time to Interactive (TTI), chỉ số tính thời gian cần thiết để một trang trở nên hoàn toàn tương tác được với người dùng.

Chỉ số này là một trong những chỉ số đã ngừng sử dụng của họ. Chưa rõ vì sao chỉ số này vẫn được tính khi bạn chạy kiểm tra Lighthouse trong DevTools.

Sử dụng Lighthouse với tiện ích mở rộng Chrome

Lighthouse có tiện ích mở rộng Chrome để thực hiện kiểm tra cho bạn.

Trong trình duyệt Chrome, hãy cài đặt tiện ích mở rộng Lighthouse cho Chrome.

Truy cập trang web bạn muốn kiểm tra.

Sau đó, mở menu tiện ích mở rộng Chrome và chọn “Lighthouse.”

Sau đó, nhấp vào biểu tượng bánh răng.

Bạn sẽ thấy phần cài đặt, nơi bạn có thể chọn hoặc bỏ chọn từng danh mục tùy theo báo cáo muốn tạo.

Sau đó, bắt đầu kiểm tra bằng cách nhấp vào nút “Generate report”.

Lighthouse sẽ tạo báo cáo trong một tab mới.

Sử dụng Lighthouse trong PageSpeed Insights

Bạn cũng có thể sử dụng Lighthouse thông qua công cụ PageSpeed Insights của Google.

Mở công cụ. Nhập URL trang của bạn rồi nhấp vào “Analyze.”

Công cụ sẽ tạo báo cáo cho mọi danh mục, ngoại trừ PWA. PageSpeed Insights không thực hiện kiểm tra PWA.

Sử dụng Google Lighthouse thông qua Node Module

Bạn cũng có thể dùng module JavaScript Node để chạy các bài kiểm tra Lighthouse.

Cài đặt bản Node hiện tại trên hệ thống của bạn.

Sau đó, chạy dòng lệnh sau để cài đặt Lighthouse:

npm install -g lighthouse

Sau khi cài đặt Lighthouse, hãy dùng dòng lệnh bên dưới để tạo báo cáo.

lighthouse <url>

(Bạn cần thay “url” bằng địa chỉ web của trang muốn kiểm tra.)

Câu hỏi thường gặp

Lighthouse khác PageSpeed Insights như thế nào?

Lighthouse khác PageSpeed Insights ở chỗ chỉ sử dụng dữ liệu lab để đo lường hiệu suất trang của bạn. Trong khi đó, PageSpeed Insights sử dụng cả dữ liệu lab và field.

Dữ liệu lab phản ánh cách người dùng giả định có thể trải nghiệm trang web của bạn. Ngược lại, dữ liệu field phản ánh cách người dùng thực đã trải nghiệm trang web của bạn.

Vì sao điểm số thay đổi mỗi lần tôi kiểm tra?

Điểm số bạn thấy trong Lighthouse có thể khác nhau mỗi lần chạy kiểm tra.

Điều kiện mạng, các tiện ích mở rộng trình duyệt làm thay đổi yêu cầu mạng và quảng cáo hiển thị trên trang cụ thể đều ảnh hưởng đến điểm số mỗi lần bạn thực hiện kiểm tra.

Báo cáo Lighthouse có bao gồm các chỉ số Core Web Vitals không?

Có. Bài kiểm tra hiệu suất trong Lighthouse phân tích website của bạn dựa trên các chỉ số Core Web Vitals sau:

• Largest Contentful Paint (LCP)
• Total Blocking Time (TBT) (chỉ số này đóng vai trò đại diện cho chỉ số First Input Delay (FID) ban đầu)
• Cumulative Layout Shift (CLS)