Google Lighthouse là gì? Toàn tập cách Sử dụng Google

Bạn có bao giờ thắc mắc Google Lighthouse là gì? Chúng hoạt động như thế nào và sử dụng chúng như thế nào chưa? Trong bài viết hôm nay, Công ty dịch vụ thiết kế website Nhật Nam Media sẽ cùng nhau tìm hiểu về công cụ Google Lighthouse đo lường chất lượng trang web của Google, bắt đầu nhé!

Google Ligthhouse là gì?

Hiểu một cách đơn giản, Google Lighthouse là một công cụ do Google tạo ra để phân tích, đánh giá và đưa ra các giải pháp giúp tối ưu hóa website một cách hiệu quả nhất. Công cụ sẽ được đánh giá dựa trên các yếu tố sau:
  • Khả năng truy cập trang web
  • Hiệu suất trang web
  • Khả năng tối ưu hóa công cụ tìm kiếm
  • Các ứng dụng của trang web

Với những yếu tố trên, Google Lighthouse sẽ đưa ra những giải pháp giúp khắc phục những hạn chế để cải thiện hoặc nâng cao chất lượng website.

Đó sẽ là một công cụ tuyệt vời mà bạn tuyệt đối không thể bỏ qua, chúng giúp cung cấp miễn phí giải pháp tốt nhất cho website.

Google Lighthouse
Google Lighthouse

Lợi ích của Google Lighthouse

Những gì công cụ này làm là giúp chúng tôi kiểm tra trang web so với các số liệu cần thiết. Bạn cũng sẽ nhận được các giải pháp để giúp cải thiện hiệu suất trang web và bạn có thể thực hiện các điều chỉnh trong khi cải thiện tất cả các tính năng di động, tốc độ trang web và khả năng truy cập.
Dưới đây là một số vai trò của công cụ Lighthouse:
  • Công cụ được các kỹ sư của Google cập nhật và làm mới liên tục để đảm bảo khả năng kiểm tra hiệu suất trang web
  • Khi Google Lighthouse phát hiện ra vấn đề, họ sẽ cung cấp cho bạn các công cụ quan trọng để cải thiện hiệu suất trang web.
  • Lighthouse rất dễ sử dụng và bạn có thể nhanh chóng kiểm tra trang web của mình

Các tiêu chí của Google Lighthouse

Google Lighthouse
Google Lighthouse

Performance

Là một báo cáo hiệu suất trang web và tính năng này chủ yếu là yếu tố cấp trang mà Google Lighthouse tập trung vào. Vì tốc độ trang web cũng có ảnh hưởng trực tiếp đến trải nghiệm người dùng.

Xếp hạng của trang web dựa trên 3 cấp độ:

  • Màu xanh lam (90-100): Trang web được tối ưu hóa hiệu suất và cung cấp trải nghiệm người dùng tốt
  • Màu vàng (50 – 89): Trung bình, với số điểm này, trang web của bạn đang thất bại và chưa được tối ưu hóa hoàn toàn, chúng cũng có vấn đề ở một số nơi hoặc có trải nghiệm khách hàng không tốt.
  • Màu đỏ (0 – 49): Chậm, điều này cho thấy rằng trang web của bạn không tập trung vào việc tối ưu hóa hoặc có trải nghiệm khách hàng kém.
Những chỉ số tốc độ trang:
  • First Meaning Paint: thời gian mà các nội dung chính hiển thị cho người dùng xem
  • First Contentful Paint: khoảng thời gian trước khi mà văn bản hoặc hình ảnh đầu tiên hiển thị cho người dùng
  • Speed Index: cung cấp các số liệu thể hiện tốc độ đăng tải nội dung của website
  • Time to Interactive: thể hiện thời gian trước khi người dùng tương tác với trang và nội dung của trang
  • First CPU Idle: Thời gian các hoạt động Main Thread của trang đủ thấp để xử lý đầu vào
  • Estimates Input Latency: Thể hiện các kết quả ước tính ( Mili giây) về thời gian của một ứng dụng hoặc trang cần phản ứng với truy vấn của người dùng trong khi Load. Một trang web coi là trậm nếu tốc độ của nó trễ trên 50 mili giây.

