Mục lục bài viết

Google Lighthouse là gì? Cách dùng Google Lighthouse chi tiết

Google Lighthouse là gì

Đối với việc kiểm tra tốc độ website, Google Lighthouse đã trở thành công cụ không thể thiếu. Từ việc đánh giá tốc độ tải trang đến các yếu tố gây giảm trải nghiệm người dùng, Google Lighthouse đều cung cấp cho bạn cái nhìn toàn diện và chi tiết. Cùng mình tìm hiểu cụ thể Google Lighthouse là gì nhé!

Google Lighthouse là gì?

Google Lighthouse là công cụ phân tích hiệu suất website được phát triển bởi Google. Nó không chỉ đo lường tốc độ tải trang, mà còn đánh giá các yếu tố khác như: Khả năng truy cập, SEO, và trải nghiệm người dùng. Công cụ SEO này rất hữu ích trong thời đại mà tốc độ và trải nghiệm người dùng đóng vai trò quan trọng.

Ưu điểm của Google Lighthouse là gì?

  • Kiểm tra từ hiệu suất website nhanh chóng, chính xác. 
  • Miễn phí và dễ dàng truy cập qua trình duyệt hoặc dòng lệnh.
  • Cho phép điều chỉnh các tùy chọn kiểm tra theo nhu cầu.
  • Thường xuyên được cập nhật để phản ánh các tiêu chuẩn và công nghệ mới.
  • Hỗ trợ cả kiểm tra trên desktop và mobile.
  • Báo cáo cung cấp thông tin chi tiết, giúp dễ dàng phát hiện vấn đề.
  • Đưa ra các giải pháp cụ thể để tối ưu hóa trang web.
  • Có khả năng tích hợp với các công cụ CI/CD và nền tảng phát triển khác.
  • Có cộng đồng lớn và nhiều tài nguyên, tutorial.
  • Sử dụng các thuật toán và tiêu chuẩn nâng cao để đảm bảo độ chính xác.
  • … 

Nhược điểm của Google Lighthouse là gì? 

  • Có thể khó sử dụng cho người không rành về kỹ thuật.
  • Quá trình kiểm tra thường mất thời gian đối với website có nhiều trang.
  • Sử dụng nhiều tài nguyên máy tính, có thể làm chậm hệ thống.
  • Kết quả có thể thay đổi tùy theo tốc độ mạng và tài nguyên máy tính.
  • Không hỗ trợ đầy đủ cho tất cả các ngôn ngữ và frameworks.

Tại sao Lighthouse dùng 3G để đánh giá? 

Google Lighthouse chủ yếu tập trung vào trải nghiệm di động vì họ biết đa số người dùng sẽ truy cập web từ thiết bị này. Để đánh giá hiệu suất web một cách công bằng và thực tế, Google chọn mạng 3G làm chuẩn. Bởi không phải mọi người đều có thể truy cập vào mạng Wifi, 4G hoặc 5G. 

Việc này giúp đánh giá hiệu suất trang web trong điều kiện kết nối kém. Từ đó thúc đẩy các nhà phát triển tối ưu trang web của mình cho mọi người dùng, thay vì “ưu tiên” cho những người có kết nối mạng hiện đại (Wifi, 4G, 5G). 

Tiêu chuẩn kiểm tra của Google Lighthouse

Giao diện báo cáo kiểm tra tốc độ website bằng Lighthouse thường sẽ như sau (hoặc tương tự):

Giao diện báo cáo của Lighthouse 
Giao diện báo cáo của Lighthouse 

Trong đó: 

1. Performance

Performance website là kết quả của các yếu tố từ back-end tới front-end. Để Lighthouse đánh giá cao, bạn cần tối ưu hình ảnh, giảm kích thước CSS/JS và sử dụng lazy loading để tăng tốc trang web. 

Tuy nhiên, trải nghiệm người dùng là quan trọng nhất. Nếu việc cải thiện điểm số hiệu suất ảnh hưởng đến trải nghiệm người dùng (ví dụ: chất lượng hình ảnh), thì không cần phải quá chú trọng. Điểm 75 là mức chấp nhận được trong phần này.

2. Best Practices

Best Practices là một loạt các tiêu chuẩn bạn cần tuân thủ để trang web hoạt động tốt và an toàn. Điều này có thể bao gồm các vấn đề như: Bảo mật, hiệu suất và các yếu tố khác có thể ảnh hưởng đến trải nghiệm người dùng. Điểm số tuyệt đối bạn nên đạt được ở đây là 100. 

3. Search Engine Optimization (SEO)

