Một website có thể mở nhanh trên máy tính của người quản trị nhưng chậm trên điện thoại của khách. Nguyên nhân không nhất thiết do hosting; đôi khi trang đang tải banner rất lớn, nhiều mã theo dõi hoặc animation không cần thiết.
Muốn sửa đúng, trước tiên cần đo đúng điều kiện sử dụng thay vì nhìn tốc độ bằng cảm giác.
Hiểu ba chỉ số cốt lõi
LCP phản ánh thời gian hiển thị phần nội dung lớn nhất; INP đánh giá phản hồi của trang trước thao tác người dùng; CLS đo mức dịch chuyển bố cục ngoài ý muốn. Google dùng các chỉ số này để đánh giá trải nghiệm thực tế.
Một trang có LCP tốt vẫn có thể chậm khi nhấn nút nếu JavaScript chiếm luồng xử lý. Ngược lại, ảnh chưa khai báo kích thước có thể khiến trang giật khi đang tải dù mạng nhanh.
Kiểm tra ảnh lớn trước
Xác định ảnh nào xuất hiện trong màn hình đầu tiên. Nếu là banner, nên dùng kích thước phù hợp từng thiết bị, nén đúng định dạng và tải ảnh quan trọng với ưu tiên hợp lý. Các ảnh dưới màn hình có thể tải khi gần xuất hiện.
Ảnh chụp website demo rất dài cần khung hiển thị và giới hạn tải phù hợp; không nên để hàng chục ảnh toàn trang được giải mã cùng lúc trên điện thoại.
Đọc lại JavaScript và hiệu ứng
Slider, thư viện animation, biểu đồ và các plugin chat có thể cùng chạy khi trang mở. Kiểm tra script nào thực sự cần ở trang hiện tại, script nào có thể tải sau và listener nào đang chạy liên tục khi cuộn.
Với hover hoặc cuộn ảnh, ưu tiên transform có giới hạn và tôn trọng cài đặt giảm chuyển động trên thiết bị.
CSS và font cũng ảnh hưởng cảm nhận
Một file CSS lớn có thể làm chậm phân tích kiểu, nhưng không nên xóa tùy tiện các quy tắc đang dùng. Trước khi dọn, cần lập ảnh đối chiếu để tránh làm vỡ những trang đã duyệt.
Font cần giới hạn biến thể và khai báo phương án hiển thị để văn bản không bị ẩn lâu. Giữ chiều cao vùng ảnh và khung card ổn định giúp giảm CLS.
Đo lại sau từng thay đổi
Dùng Lighthouse để tìm hạng mục có thể cải thiện trong môi trường kiểm thử, sau đó xem dữ liệu người dùng thực tế nếu có. So sánh các lần đo cùng điều kiện thiết bị và mạng; không kết luận từ một lần bấm.
Nếu cần xây lại hoặc kiểm tra cấu trúc, tham khảo thiết kế và tối ưu website. Tài liệu: Core Web Vitals – web.dev.