Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Google Lighthouse

5/5 - (1 vote)

Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google

Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google – Hai từ bạn thường nghe cùng nhau là tốc độ di động và tốc độ trang web. Và điều đó không phải không có lý vì hai điều này luôn song hành 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 đen tối. Các công cụ tốc độ trang web mà chúng tôi 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 tiếp cận nó từ một góc độ khác, thực tế hơn, có tính đến trải nghiệm trên 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 bằng Ngọn hải đăng Google.

Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google là gì? Bài viết dưới đây sẽ giải thích cho bạn:

Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google 1
Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google 1
  1. Ngọn hải đăng Google là gì?

Ngọn hải đăng Google là một công cụ trải nghiệm trang do Google xây dựng và ban đầu nhằm mục đích kiểm tra Ứng dụng web lũy tiến (PWA). Công cụ này thực hiện năm cuộc kiểm tra về khả năng truy cập, hiệu suất, SEO, Ứng dụng web tiến bộ và một 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, các 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ề mặt số lượng không có ý nghĩa gì nếu trang web của bạn vẫn cảm thấy chậm. Rất nhiều người dùng trên khắp thế giới đang sử dụng kết nối di động khá tệ 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ể cảm thấy lag và chậm. Và tất cả chúng ta đều biết một trang web chậm có thể gây ra hậu quả nghiêm trọng như thế nào đối với chuyển đổi của bạn. Việc cắt giảm một 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 ra sự khác biệt lớn. Chưa kể đến sự thất vọng xảy ra khi một quảng cáo tải chậm nhấn nút mà bạn vừa muốn nhấp vào.

Bạn có thể chạy kiểm tra Ngọn hải đăng Google trực tiếp 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

Trong khi thử nghiệm, Ngọn hải đăng Google mô phỏng việc truy cập trang web dành cho thiết bị 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 yếu. 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 hiểu biế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 báo cáo kèm theo điểm số và lời khuyên hữu ích về các vấn đề cần giải quyết.

  1. Thông tin chi tiết về tốc độ trang so với Ngọn hải đăng Google

PageSpeed ​​Insights có lẽ là công cụ phân tích tốc độ trang web được sử dụng nhiều nhất hiện nay. Nó mang lại cho bạn một số điểm cao và một danh sách các cải tiến có thể có, đồng thời nó còn cho bạn ý tưởng về tốc độ tải trang web của bạn. Ngoài ra, PageSpeed ​​Insights còn đưa ra đề 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ơ viển vông đối với hầu hết các trang web.

PageSpeed ​​Insights và Ngọn hải đăng Google từng là hai công cụ khác nhau phục vụ công việc. Cả hai đều cung cấp những hiểu biết có giá trị nhưng khó kết hợp. Với sự ra đời của Web Vitals và bản cập nhật trải nghiệm trên trang, Google đã cải thiện các chỉ số trên diện rộng. Chúng không chỉ trở nên dễ hiểu hơn mà còn là các số liệu được chia sẻ. Tất nhiên, mỗi công cụ được tạo ra 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.

  1. Dữ liệu hiện trường so với dữ liệu phòng thí nghiệm

Web Vitals đã giới thiệu những cách mới để xác định hiệu suất. Một số số liệu này có thể được tính toán trong môi trường phòng thí nghiệm – có thể nói là được mô phỏng, trong khi các số liệu khác chỉ có ý nghĩa nếu chúng được kiểm tra và thu thập tại hiện trường. Ngoài ra, một số chỉ số hoạt động tốt ở 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ố số liệu chỉ hoạt động trong các công cụ thí nghiệm như Công cụ dành cho nhà phát triển và Ngọn hải đăng. Số liệu 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 chỉ số quan trọng về trang web cốt lõi như LCP, FID và CLS sẽ hoạt động ở mọi nơi.

Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google 2
Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google 2
  1. Các chỉ số quan trọng về trang web cốt lõi

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 lường tốc độ, hiệu suất và trải nghiệm 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 để hiểu được trang web hoặc các trang cụ thể của bạn đang hoạt động như thế nào. Các chỉ số quan trọng về trang web cốt lõi này là:

LCP hoặc Thời gian hiển thị nội dung lớn nhất Hoặc mất bao lâu để tải phần tử nội dung lớn nhất mà bạn nhìn thấy trong khung nhìn.

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

CLS, hoặc Dịch chuyển bố cục tích lũy 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?

Các chỉ số quan trọng về trang web 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 để trang web có thể mô phỏng những gì một khách truy cập thực sự trong thế giới thực có thể trải nghiệm. Thay vì chỉ tải trang web của bạn giống 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 sẽ kiểm tra cách thức và thời điểm trang web phản hồi với thông tin đầu vào — và liệu nội dung có xảy ra sau lần tải đầu tiên hay không. 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. Ngoài ra, bạn có thể tìm thấy những điều khó chịu cản trở trải nghiệm tốt trên trang.

Ngoài ra, hãy nhớ rằng Ngọn hải đăng Google 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 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 thực địa và Dữ liệu phòng thí nghiệm

  1. Những gì cần tìm trong kết quả của Ngọn hải đăng Google

Toàn bộ khái niệm về việc tăng tốc trang web dành cho thiết bị di động của bạn có hai hướng; trang web của bạn phải nhanh và nó phải có cảm giác 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ó khả năng 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à yếu tố xếp hạng cho SEO nên 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 đầu tiên. Đồ họa tuyệt vời và hình ảnh động hấp dẫn 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 ở chế độ nền và hiển thị nội dung đó trên màn hình sau này.

  1. 0 sử dụng

Trong khi đo hiệu suất trang web của bạn, Ngọn hải đăng Google 6.0 sử dụng các số liệu sau:

Thời gian hiển thị nội dung đầu tiên FCP đo lường thời gian trình duyệ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, phần tử không phải màu trắng và SVG nhưng loại trừ nội dung bên trong iframe.