Chỉ số SEO trong Lighthouse giúp bạn kiểm tra xem trang web đã được tối ưu cho việc tìm kiếm hay chưa. Các yếu tố tối ưu sẽ gồm: Meta Description phù hợp, đặt từ khóa trong tiêu đề và nội dung, tối ưu code để tăng tốc độ tải trang, dùng Internal link và External link  đến website hữu ích.

4. Progressive Web App (PWA)

Progressive Web App (PWA) là loại ứng dụng web được thiết kế để hoạt động giống như một app di động. Nó cho phép người dùng hoạt động offline, gửi thông báo đẩy và có biểu tượng trên màn hình chính. PWA mang lại trải nghiệm mượt mà, tốc độ nhanh, truy cập mọi lúc mọi nơi.

Google đưa PWA vào Lighthouse đồng nghĩa nó đã trở thành tiêu chuẩn chấm điểm. Nếu không có đủ nguồn lực và thời gian, bạn có thể tạm bỏ qua yếu tố này. Tuy nhiên, có vài điều bạn bắt buộc phải làm:

  • Sử dụng HTTPS và định hướng traffic từ HTTP sang HTTPS.
  • Đảm bảo nội dung dễ nhìn và truy cập được.
  • Thêm thẻ <meta name=”viewport”> để điều chỉnh độ rộng và tỷ lệ hiển thị.
  • Hiển thị nội dung đầy đủ ngay cả khi có lỗi Javascript xảy ra.

5. Accessibility

Accessibility (khả năng truy cập) là yếu tố quan trọng được Lighthouse đánh giá. Chỉ số Accessibility giúp bạn hiểu rõ trang web của mình có thân thiện với tất cả mọi người hay không. Điểm cần đạt ở mục này là 100. 

Các vấn đề thường gặp có thể là chữ quá nhỏ, độ tương phản giữa chữ và nền không đủ (chữ bị mờ). Điều đó dẫn đến giảm khả năng đọc và hiểu thông tin của người xem. 

Cách sử dụng Google Lighthouse

1. Lighthouse trong Chrome DevTools

  • Bước 1: Mở website cần kiểm tra bằng Google Chrome.
  • Bước 2: Nhấn “F12” hoặc sử dụng tổ hợp phím “Ctrl-Shift-i” để mở Developer Tools.
  • Bước 3: Chọn mục “Lighthouse” như ảnh sau đây.
Giao diện báo cáo của Lighthouse 
Giao diện báo cáo của Lighthouse 
  • Bước 4: Chọn thiết bị (Desktop/ Mobile), sau đó chọn các mục bạn muốn phân tích. Để có cái nhìn toàn diện, bạn nên chọn tất cả các mục.
  • Bước 5: Nhấn “Analyze page load” và đợi khoảng 60-90 giây. Báo cáo sẽ tự động hiện lên.
Bấm vào Analyze page load 
Bấm vào Analyze page load 

2. Extension Lighthouse trên Chrome 

  • Bước 1: Truy cập Chrome Webstore, tìm và cài đặt Lighthouse For Chrome Extension.
Tìm tiện ích mở rộng Lighthouse 
Tìm tiện ích mở rộng Lighthouse 
  • Bước 2: Mở trang web bạn muốn kiểm tra, nhấn vào biểu tượng Lighthouse trên khu vực “tiện ích mở rộng” của Google hoặc mở menu Chrome và chọn Lighthouse để kích hoạt.
  • Bước 3: Nhấn “Generate report” để bắt đầu quá trình kiểm tra và chờ báo cáo.
Nhấn vào ô Generate report để kiểm tra
Nhấn vào ô Generate report để kiểm tra

3. Lighthouse trong Node Command Line Tool

  • Bước 1: Tải Google Chrome về máy tính của bạn.
  • Bước 2: Cài đặt phiên bản LTS (Long-Term Support) mới nhất của Node.js.
Cài đặt LTS của Node
Cài đặt LTS của Node
  • Bước 3: Mở “Command Line” và cài đặt “Lighthouse.-g flag (Global Module)” bằng lệnh “npm install -g lighthouse”.
  • Bước 4: Chạy kiểm tra website bằng lệnh “lighthouse <URL>”.
  • Bước 5: Xem các tùy chọn khả dụng bằng lệnh “lighthouse –help”.

Lưu ý: Dùng Lighthouse qua Chrome DevTools là lựa chọn tốt nhất vì nó nhanh chóng và không yêu cầu cài đặt thêm. Chrome Extension chỉ nên dùng khi bạn không thể truy cập DevTools.

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

