Friday, March 29, 2024

Điểm Số Xanh Google Lighthouse ( phần 1)

Điểm Số Xanh Google Lighthouse 

Điểm Số Xanh Google Lighthouse 
                                                                        Điểm Số Xanh Google Lighthouse

Google Lighthouse. Được dịch từ tiếng AnhGoogle Ngọn hải đăng là một công cụ tự động. Nguồn mở để đo lường chất lượng của các trang web. Nó có thể được chạy trên bất kỳ trang web nào, công khai hoặc yêu cầu xác thực. Google Lighthouse kiểm tra hiệu suất, khả năng truy cập và tối ưu hóa công cụ tìm kiếm của các trang web.

1. Google Lighthouse là gì?

 Google Lighthouse 
                                       Google Lighthouse  là gì
  • Lighthouse là công cụ mã nguồn mở tự động của Google dùng để phân tích, đo lường và cải thiện chất lượng website. Bạn có thể sử dụng công cụ này cho tất cả các loại website khác nhau (từ trang web công khai cho đến trang web yêu cầu xác thực). Các ứng dụng của Lighthouse là gì?
  • Lighthouse giúp bạn kiểm tra toàn diện các tiêu chí cần thiết để web hoạt động hiệu quả.  Gồm: hiệu suất, khả năng truy cập, progressive web app, khả năng SEO,… Và rất nhiều mặt khác nữa. 
  • Có thể nói Lighthouse là công cụ toàn diện nhất của Google hiện nay để giúp người dùng đánh giá trang web một cách chính xác nhất. Ngoài khả năng phân tích bao quát, công cụ này cũng đưa ra  các lời khuyên hữu ích để bạn nâng cao chất lượng website.

2. Sử dụng Google Lighthouse như thế nào?

Cách sử dụng Google Lighthouse 
                                  Cách sử dụng Google Lighthouse
  • 3 cách để sử dụng Google Lighthouse:

2.1. Chạy Lighthouse trong Chrome DevTools:

  • Audits panel của Chrome DevTools hiện đang được cấp quyền áp dụng Google Lighthouse cho website. Bạn cần thực hiện các bước sau để nhận được báo cáo phân tích web:
    • Bước 1: Truy cập website bạn muốn kiểm tra bằng trình duyệt Google Chrome.
    • Bước 2: Nhấn F12 hoặc bấm tổ hợp phím Ctrl + Shift + I để mở Developer Tools. Sau đó chọn tab Audits.
    • Bước 3: Click Perform an audit DevTools để hiển thị danh sách các audit categories.
    • Bước 4: Đánh tick vào các mục bạn muốn phân tích (nên chọn tất cả các mục để được báo cáo hoàn chỉnh).
    • Bước 5: Click vào nút Run audit. Đợi 60-90s, Lighthouse sẽ tự động hiển thị kết quả phân tích của trang.

2.2. Cài đặt và chạy Lighthouse trong Node Command line tool:

Bạn cần đặt Node module theo các bước sau:

  • Bước 1: Download Google Chrome for Desktop.
  • Bước 2: Cài đặt phiên bản Long-Term Support mới nhất của Node.
  • Bước 3: Cài đặt Lighthouse.-g flag (Global Module) bằng lệnh: “npm install -g lighthouse.
  • Bước 4: Tạo một audit bằng lệnh: “lighthouse <url>.”
  • Bước 5: Hiển thị tùy chọn audit: “lighthouse –help.

2.3. Chạy Lighthouse bằng Chrome Extension:

  • Cách làm như sau:
    • Bước 1: Vào Chrome Webstore. Tìm Lighthouse Chrome Extension. Add to Chrome để cài đặt tiện ích Lighthouse vào Google Chrome của bạn.
    • Bước 2: Truy cập vào trang web muốn tiến hành Audit.
    • Bước 3: Click vào ký hiệu Extension Lighthouse nằm ở góc phải thanh Chrome address bar. Nếu không xuất hiện, bạn hãy mở menu của Chrome và click vào Lighthouse để kích hoạt Extension.
    • Bước 4: Click vào Generate reportLighthouse sẽ tiến hành chạy kiểm tra website của bạn, sau đó báo cáo kết quả.
