Google lighthouse

Google lighthouse

Hai từ bạn thường nghe cùng nhau là thiết bị di động và tốc độ trang web. Và điều đó không phải không có lý do bởi vì cả hai điều này đi đôi với nhau. Tính thân thiện với thiết bị di động và tốc độ trang web là một số vấn đề cấp bách nhất mà chúng tôi phải giải quyết. Đo tốc độ trang luôn là một thứ nghệ thuật khó. Các công cụ tốc độ trang web mà chúng ta sử dụng ngày nay khá đầy đủ, nhưng với các chỉ số Web Vitals mới, Google đang cố gắng xử lý nó từ một góc độ khác, thực tế hơn, có tính đến trải nghiệm trang. Ở đây, tôi sẽ xem xét kỹ hơn cách kiểm tra tốc độ trang web trên thiết bị di động và SEO của bạn với Google Lighthouse.

Các bài viết liên quan:

Google Lighthouse là gì?

Lighthouse là một công cụ trải nghiệm trang do Google xây dựng và ban đầu được dùng để kiểm tra Ứng dụng web tiến bộ (PWA). Công cụ thực hiện năm lần kiểm tra khả năng truy cập, hiệu suất, SEO, Ứng dụng web tiến bộ và danh sách mở rộng các phương pháp hay nhất. Được hỗ trợ bởi Core Web Vitals mới, những cuộc kiểm tra này cùng nhau cung cấp cho bạn cái nhìn tổng quan tuyệt vời về chất lượng và hiệu suất của trang web trên thiết bị di động cũng như trang web trên máy tính để bàn hoặc ứng dụng web của bạn.

Tốc độ trang web là tất cả về nhận thức và trải nghiệm người dùng. Tốc độ về số lượng không có nghĩa gì nếu trang web của bạn vẫn còn chậm. Nhiều người dùng trên khắp thế giới đang sử dụng các kết nối di động khá tồi tàn từ 3G trở xuống. Ngay cả với kết nối 5G nhanh như chớp, một trang web vẫn có thể bị lag và chậm. Và tất cả chúng ta đều biết một trang web chậm có thể có tác động tàn phá gì đến chuyển đổi của bạn. Cắt giảm phần nghìn giây thời gian cần thiết để tải trang web của bạn có thể tạo nên sự khác biệt. Đó là chưa kể đến sự thất vọng xảy ra khi một quảng cáo tải chậm, đẩy xuống nút mà bạn vừa muốn nhấp vào.

Bạn có thể chạy kiểm tra Lighthouse ngay từ Công cụ dành cho nhà phát triển trong Google Chrome – hoặc cài đặt tiện ích mở rộng của Chrome.

Xem thêm ux và seo

Trong khi thử nghiệm, Google Lighthouse mô phỏng việc truy cập trang web trên điện thoại di động của bạn thông qua kết nối 3G không ổn định trên một thiết bị hơi kém. Các gói bị mất trong nỗ lực mô phỏng các điều kiện trong thế giới thực một cách chân thực nhất có thể. Những thông tin chi tiết này được kết hợp với các dữ liệu khác. Sau khi chạy thử nghiệm, bạn sẽ nhận được một báo cáo với điểm số và lời khuyên hữu ích với các vấn đề cần giải quyết.

PageSpeed ​​Insights so với Google Lighthouse

PageSpeed ​​Insights có lẽ là công cụ phân tích tốc độ trang web được sử dụng nhiều nhất. Nó mang lại cho bạn một điểm số cao và một danh sách các cải tiến có thể có, ngoài ra nó còn cung cấp cho bạn ý tưởng về tốc độ tải trang web của bạn. Ngoài ra, PageSpeed ​​Insights đưa ra các đề xuất và xác định các cơ hội để cải thiện hiệu suất trang của bạn. Một số trong số này có xu hướng khó thực hiện, vì vậy đạt được 100/100 là một giấc mơ xa vời đối với hầu hết các trang web.