1. Chia sẻ báo cáo định dạng JSON 

  • Đối với Chrome DevTools: Nhấn vào “dấu 3 chấm” (ở góc trên, bên phải), chọn  “Save as JSON” để tải file JSON về máy và chia sẻ.
Chọn phần Save as JSON 
Chọn phần Save as JSON 
  • Đối với Command Line: Chạy lệnh “lighthouse –output json –output-path <đường dẫn lưu file.json>”.
  • Đối với Chrome Extension: Nhấn “dấu 3 chấm” (ở góc trên, bên phải) sau đó chọn “Save as JSON”.
Chọn mục Save as JSON
Chọn mục Save as JSON

Để xem báo cáo, hãy mở Lighthouse Viewer trên Chrome, kéo file JSON vào trang web. Hoặc bạn cũng có thể chọn file JSON thông qua cửa sổ dialog.

2. Chia sẻ báo cáo định dạng GitHub Gist 

Sử dụng Chrome Extension:

  • Bước 1: Nhấn “dấu 3 chấm” (ở góc trên, bên phải) chọn “Save as Gist”. Báo cáo sẽ mở trong Viewer tại https://googlechrome.github.io/lighthouse/viewer/.
Chọn phần Save as Gist
Chọn phần Save as Gist
  • Bước 2: Nhấn “Share” để mở cửa sổ quyền truy cập GitHub, chọn tiếp để lưu vào Gist của bạn.

Sử dụng Phiên bản CLI:

  • Copy và paste nội dung từ file JSON output vào một Gist mới. Lưu ý: tên file phải có dạng “.lighthouse.report.json”.

Để xem báo cáo Gist, hãy thêm ?gist=<ID> vào URL của Viewer. Ví dụ: https://googlechrome.github.io/lighthouse/viewer/?gist=<ID của Gist>.

Các cập nhật trong Google Lighthouse 3.0

1. Tăng tốc độ và tính chính xác

Một trong những điểm mạnh của Lighthouse 3.0 là khả năng phân tích và kiểm tra nhanh hơn so với các phiên bản trước. Điều này không chỉ tiết kiệm thời gian cho các nhà phát triển mà còn giảm thiểu sai số, tạo nên một bức tranh chính xác hơn về hiệu suất của website.

2. Giao diện thân thiện 

Phiên bản mới này có giao diện người dùng (GUI) được đơn giản hóa, giúp việc sử dụng và tương tác với công cụ trở nên dễ dàng hơn. Nó sẽ đặc biệt hữu ích cho những người mới tiếp cận công cụ này.

3. Tùy chọn cấu hình trên Node 

Nếu bạn đang sử dụng phiên bản Node của Lighthouse, hãy lưu ý là nó tương thích với các tùy chọn cấu hình tương tự phiên bản dòng lệnh (CLI). Điều này giúp nhất quán quy trình kiểm tra và giảm thời gian cần thiết để cấu hình công cụ.

4. Xuất kết quả sang CSV 

Lighthouse 3.0 cũng thêm khả năng xuất kết quả của báo cáo phân tích sang định dạng CSV. Cập nhật này sẽ rất thuận tiện nếu bạn muốn nghiên cứu dữ liệu bằng các công cụ thống kê hoặc tạo các biểu đồ để phân tích.

5. Các tiêu chuẩn kiểm tra mới 

Một số kiểm tra mới đã được thêm vào, bao gồm:

  • First Contentful Paint: Đây là thời gian từ khi người dùng bắt đầu tải trang đến khi họ thấy được nội dung đầu tiên. Thông số này quan trọng trong việc đánh giá trải nghiệm người dùng.
  • Kiểm tra tính hợp lệ của robots.txt: Nếu file robots.txt có vấn đề, Lighthouse sẽ thông báo giúp bạn tối ưu hóa SEO.
  • Thay thế GIF bằng video cho nội dung động: Đây là một gợi ý tốt để giảm dung lượng tải và tăng tốc độ trang web.

Core Web Vitals trong Google Lighthouse

Core Web Vitals là bộ 3 chỉ số đánh giá trải nghiệm người dùng trên một website, bao gồm: 

  • LCP (Largest Contentful Paint)
  • FID (First Input Delay)
  • CLS (Cumulative Layout Shift)

Các chỉ số này được Google xem là quan trọng và có ảnh hưởng đến thứ hạng tìm kiếm. Nó giúp bạn có nhận định chính xác hơn về hiệu suất website từ góc độ người dùng.

LCP – Tốc độ tải trang

