Danh mục

Tìm kiếm
/

Mục lục

Không có mục lục
Tham gia kênh Telegram của CloudFly để nhận thêm ưu đãi và không bỏ lỡ bất kỳ khuyến mãi nào từ CloudFly

Google Lighthouse là gì? 3 cách sử dụng Google Lighthouse

Google Lighthouse là một công cụ mã nguồn mở do Google phát triển. Nó không chỉ cung cấp báo cáo chi tiết về chất lượng website mà còn đưa ra các gợi ý hữu ích để tối ưu hóa trải nghiệm người dùng. Trong bài viết này, CloudFly sẽ cùng bạn tìm hiểu về Google Lighthouse là gì và hướng dẫn 3 cách sử dụng Google Lighthouse đơn giản và hiệu quả. Từ đó giúp bạn kiểm tra và cải thiện website một cách dễ dàng.

google lighthouse là gì

1. Google Lighthouse là gì?

Google Lighthouse là một công cụ mã nguồn mở do Google phát triển, giúp đo lường, đánh giá và cải thiện chất lượng website. Với khả năng chạy trên bất kỳ trang web nào, Lighthouse mô phỏng hành vi của người dùng thực khi truy cập vào trang và thực hiện nhiều kiểm tra khác nhau. Sau đó, nó sẽ cung cấp một báo cáo chi tiết về hiệu suất, khả năng truy cập, SEO, và các khía cạnh khác của website.

Bạn có thể sử dụng Lighthouse trực tiếp từ trình duyệt Chrome thông qua DevTools. Hoặc nhận kết quả từ các công cụ như Google Search Console, PageSpeed Insights. Có thể nói, đây là công cụ toàn diện của Google, cung cấp các gợi ý hữu ích để bạn cải thiện chất lượng website dễ dàng và chính xác.

2. Các cách sử dụng Google Lighthouse là gì?

Để sử dụng Google Lighthouse dễ dàng, bạn có thể thực hiện theo 3 cách dưới đây.

2.1. Kích hoạt Lighthouse trong Chrome DevTools

Sử dụng Lighthouse thông qua Chrome DevTools là cách phổ biến và đơn giản nhất. Bạn có thể thực hiện với các bước cụ thể như sau:

Bước 1: Đầu tiên, bạn truy cập vào trang web bạn muốn kiểm tra bằng trình duyệt Chrome.

Bước 2: Bạn mở Chrome DevTools bằng cách nhấn Ctrl + Shift + J hoặc F12 (trên Windows) và Shift + Cmnd + I (trên Mac). Hoặc bạn có thể nhấp chuột phải trên trang và chọn Inspect.

Bước 3: Tiếp theo, bạn nhấp vào biểu tượng dấu hai mũi tên ">>" trên thanh công cụ, và chọn Lighthouse.

cách sử dụng google lighthouse là gì 1

Bước 4: Sau đó, bạn lựa chọn thiết bị muốn kiểm tra: Mobile (hiển thị trên điện thoại) hoặc Desktop (hiển thị trên máy tính). 

Bạn cũng có thể tùy chọn các danh mục để Lighthouse phân tích như hiệu suất, SEO, khả năng truy cập,… 

Bước 5: Cuối cùng, bạn chọn Analyze page load để Lighthouse thực hiện các bài kiểm tra và hiển thị kết quả sau 30-60 giây.

cách sử dụng google lighthouse là gì 2

2.2. Chạy Google Lighthouse trong Node Command line tool

Để sử dụng Google Lighthouse thông qua NodeJS, bạn có thể thực hiện theo các bước sau:

Bước 1: Đầu tiên, bạn tải và cài đặt Google Chrome trên máy tính của bạn.

Bước 2: Bạn cài đặt phiên bản NodeJS mới nhất, ưu tiên phiên bản hỗ trợ Long-Term Support (LTS).

Bước 3: Tiếp theo, bạn cài đặt Lighthouse bằng cách chạy lệnh sau trong terminal:

npm install -g lighthouse

Bước 4: Sau đó, bạn chạy kiểm tra tình trạng website bằng cách sử dụng lệnh:

lighthouse <url>

Bước 5: Nếu bạn muốn xem tất cả các tùy chọn audit, hãy nhập lệnh:

lighthouse --help