PageSpeed ​​Insights và Lighthouse từng là hai công cụ khác nhau cho công việc này. Cả hai đều cung cấp những thông tin chi tiết có giá trị, nhưng khó kết hợp với nhau. Với sự ra đời của Web Vitals và bản cập nhật trải nghiệm trang, Google đã cải thiện các chỉ số trên toàn diện. Chúng không chỉ trở nên dễ hiểu hơn mà còn được chia sẻ các chỉ số. Tất nhiên, mỗi công cụ được tạo cho một nhiệm vụ phụ cụ thể và cung cấp các số liệu cụ thể. Các số liệu này đến từ các môi trường khác nhau.

Xem thêm kiểm tra tính thân thiện với điện thoại

Field data vs. lab data

Core Web Vitals đã giới thiệu các cách xác định hiệu suất mới. Nói cách khác, một số chỉ số này có thể được tính toán trong cài đặt phòng thí nghiệm – được mô phỏng, trong khi các chỉ số khác chỉ có ý nghĩa nếu chúng được thử nghiệm và thu thập tại hiện trường. Ngoài ra, một số chỉ số hoạt động tốt trong cả hai cài đặt. Các công cụ trải nghiệm trang của Google sử dụng nhiều số liệu khác nhau để cung cấp cho bạn dữ liệu bạn cần để cải thiện trang web của mình.

Nếu quan sát kỹ, bạn sẽ nhận thấy rằng một số chỉ số chỉ hoạt động trong các công cụ phòng thí nghiệm như Công cụ dành cho nhà phát triển và Lighthouse. Các chỉ số trường xuất hiện trong các công cụ như báo cáo Web Vitals trong Search Console và PageSpeed ​​Insights. Các Core Web Vitals như LCP, FID và CLS sẽ hoạt động ở mọi nơi.

Core Web Vitals

Core Web Vitals hoàn toàn mới sẽ xuất hiện trong tất cả các công cụ của Google đo tốc độ, hiệu suất và trải nghiệm của trang web – ngay cả trong báo cáo Web Vitals mới trong Search Console. Bây giờ, bạn chỉ cần hiểu ba số liệu cơ bản để biết trang web của bạn hoặc các trang cụ thể đang hoạt động như thế nào. Các Vitals Core Web này là:

LCP, or Largest Contentful Paint: Hoặc, mất bao lâu để tải phần tử nội dung lớn nhất mà bạn thấy trong chế độ xem.

FID, or First Input Delay: Hoặc, mất bao lâu để trình duyệt phản hồi lại một tương tác do người dùng kích hoạt lần đầu (ví dụ: nhấp vào một nút)

CLS, or Cumulative Layout Shift: Hoặc, mức độ màn hình bị ảnh hưởng bởi chuyển động – tức là mọi thứ có nhảy xung quanh trên màn hình không?

Những Web Vitals mới này có cách tiếp cận thực tế hơn nhiều và đặt trải nghiệm người dùng lên hàng đầu. Các công cụ truy cập trang web của bạn qua kết nối được điều chỉnh trên một thiết bị trung bình để nó có thể giả lập

e những gì một khách truy cập thực trong thế giới thực có thể trải nghiệm. Thay vì chỉ tải trang web của bạn như các công cụ tốc độ cổ điển thường làm, các công cụ hỗ trợ Web Vitals này kiểm tra cách thức và thời điểm nó phản hồi với đầu vào – và nếu nội dung xảy ra sau lần tải đầu tiên. Nó tìm thấy thời điểm chính xác khi nội dung của bạn sẵn sàng để sử dụng, vì vậy bạn có thể thử và tối ưu hóa thời điểm đó khi cảm thấy quá chậm. Thêm vào đó, bạn có thể tìm thấy những phiền toái cản trở trải nghiệm trang tốt.

Xem thêm core web vitals

Ngoài ra, hãy nhớ rằng Lighthouse không chỉ đo lường hiệu suất mà còn kiểm tra SEO, nhiều phương pháp hay nhất khác nhau và khả năng truy cập. Nó là một công cụ hoàn chỉnh giúp bạn cải thiện trang web của mình một cách toàn diện.

PageSpeed ​​Insights cho điểm hơi khác nhau. Bạn cũng sẽ nhận thấy sự khác biệt giữa Dữ liệu trường và Dữ liệu phòng thí nghiệm

