Cách sửa trang tải chậm và Core Web Vitals
Core Web Vitals đo mức độ nhanh của trang: nội dung chính hiện ra nhanh đến đâu, phản hồi nhanh thế nào và giữ ổn định ra sao. Mỗi chỉ số đều có một danh sách ngắn các nguyên nhân thường gặp.
Ba con số cần nhắm tới
| Chỉ số | Đo lường | Tốt |
|---|---|---|
| LCP | Khi nội dung chính xuất hiện | 2,5 s trở xuống |
| INP | Trang phản hồi nhanh thế nào khi có tương tác | 200 ms trở xuống |
| CLS | Bố cục dịch chuyển nhiều đến đâu | 0,1 trở xuống |
Chạy Page Speed Test để xem các chỉ số của bạn. Điểm số có thể khác nhau giữa các lần chạy, và một bản triển khai mới có thể chậm hơn cho đến khi bộ nhớ đệm được lấp đầy, vì vậy hãy kiểm tra nhiều hơn một lần.
Kiểm thử trong phòng thí nghiệm mô phỏng một lượt truy cập. Dữ liệu thực địa đến từ người dùng Chrome thật, và đây là dữ liệu Google dùng để đánh giá trải nghiệm trang. Một trang mới có thể chưa có dữ liệu thực địa.
Sửa LCP chậm
Phần tử lớn nhất thường là ảnh banner hoặc tiêu đề chính. Hãy bắt đầu từ ảnh:
- Nén ảnh và thay đổi kích thước cho đúng với kích thước hiển thị, rồi dùng WebP hoặc AVIF.
- Không bao giờ lazy-load ảnh chính, và báo cho trình duyệt biết ảnh này quan trọng:
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="...">- Kiểm tra máy chủ phản hồi nhanh. Hosting chậm sẽ kéo chậm mọi thứ phía sau, vì vậy hãy dùng CDN và lưu bộ nhớ đệm HTML khi có thể.
- Bật nén và xác nhận bằng Website Compression Test.
Sửa INP chậm
INP kém khi JavaScript khiến trình duyệt bận liên tục, nên các lần chạm và nhấp phải chờ. Các script bên thứ ba như widget chat và công cụ theo dõi thường là nguyên nhân phổ biến.
- Gỡ bỏ các script không cần thiết và tải phần còn lại với
defer. - Trì hoãn các tác vụ nặng cho đến sau khi trang tải xong, hoặc cho đến khi người dùng thực sự cần.
- Chia các tác vụ dài thành những phần nhỏ hơn để trình duyệt có thể phản hồi giữa các phần.
Sửa CLS cao
Nội dung bị nhảy khi có thứ gì đó tải muộn và đẩy mọi thứ xuống dưới.
- Đặt
widthvàheightcho mọi ảnh và video. - Dành sẵn không gian cho quảng cáo và nhúng bằng chiều cao tối thiểu cố định.
- Tránh thêm banner phía trên nội dung đã tải xong.
Nên bắt đầu từ đâu
Hãy sửa các mẫu trang được truy cập nhiều nhất trước. Trang chủ, trang sản phẩm và mẫu bài viết blog thường bao quát phần lớn một website. Chỉ thay đổi một thứ mỗi lần và kiểm tra lại, để bạn biết điều gì thực sự có tác dụng.
