4 công cụ từ Google giúp bạn tự kiểm tra hiệu suất website

February 12, 2018

Website là công cụ hữu hiệu để xác lập sự hiện diện online và tạo ra lợi nhuận của doanh nghiệp. Tuy nhiên, như bao công cụ khác, website cần được đầu tư và chăm sóc đúng mức để có thể tạo ra lợi nhuận.

Với công nghệ tiên tiến, việc làm web trở nên cực kỳ dễ dàng và nhanh chóng. Do đó, sở hữu website đơn thuần đã từ lâu không còn là lợi thế cạnh tranh nữa. Người dùng ngày càng khó tính và đòi hỏi cao hơn. Để tồn tại và phát triển trên Internet, chủ website không chỉ phải đầu tư xứng đáng cho bộ mặt cho website mà còn cần chú trọng tối ưu hiệu suất hoạt động của website.

Nhưng làm cách nào để đánh giá hiệu suất website để đưa ra những quyết định cải tiến phù hợp?

Bản thân câu hỏi “website của tôi hoạt động hiệu quả hay chưa” rất mơ hồ. May mắn thay, Google đã phát triển các công cụ giúp bạn đo lường các thông số cần thiết để đánh giá hiệu suất hoạt động của 1 trang web và từ đó, đưa ra các đề xuất khả thi giúp bạn tối ưu hoạt động website của bạn.

4 công cụ được Google đề xuất để đánh giá hiệu suất website của bạn:

  1. PageSpeed Insights
  2. Lighthouse
  3. Test My Site
  4. Mobile-Friendly Test

1. PageSpeed Insights

PageSpeed Insights là công cụ thông dụng nhất để đánh giá tốc độ tải trang – phát triển bởi Google. PageSpeed Insights sẽ chấm điểm URL cụ thể và đưa ra các đề xuất khả dĩ giúp bạn tối ưu tốc độ tải trang.

Theo thông báo từ Google, PageSpeed Insights đã được cập nhật – sử dụng dữ liệu từ báo cáo trải nghiệm người dùng của Chrome, có nghĩa là, công cụ này giờ sử dụng các thông số thực tế từ người dùng Chrome để duyệt web.

Theo thang đánh giá mới, tốc độ tải trang sẽ được đánh giá dựa trên dữ liệu thực từ người dùng.

  • Tốc độ trang web sẽ được xếp hạng trên 3 thang điểm: nhanh, trung bình, hay chậm dựa trên 2 điểm quan trọng nhất:
  • First contentful paint: khoảng thời gian cần để người dùng thấy được sự thay đổi về đồ họa đầu tiên từ trang web.
  • DOM content loaded: khoảng thời gian cần để hoàn tất việc parse và kết xuất đồ họa (render) của 1 file HTML.

Nếu cả 2 thông số này thuộc nhóm thứ 1, trang web sẽ được xếp hạng Nhanh.

  • Sự tối ưu được phân loại thành 3 nhóm: Tốt, Trung bình và Thấp bằng việc đánh giá khả năng tối ưu thêm của trang web.
  • Phần Phân phối tải trang thể hiện cách thức FCP (First contentful paint) và DCL (DOM content loaded) được phân phối trong dãy dữ liệu. Những event này cũng được xếp hạng Nhanh, Trung bình và Chậm bằng cách so sánh với các event trong báo cáo trải nghiệm người dùng từ Chrome.
  • Phần Page Stats miêu tả các con đường vòng cần để tải các tài nguyên chặn kết xuất đồ họa, tổng số bytes dùng bởi trang web.
  • Các đề nghị tối ưu khả thi: danh sách các hành động có thể được áp dụng cho trang web. Nếu trang web nhanh, các đề nghị này sẽ được ẩn đi.

Màn hình PageSpeed Insights mới:

Màn hình PageSpeed Insights mới 01

Tuy nhiên, không phải tất cả các trang web đều được xếp hạng. Để được xếp hạng, các trang web cần phải được thu thập đủ dữ liệu từ báo cáo trải nghiệm người dùng từ Chrome. Ví dụ:

