Kiểm tra tốc độ website: Đọc PageSpeed và sửa đúng lỗi
Kiểm tra tốc độ website bằng PageSpeed Insights: đọc đúng dữ liệu thực tế và mô phỏng, hiểu LCP, INP, CLS và biết nên sửa ảnh, mã hay font trước.
Tóm tắt nhanh
Cách kiểm tra tốc độ website nhanh nhất là dán địa chỉ trang vào PageSpeed Insights, chọn điện thoại, rồi xem dữ liệu thực tế trước, dữ liệu mô phỏng sau. Đừng chạy theo con số điểm. Hãy nhìn ba chỉ số LCP, INP, CLS có nằm trong ngưỡng tốt hay không, rồi sửa theo thứ tự thường gặp: ảnh, mã JavaScript, font chữ, bố cục bị nhảy.
Kiểm tra tốc độ website bằng công cụ nào?#
Công cụ miễn phí và đủ dùng nhất là PageSpeed Insights của Google. Bạn mở trang, dán địa chỉ website, bấm phân tích và chờ chừng nửa phút. Công cụ trả về hai nhóm kết quả riêng cho điện thoại và máy tính. Bạn không cần cài đặt hay đăng nhập.
Ngoài PageSpeed Insights, còn hai nơi nên biết. Thứ nhất là báo cáo Core Web Vitals trong Google Search Console, cho bạn thấy nhóm trang nào của cả website đang chậm, thay vì từng trang một. Thứ hai là Lighthouse trong Chrome, chạy ngay trên máy bạn và hữu ích khi bạn đang sửa trang và muốn đo lại liên tục. Với shop nhỏ, PageSpeed Insights cho trang chủ và một trang sản phẩm là đã đủ để biết website có vấn đề hay không.
Có một thói quen đáng giữ: luôn đo bằng điện thoại trước. Khách đến từ Facebook, Zalo hay TikTok phần lớn mở trang bằng điện thoại, và điện thoại là nơi trang chậm lộ ra rõ nhất.
Đọc kết quả PageSpeed Insights: nhìn vào đâu trước?#
Màn hình kết quả có bốn chỗ cần nhìn, theo đúng thứ tự trong hình.
Chỗ đầu tiên là ô địa chỉ và nút phân tích. Hãy dán đúng địa chỉ của trang cần đo, không phải tên miền chung chung, vì mỗi trang có tốc độ riêng. Chỗ thứ hai là tab thiết bị: chọn điện thoại trước, máy tính sau.
Chỗ thứ ba là khối dữ liệu thực tế, nằm ở phía trên. Đây là số liệu từ người dùng Chrome thật đã vào trang trong 28 ngày gần nhất. Chỗ thứ tư là khối dữ liệu mô phỏng bên dưới, gồm các vòng tròn điểm Hiệu suất, Hỗ trợ tiếp cận, Phương pháp hay nhất và SEO. Nhiều người nhìn thẳng vào vòng tròn điểm vì nó to và có màu. Cách đọc đúng là đi từ dữ liệu thực tế xuống, vì trải nghiệm của khách thật quan trọng hơn một lần đo giả lập.
Điểm Hiệu suất được chia thành ba vùng màu: từ 90 đến 100 là tốt, từ 50 đến 89 cần cải thiện, dưới 50 là chậm. Điểm này được tính từ nhiều chỉ số cộng lại, nên hai trang cùng 75 điểm có thể chậm vì hai lý do khác hẳn nhau. Vì vậy phải xem chi tiết bên dưới chứ không dừng ở con số.
Ba chỉ số Core Web Vitals nói lên điều gì?#
Core Web Vitals là ba chỉ số Google dùng để đo trải nghiệm tải trang thật. Mỗi chỉ số đo một chuyện, nên cũng có cách sửa riêng.
| Chỉ số | Đo điều gì | Tốt | Kém |
|---|---|---|---|
| LCP | Thời gian phần nội dung lớn nhất hiện ra, thường là ảnh đầu trang hoặc tiêu đề | Không quá 2,5 giây | Hơn 4 giây |
| INP | Khoảng chờ từ lúc khách bấm đến lúc trang đổi hình ảnh | Không quá 200 mili giây | Hơn 500 mili giây |
| CLS | Mức độ bố cục bị xê dịch ngoài ý muốn khi trang tải | Không quá 0,1 | Hơn 0,25 |
Hai điểm cần hiểu cho đúng. Thứ nhất, "phân vị thứ 75" nghĩa là ba phần tư lượt truy cập thực tế phải đạt ngưỡng thì trang mới được tính là tốt. Một vài khách ở vùng sóng yếu không kéo cả trang xuống, nhưng một nhóm đủ lớn bị chậm thì có. Thứ hai, INP đã thay thế chỉ số cũ FID từ tháng 3 năm 2024. Nếu bạn đọc tài liệu cũ nhắc FID thì hãy hiểu đó là cách đo đã lỗi thời.
Trong ví dụ cụ thể, LCP là thứ khách thấy rõ nhất. Một trang bán hàng mở ra mà ảnh sản phẩm chính hiện chậm thì khách tưởng trang hỏng. INP hay lộ ra ở nút "Thêm vào giỏ" hoặc ô chọn phân loại, khi bạn bấm mà chưa thấy gì xảy ra. CLS là cảm giác đang định bấm nút này thì chữ nhảy xuống làm bấm nhầm nút khác.
Dữ liệu thực tế và dữ liệu mô phỏng khác nhau thế nào?#
Đây là chỗ nhiều người đọc sai nhất. Dữ liệu mô phỏng (lab data) là một lần tải giả lập trên một thiết bị và một điều kiện mạng cố định, chạy bằng Lighthouse. Dữ liệu thực tế (field data) là số liệu gom từ người dùng Chrome thật trong 28 ngày, qua nhiều thiết bị và nhiều loại mạng.
Hai loại này có thể lệch nhau, và cả hai đều đúng. Dữ liệu mô phỏng có thể cho điểm đẹp vì giả lập một máy khá, trong khi khách thật dùng điện thoại cũ, mạng 4G yếu và thấy trang chậm. Ngược lại, trang vừa sửa xong có thể đã nhanh hơn ở dữ liệu mô phỏng nhưng dữ liệu thực tế chưa đổi, vì nó cần cả tháng để cập nhật.
Cách dùng cho đúng việc là: dữ liệu thực tế để biết có vấn đề không, dữ liệu mô phỏng để tìm vấn đề nằm ở đâu và so trước sau khi sửa. Trang mới hoặc ít khách có thể không có dữ liệu thực tế. Khi đó bạn chỉ xem được phần mô phỏng, và đừng coi việc thiếu dữ liệu là lỗi.
Nên sửa gì trước?#
Phần Cơ hội và Chẩn đoán trong PageSpeed Insights liệt kê rất nhiều gợi ý. Đừng cố làm hết. Với website của shop nhỏ, bốn nhóm sau chiếm phần lớn vấn đề, và nên xử lý đúng thứ tự này vì nhóm đầu thường cho kết quả lớn nhất với công sức nhỏ nhất.
Ảnh. Ảnh sản phẩm chụp bằng điện thoại thường nặng vài MB, trong khi khung hiển thị chỉ rộng vài trăm điểm ảnh. Cách sửa là nén ảnh, đổi sang định dạng gọn như WebP, đặt kích thước đúng với khung hiển thị, và chỉ nạp ảnh nằm ngoài màn hình khi khách cuộn tới. Riêng ảnh đầu trang không nên tải chậm, vì nó thường chính là phần tử LCP.
JavaScript. Mỗi plugin, mã theo dõi, ô chat đều thêm mã chạy trên điện thoại của khách. Mã chạy nặng làm trang đơ khi bấm, tức INP xấu. Cách sửa là gỡ những thứ không còn dùng và hoãn những mã chưa cần ngay lúc trang mở.
Font chữ. Dùng nhiều font hoặc nhiều độ đậm khiến trình duyệt phải tải thêm tệp, và chữ hiện muộn hoặc đổi dáng giữa chừng. Cách sửa là giảm số font, chỉ nạp những độ đậm đang dùng.
Bố cục. Ảnh, banner hoặc khối quảng cáo chưa khai báo trước kích thước sẽ đẩy chữ xuống khi chúng hiện ra, làm CLS xấu. Cách sửa là khai báo chiều rộng và chiều cao cho mọi ảnh và khối động ngay từ đầu.
Quy trình kiểm tra và sửa trong một buổi#
Một lần kiểm tra bài bản không cần nhiều thời gian. Bạn đo, chọn đúng một thứ để sửa, rồi đo lại. Sửa nhiều thứ cùng lúc thì không biết thứ nào có tác dụng.
- Đo trang chủ và một trang sản phẩmDùng PageSpeed Insights, chọn điện thoại. Mỗi trang đo ba lần và ghi lại số ở giữa.
- Xem dữ liệu thực tế trướcNếu LCP, INP, CLS đều nằm ở vùng tốt, bạn chưa có vấn đề lớn dù điểm mô phỏng chưa cao.
- Mở danh sách gợi ýTìm ba gợi ý tiết kiệm nhiều nhất. Phần lớn rơi vào ảnh, JavaScript hoặc font.
- Sửa đúng một nhómBắt đầu từ ảnh. Lưu lại bản trước khi sửa để quay lại được nếu có lỗi.
- Đo lại và so sánhĐo cùng trang, cùng thiết bị, cùng cách như lần đầu. Chỉ giữ thay đổi nào thực sự giúp.
- Kiểm tra bằng mắtMở trang trên điện thoại thật, bấm thử nút mua hàng và biểu mẫu để chắc rằng việc làm nhanh không làm hỏng chức năng.
Bước cuối thường bị bỏ qua, dù hoãn mã hoặc nén ảnh quá tay có thể làm ảnh vỡ hay nút bấm ngừng chạy.
Những hiểu lầm hay gặp khi đọc điểm tốc độ#
Có ba hiểu lầm đáng nói thẳng. Hiểu lầm đầu tiên là đo một lần rồi tin con số. Dữ liệu mô phỏng dao động theo mạng và máy chủ, nên một lần đo chưa nói được gì chắc chắn. Hiểu lầm thứ hai là sửa theo từng dòng gợi ý. Công cụ đưa ra gợi ý chung cho mọi loại website, và một số gợi ý chỉ tiết kiệm vài mili giây không đáng công. Hiểu lầm thứ ba là cho rằng tốc độ chỉ là việc của bên làm web. Ảnh bạn tải lên, plugin bạn cài thêm và mã theo dõi bạn gắn vào đều ảnh hưởng đến tốc độ, nên đây là việc chung.
Khi nào nên nhờ người làm chuyên về tốc độ?#
Bạn tự làm được phần ảnh: nén trước khi tải lên, dùng ảnh đúng kích thước. Bạn cũng tự gỡ được plugin không dùng. Nên nhờ người có chuyên môn khi LCP vẫn kém dù đã xử lý ảnh, khi INP xấu do mã của giao diện, hoặc khi cần sửa cấu trúc tải của cả website. Lúc đó nên nhờ đơn vị đo trước và sau bằng cùng một cách, và nói rõ họ sẽ sửa những gì thay vì chỉ hứa một con số điểm.
Tốc độ không phải để lấy điểm cao, mà để khách mở trang ra là thấy ngay thứ họ cần và bấm được ngay.
Nếu website chưa đạt các tiêu chí cơ bản khác, hãy xem trước bài website chuẩn SEO gồm những gì để biết tốc độ nằm ở đâu trong tổng thể. Còn nếu website mới ra và bạn thắc mắc vì sao chưa thấy trên Google, bài website mới bao lâu thì lên Google sẽ giải thích thời gian Google cần. Khi muốn có người đo và sửa giúp, gói tối ưu SEO và tốc độ website của WebMượt đo trước và sau khi sửa, báo giá theo tình trạng của từng website và không cam kết thứ hạng.
Nguồn tham khảo: tài liệu Core Web Vitals và Lighthouse trên web.dev, hướng dẫn PageSpeed Insights và tài liệu Google Search Central về trải nghiệm trang. Các con số trong hình minh hoạ chỉ là ví dụ, không phải kết quả đo của website cụ thể.
Câu hỏi thường gặp
Điểm PageSpeed bao nhiêu là đủ tốt?
Công cụ chia điểm Hiệu suất thành ba vùng: 90 đến 100 là tốt, 50 đến 89 cần cải thiện, dưới 50 là chậm. Nhưng điểm này chỉ là kết quả một lần đo giả lập. Việc đáng xem hơn là ba chỉ số LCP, INP, CLS có nằm trong ngưỡng tốt hay không.
Vì sao đo hai lần ra hai điểm khác nhau?
Dữ liệu mô phỏng phụ thuộc vào tình trạng mạng và máy chủ ở thời điểm đo, nên dao động giữa các lần là bình thường. Hãy đo ba lần liên tiếp, lấy số ở giữa, và so sánh trước và sau khi sửa bằng cùng một cách đo.
Điểm thấp có làm website mất thứ hạng không?
Tốc độ là một tín hiệu trong nhóm trải nghiệm trang, nhưng Google nói rõ nội dung phù hợp với câu hỏi của người tìm vẫn quan trọng hơn. Điểm thấp không tự làm mất thứ hạng, song trang chậm làm khách bỏ đi trước khi mua.
Trang mới làm sao không có dữ liệu thực tế?
Dữ liệu thực tế chỉ xuất hiện khi trang có đủ lượt truy cập từ người dùng Chrome trong 28 ngày gần nhất. Trang mới hoặc ít khách sẽ chỉ có phần mô phỏng, và đó là điều bình thường.
Có cần đo cả điện thoại và máy tính không?
Có, nhưng hãy xem điện thoại trước. Khách mua hàng qua mạng xã hội phần lớn mở trang bằng điện thoại, và điện thoại thường cho điểm thấp hơn vì phần cứng yếu hơn.
