Điểm PageSpeed thấp hiếm khi do thiết kế xấu. Nó đến từ ảnh chưa nén, phông chữ tải chậm và những đoạn mã chạy trước cả khi khách nhìn thấy nội dung. Dưới đây là bảy việc Digotech làm đầu tiên khi nhận tối ưu một website đang chạy, xếp theo thứ tự hiệu quả; phần lớn làm được mà không đụng tới giao diện.
Trước khi làm: đo đúng cách
Mở PageSpeed Insights của Google, dán địa chỉ trang chủ và một trang dịch vụ, nhìn tab Điện thoại trước. Ghi lại ba con số: điểm hiệu năng, thời gian hiện nội dung chính (LCP) và độ ổn định bố cục (CLS). Làm từng việc dưới đây rồi đo lại, để biết việc nào thật sự có tác dụng trên website của bạn.
1. Nén ảnh và đổi sang WebP hoặc AVIF
Ảnh thường chiếm hơn một nửa dung lượng trang. Chuyển sang WebP giảm đáng kể dung lượng mà mắt thường không nhận ra khác biệt; AVIF còn nhẹ hơn nhưng cần kiểm tra trên trình duyệt cũ. Đặt kích thước ảnh đúng với khung hiển thị: đừng tải ảnh rộng 4.000 điểm ảnh cho khung 400. Với WordPress, một plugin nén ảnh tự động xử lý cả thư viện cũ lẫn ảnh tải lên sau này.
2. Tải lười ảnh và video dưới màn hình đầu
Chỉ ảnh đầu tiên khách nhìn thấy cần tải ngay. Phần còn lại gắn thuộc tính tải lười để trình duyệt tải khi khách cuộn tới. Video nhúng (YouTube, Facebook) nên hiện ảnh bìa trước, bấm mới nạp trình phát; một khung video nhúng thường nặng hơn toàn bộ phần còn lại của trang.
3. Hoãn mã không cần ngay
Mã theo dõi, khung chat, bản đồ và hiệu ứng trang trí không cần chạy trong giây đầu tiên. Đặt chúng tải sau khi trang đã hiện, hoặc khi khách tương tác. Xoá các plugin không còn dùng: mỗi plugin thường kèm thêm tệp mã và kiểu dáng riêng, tải trên mọi trang dù chỉ dùng ở một trang.
4. Phông chữ: tự lưu, hiện chữ thay thế trong lúc chờ
Giới hạn tối đa ba họ phông và chỉ tải các độ đậm thật sự dùng. Lưu tệp phông trên chính máy chủ website thay vì gọi từ máy chủ ngoài, và khai báo hiện chữ hệ thống trong lúc chờ, để khách đọc được ngay thay vì nhìn khoảng trắng.
5. Bộ nhớ đệm trang và mạng phân phối nội dung
Bật bộ nhớ đệm để máy chủ trả trang đã dựng sẵn thay vì dựng lại cho từng lượt xem. Dùng mạng phân phối nội dung (CDN) để ảnh và tệp tĩnh được trả từ máy chủ gần khách nhất, đặc biệt khi bạn có khách ở nước ngoài. Hai việc này thuộc phần lưu trữ; nếu bạn thuê lưu trữ và bảo trì, hỏi đơn vị đã bật chưa.
6. Giữ chỗ cho ảnh, quảng cáo và khung nhúng
Trang “nhảy” khi tải vì ảnh chưa có kích thước khai báo, chữ bị đẩy xuống khi ảnh xuất hiện. Khai báo chiều rộng và chiều cao cho mọi ảnh và khung nhúng; điểm ổn định bố cục (CLS) trong PageSpeed sẽ cải thiện rõ, và khách không bấm nhầm nút vì nút vừa dịch chỗ.
7. Đo lại trên điện thoại, không chỉ máy tính
Google xếp hạng theo bản điện thoại, và điểm trên điện thoại thường thấp hơn hẳn máy tính. Sau mỗi thay đổi, đo lại ở tab Điện thoại và ghi lại con số. Việc này cũng nằm trong danh sách kiểm tra khi nhận bàn giao website.
| Việc | Ảnh hưởng tới | Ai làm được | Rủi ro đổi giao diện |
|---|---|---|---|
| 1. Nén ảnh, WebP/AVIF | Dung lượng, LCP | Quản trị viên, plugin | Không |
| 2. Tải lười | Dung lượng, LCP | Quản trị viên | Không |
| 3. Hoãn mã | Thời gian tương tác | Kỹ thuật | Thấp |
| 4. Phông chữ | LCP, chữ hiện sớm | Kỹ thuật | Thấp |
| 5. Bộ nhớ đệm, CDN | Thời gian phản hồi máy chủ | Đơn vị lưu trữ | Không |
| 6. Giữ chỗ | CLS | Kỹ thuật | Không |
| 7. Đo lại | Biết việc nào có tác dụng | Bạn | Không |
Thứ tự quan trọng hơn số lượng. Làm xong việc 1 và 2 thường đã đổi màu điểm số. Các việc còn lại giữ cho điểm không tụt khi website thêm nội dung mới. Nếu làm hết bảy việc mà điểm điện thoại vẫn đỏ, vấn đề nằm ở nền tảng hoặc giao diện; lúc đó mới cần bàn đến làm lại.
Tóm lại
- Đo trước, làm từng việc, đo lại trên điện thoại.
- Ảnh và tải lười là hai việc đổi điểm nhanh nhất, không cần kỹ thuật.
- Mã thừa, phông chữ, bộ nhớ đệm và giữ chỗ là phần giữ điểm lâu dài.