Khi nói đến việc xếp hạng trang web của bạn cao hơn trong kết quả của công cụ tìm kiếm, tốc độ trang web là yếu tố không thể bỏ qua. Nó không chỉ làm người dùng thích thú mà còn giúp tăng khả năng hiển thị. Rốt cuộc, không ai muốn nhấp vào một trang và đợi nó tải mãi. Bạn xem TechCult chẳng hạn, blog của chúng tôi tải khá nhanh phải không? Hah, gạt chuyện đùa sang một bên, Nếu bạn lo lắng rằng trang web của mình không thể xếp hạng vì tốc độ thấp, Google Lighthouse sẵn sàng trợ giúp bạn. Trong bài viết hôm nay, chúng tôi sẽ hướng dẫn bạn cách sử dụng Google Lighthouse để kiểm tra hiệu suất.
Người ta thường nói ấn tượng đầu tiên là ấn tượng cuối cùng. Trên lưu ý đó, thường một trang web tải nhanh sẽ có 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 tăng lên. Ngay cả các công cụ tìm kiếm như Google cũng xếp hạng các trang web tải nhanh hơn trong kết quả tìm kiếm.
Google Lighthouse là một công cụ tự động mã nguồn mở giúp các nhà phát triển và chủ sở hữu trang web đánh giá và cải thiện chất lượng của trang web. Nó có các cuộc kiểm tra về hiệu suất, khả năng truy cập, các phương pháp hay nhất và SEO cho cả thiết bị di động và máy tính để bàn. Dựa trên các báo cáo và đề xuất chi tiết, người dùng có thể tối ưu hóa hiệu suất của trang web để người dùng tương tác tốt hơn. Lighthouse có thể chạy trên bất kỳ trang web nào, có thể truy cập công khai hoặc riêng tư. Hãy xem nó hoạt động như thế nào và bạn có thể sử dụng nó như thế nào.
Phương pháp 1:Trực tiếp thêm và chạy Lighthouse
Lighthouse cũng có sẵn cho người dùng dưới dạng tiện ích mở rộng của Google mà bạn có thể tải xuống để chạy kiểm tra cho mình trên trình duyệt Chrome. Hãy làm theo các bước dưới đây:
1. Truy cập trang Cửa hàng Chrome trực tuyến để tìm tiện ích Lighthouse trên bất kỳ trình duyệt web nào.
2. Nhấp vào Thêm vào Chrome .
3. Chọn Thêm tiện ích mở rộng để xác nhận.
4. Sau khi thêm, hãy 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 (Câu đố) bên cạnh thanh địa chỉ và chọn Lighthouse .
6. Nhấp vào Tạo báo cáo .
Thế thôi! Trong vài giây, Lighthouse sẽ tạo báo cáo chi tiết phân tích trang web mà bạn đã chạy thử nghiệm.
Phương pháp 2:Sử dụng PageSpeed Insights
Google PageSpeed Insights cũng là một công cụ kiểm tra hiệu suất web sử dụng Lighthouse làm công cụ phân tích. Do đó, bạn có thể sử dụng nó để tạo báo cáo cho trang web của mình. Thực hiện 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 .
Sau khi quá trình thử nghiệm hoàn tất, bạn sẽ nhận được Báo cáo trải nghiệm người dùng Chrome hiển thị kết quả mà người dùng thực đã trải nghiệm.
Phần Chẩn đoán các vấn đề về hiệu suất thể hiện điểm Lighthouse. Bạn có thể kiểm tra kết quả cho cả Thiết bị di động và Máy tính để bàn.
Phương pháp 3:Chạy Lighthouse trong DevTools
Lighthouse có bảng điều khiển trong Google Chrome DevTools mà bạn cũng có thể sử dụng để kiểm tra hiệu suất nếu trang web của bạn chạy trên máy chủ cục bộ hoặc cho các trang web yêu cầu đăng nhập. Đây là cách thực hiện:
1. Truy cập trang web bạn muốn kiểm tra.
2. Nhấp chuột phải vào bất kỳ đâu trên trang và chọn Kiểm tra từ menu.
3. Nhấp vào biểu tượng >> (Tab khác) và chọn Ngọn hải đăng từ menu ngữ cảnh.
4. Nhấp vào Phân tích tải trang ở trên cùng bên phải và đợi cho đến khi có kết quả.
Lưu ý: Chọn Thiết bị một cách thích hợp và giữ tất cả Danh mục đã bật.
Bạn cũng có thể thay đổi chế độ. Lighthouse trong DevTools cung cấp ba chế độ thử nghiệm:
- Đ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.
- Khoảng thời gian: Hiển thị kết quả dựa trên thời gian tải trang và tương tác với người lướt. Bạn sẽ cần phải tương tác với trang trong khi thử nghiệm đang chạy.
- Ảnh chụp nhanh: Tính điểm cho trang hiện tại
Cũng đọc: 31 công cụ quét web tốt nhất
Phương pháp 4:Sử dụng mô-đun Lighthouse bằng dòng lệnh
Lighthouse cũng có sẵn dưới dạng mô-đun Node mà bạn có thể tích hợp vào hệ thống tích hợp liên tục của mình và sử dụng dưới dạng dòng lệnh hoặc theo chương trình. Tất cả những gì nó yêu cầu là một phiên bản của nút. Nếu bạn đã cài đặt Node.js trên PC, hãy làm theo các bước bên dưới:
1. Đăng nhập vào máy chủ của bạn và chạy lệnh sau để cài đặt mô-đun toàn cầu Lighthouse trên thiết bị:
npm install -g lighthouse
2. Sau khi cài đặt, hãy chạy lệnh sau để thực hiện kiểm tra Lighthouse:
lighthouse -- view <url>
Bạn có thể xem tất cả cá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 khác nhau của số liệu hiệu suất của trang web, chẳng hạn như Hiệu suất, Khả năng truy cập, Các phương pháp hay nhất, SEO và PWA. Sau khi quá trình kiểm tra thành công, nó sẽ tạo một báo cáo bao gồm điểm cho từng khía cạnh cũng như các đề xuất về những 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 trên trang web của bạn. Các trang web thường được đánh giá theo thang điểm từ 0 đến 100.
Hiệu suất
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 –
- Sơn có nội dung đầu tiên (FCP): Phần tử đầu tiên của nội dung được vẽ trên màn hình nhanh như thế nào
- Số lần hiển thị nội dung lớn nhất (LCP): Đo thời gian cần thiết để phần tử nội dung lớn nhất hiển thị
- Sự thay đổi bố cục tích lũy (CLS): Đo lường số lần thay đổi bố cục không mong muốn xảy ra trong quá trình tải trang để đánh giá độ ổn định hình ảnh của trang. CLS thấp cho thấy trang web ổn định.
- Tổng thời gian chặn: Đo thời gian trong đó luồng chính bị chặn và không phản hồi với hoạt động nhập của người dùng.
- Chỉ số tốc độ: Cho biết tốc độ hiển thị toàn bộ nội dung của trang
Các số liệu này đánh giá tốc độ tải và độ ổn định hình ảnh của trang web. Một số yếu tố ảnh hưởng đến báo cáo này, như kích thước và số lượng hình ảnh, số lượng plugin được sử dụng và hiệu quả của mã trang web.
Lighthouse tính điểm bằng cách lấy giá trị trung bình có trọng số của các giá trị số liệu. Đương nhiên, các phép đo có trọng số cao hơn sẽ có tác động lớn hơn đến tổng điểm Hiệu suất của bạn. Điểm số không được hiển thị trong báo cáo mà được tính toán ngầm. Bạn có thể nhấp vào tùy chọn Xem máy tính để có quyền truy cập vào tính toán chi tiết các yếu tố ảnh hưởng đến trang web của bạn.
Khả năng truy cập
Đây là điểm lấy người dùng làm trung tâm để đo lường mức độ dễ dàng truy cập trang web của người dùng khuyết tật. Nó bị ảnh hưởng bởi các yếu tố như sự hiện diện của văn bản thay thế trên hình ảnh, việc sử dụng thuộc tính ARIA và khả năng truy cập bàn phím của trang web của bạn. Mỗi lần kiểm tra khả năng tiếp cận đều đạt hoặc không đạt. Một trang không nhận được điểm khi vượt qua một phần kiểm tra khả năng truy cập, không giống như kiểm tra Hiệu suất.
- Văn bản thay thế cho hình ảnh: Tất cả hình ảnh trên trang phải có văn bản thay thế phù hợp và mang tính mô tả vì điều này cần thiết đối với người dùng khiếm thị phải dựa vào trình đọc màn hình để diễn giải hình ảnh.
- HTML ngữ nghĩa: Việc sử dụng hợp lý các phần tử HTML ngữ nghĩa như tiêu đề, tiêu đề, danh sách, v.v. sẽ giúp trình đọc màn hình và phần mềm hỗ trợ khác hiểu được cấu trúc của trang
- Độ tương phản màu: Độ tương phản màu giữa văn bản và nền của nó phải đáp ứng các tiêu chuẩn do Nguyên tắc truy cập nội dung web đặt ra. Độ tương phản màu đủ đảm bảo rằng văn bản có thể đọc được đối với những người có thị lực kém hoặc mù màu.
Cũng đọc: Cách xây dựng trang web bằng ChatGPT
Các phương pháp hay nhất
Lighthouse đo lường mức độ trang web của bạn tuân thủ các tiêu chuẩn mã hóa &phương pháp phát triển web tốt nhất và đưa ra điểm số dựa trên đó. Nó kiểm tra việc sử dụng các 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ư việc sử dụng tính năng rút gọn và nén, sự hiện diện của các tiêu đề bảo mật và việc sử dụng tệp robots.txt. Một số cuộc kiểm tra phổ biến theo đó bao gồm:
- Tránh các thư viện JavaScript lớn
- Tránh CSS không được sử dụng
- Bật tính năng nén văn bản
- Loại bỏ tài nguyên chặn hiển thị
- Tận dụng bộ nhớ đệm của trình duyệt
- Cung cấp nội dung tĩnh bằng chính sách bộ đệm hiệu quả
SEO
SEO đo lường mức độ trang web được tối ưu hóa cho các công cụ tìm kiếm. Nó bị ảnh hưởng bởi các yếu tố như sự hiện diện của mô tả meta và thẻ tiêu đề, việc sử dụng các từ khóa có liên quan và cấu trúc nội dung trang web của bạn. Điểm được tính bằng cách lấy điểm trung bình của các cuộc kiểm tra sau:
- Tiêu đề tài liệu
- Mô tả
- Tiêu đề
- Hình ảnh
- Liên kết
- Mô tả meta
- Robots.txt
Cũng đọc: 27 Dịch vụ lưu trữ trang web miễn phí tốt nhất
Cách diễn giải kết quả
Lighthouse chuyển đổi từng giá trị số liệu thô thành điểm số từ 0 đến 100. Điểm càng cao thì càng tốt. Điểm số của các chỉ số được tô màu theo các phạm vi sau:
- 0 đến 49 (Tam giác đỏ):Kém
- 50 đến 89 (Hình vuông màu cam):Cần cải thiện
- 90 đến 100 (Vòng tròn xanh):Tốt
Khi chạy thử nghiệm trên cùng một trang web, người ta thường quan sát thấy sự biến động về điểm tổng thể. Sự biến đổi này có thể là do một số yếu tố.
- Mỗi bản phân tích chỉ cung cấp thông tin chi tiết về hiệu suất của một lần tải trang. Vì không có lượt tải hai trang nào giống hệt nhau nên thời gian tải có thể khác nhau một cách tự nhiên.
- Tốc độ trang có thể bị ảnh hưởng bởi sự hiện diện của nội dung động, chẳng hạn như quảng cáo hoặc các phần tử thay đổi thường xuyên, tiện ích mở rộng trình duyệt làm thay đổi yêu cầu mạng và hoạt động nền trên PC.
- Điểm thu được trong các môi trường khác nhau, chẳng hạn như PageSpeed Insights và máy tính cục bộ của bạn, có thể không thể so sánh trực tiếp do sự khác biệt về điều kiện phần cứng và mạng.
Cách cải thiện điểm số ngọn hải đăng của bạn
Lighthouse cung cấp cả dữ liệu phòng thí nghiệm (kiểm tra mô phỏng) và dữ liệu thực địa (dữ liệu người dùng thực) để đánh giá hiệu suất của trang web. Dữ liệu thực địa cung cấp thông tin chi tiết về cách người dùng thực tế trải nghiệm trang web, trong khi dữ liệu phòng thí nghiệm rất hữu ích cho việc thử nghiệm các thay đổi và cải tiến.
Bắt đầu bằng cách tập trung vào các khuyến nghị trong lĩnh vực hiệu quả hoạt động. Trang web tải nhanh hơn sẽ cải thiện trải nghiệm người dùng và có thể tăng thứ hạng SEO của bạn. Khi điểm hiệu suất của bạn đã được cải thiện, bạn có thể bắt đầu tập trung vào các đề xuất trong các lĩnh vực khác. Vì khả năng truy cập và SEO là những thành phần thiết yếu tạo nên chất lượng tổng thể của trang web nên bạn cũng nên dành nỗ lực để nâng cao các lĩnh vực này.
Cũng đọc: Zyro vs Wix:Bạn nên chọn công cụ xây dựng trang web nào?
Lời khuyên bổ sung cho người mới bắt đầu
Nếu bạn vừa thiết kế và ra mắt trang web của mình, đây là một số gợi ý khác mà bạn có thể nên lưu ý:
- Đừng choáng ngợp trước vô số gợi ý của báo cáo Lighthouse. Bắt đầu với lời khuyên quan trọng nhất và thực hiện dần dần danh sách.
- Báo cáo Lighthouse có thể được sử dụng để theo dõi sự phát triển của bạn theo thời gian. Xếp hạng Ngọn hải đăng của bạn sẽ cải thiện khi bạn thực hiện các đề xuất.
- Hãy nhớ kiểm tra trang web của bạn trên nhiều thiết bị và trình duyệt. Vì báo cáo của Lighthouse dựa trên một thử nghiệm duy nhất nên điều quan trọng là phải kiểm tra trang web của bạn trên nhiều thiết bị và trình duyệt để đảm bảo rằng trang web đó 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 sử dụng Google Lighthouse để kiểm tra hiệu suất trang web của bạn và từ đó cải thiện nó. Nếu bạn có bất kỳ thắc mắc hoặc đề xuất 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 theo dõi TechCult để biết thêm các blog thông tin như vậy.