Thời gian hiển thị nội dung lớn nhất LCP là khoảng thời gian để tải đối tượng nội dung lớn nhất (ví dụ: hình ảnh hoặc 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 cảm nhận trang web của bạn tải nhanh.

Thời gian tương tác TTI đo thời gian cần thiết từ khi tải trang đến khi trang có khả năng phản hồi nhanh chóng với thông tin đầu vào của người dùng một cách đáng tin cậy. Trang này có thể tải nhanh nhưng để nhận ra rằng việc nhấn một số nút vẫn chưa có tác dụng gì.

Tổng thời gian chặn TBT đo thời gian giữa FCP và TTI nơi việc phong tỏa có thể xảy ra, ngăn cản khả năng phản hồi.

Thay đổi bố cục tích lũy CLS xem xét số lần 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 quanh màn hình từ khung này sang khung khác, điều này được tính là sự thay đổi bố cục. Bạn có nhớ những quảng cáo khó chịu tải vào phút cuối không?

Báo cáo của Ngọn hải đăng Google cũng nêu bật một số cơ hội để cải thiện tốc độ trang web trên trang web dành cho thiết bị di động của bạn, bao gồm cả thời gian tải mà chúng sẽ tiết kiệm được. 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 phù hợp và sửa hình ảnh ngoài màn hình.

Nói chung, Ngọn hải đăng Google cung cấp cho bạn thông tin chi tiết sâu sắc về hiệu suất trang của bạn. Hãy sử dụng những hiểu biết này để làm lợi thế cho bạn.

Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google 3
Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google 3
  1. Kiểm tra SEO của Ngọn hải đăng Google

Ngọn hải đăng Google không chỉ kiểm tra hiệu suất mà còn có bài kiểm tra khả năng truy cập, đề 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 Ngọn hải đăng Google là kiểm tra SEO cơ bản. Với kiểm tra này, bạn có thể chạy kiểm tra SEO đơn giản để phát hiện các vấn đề SEO cơ bản mà một trang web có thể gặp phải. Nó cũng cung cấp cho bạn những gợi ý để khắc phục chúng. Vì Ngọn hải đăng Google 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 trên môi trường chạy thử của mình.

Hiện tại, Ngọn hải đăng Google đang kiểm tra:

Tính thân thiện với thiết bị di động của một trang

Nếu dữ liệu có cấu trúc hợp lệ

Nó cóthẻ có widthhoặc khônginitial-scale

Tài liệu có phần tử không?

Có mô tả meta không?

Trang này có mã trạng thái HTTP thành công không?

Các liên kết có văn bản neo mô tả không?

Tài liệu có sử dụng cỡ chữ dễ đọc không?

Trang không bị chặn lập chỉ mục phải không?

Tệp robots.txt có hợp lệ không?

Hình ảnh có thuộc tính alt không?

Tài liệu có triển khai hreflang hợp lệ không?

Tài liệu có thiết lập rel=canonical hợp lệ không?

Có plugin nào không mong muốn như Java hay Flash không?

Mặc dù cơ bản nhưng các bước kiểm tra của Ngọn hải đăng Google sẽ cảnh báo bạn về mọi vấn đề SEO cần khắc phục.

  1. Cách cài đặt Ngọn hải đăng Google

Bắt đầu với Ngọn hải đăng Google 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òn có một tiện ích bổ sung riêng của Chrome dành cho Ngọn hải đăng Google để thêm một 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 Ngọn hải đăng Google 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ố quy trình kiểm tra chỉ hoạt động trong môi trường Node chứ không hoạt động trong bảng Kiểm tra của DevTools.

Để cài đặt Ngọn hải đăng Google 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

  1. Những thứ quan trọng trong Ngọn hải đăng Google

Đã đến lúc đưa Ngọn hải đăng qua các bước đi của nó. Hãy xem điều gì sẽ xảy ra khi tôi làm nổi bật 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 hiển thị hiệu suất hiện tại của trang web hoặc ứng dụng của bạn và chỉ cho bạn cách cải thiện trang web hoặc ứng dụng đó.

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

Trong phần số liệu, bạn sẽ tìm thấy thông tin quan trọng nhất, có dấu chấm màu xanh lục, cam hoặc đỏ để cho biết hiệu suất hoạt động 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 xem số liệu về lượt hiển thị nội dung đầu tiên, lượt hiển thị nội dung lớn nhất và thời gian tương tác, 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 vọt trên màn hình.

Từ điểm số, bạn có thể thấy rằng yoast.com hoạt động khá tốt với tổng điểm 78. Lần 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 đều tốt. May mắn thay, không có yếu tố nào thay đổi trong bố cục. Vẫn còn điều gì đó có thể đạ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ần tăng tốc ở phần giao diện.

Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google 4
Kiểm tra tốc độ trang web trên thiết bị di động và SEO với Ngọn hải đăng Google 4
  1. Thực hiện sửa lỗi tốc độ trang web

Có rất nhiều điều bạn có thể làm để cải thiện tốc độ trang web của mình. Mặc dù việc 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 bạn có thể tìm thấy nhiều cách tối ưu hóa 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 kết xuất quan trọng. Và hãy 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 Web Vitals mới của Google.

  1. Thử nó!

Ngọn hải đăng Google không phải là 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. Việc kiểm tra SEO là cơ bản nhưng dù sao cũng được hoan nghênh. Ngọn hải đăng Google 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 mức sử dụng thực tế. 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 Ngọn hải đăng Google không? Làm thế nào để bạn tìm thấy nó? Hãy chia sẻ kinh nghiệm và lời khuyên của bạn trong phần bình luận. Tôi rất thích nghe từ bạn!

Xem thêm: Cách xóa www khỏi URL của bạn

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.