Tìm kiếm gì trong kết quả về Lighthouse

Toàn bộ khái niệm về tăng tốc trang web trên thiết bị di động của bạn có hai khía cạnh; trang web của bạn phải nhanh và nó phải nhanh. Do đó, bạn cần đưa nội dung của mình lên màn hình càng nhanh càng tốt. Đừng để mọi người chờ đợi. Ngoài ra, người dùng phải có thể tương tác với nội dung của bạn càng sớm càng tốt. Vì Google đã thông báo rằng tốc độ trang và trải nghiệm trang là các yếu tố xếp hạng cho SEO, bạn cần khắc phục những vấn đề này.

Ưu tiên của bạn nên là gì? Tải nội dung của bạn trước. Đồ họa tuyệt vời và hình ảnh động sát thủ có thể chờ đợi. Thông điệp của bạn – và những gì mọi người đang tìm kiếm – rất có thể nằm trong nội dung. Bạn có thể tải phần còn lại của nội dung trong nền và dễ dàng hiển thị trên màn hình sau này.

Xem thêm các công cụ tăng tốc website

Các chỉ số hiệu suất được Lighthouse 6.0 sử dụng

Trong khi đo lường hiệu suất trang web của bạn, Lighthouse 6.0 sử dụng các số liệu sau:

First Contentful Paint: FCP đo thời gian trình duyệt mất để hiển thị phần nội dung DOM đầu tiên sau khi người dùng điều hướng đến trang của bạn. Điều này bao gồm, hình ảnh, các phần tử <canvas> không phải màu trắng và SVG nhưng loại trừ nội dung bên trong iframe.

Speed Index: Chỉ số tốc độ đo lường mức độ nhanh chóng mà nội dung được hiển thị trực quan trong quá trình tải trang.

Largest Contentful Paint: LCP là tất cả về thời gian tải đối tượng nội dung lớn nhất (ví dụ: một hình ảnh hoặc một khối văn bản). Đây là một trong những số liệu mới quan trọng nhất. Ở đây, có điểm tốt có nghĩa là người dùng nhận thấy trang web của bạn tải nhanh.

Time to Interactive: TTI đo thời gian từ khi tải trang đến khi trang có khả năng phản hồi nhanh chóng thông tin nhập của người dùng. Trang có thể tải nhanh, chỉ để thấy rằng việc nhấn một số nút vẫn chưa thực hiện được gì.

Total Blocking Time: TBT đo thời gian giữa FCP và TTI nơi có thể xảy ra phong tỏa, ngăn cản khả năng đáp ứng.

Cumulative Layout Shift: CLS xem xét số lượng thay đổi bố cục xảy ra trong quá trình tải đầy đủ của trang. Mỗi khi một phần tử nhảy xung quanh màn hình từ khung này sang khung khác, điều này được tính là một sự thay đổi bố cục. Hãy nhớ những quảng cáo khó chịu tải vào thời điểm cuối cùng?

Bạn có thể xem cách tính điểm của mình bằng cách chuyển đến Máy tính điểm của Lighthouse:

Google lighthouse

Máy tính chấm điểm Lighthouse hiển thị trọng số của các chỉ số chênh lệch

Báo cáo Lighthouse cũng nêu lên một số cơ hội để cải thiện tốc độ trang web trên thiết bị di động của bạn, bao gồm cả thời gian tải chúng sẽ tiết kiệm. Chúng bao gồm giảm biểu định kiểu chặn hiển thị, tập lệnh chặn hiển thị, định cỡ hình ảnh đúng cách và sửa hình ảnh ngoài màn hình.

Lighthouse xác định yếu tố LCP để bạn có thể dễ dàng tối ưu hóa

Nói chung, Lighthouse cung cấp cho bạn một lượng lớn thông tin chi tiết về hiệu suất trang của bạn. Sử dụng những hiểu biết này để có lợi cho bạn.

Xem thêm kỹ thuật seo thiết bị di động

Kiểm tra SEO của Lighthouse

