Web chậm mất đơn thế nào, và cách tự đo tốc độ

Khách đứng ở lề đường Nguyễn Trãi, một tay cầm nón bảo hiểm, mở web quán bạn bằng 4G để xem có còn mở cửa không. Ba giây, màn hình vẫn trắng. Họ thoát, mở Google Maps của quán bên cạnh. Bạn vừa mất một đơn mà không bao giờ biết. Đó là toàn bộ lý do bài này tồn tại.

Core Web Vitals, nói cho dễ hiểu

Google đo tốc độ web bằng ba chỉ số. Tên nghe khó nhưng ý thì đơn giản:

Chỉ số	Nghĩa đen là gì	Tốt là dưới
LCP	Bao lâu thì khách thấy được nội dung chính (ảnh lớn hoặc dòng tiêu đề)	2,5 giây
INP	Khách bấm nút xong, bao lâu thì máy phản hồi	200 mili giây
CLS	Nội dung có nhảy làm khách bấm nhầm không	0,1

CLS là cái nhiều người bỏ qua nhưng khách ghét nhất. Bạn sắp bấm nút “Gọi”, ảnh banner tải xong đẩy nút xuống, ngón tay bấm trúng “Xem thêm”. Trên điện thoại, một lần như vậy là mất khách.

Ba chỉ số này Google dùng làm tín hiệu xếp hạng. Nhưng thật lòng, tác động lên tỷ lệ khách ở lại còn lớn hơn tác động lên thứ hạng.

Tự đo trong 2 phút

1. Vào pagespeed.web.dev.
2. Dán địa chỉ web của bạn, bấm Phân tích.
3. Chọn tab Mobile, không phải Desktop. Khách tiệm bạn gần như 100% dùng điện thoại. Điểm Desktop lúc nào cũng đẹp hơn và nó đánh lừa bạn.
4. Đọc ba chỗ:
   • Vòng tròn Performance trên cùng: dưới 50 là đỏ, 50–89 là cam, 90+ là xanh.
   • Ba ô LCP / INP / CLS: so với ngưỡng bảng trên.
   • Phần Opportunities bên dưới: nó liệt kê thẳng thứ nào đang làm chậm và tiết kiệm được bao nhiêu giây.

Đo lúc mạng khác nhau sẽ ra số khác nhau, nên đo 2–3 lần lấy con số giữa. Và đo cả trang chủ lẫn trang dịch vụ chính, hai trang thường chênh nhau nhiều.

Năm nguyên nhân hay gặp ở web tiệm Việt

1. Ảnh chụp 4MB up thẳng lên

Đây là nguyên nhân số một, không có đối thủ. Điện thoại giờ chụp ra file 3–5MB. Chủ tiệm up nguyên xi lên web. Trang có 8 ảnh món ăn là khách phải tải 30MB qua 4G.

Sửa: nén ảnh xuống WebP. WebP là định dạng ảnh của Google, cùng chất lượng nhìn bằng mắt nhưng nhẹ hơn JPG chừng 25–35%. Cách làm không cần cài gì: vào squoosh.app, kéo ảnh vào, chọn WebP ở cột phải, kéo thanh Quality về 75, tải xuống. Ảnh 4MB thường xuống còn 150–250KB.

Nguyên tắc kích thước: ảnh hiển thị ngang màn hình thì cạnh dài 1600px là thừa đủ, ảnh trong danh sách món thì 800px. Không có lý do nào để một tấm ảnh trên web tiệm nặng quá 300KB.

2. Nhúng năm cái script

Widget chat, pixel Facebook, mã đếm lượt xem, popup thu email, plugin đánh giá. Mỗi cái kéo thêm một file JavaScript từ máy chủ khác, và trình duyệt phải chờ.

Sửa: giữ tối đa hai. Thường là một pixel đo quảng cáo (nếu bạn thật sự chạy quảng cáo) và một nút Zalo. Nút Zalo thì dùng link https://zalo.me/số-điện-thoại chứ đừng nhúng widget — link thì nặng 0 byte.

3. Theme WordPress nặng

Theme bán trên chợ hay gói kèm page builder, slider, thư viện icon, 4 font. Một trang trống của theme kiểu đó đã nặng 2–3MB trước khi bạn viết chữ nào.