LCP (Largest Contentful Paint) là chỉ số đo lường thời gian tải xong phần nội dung lớn nhất trên màn hình, thường là ảnh hoặc video. Nó rất quan trọng vì đại diện cho “cảm nhận” đầu tiên của người dùng về hiệu suất trang web (LCP nhanh thường dưới 2.5 giây).

FID – Tương tác

FID (First Input Delay) là chỉ số đánh giá thời gian từ khi người dùng tương tác lần đầu với trang (nhấp vào liên kết, nút,…) cho đến khi trình duyệt xử lý yêu cầu này. FID thấp (dưới 100ms) biểu thị một trải nghiệm tương tác tốt, người dùng không phải chờ đợi.

CLS – Ổn định hình ảnh

CLS (Cumulative Layout Shift) là chỉ số đo lường sự ổn định của layout trang web khi người dùng đang truy cập. 

Nếu các phần tử trên trang “nhảy” quá nhiều trong quá trình tải, CLS sẽ cao. Một CLS thấp (dưới 0.1) là mục tiêu, cho thấy website không gây khó chịu cho người dùng bằng cách thay đổi vị trí các phần tử bất ngờ.

So sánh PageSpeed Insights và Google Lighthouse

Tiêu ChíPageSpeed InsightsGoogle Lighthouse
Đối tượng sử dụngDành cho mọi người, không yêu cầu kỹ thuật.Chủ yếu cho các nhà phát triển và người dùng có kiến thức kỹ thuật.
Giao diệnTrực quan, dễ sử dụng.Có nhiều tùy chọn, yêu cầu biết cách sử dụng các công cụ DevTools của trình duyệt.
Thực hiện TestChỉ cần nhập URL và nhấn “Analyze”.Cần phải mở DevTools, hoặc sử dụng dòng lệnh, có tùy chọn cấu hình phức tạp hơn.
Dữ liệu đo lườngTập trung vào hiệu suất trang web và UX.Cung cấp thông tin đa dạng từ hiệu suất, tính khả dụng, PWA, và cả best practices.
Kiểm tra đa nền tảngKiểm tra trên desktop và mobile.Kiểm tra trên desktop và mobile, nhưng có thêm tùy chọn cấu hình chi tiết hơn.
Tính năngĐưa ra đề xuất để cải thiện hiệu suất.Đưa ra đề xuất, đánh giá SEO, PWA,…
Độ chính xácTương đối chính xác, nhưng ít thông tin chi tiết.Cung cấp thông tin chi tiết và chính xác hơn, có thể dùng trong quá trình phát triển.
Công nghệ sử dụngDựa trên Lighthouse nhưng được tùy chỉnh.Sử dụng nguyên bản, không qua tùy chỉnh, có khả năng tùy chỉnh cao.

Lưu ý khi dùng Google Lighthouse là gì? 

  • Đảm bảo kết nối internet ổn định.
  • Nên cập nhật phiên bản mới để có kết quả chính xác nhất.
  • Đọc hướng dẫn để hiểu rõ các chỉ số.
  • Chạy kiểm tra nhiều lần để có cái nhìn tổng quan.
  • Tắt các tiện ích mở rộng trình duyệt khi kiểm tra.
  • Sử dụng chế độ ẩn danh để tránh ảnh hưởng của cookie và cache.
  • So sánh kết quả với đối thủ cạnh tranh và cải thiện.
  • Kiểm tra hiệu suất trên cả 2 nền tảng desktop và mobile.
  • Chạy kiểm tra định kỳ để theo dõi sự phát triển/giảm sút.
  • … 

Lời kết 

Nếu bạn quan tâm đến việc cải thiện tốc độ và hiệu suất của website, Google Lighthouse là công cụ không nên bỏ lỡ. Với bảng đánh giá chi tiết và các đề xuất cụ thể, Lighthouse giúp bạn phát hiện ra những điểm yếu của website, cách khắc phục và tối ưu vấn đề. Đừng quên liên tục “ghé thăm” Kind Content đề biết thêm kiến thức miễn phí nhé!

Chia sẻ lên:
Picture of Lâm Nguyễn
Lâm Nguyễn
Mình là Lâm, Founder của Kind Content và Moderator của cộng đồng Tâm Sự Con Sen. Mình đã triển khai hơn 200 dự án Content & SEO cho nhiều công ty từ bé đến lớn, điển hình như TNS, Vietnix, FPT,... Đồng thời mình cũng đam mê với việc phát triển bản thân qua những khóa học, sách, phim nổi tiếng trên thế giới.
Đăng ký nhận tin hữu ích

Liên hệ với chuyên gia
Kind Content hôm nay