Lighthouse không chỉ có hiệu suất mà còn có bài kiểm tra khả năng tiếp cận, đề xuất cải thiện trang web của bạn dựa trên các phương pháp hay nhất và phân tích PWA. Một tính năng thú vị khác của Lighthouse là kiểm tra SEO cơ bản. Với việc kiểm tra này, bạn có thể thực hiện kiểm tra SEO đơn giản để khám phá các vấn đề cơ bản về SEO mà một trang web có thể mắc phải. Nó cũng cung cấp cho bạn các đề xuất để sửa chữa chúng. Vì Lighthouse chạy cục bộ trong trình duyệt của bạn, nên bạn cũng có thể chạy kiểm tra môi trường dàn dựng của mình.

Xem thêm dịch vụ seo audit

Hiện tại, Lighthouse kiểm tra:

  • Tính thân thiện với thiết bị di động của một trang. Xem thêm thân thiện với di động
  • Nếu dữ liệu có cấu trúc hợp lệ. xem thêm dữ liệu cấu trúc
  • Nó có thẻ <meta name = “viewport”> với chiều rộng hoặc tỷ lệ ban đầu không
  • Tài liệu có phần tử <title> không?. Xem thêm title và seo
  • Có mô tả meta không?. xem thêm meta description seo
  • Trang có mã trạng thái HTTP thành công không?. Xem thêm trạng thái trả về http
  • Các liên kết có văn bản liên kết mô tả không? xem thêm anchor text
  • Tài liệu có sử dụng cỡ chữ dễ đọc không?. Xem thêm ux audit
  • Trang không bị chặn lập chỉ mục?. Xem thêm noindex, nofollow
  • Tệp robots.txt có hợp lệ không?. Xem thêm robots.txt
  • Hình ảnh có thuộc tính alt không?. Xem thêm alt text
  • Tài liệu có triển khai hreflang hợp lệ không?.xem thêm hreflang
  • Tài liệu có thiết lập rel = canonical hợp lệ không?. Xem thêm canonical
  • Có bất kỳ plugin không mong muốn nào như Java hoặc Flash không?

Mặc dù cơ bản, các kiểm tra của Lighthouse sẽ cảnh báo bạn về bất kỳ vấn đề SEO nào cần khắc phục.

Cách cài đặt Google Lighthouse

Bắt đầu với Google Lighthouse rất dễ dàng vì nó được tích hợp vào bảng Kiểm tra công cụ dành cho nhà phát triển của Chrome (Mac: Shift + Cmd + I. Win: Ctrl + Shift + J hoặc F12). Từ đó, bạn có thể chạy thử nghiệm và nhận được báo cáo đầy đủ. Ngoài ra, có một tiện ích bổ sung Chrome riêng biệt dành cho Lighthouse thêm nút vào thanh công cụ của bạn, mặc dù việc sử dụng nó vẫn giữ nguyên với một số hạn chế: bạn không thể xác thực các trang web trên máy chủ cục bộ của mình và các trang được xác thực cũng sẽ không hoạt động.

Bạn cũng có thể chạy Lighthouse dưới dạng gói Node. Bằng cách này, bạn có thể kết hợp thử nghiệm vào quá trình xây dựng của mình. Khi sử dụng gói Node, bạn cũng sẽ thấy rằng có một số kiểm tra chỉ hoạt động trong môi trường Node chứ không phải trong bảng kiểm tra của DevTools.

Để cài đặt Lighthouse trên toàn cầu từ dòng lệnh, hãy sử dụng:

npm install -g lighthouse

Nếu bạn muốn chạy thử nghiệm cho https://example.com, hãy sử dụng:

lighthouse https://example.com

Kết quả kiểm tra đầy đủ sẽ có sẵn trong thiết bị đầu cuối, nhưng cũng có trong một tệp HTML riêng biệt.

Bạn có thể tinh chỉnh bài kiểm tra khi bạn thấy phù hợp

Thử nghiệm websitehcm.com trong Lighthouse

Đã đến lúc đưa Lighthouse vượt qua các bước phát triển của nó. Hãy xem điều gì sẽ xảy ra khi tôi chiếu sáng ngọn hải đăng trên yoast.com – như được nhìn thấy bởi trình duyệt trên thiết bị di động. Hôm nay, chúng tôi chỉ tập trung vào tab Hiệu suất. Tab này cho biết trang web hoặc ứng dụng của bạn hiện đang hoạt động như thế nào và chỉ cho bạn các cách để cải thiện nó.