Màn hình PageSpeed Insights mới 02

Có nhiều yếu tố ảnh hưởng đến tốc độ tải trang, nhưng 2 yếu tố quan trọng nhất là:

  • Tài nguyên chặn kết xuất đồ họa: nếu trang web có nhiều tài nguyên chặn kết xuất đồ họa, bạn nên đề nghị lập trình viên nghiên cứu các phương thức lại để tránh chuyển hướng (redirects), loại bỏ các tài nguyên chặn kết xuất đồ họa bao gồm JavaScript và CSS, tận dụng bộ nhớ đệm (cache) của trình duyệt, ưu tiên tải nội dung chính yếu, giảm thời gian đáp ứng của máy chủ xuống dưới 200ms.
  • Kích thước dữ liệu trả về: toàn bộ kích thước dữ liệu trả về, bao gồm các tài nguyên HTML và tài nguyên phụ. Nếu các kết quả trả về có thể được loại bỏ bằng cách nén và tối thiểu hóa, bạn nên đề nghị lập trình viên nghiên cứu các phương thức kích hoạt nén, tối thiểu hóa tài nguyên và tối ưu hình ảnh để tăng tốc độ tải trang.

2. Lighthouse

Lighthouse là công cụ giúp bạn kiểm tra/đánh giá hiệu suất làm việc của các trang web, bao gồm hiệu suất, khả năng truy cập, SEO cơ bản và nhiều thông số khác. Lighthouse cho bạn cái nhìn tổng quan về chất lượng và hiệu suất của trang web hay ứng dụng web của bạn.

Lighthouse được ra mắt khá lâu, từ 2016 nhưng không tạo được nhiều tiếng vang. Tuy nhiên, đội ngũ phát triển đã không ngừng đưa ra nhiều bản cải tiến. Kết quả là, Lighthouse hiện nay là công cụ phân tích đánh giá website thuộc dạng cao cấp nhất từ Google.

Khác với PageSpeed Insights – chỉ kiểm tra tốc độ tải trang, Lighthouse kiểm tra luôn cách thức và thời gian trang web trả kết quả về cho người dùng. Lighthouse phát hiện chính xác thời gian nội dung trang web của bạn được tải sẵn sàng trong thế giới thực.

Lighthouse đánh giá trải nghiệm người dùng thực tế hơn bằng cách giả lập vào thăm trang web của bạn bằng mạng 3G chập chờn và trên nền thiết bị không phải hiện đại nhất. Tín hiệu sẽ đứt quãng để giả lập những gì xảy ra trong thế giới thật. Sau khi hoàn tất bài kiểm tra, bạn sẽ nhận được bản báo cáo kèm với những đề nghị khả dĩ để cải thiện những vấn đề đang có.

first-meaningful-paint

Các thông số được sử dụng:

  • First meaningful paint: Thông số này quyết định khoảng thời gian trang web cần để tải xong nội dung có ý nghĩa, ví dụ như tiêu đề chính, banner, video, hero, những yếu tố xuất hiện phía trên nếp gấp của trang web (above the fold). Điểm càng thấp thì trang web tải càng nhanh.
  • First interactive: Thông số này đo lường khi nào thì 1 trang web xuất hiện tương tác tối thiểu với người dùng, ví dụ như nhập text vào ô tìm kiếm, xem video, xem chi tiết 1 sản phẩm…
  • Consistently interactive: Đo lường khi 1 trang web hoàn toàn sẵn sàng tương tác với người dùng ở mọi chức năng.
  • Perceptual speed index: Thông số này cho thấy tốc độ nội dung 1 trang web được thể hiện đầy đủ nhanh như thế nào. Thời gian tải tiêu chuẩn đề nghị nhỏ hơn 1,250 mili giây.
  • Estimated latency input: Ước tính thời gian cần thiết để trang web phản ứng với yêu cầu nhận dữ liệu từ người dùng. Độ trễ (latency) cao sẽ dẫn đến cảm giác trang web chậm chạp và cà giựt. Thời gian tiêu chuẩn đề nghị dưới 50 ms.
  • Critical requests chain: Mạng lưới dạng thác nước này cho thấy tài nguyên nào cần để render trang web trước. Ưu tiên tải những tài nguyên cần thiết trước sẽ giúp cải thiện tốc độ trang web.