Best Practices

Đây cũng là một yếu tố quan trọng giúp Lighthouse đánh giá trang web của bạn, họ sẽ phân tích xem HTTPS và HTTP/2 có được sử dụng hay không. Ngoài ra, họ kiểm tra xem các tài nguyên có đến từ các nguồn an toàn hay không và đánh giá các thư viện JavaScript để tìm các lỗ hổng.

Các phương pháp hay nhất sẽ xem xét các kết nối cơ sở dữ liệu an toàn và tránh sử dụng các lệnh không an toàn như trộn các API lỗi thời, Document.Write

Google Lighthouse
Google Lighthouse

SEO

Đây cũng là một trong những yêu cầu mà bạn phải sử dụng các yếu tố quan trọng về thẻ như meta description, giản lược code, từ khóa trên tiêu đề, internal link, external link,…

Accessibility

Với tính năng Accessibility, nó giúp chúng ta theo dõi khả năng hiển thị của các trang web để xem chúng đã được tối ưu hóa hay chưa, chẳng hạn như: màu sắc, tiêu đề, nhãn, hình nền … Việc vượt qua kiểm tra này sẽ giúp quản trị viên web phát hiện và tìm ra những gì một trang web cần. cải thiện khả năng tiếp cận và cải thiện khả năng hiển thị SERP.

Progressive Web App

Đây là bộ công nghệ giúp tối ưu hóa trải nghiệm người dùng trên thiết bị di động so với các trang web thông thường với nhiều tính năng bổ sung khác nhau: ngoại tuyến, thông báo đẩy, lưu trữ cục bộ, v.v.

Đặc biệt trong thời đại của internet, Pagespeed và Mobile First là những yếu tố chính giúp Google đánh giá thứ hạng.

Google Lighthouse
Google Lighthouse

Cách sử dụng Google Lighthouse

Chúng ta có 3 cách sử dụng công cụ Google Lighthouse như sau:
  • Sử dụng Google Lighthouse bằng Chrome Extensions
  • Sử dụng Google Lighthouse bằng Chrome DevTools
  • Sử dụng Google Lighthouse bằng Node Command line tool

Sử dụng Google Lighthouse bằng Chrome Extensions

Để sử dụng Google Lighthouse trong tiện ích mở rộng của Chrome, hãy làm theo các bước sau:
  • Bước 1: Cài đặt tiện ích mở rộng Lighthouse Chrome từ cửa hàng Google Chrome
  • Bước 2: Sau khi cài đặt xong, bạn sẽ thấy biểu tượng Google xuất hiện ở góc trên bên phải màn hình. Nếu nó không xuất hiện, bạn cần vào menu của Chrome để kích hoạt tiện ích mở rộng
  • Bước 3: Chọn biểu tượng Lighthouse mở rộng nằm ở góc trên bên phải của thanh
  • Bước 4: Để phân tích trang, bạn chọn biểu tượng ngọn hải đăng, sau đó bấm Generate Report và đợi kết quả hiện ra.

Sử dụng Google Lighthouse bằng Chrome DevTools

Để sử dụng Google Lighthouse trong Chrome DevTools, chúng tôi thực hiện các bước sau:
  • Bước 1: Sử dụng Google Chrome để truy cập trang web bạn muốn xem
  • Bước 2: Nhấn Ctrl – Shift – I để mở Công cụ dành cho nhà phát triển và chọn Kiểm tra hàng đầu
  • Bước 3: Tiếp theo chọn Perform and audite DevTools
  • Bước 4: Đánh dấu vào các mục bạn muốn Google Lighthouse phân tích
  • Bước 5: Chọn Run Audit và đợi công cụ kiểm tra kết quả, quá trình này sẽ diễn ra trong khoảng 60-100 giây
Google Lighthouse
Google Lighthouse

Sử dụng Google Lighthouse bằng Node Command line tool

Để sử dụng Google Lighthouse với các công cụ dòng lệnh Node, bạn cần thực hiện các bước sau:
  • Bước 1: Đầu tiên bạn phải tải xuống ứng dụng Google Chrome dành cho Desktop
  • Bước 2: Sau khi quá trình tải xuống hoàn tất, hãy cài đặt phiên bản mới nhất của Node Long Term Support