2.3. Chạy Lighthouse thông qua Lighthouse Extension

Nếu không có lý do đặc biệt, bạn nên sử dụng Lighthouse trong Chrome DevTools thay vì qua Lighthouse Extension. Điều này là bởi vì Chrome DevTools cho phép bạn thử nghiệm các website nội bộ và đã được xác thực, trong khi Lighthouse Extension thì không. Nếu bạn muốn chạy Lighthouse qua Lighthouse Extension, bạn có thể thực hiện theo các bước sau:

Bước 1: Đầu tiên, bạn truy cập vào Chrome Web Store và tìm kiếm Lighthouse Chrome Extension. Rồi nhấp vào Thêm vào Chrome để cài đặt tiện ích này.

cách sử dụng google lighthouse là gì 3

Bước 2: Bạn mở website mà mình muốn kiểm tra. Sau đó nhấp vào biểu tượng Lighthouse Extension ở góc trên bên phải của thanh địa chỉ Chrome. 

cách sử dụng google lighthouse là gì 4

Nếu không thấy biểu tượng này, bạn hãy nhấp vào biểu tượng Tiện ích mở rộng bên phải thanh địa chỉ để kích hoạt.

Bước 3: Tiếp theo, bạn chọn biểu tượng Cài đặt để tùy chỉnh các chỉ số và thiết bị mà bạn muốn Lighthouse phân tích. 

Bước 4: Cuối cùng, bạn nhấp vào Generate report để bắt đầu kiểm tra website. Kết quả sẽ được hiển thị sau vài phút.

cách sử dụng google lighthouse là gì 5

3. Các tiêu chuẩn audit của Google Lighthouse là gì?

Lighthouse sử dụng một loạt các tiêu chuẩn để đánh giá website, bao gồm:

3.1. Performance

Performance (Hiệu suất) là một trong những yếu tố quan trọng nhất ảnh hưởng đến trải nghiệm người dùng (UX) và thứ hạng SEO của website. Để đạt điểm cao trong mục này, bạn cần tối ưu hóa nhiều yếu tố cả ở backend lẫn frontend. Chẳng hạn như tối ưu hóa hình ảnh, thu nhỏ CSS và JS, tăng tốc website, và sử dụng plugin khi cần.

Lighthouse phân tích tốc độ tải của website hoặc ứng dụng và khả năng truy cập nội dung. Dưới đây là sáu chỉ số tốc độ mà Lighthouse sử dụng:

  • First Contentful Paint (FCP): Thời gian hiển thị nội dung đầu tiên, bao gồm văn bản, hình ảnh và các yếu tố khác. FCP càng thấp thì trải nghiệm người dùng càng tốt.
  • Speed Index (SI): Phản ánh tốc độ tải tổng thể của website. SI càng thấp thì website tải càng chậm.
  • Largest Contentful Paint (LCP): Thời gian hiển thị nội dung lớn nhất, thường là hình ảnh hoặc video. LCP càng thấp thì trải nghiệm người dùng càng tốt.
  • Time to Interactive (TTI): Thời gian để người dùng có thể bắt đầu tương tác với website. Bao gồm thực hiện các hành động như nhấp chuột, cuộn, hay nhập liệu. TTI càng thấp thì website càng phản hồi nhanh.
  • Total Blocking Time (TBT): Tổng thời gian mà các yếu tố như JavaScript và CSS chặn việc hiển thị nội dung. TBT càng thấp thì website tải càng nhanh.
  • Cumulative Layout Shift (CLS): Mức độ dịch chuyển các yếu tố như hình ảnh, font chữ, video, và button gây thay đổi bố cục của website trong quá trình tải trang. CLS càng thấp thì website càng ổn định.

3.2. Accessibility

Tiêu chí Accessibility (Khả năng truy cập) giúp bạn đánh giá mức độ tối ưu hóa của website cho nhiều đối tượng người dùng khác nhau. Lighthouse cung cấp những đánh giá cụ thể theo thang điểm, giúp bạn nhận diện các yếu tố cần cải thiện để nâng cao khả năng truy cập cho mọi người. Nó sẽ tiến hành đánh giá Accessibility dựa trên nhiều yếu tố quan trọng như:

  • Button và liên kết: Đảm bảo rằng các button và liên kết được mô tả rõ ràng, giúp người dùng dễ dàng hiểu chức năng của chúng.
  • Hình ảnh: Kiểm tra xem hình ảnh có gắn alt text hay không, để người dùng sử dụng trình đọc màn hình vẫn có thể hiểu nội dung.
  • Tương phản màu sắc: Đảm bảo có đủ độ tương phản giữa văn bản và nền, giúp người dùng dễ dàng đọc nội dung.
  • Cấu trúc tiêu đề: Xác minh cấu trúc tiêu đề được sử dụng hợp lý, giúp người dùng dễ dàng điều hướng trên trang.

