Điểm mục tiêu chốt trước
Con số cụ thể cho từng trang được chọn, ghi trong báo giá hoặc hợp đồng. Mục tiêu thông thường là vùng xanh (90 trở lên) trên PageSpeed Insights, cả mobile và desktop khi điều kiện cho phép.
● khach@hvsc:~/pagespeed$ do --truoc && sua && do --sau
Cam kết điểm PageSpeedChốt điểm mục tiêu bằng văn bản, đo trước, sửa tận gốc, đo lại để đối chiếu
Website WordPress hoặc WooCommerce chậm thì khách rời đi trước khi thấy sản phẩm. Kỹ sư HVSC sửa từ máy chủ, cơ sở dữ liệu đến mã giao diện, gỡ plugin thừa, viết lại tính năng nhẹ hơn. Điểm mục tiêu được chốt trước khi làm và ghi vào báo giá hoặc hợp đồng; kết quả đo bằng công cụ công khai, đo trước và sau trên đúng trang đã chọn.
waterfall — minh hoạ cách đọcms →
01 Cam kết điểm mục tiêu
Con số được chốt trước, ghi vào báo giá
Không hứa chung chung. Trước khi làm, hai bên chốt trang nào được đo, đo bằng công cụ nào, đạt mức nào thì coi là xong.
- Trang được đo
- Trang chủ, một trang danh mục, một trang sản phẩm (do chủ website chọn)
- Công cụ
- PageSpeed Insights (Lighthouse), mobile và desktop
- Điểm mục tiêu
- Chốt bằng số, thông thường vùng xanh 90 trở lên
- Cách lấy số
- Đo nhiều lần, lấy trung vị, ghi ngày và giờ đo
- Điều kiện
- HVSC có quyền chỉnh theme, plugin, máy chủ
- Chưa đạt mục tiêu
- Theo điều khoản ghi trong hợp đồng
Đo minh bạch, ai cũng kiểm lại được
PageSpeed Insights và Lighthouse, trên trang cụ thể, đo trước khi làm và sau khi làm, nhiều lần lấy trung vị, ghi ngày đo. Chủ website tự chạy lại được bằng cùng công cụ.
Điều kiện để cam kết có nghĩa
HVSC được truy cập và chỉnh theme, plugin, máy chủ. Phần phụ thuộc bên thứ ba như script quảng cáo, chat, pixel, phông chữ ngoài được thoả thuận riêng vì chúng kéo điểm xuống. Điểm lab dao động theo thời điểm đo nên mới phải lấy trung vị.
Khi chưa đạt mục tiêu
Điều khoản khi chưa đạt mục tiêu được ghi trong hợp đồng ngay từ đầu, cùng với cách đo ở mục B làm căn cứ đối chiếu. Hai bên xem lại số đo thật, không tranh luận bằng lời.
02 Ba chỉ số Core Web Vitals
Điểm số chỉ là bóng của ba con số thật
Google đo trải nghiệm bằng LCP, CLS và INP. Ngưỡng "tốt" dưới đây là ngưỡng công bố của Google. HVSC sửa theo từng chỉ số, không sửa theo điểm tổng.
LCP · tải phần chính
≤ 2,5 giây
tốt ≤ 2,5s · cần cải thiện ≤ 4s · kém > 4s
Ảnh đầu trang tải chậm
- Ảnh WebP/AVIF đúng kích thước, nạp ưu tiên (fetchpriority), không lazy-load ảnh đầu trang
- Giảm TTFB bằng cache trang, OPcache, truy vấn gọn
- Bỏ CSS và font chặn hiển thị
CLS · độ ổn định bố cục
≤ 0,1 điểm
tốt ≤ 0,1 · cần cải thiện ≤ 0,25 · kém > 0,25
Trang giật khi đang tải
- Khai báo width/height cho ảnh, video, khung quảng cáo
- Giữ chỗ cho banner, thanh cookie, widget chat
- Font dự phòng cùng kích thước để không nhảy chữ
INP · độ nhạy khi bấm
≤ 200 ms
tốt ≤ 200ms · cần cải thiện ≤ 500ms · kém > 500ms
Bấm mà trang đứng hình
- Chia nhỏ tác vụ JavaScript dài (long task) để luồng chính không bị nghẽn, hoãn script bên thứ ba
- Gỡ slider, popup, hiệu ứng nặng không tạo ra đơn hàng
- Giảm số phần tử trang (DOM) và sự kiện thừa
03 Nguyên nhân hay gặp
Website chậm thường chậm ở những chỗ này
Mỗi dòng là một điểm nghẽn thật hay thấy trên WordPress và WooCommerce, kèm cách sửa. Việc đầu tiên luôn là đo xem website của anh chị nghẽn ở dòng nào.
TTFB
Máy chủ trả lời chậm
Không có cache trang, PHP cũ, cơ sở dữ liệu nhiều truy vấn nặng, nhiều website chen một máy chủ dùng chung.
Sửa cache trang, OPcache, object cache khi cần, rà truy vấn chậm, chuyển sang VPS được cấu hình đúng.
IMG
Ảnh nặng, sai kích thước
Ảnh gốc từ máy ảnh đưa thẳng lên web; ảnh đầu trang bị nạp trễ.
Sửa nén và đổi sang WebP/AVIF, srcset đúng khổ, ưu tiên nạp ảnh LCP, lazy-load phần dưới màn hình.
FONT
Phông chữ chặn hiển thị
Nạp nhiều họ phông từ máy chủ ngoài, trang trắng chữ rồi mới hiện.
Sửa tự host phần ký tự cần dùng, preload đúng tệp, font-display và phông dự phòng cùng khổ.
CSS
CSS thừa, chặn kết xuất
Theme và plugin nạp cả trăm KB CSS cho trang chỉ dùng một phần nhỏ.
Sửa nạp CSS theo từng loại trang, tách phần cần cho màn hình đầu, hoãn phần còn lại.
JS
JavaScript nặng
Slider, page builder, thư viện nạp ở mọi trang, kể cả trang không dùng.
Sửa defer, chỉ nạp ở trang cần, bỏ thư viện trùng, thay hiệu ứng nặng bằng CSS.
3RD
Script bên thứ ba
Pixel, chat, bản đồ, video nhúng, đo lường chồng chéo.
Sửa trì hoãn đến khi khách tương tác, thay video nhúng bằng ảnh bấm để phát, thoả thuận riêng cho phần bắt buộc giữ.
PLG
Plugin chồng chéo
Nhiều plugin làm việc nhỏ, mỗi plugin kéo thêm CSS, JS và truy vấn.
Sửa gỡ cái thừa, viết tính năng riêng gọn hơn thay thế (mục 04).
04 Gỡ plugin thừa
Ít plugin hơn, mã riêng gọn hơn
Một tính năng đơn giản như chèn mã đo lường, tạo nút gọi nổi, sắp xếp lại bước thanh toán không cần một plugin trăm KB. Kỹ sư HVSC viết đúng phần cần dùng, đặt thành mã riêng có ghi chú.
- Chỉ thay khi đáng thay: plugin an ninh, thanh toán, SEO lõi vẫn giữ nếu đáng tin
- Có sao lưu và thử trên bản sao trước khi gỡ
- Mã riêng có tài liệu để người sau còn bảo trì được
plugin-diet — minh hoạ
05 Quy trình
Đo, sửa, đo lại: từng bước có đầu ra
- bước 1 · đo
Đo hiện trạng
Chạy PageSpeed Insights, Lighthouse, WebPageTest trên các trang được chọn, mobile và desktop, nhiều lần lấy trung vị. Xem thêm dữ liệu người dùng thật (CrUX) nếu website đủ truy cập.
→ bảng số đo trước, ghi ngày giờ
- bước 2 · chốt
Chốt điểm mục tiêu
Chỉ ra điểm nghẽn thật, nói rõ phần nào sửa được, phần nào phụ thuộc bên thứ ba. Chốt điểm mục tiêu, phạm vi, báo giá.
→ báo giá kèm điểm mục tiêu
- bước 3 · sao lưu
Sao lưu và dựng bản thử
Sao lưu tệp và cơ sở dữ liệu, thử thay đổi trên bản sao trước khi đụng website đang chạy.
→ có đường quay lại
- bước 4 · sửa
Sửa từ gốc đến ngọn
Máy chủ và cache, cơ sở dữ liệu, ảnh, font, CSS, JS, plugin. Làm theo thứ tự ảnh hưởng lớn trước.
→ nhật ký thay đổi
- bước 5 · kiểm
Kiểm chức năng
Thử giỏ hàng, thanh toán, biểu mẫu, đăng nhập trên điện thoại và máy tính. Tối ưu mà hỏng đặt hàng thì coi như chưa làm.
→ danh sách kiểm đã tick
- bước 6 · đo lại
Đo lại và bàn giao
Đo lại cùng trang, cùng công cụ, cùng cách lấy trung vị. Bàn giao báo cáo trước/sau và hướng dẫn giữ tốc độ khi đăng nội dung mới.
→ báo cáo trước / sau
06 Đọc số đo cho đúng
Điểm lab và số liệu người dùng thật không phải một thứ
Hai nguồn số liệu này hay bị nhầm. HVSC ghi rõ nguồn nào cho từng con số trong báo cáo.
| Nguồn | Là gì | Dùng để |
|---|---|---|
| Lighthouse / PageSpeed Insights (lab) | Chạy thử trên thiết bị và mạng mô phỏng, một thời điểm | So trước/sau, tìm lỗi cụ thể. Dao động giữa các lần đo |
| CrUX (field) | Dữ liệu người dùng Chrome thật, gộp nhiều ngày | Biết khách thật có thấy nhanh không (cần đủ lượt truy cập) |
| WebPageTest | Thử từ nhiều địa điểm, có biểu đồ thác nước chi tiết | Tìm tệp nào chặn tải, thứ tự nạp |
| Search Console (Core Web Vitals) | Báo cáo nhóm URL theo dữ liệu thật | Theo dõi sau khi sửa vài tuần |
07 Case
Một website thật đã đi qua quy trình này
Case vuonannam.com: website cũ rất yếu được nâng cấp giao diện, làm SEO, tối ưu lõi và theme, bỏ phần lớn plugin, code tính năng riêng. Điểm PageSpeed trong case được đo thật bằng Lighthouse và ghi rõ ngày đo.
08 Câu hỏi thường gặp
Hỏi trước khi chốt điểm mục tiêu
HVSC cam kết điểm PageSpeed như thế nào?
Điểm mục tiêu được chốt bằng số cho từng trang trước khi làm và ghi vào báo giá hoặc hợp đồng. Thông thường mục tiêu là vùng xanh (90 trở lên) trên PageSpeed Insights, cả mobile và desktop khi điều kiện cho phép. Điều khoản khi chưa đạt mục tiêu được ghi trong hợp đồng.
Đo điểm bằng cách nào để không tranh cãi?
Dùng PageSpeed Insights hoặc Lighthouse trên đúng trang đã chọn, đo trước và sau khi làm, đo nhiều lần lấy trung vị và ghi ngày đo. Chủ website tự chạy lại được bằng cùng công cụ.
Điều kiện nào ảnh hưởng đến điểm mục tiêu?
HVSC cần quyền truy cập để chỉnh theme, plugin và máy chủ. Script bên thứ ba như quảng cáo, chat, pixel, phông chữ ngoài ảnh hưởng điểm nên được thoả thuận riêng. Điểm lab cũng dao động theo thời điểm đo.
Tối ưu tốc độ có làm hỏng giao diện hay giỏ hàng không?
HVSC sao lưu trước, thử trên bản sao và kiểm lại giỏ hàng, thanh toán, biểu mẫu trên điện thoại và máy tính trước khi áp dụng thật.
Website của tôi chạy trên hosting dùng chung, làm được không?
Quyền chỉnh máy chủ rất hạn chế nên khó đạt mục tiêu. HVSC không bán hosting lẻ; khi cần chỉnh sâu, giải pháp là chuyển sang VPS được cấu hình đúng.
Điểm lab và số liệu người dùng thật khác nhau thế nào?
Điểm lab (Lighthouse) là chạy thử một thời điểm trên thiết bị mô phỏng. Số liệu CrUX là dữ liệu người dùng Chrome thật gộp nhiều ngày. HVSC ghi rõ nguồn của từng con số trong báo cáo.
Gỡ plugin có mất tính năng không?
Chỉ gỡ plugin trùng hoặc không dùng. Với tính năng đơn giản cần giữ, kỹ sư viết mã riêng gọn hơn thay thế, có sao lưu và có đường quay lại.
$ hvsc --lien-he
Gửi địa chỉ website, nhận bản đo hiện trạng
HVSC đo các trang bạn chọn trên di động và máy tính, chỉ ra điểm nghẽn, rồi đề xuất điểm mục tiêu kèm báo giá. Điều khoản khi chưa đạt mục tiêu được ghi trong hợp đồng.
Gửi website cần đo tốc độ// trả lời trong giờ làm việc