Google Lighthouse
Google Lighthouse
  • Bước 3: Người dùng cài Lighthouse thông qua “npm install -g ligthouse”
  • Bước 4: Tạo kiểm tra bằng lệnh “lighthouse <url”
  • Bước 5: Chúng tôi sẽ nhận được tùy chọn kiểm tra “lighthouse -help”.

Cách chia sẻ và xem báo cáo trực tuyến trên Google Lighthouse

Chia sẻ báo cáo dạng JSON

Để chia sẻ báo cáo phân tích trang web, Lighthouse Viewer yêu cầu đầu ra JSON. Dưới đây là cách nhận đầu ra JSON, tùy thuộc vào quy trình làm việc của Lighthouse mà bạn đang sử dụng:
  • Trường hợp 1: Sử dụng Google Lighthouse trong Chrome DevTools, bạn có thể tải xuống và chia sẻ báo cáo chỉ bằng cách nhấp vào nút tải xuống báo cáo.
  • Trường hợp 2: Để sử dụng Google Lighthouse từ dòng lệnh, bạn phải chạy lệnh sau:
Google Lighthouse
Google Lighthouse
  • Trường hợp 3: Sử dụng Google Lighthouse Extension, sau khi nhận được báo cáo, bạn chỉ cần chọn nút Export và nhấp vào Save as JSON.
    Khi bạn muốn xem dữ liệu báo cáo, chỉ cần mở Lighthouse Viewer trong Google Chrome và kéo và thả JSON vào trang Viewer để hiển thị báo cáo. Hoặc có một cách khác, bạn click vào bất kỳ đâu trên trang, trên màn hình hiển thị sẽ xuất hiện cửa sổ mới và bạn chỉ việc chọn file JSON muốn xem.

Chia sẻ báo cáo dạng GitHub Gists

Thay vì chia sẻ báo cáo dưới dạng JSON, hãy thử chia sẻ báo cáo dưới dạng GitHub Gists bí mật. Một lý do bạn nên sử dụng GitHub Gists là việc kiểm soát phiên bản hoàn toàn miễn phí. Các bước thực hiện rất đơn giản như sau:
  • Bước 1: (Nếu bạn đã có Viewer thì có thể bỏ qua bước này) Chọn Export => Open In Viewer. Báo cáo bây giờ sẽ mở trong trình xem:
Google Lighthouse
Google Lighthouse
  • Bước 2: Nhấp vào Chia sẻ trong trình xem. Lần đầu tiên bạn làm điều này, một cửa sổ sẽ bật lên hỏi bạn có quyền truy cập vào dữ liệu GitHub cơ bản của mình để đọc và ghi Gists của bạn hay không.

Để bạn có thể xuất báo cáo Gists từ phiên bản CLI, chỉ cần tạo Gists theo cách thủ công và sao chép chúng – dán đầu ra JSON của báo cáo vào Gist.

Lưu ý: Tên tệp Gist chứa đầu ra JSON phải kết thúc bằng:

Google Lighthouse
Google Lighthouse

Để xem báo cáo phân tích trang web được lưu dưới dạng Gist, chúng tôi cần thêm? Gist = <ID> vào URL của trình xem. trong đó <ID> là ID của Gist. Vì vậy, URL lúc này của chúng ta sẽ có dạng như sau: https://googlechrome.github.io/lighthouse/viewer/?gists= <ID>

Các tính năng mới nhất của Google Lighthouse

  • Giao diện mới, đơn giản, thân thiện với người dùng
  • Hiển thị kết quả tìm kiếm nhanh hơn và chính xác hơn ngay cả với số lượng nhỏ
  • Khả năng tương thích đa cấu hình, tương tự như CLI
  • Kết quả báo cáo có thể được xuất dưới dạng tệp CSV thuận tiện

Đó là tất cả những thông tin mà Nhật Nam Media muốn chia sẻ với bạn về Google Lighthouse. Chúc bạn thành công.

Mục nhập này đã được đăng trong Seo. Đánh dấu trang permalink.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *