Đánh giá hiệu suất website một cách toàn diện với Lighthouse của Google.
Bạn đã bao giờ tự đặt câu hỏi rằng Google đánh giá thế nào về website của mình chưa? Nói đến đây chắc hẳn nhiều bạn sẽ nghĩ ngay đến Google PageSpeed Insights hay Google Search Console. Tuy nhiên, có thể bạn chưa biết, Lighthouse mới là công cụ toàn diện nhất mà Google từng tạo ra để phân tích, đánh giá và đưa ra các lời khuyên giúp tối ưu một website. Lighthouse là gì? Làm thế nào để sử dụng Lighthouse? Hãy cùng dành ít phút để cùng WP Căn bản tìm hiểu ngay sau đây.
Tham khảo thêm:
- Top 3 công cụ kiểm tra tốc độ và hiệu suất website
- Kiểm tra tổng thể về SEO, tốc độ load và bảo mật cho WordPress
Lighthouse là gì?
Lighthouse là một công cụ tự động, mã nguồn mở có chức năng hỗ trợ cải thiện chất lượng của các trang web. Bạn có thể sử dụng nó với bất kỳ trang web nào, công khai hoặc yêu cầu xác thực. Nó giúp bạn kiểm tra hiệu suất (performance), khả năng truy cập (accessibility), progressive web apps, SEO và nhiều hơn thế nữa. Thật không ngoa khi khẳng định Lighthouse là công cụ toàn diện nhất mà bạn có thể sử dụng để đánh giá hiệu suất website của mình.
Ngoài ra, Lighthouse còn cung cấp rất nhiều lời khuyên hữu ích. Bạn có thể dựa vào những lời khuyên này để cải thiện hiệu suất của website. Đáng tiếc là hiện tại Lighthouse chưa hỗ trợ tiếng Việt nên tính năng nào chưa hiểu thì các bạn chịu khó dùng Google Translate nhé (quá nhiều nên tôi không thể dịch sẵn được).
Đánh giá hiệu suất website với Lighthouse
Có 3 cách khác nhau để sử dụng Lighthouse: thông qua trang Try Lighthouse, Chrome Developer Tools và Chrome Extensions.
Thông qua trang Try Lighthouse
1. Truy cập trang Try Lighthouse của Google Developers, nhập tên miền website của bạn vào khung rồi bấm phím Enter.
2. Chờ giây lát cho quá trình phân tích kết thúc, click vào nút Open report để xem kết quả.
3. Một bản báo cáo chi tiết về các khía cạnh khác nhau của website sẽ được hiển thị. Bạn có thể dựa vào những lời ý của Google để tiến hành cải thiện cho website của mình.
Thông qua Chrome Developer Tools
1. Trên trình duyệt Google Chrome, các bạn bấm tổ hợp phím CTRL + SHIFT + I để mở Developer Tools => chọn tab Audits => Click vào nút Perform an audit…
2. Tick vào các mục bạn muốn tiến hành phân tích sau đó click vào nút Run audit.
3. Chờ một lát cho quá trình phân tích hoàn tất, các bạn sẽ nhận được kết quả trông giống như thế này:
Thông qua Chrome Extensions
1. Cài đặt tiện ích Lighthouse vào trình duyệt Google Chrome của bạn. Sau khi cài đặt, bạn sẽ thấy xuất hiện thêm biểu tượng của Lighthouse ở góc trên bên phải trình duyệt. Hãy click vào biểu tượng đó rồi click tiếp vào nút Generate report.
2. Đợi cho quá trình phân tích hoàn tất, bạn sẽ nhận được 1 bản báo cáo tương tự như 2 cách bên trên.
Thật đơn giản phải không nào? Bạn còn chần chừ gì nữa mà không sử dụng Lighthouse để đánh giá hiệu suất website của mình ngay bây giờ? Mọi thắc mắc xin vui lòng gửi vào khung bình luận bên dưới để được giải đáp.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
WPCANBAN đạt điểm cao quá! Mình test Vnexpress thấy nó đạt điểm cũng thấp tè!
Mấy thằng lắm tiền thì nó đâu quan tâm mấy cái này. Chỉ có anh em cày cuốc từng đồng mới phải tập trung vào tối ưu để hy vọng lên top thôi. :P
Hi bác, mình bị báo lỗi phần này, bác chỉ mình fix với.
http://prntscr.com/kgfqpk
Về cái http2 mình check những công cụ online khác nó báo support rồi nhưng ko hiểu sao lighthouse vẫn báo chỗ này.
Lỗi jQuery mình đã có bài hướng dẫn chi tiết rồi. Bạn tìm sẽ thấy. Còn lỗi HTTP/2, nó bảo chưa phải toàn bộ source đều được tải qua HTTP/2 chứ có bảo là trang của bạn không hỗ trợ HTTP/2 đâu? Bạn kiểm tra xem 2 link bị báo lỗi HTTP/2 kia có phải đều nằm trên web của bạn không?
1 link là trang chủ, 1 link là cái font @@
Lighthouse nó báo đúng đó. Mấy link đấy đang chạy HTTP/1.1 thật. Trên trình duyệt Chrome, bạn click chuột phải vào web => chọn Inspect => Chọn tab Network => Reload (F5) lại web => click chuột phải vào cột Type => Tích vào mục Protocol sẽ thấy đúng là trang chủ và font đang chạy HTTP/1.1 trong khi các thành phần khác đều đã chạy HTTP/2.
Giờ mình mới biết vấn đề này. Mình nghĩ cài SSL, server hỗ trợ http2 rồi thì sẽ dùng kết nối http2 hết chứ. H lòi ra vài file dùng http/1.1 giờ ko biết xữ lý nó ntn đây.
Bạn đang dùng dịch vụ của nhà cung cấp nào đấy? Cài plugin HTTP/2 Server Push vào thử xem.
Ah mình fix dc rồi. Thanks bác.
Mình xài ssl bên namecheap. Thật ra mình chỉ mới cái ssl thôi chưa chưa thật sự enable http/2.
Mình tham khảo bài viết bên đây và đã làm xong :D
https://hocvps.com/http2-nginx/
Thấy cái này hay hơn Google PageSpeed Insights nè
Lỗi Cannot GET /report.1532960899265.html khi bấm Open report anh ơi, để sửa thì làm như thế nào ạ?
Lighthouse gặp lỗi trong quá trình phân tích website của bạn => không xem được report.
Đã làm được bác ạ.Performance và Progressive Web App điểm thấp quá
Mình vừa đăng bài về Progressive Web Apps sáng nay đấy. :P
Mới test thử, điểm thấp đến không ngờ :D
Dựa theo các gợi ý mà fix thôi. :D
haha mình cũng vậy
Rất hay, cảm ơn Hiếu. Chỉ có điều hơi buồn tí là web của mình điểm thấp thảm hại :(
Nghiên cứu rồi fix đi chứ bạn. Đâu phải test chỉ để cho biết. :D
E mới kiểm tra xong, quá thảm hại :((
Quá thảm hại thì fix thôi, Google Lighthouse nó có gợi ý rồi mà. :P
Theme jnews pagespeed 100/100 mà em ném vào test thử cái này còn chị lỗi chứ nói gì :D Chắc do hàng a Hiếu sài ngon quá rồi :D
PageSpeed Insights chỉ đánh giá tốc độ, còn thằng Lighthouse này nó đánh giá nhiều phương diện hơn mà. :P
Hiếu cho mình hỏi xíu: web của minh load chậm quá! Minh dùng Mythemeshop, Muốn nhờ Hiếu giúp sức, cho mình cách liên lạc trực tiếp với Hiếu nhé! Bữa nào ae cùng cafe nhé!
Bạn có thể tham khảo dịch vụ tối ưu website WordPress của bên mình tại đây. :P
mình thấy cái này đánh giá ko chính xác
Chính xác hay không thì nó và PageSpeed Insights là 2 công cụ mà Google dùng để đánh giá hiệu suất website trong xếp hạng tìm kiếm bạn ạ. Đây là cuộc chơi của Google và luật chơi do họ đặt ra. Bạn chơi thì chơi, không chơi thì nghỉ. Đơn giản vậy thôi. :)
Cảm ơn bạn về bài viết này. Tôi kiểm tra thấy Website của tôi có quá nhiều lỗi.
Bạn cho mình hỏi qua những lỗi sau là lỗi do lập trình Web hay là lỗi do người viết bài để mình khắc phục dần nhé: Cảm ơn bạn rất nhiều.
1) Performance = 31%
2} Progressive Web App = 15%
3) Accessibility = 70%
4) Best Practices = 73%
5) SEO = 91% (Do không có: If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed.
Line # Content Error
4 Sitemap: /sitemap.xml Invalid sitemap URL
Cái này hầu như liên quan đến vấn đề kỹ thuật bạn nhé. Tức là chủ yếu do người làm web.
Cảm ơn bạn rất nhiều. Trung Hiếu