Lưu ý:
  • sử dụng Lighthouse trên Chrome DevTools vẫn là cách nhanh chóng và hiệu quả nhất. 
  • Nó cung cấp những tính năng tương tự như Chrome Extension nhưng không yêu cầu cài đặt.
  • Nếu không thể sử dụng Chrome DevTools. Chrome Extension mới là phương án nên được chọn.

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

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

3.1. Chia sẻ báo cáo bằng JSON:

  • Lighthouse Viewer cần có JSON output để chia sẻ báo cáo phân tích website. Dưới đây là các hướng dẫn để lấy JSON output, tùy thuộc vào Lighthouse workflow mà bạn đang dùng:
    • Nếu dùng Lighthouse trong Chrome DevTools. Bạn chỉ cần click vào nút Download Report để tải báo cáo về và chia sẻ.
    • Nếu dùng Lighthouse trong Command line, bạn cần chạy lệnh sau:  “lighthouse-output json-output-path <path/for/output.json>
    • Nếu dùng Lighthouse Extension. Sau khi nhận được báo cáo, bạn cần click vào nút Export – Save as JSON.
  • Khi muốn xem các dữ liệu phân tích. Chỉ việc mở Lighthouse Viewer trong Google Chrome. Sau đó kéo file JSON vào trang Viewer để báo cáo được hiển thị.
  • Bạn cũng có thể click chuột vào một vị trí bất kỳ trên trang, lúc này một cửa sổ mới sẽ xuất hiện và việc của bạn là chọn file JSON mà mình muốn xem.

3.2 Chia sẻ báo cáo dưới dạng GitHub Gists:

  • Bạn có thể chia sẻ kết quả phân tích website của mình dưới dạng GitHub Gists nếu không muốn xem báo cáo bằng file JSON:
    • Để xuất báo cáo dưới dạng Gist từ Chrome Extension bạn cần thực hiện các bước sau:
    • Bước 1: Sau khi nhận được báo cáo, click vào Export – Open In Viewer. Khi đó, báo cáo sẽ được mở ra trong Viewer tại vị trí đường link: https://googlechrome.github.io/lighthouse/viewer/.
    • Bước 2: Trong Viewer, click vào nút Share. Lúc đó, màn hình sẽ xuất hiện một cửa sổ yêu cầu quyền truy cập dữ liệu GitHub để xem và lưu vào Gist của bạn.
    • Để xuất file báo cáo phân tích Gist từ phiên bản CLI của Lighthouse, bạn cần tạo file Gist thủ công bằng cách copy-paste dữ liệu từ file JSON output vào Gist. Lưu ý, tên file báo cáo Gist phải có dạng .lighthouse.report.json.
    • Để xem báo cáo phân tích website lưu dưới dạng Gist. Cần thêm ?gist=<ID> vào URL của Viewer. Trong đó, <ID> chính là ID của Gist. Như vậy, URL lúc này sẽ có dạng: https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
Github là gì?
  • GitHub là dịch vụ server quản lý nhiều phiên bản code. Giúp lưu trữ chúng và cả nội dung dự án của hai hay nhiều tài khoản của lập trình viên.
  • Đây cũng là nơi giúp các lập trình viên post các code, kế hoạch của mình lên. Để các thành viên khác trong nhóm dự án theo dõi, copy các đoạn code đó về và tiếp tục phần việc của mình. 

4. Các tiêu chuẩn Audit của Google Lighthouse:

google lighthouse la gi 11

Bạn có thể audit (kiểm tra) những website đang phát triển trên localhost hoặc private server một cách dễ dàng. Gồm:

4.1. Google Lighthouse – Performance:

  • Performance (hiệu suất của website) sẽ phụ thuộc vào rất nhiều yếu tố: 
    • Cả back-end lẫn front-end.
  • Để được Lighthouse đánh giá cao. Bạn cần: Optimize images, minify Css/Js, tăng tốc website bằng lazy loading,… 
  • Tuy nhiên điều quan trọng nhất là tăng trải nghiệm của người dùng. không cần thiết phải hy sinh các yếu tố nâng cao trải nghiệm (VD: chất lượng hình ảnh) để đạt được số điểm performance cao. Mức đánh giá chấp nhận được ở mục hiệu suất này là 75 điểm.

4.2. Google Lighthouse – Progressive Web App:

  • Google thêm tính năng này vào Lighthouse là một dự báo nhằm biến Progressive Web App trở thành một tiêu chuẩn bắt buộc. Bạn chưa có đủ nguồn lực và thời gian thì chưa cần chú trọng phát triển hạng mục này. Nhưng có một vài mục bắt buộc phải thực hiện như:
    • Sử dụng HTTPS.
    • Chuyển hướng traffic HTTP qua HTTPS.
    • Nội dung nằm gói gọn trong tầm nhìn.
    • Có thẻ <meta name=”viewport”> cho phép thay đổi Width và Scale.
    • Trả về nội dung đầy đủ khi gặp lỗi Javascript.

4.3. Google Lighthouse – Accessibility:

  • Tính năng này sẽ cho bạn biết trang web của mình đã được tối ưu khả năng truy cập hay chưa. Có thể website đang tồn tại một số điểm cần cải thiện như:
    • Text quá nhỏ, độ tương phản của các đối tượng ở mức thấp,…

Bạn cần đạt được 100 điểm ở mục này.

4.4. Google Lighthouse – Best Practices:

  • Best Practices yêu cầu một số tiêu chuẩn bắt buộc của website. Điểm tuyệt đối 100 là mục tiêu phấn đấu mà bạn cần đạt được ở mục này.

4.5. Google Lighthouse – Đánh giá SEO:

  • Mục này yêu cầu bạn phải thực hiện đầy đủ các yếu tố để tối ưu hóa khả năng SEO cho website như:
    • Sử dụng meta description.
    • Đặt từ khóa vào tiêu đề bài viết, đơn giản hóa code.
    • Sử dụng external link và internal link,…

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

  • Lighthouse 3.0 là phiên bản mới nhất của Google.
  • Khả năng kiểm tra, phân tích nhanh hơn, ít cho sai số hơn và nhiều tính năng kiểm tra mới.
  • Một số tính năng mới đáng chú ý của Google Lighthouse 3.0:
    • Kiểm tra nhanh hơn, cho kết quả chính xác hơn với sai số/biến đổi nhỏ hơn.
    • Giao diện người dùng mới, đơn giản và thuận tiện hơn.
    • Phiên bản Node của Lighthouse 3.0 có thể tương thích với các tùy chọn cấu hình giống như phiên bản CLI.
    • Kết quả báo cáo có thể được xuất ra file CSV.
    • Audit mới: First Contentful Paint (báo cáo thời gian người dùng nhìn thấy phản hồi đầu tiên từ trang web). robots.txt is not valid, thay thế file GIF bằng video cho animated content,…
  • Lighthouse là một công cụ rất quan trọng trong quá trình xây dựng, thiết kế và tối ưu website.
  • Để trang web đạt được kết quả tốt hơn trên Google Search. Bạn cần hiểu rõ cách sử dụng công cụ này.
  • Hy vọng bài chia sẻ trên đây sẽ giúp ích cho bạn trong quá trình cải thiện hiệu suất website.
  • Để được hỗ trợ bạn tốt nhất, nên liên hệ nhà cung cấp dịch vụ thuê hosting và thiết kế website của bạn.
Rate this post
46,788FansLike

Bài Viết Mới