Khi nói đến việc xếp hạng website cao hơn trong kết quả tìm kiếm, tốc độ trang web là yếu tố không thể bỏ qua. Nó không chỉ làm hài lòng người dùng, mà còn chuyển hóa thành khả năng hiển thị tăng cao.畢竟, không ai muốn nhấp vào trang và chờ mãi để nó tải. Bạn xem TechCult ví dụ, blog của chúng tôi tải khá nhanh, phải không? Haha, đùa chút thôi, nếu bạn lo lắng website của mình không xếp hạng được vì tốc độ thấp, Google Lighthouse ở đây để giúp bạn. Trong bài viết hôm nay, chúng tôi sẽ chỉ cho bạn cách dùng Google Lighthouse để kiểm tra hiệu suất.
Có một câu thành ngữ thường nói rằng ấn tượng đầu tiên là ấn tượng cuối cùng. Về mặt đó, thường thì website tải nhanh sẽ đứng vững về trải nghiệm người dùng tốt hơn, điều này cuối cùng có thể dẫn đến tỷ lệ chuyển đổi cao hơn. Ngay cả các công cụ tìm kiếm như Google cũng xếp hạng website tải nhanh hơn cao hơn trong kết quả tìm kiếm.
Google Lighthouse là công cụ tự động mã nguồn mở giúp các nhà phát triển và chủ sở hữu website, đánh giá & cải thiện chất lượng trang web. Nó có bài kiểm tra cho hiệu suất, khả năng truy cập, thực hành tốt nhất, và SEO cho cả mobile và desktop. Dựa trên báo cáo chi tiết và khuyến nghị của nó, người dùng có thể tối ưu hóa hiệu suất trang web để có sự tương tác người dùng tốt hơn. Lighthouse có thể chạy trên bất kỳ trang web nào, công khai hoặc riêng tư. Hãy xem nó hoạt động như thế nào và bạn có thể dùng nó như thế nào.
Phương pháp 1: Thêm Và Chạy Lighthouse Trực Tiếp
Lighthouse cũng có sẵn cho người dùng dưới dạng tiện ích mở rộng Google, bạn có thể tải để chạy bài kiểm tra trên trình duyệt Chrome. Làm theo các bước:
1. Truy cập trang Chrome Web Store cho tiện ích mở rộng Lighthouse trên bất kỳ trình duyệt web nào.
2. Nhấp vào Thêm vào Chrome (Add to Chrome).
3. Chọn Thêm tiện ích (Add extension) để xác nhận.
4. Sau khi thêm, khởi chạy trang web trên trình duyệt mà bạn muốn phân tích.
5. Nhấp vào biểu tượng Tiện ích mở rộng (Puzzle) bên cạnh thanh địa chỉ và chọn Lighthouse.
6. Nhấp vào Tạo báo cáo (Generate report).
Đó là xong! Trong vài giây, Lighthouse sẽ tạo báo cáo chi tiết phân tích trang web bạn chạy kiểm tra.
Phương pháp 2: Sử Dụng PageSpeed Insights
Google PageSpeed Insights cũng là công cụ kiểm tra hiệu suất web dùng Lighthouse làm движок phân tích. Bạn có thể dùng nó để tạo báo cáo cho website. Làm theo các bước:
1. Truy cập trang web PageSpeed Insights.
2. Nhập URL trang web vào trường văn bản và nhấp vào Phân tích (Analyse).
Sau khi kiểm tra xong, bạn sẽ nhận được Báo Cáo Trải Nghiệm Người Dùng Chrome cho thấy kết quả mà người dùng thực tế trải nghiệm.
Phần Chẩn đoán vấn đề hiệu suất (Diagnose performance issues) đại diện cho điểm số Lighthouse. Bạn có thể kiểm tra kết quả cho cả Mobile và Desktop.
Phương pháp 3: Chạy Lighthouse Trong DevTools
Lighthouse có panel riêng trong Google Chrome DevTools mà bạn cũng có thể dùng để kiểm tra hiệu suất nếu website chạy trên local server hoặc các trang yêu cầu đăng nhập. Cách làm:
1. Truy cập trang web bạn muốn kiểm tra.
2. Nhấp chuột phải bất kỳ đâu trên trang và chọn Kiểm tra (Inspect) từ menu.
3. Nhấp vào biểu tượng >> (More tabs) và chọn Lighthouse từ menu ngữ cảnh.
4. Nhấp vào nút Phân tích tải trang (Analyze page load) ở góc trên bên phải và chờ kết quả sẵn sàng.
Lưu ý: Chọn Thiết bị (Device) phù hợp và giữ tất cả Danh mục (Categories) được bật.
Bạn cũng có thể thay đổi chế độ. Lighthouse trong DevTools cung cấp ba chế độ kiểm tra:
- Navigation (Điều hướng): Hiển thị kết quả tổng thể bao gồm Hiệu suất, Khả năng truy cập, và SEO.
- Timespan (Khoảng thời gian): Hiển thị kết quả dựa trên thời gian trang tải và tương tác với người lướt web. Bạn cần tương tác với trang trong khi kiểm tra chạy.
- Snapshot (Ảnh chụp nhanh): Tính điểm cho trang hiện tại
Đọc thêm: 31 Công Cụ Cào Dữ Liệu Web Tốt Nhất
Phương pháp 4: Dùng Module Lighthouse Với Dòng Lệnh
Lighthouse cũng có sẵn dưới dạng module Node mà bạn có thể tích hợp vào hệ thống tích hợp liên tục và dùng như dòng lệnh hoặc lập trình. Nó chỉ yêu cầu một phiên bản Node. Nếu bạn đã cài Node.js trên PC, làm theo các bước:
1. Đăng nhập vào server và chạy lệnh sau để cài đặt module Lighthouse toàn cục trên thiết bị:
npm install -g lighthouse
2. Sau khi cài đặt, chạy lệnh sau để thực hiện kiểm tra Lighthouse:
lighthouse -- view <url>
Bạn có thể xem tất cả tùy chọn có sẵn bằng lệnh sau.
lighthouse --help
Lighthouse Tính Điểm Như Thế Nào
Google Lighthouse kết hợp và đánh giá các khía cạnh của các chỉ số hiệu suất website, như Hiệu suất, Khả năng truy cập, Thực hành tốt nhất, SEO, và PWA. Sau khi kiểm tra thành công, nó tạo báo cáo bao gồm điểm cho từng khía cạnh, cũng như khuyến nghị cải tiến cần thiết để cải thiện hiệu suất và tương tác người dùng. Website thường được chấm trên thang 0 đến 100.
Hiệu Suất (Performance)
Lighthouse phân tích tốc độ tải trang web. Điểm hiệu suất được tính bằng cách tính đến các chỉ số sau –
- First Contentful Paint (FCP): Mạnh nhanh phần tử đầu tiên từ nội dung được vẽ lên màn hình
- Largest Contentful Paint (LCP): Đo thời gian để phần tử nội dung lớn nhất hiển thị
- Cumulative Layout Shift (CLS): Đo lượng dịch chuyển bố cục bất ngờ xảy ra khi tải trang để đánh giá độ ổn định thị giác. CLS thấp cho thấy website ổn định.
- Total Blocking Time: Đo thời gian luồng chính bị chặn và không phản hồi input người dùng.
- Speed Index: Chỉ ra nhanh bao nhiêu nội dung trang hoàn toàn hiển thị
Các chỉ số này đo lường tốc độ tải và độ ổn định thị giác của website. Vài yếu tố ảnh hưởng báo cáo này, như kích thước và số lượng hình ảnh, số plugin dùng, và hiệu quả code website.
Lighthouse tính điểm bằng cách lấy trung bình có trọng số của các giá trị chỉ số. Tự nhiên, các phép đo có trọng số cao hơn có tác động lớn hơn đến điểm Hiệu suất tổng. Điểm chỉ số không hiển thị trong báo cáo nhưng được tính toán phía sau. Bạn có thể nhấp vào tùy chọn Xem máy tính (See calculator) để truy cập tính toán chi tiết các yếu tố ảnh hưởng website.
Khả Năng Truy Cập (Accessibility)
Đây là điểm tập trung vào người dùng đo lường việc người khuyết tật dễ dàng truy cập website đến đâu. Nó bị ảnh hưởng bởi các yếu tố như sự hiện diện của alt text trên hình ảnh, sử dụng thuộc tính ARIA, và khả năng truy cập bằng bàn phím. Mỗi bài kiểm tra khả năng truy cập hoặc là pass hoặc là fail. Trang không nhận điểm cho việc pass một phần bài kiểm tra, khác với bài kiểm tra Hiệu suất.
- Alt Text Cho Hình Ảnh: Tất cả hình ảnh trên trang nên có alt text phù hợp và mô tả, vì cần thiết cho người khiếm thị dựa trên screen reader để hiểu hình ảnh.
- HTML Ngữ Nghĩa (Semantic HTML): Sử dụng đúng các phần tử HTML ngữ nghĩa như title, heading, list, v.v giúp screen reader và phần mềm hỗ trợ khác hiểu cấu trúc trang.
- Độ Tương Phản Màu (Color Contrast): Độ tương phản màu giữa văn bản và nền nên đạt chuẩn Web Content Accessibility Guidelines. Độ tương phản đủ đảm bảo văn bản đọc được cho người thị lực kém hoặc mù màu.
Đọc thêm: Cách Xây Dựng Website Dùng ChatGPT
Thực Hành Tốt Nhất (Best Practices)
Lighthouse đo lường website tuân thủ thực hành tốt nhất & tiêu chuẩn lập trình web đến đâu và cho điểm dựa trên đó. Nó kiểm tra sử dụng tính năng JavaScript hiện đại và kết nối an toàn (HTTPS) và bị ảnh hưởng bởi các yếu tố như sử dụng minification và nén, hiện diện header bảo mật, và sử dụng file robots.txt. Một số bài kiểm tra phổ biến bao gồm:
- Tránh Thư Viện JavaScript Lớn
- Tránh CSS Không Dùng
- Bật Nén Văn Bản
- Loại Bỏ Resource Chặn Render
- Tận Dụng Cache Trình Duyệt
- Phục Vụ Static Assets Với Chính Sách Cache Hiệu Quả
SEO
SEO đo lường website được tối ưu hóa cho công cụ tìm kiếm đến đâu. Nó bị ảnh hưởng bởi các yếu tố như sự hiện diện của meta description và title tag, sử dụng từ khóa liên quan, và cấu trúc nội dung website. Điểm được tính bằng trung bình điểm cho các bài kiểm tra sau:
- Tiêu Đề Tài Liệu (Document Title)
- Mô Tả (Description)
- Đầu Đề (Headings)
- Hình Ảnh (Images)
- Liên Kết (Links)
- Meta Description
- Robots.txt
Đọc thêm: 27 Dịch Vụ Hosting Website Miễn Phí Tốt Nhất
Cách Diễn Giải Kết Quả
Lighthouse chuyển đổi mỗi giá trị chỉ số thô thành điểm chỉ số 0 đến 100. Điểm càng cao càng tốt. Điểm chỉ số được tô màu theo các khoảng:
- 0 đến 49 (Tam giác đỏ): Kém (Poor)
- 50 đến 89 (Vuông cam): Cần cải thiện (Needs Improvement)
- 90 đến 100 (Tròn xanh): Tốt (Good)
Khi chạy kiểm tra trên cùng website, thường quan sát được biến động điểm tổng thể. Sự biến thiên này có thể do vài yếu tố.
- Mỗi phân tích chỉ cung cấp thông tin về hiệu suất tải một trang. Vì không có hai lần tải trang giống hệt nhau, thời gian tải tự nhiên khác nhau.
- Tốc độ trang có thể bị ảnh hưởng bởi nội dung động như quảng cáo hoặc yếu tố thay đổi thường xuyên, tiện ích mở rộng trình duyệt thay đổi yêu cầu mạng và hoạt động nền trên PC.
- Điểm đạt được trong môi trường khác nhau, như PageSpeed Insights và máy tính cục bộ, có thể không so sánh trực tiếp được do khác biệt phần cứng và mạng.
Cách Cải Thiện Điểm Lighthouse
Lighthouse cung cấp cả dữ liệu lab (kiểm tra mô phỏng) và field data (dữ liệu người dùng thực) để đánh giá hiệu suất trang web. Field data cung cấp thông tin về cách người dùng thực tế trải nghiệm trang, trong khi lab data hữu ích để kiểm tra thay đổi và cải tiến.
Bắt đầu bằng cách tập trung vào khuyến nghị trong lĩnh vực hiệu suất. Website tải nhanh sẽ cải thiện trải nghiệm người dùng và có thể tăng xếp hạng SEO. Khi điểm hiệu suất đã cải thiện, bạn có thể bắt đầu tập trung vào khuyến nghị các lĩnh vực khác. Vì khả năng truy cập và SEO là thành phần thiết yếu trong chất lượng tổng thể website, đáng giá đầu công sức nâng cao các lĩnh vực này.
Đọc thêm: Zyro vs Wix: Trình Xây Dựng Website Nào Bạn Nên Chọn?
Mẹo Bổ Sung Cho Người Mới
Nếu bạn vừa thiết kế và ra mắt website, đây là thêm vài con trỏ bạn nên nhớ:
- Đừng bị choáng ngợp bởi nhiều gợi ý trong báo cáo Lighthouse. Bắt đầu với lời khuyên quan trọng nhất và làm theo danh sách.
- Báo cáo Lighthouse có thể dùng để theo dõi tiến trình theo thời gian. Điểm Lighthouse nên cải thiện khi bạn thực hiện khuyến nghị.
- Nhớ kiểm tra website trên nhiều thiết bị và trình duyệt. Vì báo cáo Lighthouse dựa trên một lần kiểm tra, quan trọng là kiểm tra website trên nhiều thiết bị và trình duyệt để đảm bảo nó hoạt động tốt cho tất cả người dùng.
Chúng tôi hy vọng hướng dẫn của chúng tôi đã giúp bạn hiểu cách dùng Google Lighthouse để kiểm tra hiệu suất website và do đó cải thiện nó. Nếu bạn có bất kỳ thắc mắc hoặc góp ý nào cho chúng tôi, hãy cho chúng tôi biết trong phần bình luận. Hãy tiếp tục theo dõi TechCult để có thêm nhiều blog hữu ích như vậy.