Quảng cáo chạy đều, người bấm vào nhiều, mà đơn không lên. Bạn thử mở web trên điện thoại, dùng 4G ngoài đường. Trang trắng trơn mấy giây mới hiện ảnh đầu tiên. Nếu là khách, chắc bạn cũng đã bấm thoát.
Web chậm không báo lỗi gì cả. Nó chỉ lặng lẽ làm khách bỏ đi, và bạn chỉ thấy con số đơn hàng thấp mà không biết vì sao.
Chậm thì mất khách thế nào
Hãy hình dung cửa tiệm của bạn có một cánh cửa rất nặng. Khách tới trước cửa, đẩy mãi không vào, đa số sẽ quay sang tiệm bên cạnh. Trang web chậm cũng giống vậy, chỉ khác là khách bỏ đi trong vài giây và không để lại lời nhắn.
Google từng ủy quyền một nghiên cứu cho hai công ty độc lập (55 và Deloitte), theo dõi 37 thương hiệu châu Âu và Mỹ với hơn 30 triệu lượt truy cập trên di động. Kết quả được đăng trên web.dev: chỉ cần bốn chỉ số tốc độ cùng nhanh hơn 0,1 giây (một phần mười giây), nhóm bán lẻ có thêm 9,2% giá trị chi tiêu, và tỷ lệ khách đi từ trang sản phẩm sang giỏ hàng tăng 9,1%. Đây là một nghiên cứu cụ thể trên các thương hiệu lớn, không phải lời hứa cho riêng shop của bạn. Nhưng nó cho thấy hướng đi: nhanh hơn thì khách đi tiếp nhiều hơn.
Chậm cũng ảnh hưởng tới Google. Google dùng trải nghiệm trang (trong đó có tốc độ) như một trong nhiều tín hiệu xếp hạng. Mình không có con số nào để nói nó nặng bao nhiêu, và bạn nên nghi ngờ ai đưa ra con số chắc chắn. Điều chắc chắn hơn là khách thật sự thấy chậm.
Tự kiểm tra trong 5 phút
Mở trang pagespeed.web.dev (công cụ miễn phí của Google). Dán địa chỉ trang bạn muốn kiểm tra, ví dụ trang chủ hoặc một trang sản phẩm bán chạy, rồi bấm phân tích. Chờ khoảng nửa phút.
Bạn sẽ thấy hai khối. Khối trên (nếu có) là "dữ liệu từ người dùng thật" trong 28 ngày gần nhất, lấy từ trình duyệt Chrome của khách. Khối dưới là phép đo thử ngay lúc đó trên một chiếc máy ảo. Hãy xem tab Di động trước, vì phần lớn khách của shop vào bằng điện thoại.
Nếu web mới hoặc ít người vào, khối dữ liệu thật có thể trống. Không sao, khi đó bạn đọc phép đo thử và nhớ rằng nó dao động giữa các lần đo. Đo ba lần, lấy giá trị ở giữa.
Ba chỉ số, nói bằng lời thường
Google gom trải nghiệm vào ba con số, gọi chung là Core Web Vitals. Ngưỡng "tốt" dưới đây lấy từ tài liệu của web.dev.
Chỉ số thứ nhất là LCP (Largest Contentful Paint), nghĩa là thời gian cho tới khi phần lớn nhất của màn hình đầu tiên hiện ra, thường là ảnh banner hoặc ảnh sản phẩm. Nó trả lời câu "bao lâu thì khách thấy trang có gì". Ngưỡng tốt là trong 2,5 giây.
Chỉ số thứ hai là INP (Interaction to Next Paint): sau khi khách bấm hoặc chạm, bao lâu thì trang có phản ứng nhìn thấy được. Bấm "thêm vào giỏ" mà nút đứng im nửa giây là INP kém. Ngưỡng tốt là 200 mili giây trở xuống.
Chỉ số thứ ba là CLS (Cumulative Layout Shift), đo việc trang có nhảy lung tung khi đang tải không. Bạn đang định bấm nút này thì một ảnh quảng cáo chen vào, đẩy nút xuống, và bạn bấm nhầm nút khác. Đó là CLS cao. Ngưỡng tốt là 0,1 trở xuống.
Google đánh giá trang là đạt khi 75% lượt truy cập thật đều nằm trong ngưỡng tốt của cả ba chỉ số. Nên một điểm tổng hiển thị 95 trên phép đo thử chưa chắc có nghĩa là khách thật thấy nhanh.
Việc bạn tự làm được
Phần lớn lỗi chậm ở shop nhỏ đến từ ảnh. Ảnh sản phẩm chụp bằng điện thoại thường nặng vài MB, trong khi trang chỉ hiển thị chúng ở khổ nhỏ. Trước khi tải lên, hãy thu nhỏ về chiều rộng khoảng 1600 điểm ảnh và nén lại, các công cụ như Squoosh của Google làm việc này ngay trên trình duyệt. Định dạng WebP thường nhẹ hơn JPG cùng chất lượng.
Việc thứ hai là bớt đồ gắn thêm. Mỗi plugin, mỗi đoạn mã theo dõi, mỗi cửa sổ chat hay vòng quay may mắn đều thêm một chút thời gian tải. Hãy liệt kê và gỡ những thứ bạn không dùng nữa. Ngoài ra, đừng đặt quá nhiều video tự chạy ở trang chủ.
Việc thứ ba là kiểm tra lại sau mỗi lần thay đổi lớn. Cứ sau khi đổi giao diện hoặc cài plugin mới, đo lại một lần và ghi điểm vào sổ. Nhờ vậy khi điểm tụt, bạn biết nguyên nhân nằm ở thay đổi nào.
Việc nên nhờ dev
Có những việc bạn không nên tự mày mò. Máy chủ phản hồi chậm (thời gian chờ byte đầu tiên cao) thường do cấu hình hosting hoặc cơ sở dữ liệu. Bộ nhớ đệm (cache) cho trang, chặn mã chạy trước khi trang hiện, tải hoãn phần mã không cần, tách font, sửa chỗ ảnh nhảy khung vì thiếu kích thước. Những việc này cần động vào mã hoặc cấu hình máy chủ, làm sai có thể hỏng giỏ hàng.
Khi nhờ dev, bạn đưa họ ảnh chụp kết quả PageSpeed và nói rõ trang nào, đo trên di động hay máy tính. Người làm đúng nghề sẽ chỉ ra được cụ thể chỉ số nào kém và vì sao, thay vì hứa "tối ưu cho nhanh". Nếu bạn là dev và muốn xem một ví dụ đã đo từng bước, mình có viết bài Từ 95 lên 99 điểm tốc độ mobile: mình đã làm gì với một site Next.js.
Lỗi hay gặp
Có chủ shop đo trang chủ ra điểm cao, rồi yên tâm. Trong khi trang sản phẩm, nơi khách thật sự quyết định mua, lại nặng gấp đôi vì có nguyên thư viện ảnh. Hãy đo ít nhất ba loại trang: trang chủ, danh mục, sản phẩm.
Một lỗi khác là đo trên máy tính văn phòng, mạng cáp quang, rồi kết luận web nhanh. Khách của bạn có thể đang đứng trong thang máy với một vạch sóng. Dùng tab Di động và để ý chính khoảnh khắc bạn cảm thấy "sao lâu thế".
Lỗi cuối là bỏ ngay vì điểm chưa tới 100. Không cần 100. Mục tiêu hợp lý là cả ba chỉ số vào vùng xanh, sau đó dồn sức cho nội dung và quảng cáo.
Nên làm gì tiếp theo
Hôm nay hãy đo ba trang chính, chụp màn hình, chép lại ba con số LCP, INP, CLS. Sửa trước phần ảnh vì đó là việc rẻ nhất. Nếu sau đó vẫn đỏ, mang kết quả đi nhờ dev. Nếu bạn cần một người xem giúp, bạn có thể nhắn mình, mình nhận làm web theo yêu cầu.