Trong ảnh chụp màn hình bên dưới, bạn có thể xem kết quả cho websitehcm.com. Quá trình tải ban đầu của trang web dành cho thiết bị di động được hiển thị bằng một số ảnh chụp màn hình hiển thị khi nội dung lần đầu tiên xuất hiện trên màn hình. Các chỉ số cho biết mất bao lâu để nội dung hiển thị. Càng nhanh càng tốt.

Bạn nhận được các chỉ số quan trọng nhất trong một màn hình

Google lighthouse

Trong phần chỉ số, bạn sẽ tìm thấy thông tin quan trọng nhất, với chấm màu xanh lá cây, cam hoặc đỏ để cho biết hiệu suất tốt như thế nào. Khi bạn muốn tối ưu hóa hiệu suất của trang web dành cho thiết bị di động của mình, bạn cần phải xem các số liệu về first contentful paint, largest contentful paint and time to interactive, như đã đề cập trước đó. Ngoài ra, hãy cố gắng cải thiện chỉ số tốc độ và đảm bảo rằng không có gì nhảy xung quanh màn hình.

Xem thêm tốc độ là yếu tố xếp hạng

Từ điểm số, bạn có thể thấy rằng websitehcm.com làm khá tốt với điểm tổng thể là 87. Màu sơn nội dung đầu tiên có thể tốt hơn một chút, nhưng chỉ số tốc độ và tổng thời gian chặn là tốt. May mắn thay, không có yếu tố nào được tìm thấy thay đổi trong bố cục. Vẫn còn điều gì đó để đạt được bằng cách loại bỏ các tài nguyên chặn hiển thị, như một số JavaScript và CSS. Nói cách khác, trang web có vẻ khá nhanh nhưng vẫn có thể sử dụng một số tăng tốc trong phần xuất hiện.

Thực hiện các bản sửa lỗi tốc độ trang web

Bạn có thể làm nhiều điều để cải thiện tốc độ trang web của mình. Mặc dù giải thích tất cả các bản sửa lỗi nằm ngoài phạm vi của bài đăng này, nhưng nhiều cách tối ưu hóa có thể được tìm thấy trong đường dẫn kết xuất quan trọng. Đường dẫn hiển thị quan trọng được hình thành bởi các đối tượng – như CSS và JavaScript – phải tải trước khi nội dung có thể hiển thị trên màn hình. Nếu nội dung này bị chặn, trang của bạn sẽ hiển thị chậm hoặc hoàn toàn không hiển thị. Hãy chú ý đến điều này và giữ cho con đường không có chướng ngại vật. Ilya Grigorik của Google đã viết một hướng dẫn tuyệt vời về cách hiểu và cải thiện đường dẫn hiển thị quan trọng. Và xin vui lòng, tối ưu hóa hình ảnh của bạn! Cuối cùng nhưng không kém phần quan trọng, đừng quên đọc trên Web Vitals mới của Google.

Xem thêm seo checklist website thương mại điện tử

Kết luận

Google Lighthouse không phải là một công cụ duy nhất về tốc độ trang web để thống trị tất cả, nhưng nó là một bổ sung rất có giá trị cho bộ công cụ của bạn. Kiểm tra SEO là cơ bản, nhưng dù sao cũng được hoan nghênh. Lighthouse chi tiết hơn và cung cấp cho bạn phản hồi ngay lập tức dựa trên việc sử dụng trong thế giới thực. Bạn chắc chắn nên sử dụng nó cùng với các công cụ kiểm tra tốc độ trang khác của mình, như PageSpeed ​​Insights, WebPageTest và GTmetrix.

Bạn có đang sử dụng Google Lighthouse không? Làm thế nào để bạn tìm thấy nó? Hãy chia sẻ kinh nghiệm và mẹo của bạn trong phần bình luận. Tôi rất thích nghe từ bạn!

Xem thêm kỹ thuật seo cơ bản

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply