Mục lục
Một website tải chậm không chỉ khiến khách hàng bỏ đi mà còn bị Google đánh giá thấp hơn trong kết quả tìm kiếm. Tin tốt là phần lớn nguyên nhân làm web chậm đến từ vài lỗi quen thuộc, và bạn có thể sửa chúng mà không cần làm lại toàn bộ website. Bài viết này tổng hợp 6 cách tăng điểm Google PageSpeed mà AloCoder áp dụng thực tế.
Google PageSpeed đo những gì?
Google PageSpeed Insights chấm điểm trang từ 0 đến 100 dựa trên các chỉ số Core Web Vitals. Ba chỉ số quan trọng nhất là:
- LCP (Largest Contentful Paint): thời gian hiển thị phần nội dung lớn nhất, thường là ảnh đầu trang. Nên dưới 2,5 giây.
- CLS (Cumulative Layout Shift): mức độ trang bị xô lệch khi đang tải. Nên dưới 0,1.
- INP (Interaction to Next Paint): độ trễ khi người dùng bấm hoặc chạm. Nên dưới 200 mili giây.
1. Dùng ảnh WebP và đúng kích thước
Ảnh thường chiếm phần lớn dung lượng trang. Chuyển ảnh JPG, PNG sang WebP giúp giảm 25–80% dung lượng mà mắt thường khó thấy khác biệt. Ngoài ra, đừng tải ảnh rộng 3000px cho màn hình điện thoại chỉ rộng 400px: hãy dùng thuộc tính srcset để trình duyệt tự chọn bản vừa đủ.
2. Khai báo chiều rộng và chiều cao cho ảnh
Khi thẻ ảnh không có width và height, trình duyệt không biết trước chỗ để chừa, nên nội dung bị đẩy xuống lúc ảnh tải xong. Đây là nguyên nhân phổ biến nhất làm điểm CLS kém. Chỉ cần thêm hai thuộc tính này là trang ổn định ngay.
3. Ưu tiên ảnh đầu trang, tải chậm ảnh phía dưới
Ảnh đầu tiên người dùng nhìn thấy nên được đánh dấu fetchpriority="high" để tải sớm nhất. Các ảnh nằm phía dưới thì dùng loading="lazy", chỉ tải khi người dùng cuộn tới. Cách này cải thiện LCP rõ rệt trên điện thoại.
4. Giảm CSS chặn hiển thị
Trình duyệt phải tải xong mọi file CSS trong phần đầu trang rồi mới vẽ nội dung. Hãy giữ lại CSS quyết định bố cục, còn CSS của bộ icon hay các plugin phụ thì nạp sau. Trên website thử nghiệm của AloCoder, riêng bước này đã giúp nội dung hiện ra nhanh gấp đôi, từ 2,1 giây xuống 1,1 giây.
5. Chuyển font sang định dạng WOFF2
Font TTF thường không được nén khi gửi về trình duyệt. Định dạng WOFF2 nhỏ hơn khoảng 60% và được mọi trình duyệt hiện đại hỗ trợ. Nhớ thêm font-display: swap để chữ vẫn hiện ngay bằng font dự phòng trong lúc chờ font chính.
6. Bật nén và bộ nhớ đệm trên máy chủ
Bật nén gzip hoặc Brotli cho HTML, CSS, JavaScript và đặt thời gian lưu bộ nhớ đệm dài cho ảnh, font. Khi đó người dùng quay lại trang sẽ không phải tải lại những file đã có. Dùng HTTPS kèm HTTP/2 cũng giúp trình duyệt tải nhiều file cùng lúc hiệu quả hơn.
Kết quả thực tế
Sau khi áp dụng các bước trên, điểm hiệu năng trên điện thoại của trang bài viết tăng từ 78 lên 92, trang chủ tăng từ 74 lên 90, còn trang tin tức đạt 100 điểm. Chỉ số CLS gần như bằng 0. Bạn có thể tự kiểm tra website của mình tại PageSpeed Insights, sau đó bắt đầu từ mục được Google đánh dấu đỏ trước.
Nếu cần hỗ trợ tối ưu tốc độ cho website, hãy xem thêm các bài viết trong mục Tin tức hoặc liên hệ đội ngũ AloCoder.