Sửa: khó sửa. Đây là lỗi từ gốc. Hoặc đổi theme nhẹ, hoặc đổi cách dựng web — xem web tĩnh vs web động để hiểu vì sao tiệm nhỏ hầu như không cần WordPress.

4. Hosting share chậm

Gói hosting 300k/năm nhét vài trăm website chung một máy. Máy chủ đặt ở Mỹ trong khi khách ở Gò Vấp — mỗi vòng đi về đã tốn 200ms trước khi máy chủ làm gì.

Sửa: dùng hosting có máy chủ hoặc CDN ở gần Việt Nam. Chi tiết cách chọn ở bài tên miền và hosting.

5. Slider ảnh ở đầu trang

Slider tự chạy 5 ảnh lớn ngay trên đầu là kẻ giết LCP kinh điển. Trình duyệt phải tải cả 5 ảnh, cộng thư viện JavaScript chạy slider, trước khi khách thấy gì.

Sửa: bỏ slider, thay bằng một ảnh tĩnh và một dòng tiêu đề rõ ràng. Mình viết kỹ hơn về chuyện nên đặt gì ở đó trong bài về màn hình đầu tiên. Bỏ slider thường kéo LCP xuống 1–2 giây, không cần làm gì thêm.

Chuyện nén ảnh, nói kỹ hơn

Nhiều người nén một lần rồi thôi, nhưng ảnh mới up lên hằng tháng lại nặng như cũ. Nên biến nó thành thói quen:

• Trước khi up bất kỳ ảnh nào, qua squoosh.app hoặc dùng chức năng resize sẵn có trong app ảnh của điện thoại (chọn “Vừa” thay vì “Gốc” khi chia sẻ).
• Chọn WebP khi có thể. Mọi trình duyệt còn dùng ở Việt Nam đều đọc được WebP, kể cả Safari.
• Đặt sẵn chiều rộng và chiều cao cho ảnh trong HTML. Đây là cách chống CLS: trình duyệt biết trước ảnh chiếm bao nhiêu chỗ nên không đẩy nội dung khi ảnh tải xong.
• Đừng lazy-load ảnh đầu trang. Lazy-load tốt cho ảnh phía dưới, nhưng áp cho ảnh lớn nhất trên đầu thì làm LCP tệ hơn.

Cảnh báo: ảnh logo dạng PNG trong suốt hay bị để nguyên 2000px. Logo hiển thị có 160px trên màn hình. Resize xuống 320px là đủ nét trên màn hình retina.

Số của mẫu taphoaweb

Nói cho công bằng thì mình có lợi thế ở đây: web taphoaweb dựng ra là trang tĩnh nằm trên Cloudflare. Không có máy chủ chạy PHP, không có truy vấn cơ sở dữ liệu mỗi lần khách vào, file HTML nằm sẵn ở máy chủ biên gần người dùng.

Kết quả đo trên các mẫu: Lighthouse mobile từ 90 điểm Performance trở lên, LCP dưới 2,5 giây trên 4G. Ảnh được nén sang WebP tự động khi bạn up qua trang quản trị, kích thước ảnh được khai sẵn nên CLS gần bằng 0.

Đây không phải phép màu, chỉ là hệ quả của việc không chất thêm thứ không cần. Bạn hoàn toàn có thể đạt số tương tự trên WordPress nếu chịu khó dọn — chỉ là mất nhiều buổi tối hơn.

Việc làm tối nay, 30 phút

1. Đo pagespeed.web.dev, tab Mobile, trang chủ. Chụp màn hình lại để tuần sau so.
2. Mở trang chủ trên điện thoại, đếm xem có bao nhiêu ảnh và có slider không.
3. Tải 5 ảnh nặng nhất về máy, qua squoosh.app, xuất WebP quality 75, up đè lên.
4. Vào phần cài đặt web, tắt mọi widget bạn không nhớ nổi lý do đã bật.
5. Nếu có slider đầu trang, bỏ, giữ lại một ảnh.
6. Đo lại. Nếu điểm không nhúc nhích sau khi làm 5 việc trên, vấn đề nằm ở theme hoặc hosting, không nằm ở nội dung của bạn.

Nếu bạn làm hết mà điểm vẫn dưới 50, thật ra dựng lại nhanh hơn dọn — landing page 990.000đ giao trong 24 giờ hoặc xem trước mẫu theo ngành để biết một trang nhẹ trông thế nào.