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é!
Contents
Google Ligthhouse là gì?
- 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.
Lợi ích của Google 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
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.
- 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
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
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.
Cách sử dụng Google Lighthouse
- 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
- 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
- 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
Sử dụng Google Lighthouse bằng Node Command line tool
- 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
- 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
- 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:
- 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
- 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:
- 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:
Để 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.
Bài viết liên quan