3.3. Progressive Web App

Progressive Web App (PWA) là một tập hợp các kỹ thuật tiên tiến nhằm mang đến trải nghiệm tuyệt vời cho người dùng. PWA chú trọng vào việc tối ưu hóa trải nghiệm trên thiết bị di động, với nhiều tính năng hấp dẫn như:

  • Hoạt động ngoại tuyến: Cho phép người dùng truy cập ứng dụng ngay cả khi không có kết nối Internet.
  • Nhận thông báo: Cập nhật thông tin mới nhất trực tiếp từ ứng dụng.
  • Lưu trữ cục bộ: Tăng tốc độ tải trang và tiết kiệm dữ liệu di động.

Lighthouse được phát triển ban đầu với mục tiêu đánh giá hiệu quả của PWA. Công cụ này thực hiện các kiểm tra quan trọng như đăng ký nhân viên dịch vụ, khả năng hoạt động ngoại tuyến và mã trạng thái HTTP 200.

3.4. Best Practices

Lighthouse tập trung vào kiểm tra các khía cạnh bảo mật và tuân thủ các tiêu chuẩn phát triển web hiện đại trong mục Best Practices. Công cụ này sẽ phân tích những yếu tố sau:

  • Giao thức HTTPS và HTTP/2: Kiểm tra xem website có sử dụng HTTPS và HTTP/2 không, giúp bảo vệ dữ liệu người dùng và cải thiện tốc độ tải trang.
  • Nguồn tài nguyên: Đảm bảo các tài nguyên trên website đến từ các nguồn an toàn, giúp ngăn chặn các cuộc tấn công lừa đảo và mã độc.
  • Lỗ hổng JavaScript: Đánh giá các thư viện JavaScript trên website để phát hiện lỗ hổng bảo mật tiềm ẩn.
  • Kết nối cơ sở dữ liệu: Kiểm tra tính an toàn của các kết nối với cơ sở dữ liệu.
  • Lệnh và API: Cảnh báo nếu website sử dụng các lệnh không an toàn như document.write() hoặc API lỗi thời.

3.5. Hiệu quả SEO

Lighthouse tiến hành nhiều bài kiểm tra để đánh giá mức độ tối ưu hóa SEO của website hoặc ứng dụng đối với các công cụ tìm kiếm. Hiện tại, Lighthouse kiểm tra 13 yếu tố trong danh mục SEO, tập trung vào một số điểm. Chẳng hạn như 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. Cũng như các thẻ đặc biệt canonical, hreflang, và khả năng bot thu thập thông tin trên website.

Tuy nhiên, các bài kiểm tra SEO của Lighthouse khá giới hạn và mang tính tham khảo. Để tối ưu hóa SEO hiệu quả hơn, bạn nên thực hiện thêm các bước chuyên sâu sau khi khắc phục các vấn đề mà Lighthouse gợi ý.

các tiêu chuẩn audit của google lighthouse là gì

Hy vọng bài viết trên trên đã giúp bạn hiểu rõ hơn về Google Lighthouse là gì. Nếu còn thắc mắc hay muốn đăng ký máy chủ ảo Cloud Server tại CloudFly, hãy liên hệ ngay với chúng tôi qua thông tin bên dưới để được tư vấn và hỗ trợ chi tiết. Đội ngũ kỹ thuật có chuyên môn cao luôn sẵn sàng 24/7 để giải quyết mọi vấn đề của bạn.

THÔNG TIN LIÊN HỆ:

  • Group săn sale: https://t.me/cloudflyvn

 

Tham gia kênh Telegram của CloudFly để nhận thêm ưu đãi và không bỏ lỡ bất kỳ khuyến mãi nào từ CloudFly
Chia sẻ