Bạn cũng sẽ tìm thấy trong bản báo cáo những đề xuất để cải thiện tốc độ tải trang trên di động, bao gồm giảm thiểu các file stylesheet, scripts đang ngăn cản sự kết xuất đồ họa (render), nén ảnh hợp lý hơn với màn hình di động…

Tóm lại, Lighthouse cho bạn cái nhìn tổng quát và những đánh giá quý giá để cải thiện hiệu suất trang web và ứng dụng web của bạn.

Điểm Google Lighthouse

Hình: Kết quả trả về từ Lighthouse. Từ trái qua phải: điểm Progressive Web App, Performance, Accessibilty, Best Pratices và SEO.

Bạn nào quan tâm đến cách tính điểm chi tiết của Lighthouse có thể xem tại đây.

3. Test My Site

Test My Site là công cụ mới được Google trình làng từ 2016 với mục đích giúp chủ doanh nghiệp nhỏ kiểm tra hiệu suất làm việc của trang web trên di động.

So với 2 công cụ trên, Test My Site có giao diện thân thiện với người dùng không chuyên kỹ thuật hơn. Sau khi nhập URL cần kiểm tra, Test My Site sẽ trả về cho bạn bảng đánh giá và các đề xuất khả thi giúp bạn tối ưu hiệu suất trên các thiết bị khác nhau.

Thông thường, kích thước hình ảnh và video luôn là yếu tố đầu tiên cần quan tâm tối ưu. May mắn là, việc này có thể được thực hiện rất dễ dàng. Điển hình là bạn có thể cân nhắc sử dụng JPG thay cho PNG khi không cần thiết, nén và giảm kích thước hình ảnh trên di động.

Lượng khách truy cập bị mất ước tính (potential customer loss) là thông số mới rất thú vị từ Google giúp chủ doanh nghiệp nhỏ hình dung rõ hơn bức tranh và sự cần thiết để tối ưu tỉ lệ chuyển đổi từ lưu lượng di động.

Hình chụp kết quả kiểm tra Test My Site

4. Mobile-Friendly Test

Sở hữu website thân thiện với di động là tiêu chuẩn tối thiểu cho sự hiện diện online của doanh nghiệp bạn. Và Google giúp bạn kiểm tra mức độ thân thiện di động của website với công cụ Mobile-Friendly Test

Công cụ này rất dễ sử dụng. Bạn chỉ việc nhập URL cần kiểm tra và chờ kết quả, bao gồm hình chụp website của bạn trông như thế nào trên di động và danh sách các vấn đề về tính khả dụng di động được tìm thấy.

Danh sách các lỗi khả dụng di động bao gồm:

  • Sử dụng Flash
  • Chưa thiết lập viewport
  • Sử dụng fixed-width viewport
  • Nội dung không được sắp xếp theo viewport
  • Font chữ nhỏ, khó đọc
  • Các yếu tố chạm được quá gần nhau, ví dụ như 2 nút gọi điện thoại và gửi tin nhắn)

5. Bonus: Chrome User Experience Report

Dành cho những bạn có chuyên môn về web và kiến thức về SQL, tận dụng Chrome User Experience Report sẽ cho bạn những thông số thực về hiệu suất website.

Tại Connected, chúng tôi tư vấn miễn phí về thiết kế và tối ưu tốc độ tải website. Gọi cho chúng tôi qua số hotline 090 36 36 270 hoặc đề nghị một cuộc gọi lại. Tư vấn viên sẽ liên lạc với bạn ngay trong vòng 2 giờ làm việc.
Tham khảo những dự án website chúng tôi đã thực hiện tại đây.

Tham khảo:


Liên hệ

Trụ sở chính
61 Mai Xuân Thưởng, P.3, Q.6, TP.HCM
Hotline
090.3636.270
Email
info@connected.com.vn

Kết nối

Về Connected

Made with ❤️ by Connected