Chuyện thường gặp
Anh chị đã nhặt đúng từ khoá, đã viết bài tử tế, bài đã lên được trang đầu. Người ta bấm vào.
Màn hình trắng. Hai giây. Bốn giây. Sáu giây.
Họ bấm nút quay lại và chọn bài của người khác.
Anh chị mất khách đó mà không bao giờ biết. Trong bảng đo, nó chỉ là một con số lượt xem tăng lên một.
Đây không phải chuyện của dân kỹ thuật
Nhiều người nghĩ tốc độ trang là việc của lập trình viên. Trong thực tế, phần lớn trang chậm ở Việt Nam chậm vì ba lý do rất đời thường, và cả ba anh chị đều tự sửa được:
1. Ảnh tải lên nguyên gốc từ máy ảnh, nặng vài megabyte một tấm
2. Gắn quá nhiều thứ chạy nền: chat, đếm lượt, hiệu ứng, mấy cái tiện ích cài cho vui
3. Gói lưu trữ quá rẻ, máy chủ đặt ở nơi xa
Không cái nào cần biết lập trình để nhận ra.
Và nói cho công bằng: tốc độ không đưa bài dở lên đầu. Nhưng trang chậm thì người thoát, mà người thoát nhiều thì thứ hạng đi xuống. Nó không phải thứ đẩy mình lên, nó là thứ kéo mình xuống.
Cách làm
Bước 1 — Đo cho biết mình đang ở đâu.
Mở Google, gõ "PageSpeed Insights", vào trang đầu tiên của Google. Dán địa chỉ trang của anh chị vào ô, bấm nút phân tích.
Chờ khoảng nửa phút. Trang trả về hai bảng điểm: một cho điện thoại, một cho máy tính. Nhìn bảng điện thoại, vì phần lớn khách Việt Nam vào bằng điện thoại.
Điểm dưới 50 là chậm. Từ 50 đến 89 là tạm được. Trên 90 là tốt.
Kéo xuống dưới có mục "Cơ hội" liệt kê từng thứ đang làm chậm. Đọc lướt, thường dòng đầu tiên đã là ảnh.
Bước 2 — Sửa ảnh trước, vì đây là nguyên nhân số một.
Ảnh chụp từ điện thoại thường nặng ba đến sáu megabyte. Ảnh trên web chỉ cần dưới hai trăm kilobyte.
Cách làm:
1. Mở Google, gõ "Squoosh" hoặc "TinyPNG", vào trang đó
2. Kéo ảnh vào
3. Chọn định dạng WebP nếu có, chất lượng khoảng 75
4. Tải ảnh mới về, đặt tên không dấu, ví dụ bon-nuoc-inox-1000-lit.webp
5. Thay ảnh cũ trên trang bằng ảnh mới
Một tấm ảnh 4MB xuống còn 150KB thì trang nhanh lên thấy rõ ngay lập tức.
Thêm một việc nhỏ mà hiệu quả: bảo người làm web thêm chữ loading="lazy" vào các ảnh nằm phía dưới màn hình đầu. Ảnh chỉ tải khi người ta cuộn tới.
Trước: <img src="anh.jpg">
Sau: <img src="anh.webp" loading="lazy" alt="Bồn nước inox 1000 lít">
Bước 3 — Gỡ bớt thứ chạy nền.
Mở trang, tự hỏi: cái khung chat góc phải có ai dùng không? Cái hiệu ứng tuyết rơi để làm gì? Cái thanh trượt ảnh ở đầu trang có ai bấm không?
Mỗi thứ đó là một đoạn mã phải tải về trước khi trang hiện ra. Cái nào ba tháng qua không đem lại gì thì gỡ.
Bước 4 — Xem lại chỗ chứa.
Nếu đã nén ảnh, đã gỡ tiện ích mà trang vẫn chậm, thì vấn đề nằm ở gói lưu trữ.
Hai câu hỏi hỏi nhà cung cấp:
1. Máy chủ chứa trang của tôi đặt ở đâu?
2. Gói của tôi có bật nén và bộ nhớ đệm chưa?
Máy chủ đặt trong nước thì khách Việt vào nhanh hơn nhiều. Nếu đang ở gói rẻ nhất và trang đã có khách đều, nâng lên một bậc thường đáng tiền.
Nhờ máy đọc hộ bảng kết quả:
📋 Câu lệnh — chép nguyên cả khối
Tôi có một trang web nhỏ, tôi không biết lập trình.
Tôi vừa đo bằng PageSpeed Insights, đây là kết quả phần điện thoại:
[dán nguyên phần "Cơ hội" và "Chẩn đoán" vào đây]
Giúp tôi:
1. Dịch từng dòng sang tiếng Việt dễ hiểu, nói rõ nó nghĩa là gì
2. Xếp theo thứ tự: việc nào sửa xong nhanh nhất mà đỡ nhiều nhất thì để lên đầu
3. Đánh dấu việc nào tôi tự làm được, việc nào phải nhờ người làm web
4. Với việc tôi tự làm được, chỉ rõ mở cái gì, bấm vào đâu
Đừng dùng từ chuyên ngành mà không giải thích.
Ba chỗ hay làm sai
Chỉ nhìn điểm máy tính rồi yên tâm. Điểm máy tính bao giờ cũng đẹp hơn. Khách Việt Nam vào bằng điện thoại, dùng 4G, ở chỗ sóng yếu. Nhìn bảng điện thoại.
Nén ảnh quá tay cho nhẹ. Ảnh vỡ hạt, chữ trong ảnh nhoè, khách nhìn thấy tay nghề mình cẩu thả. Nhẹ mà nét mới đúng. Chất lượng 75 thường là điểm cân bằng.
Chạy theo điểm 100 mà quên mất bài viết. Điểm 95 và điểm 78 khách không phân biệt được. Trang tải trong hai giây với trang tải trong tám giây thì họ phân biệt rõ. Đưa được từ tám giây về hai giây là xong việc, đừng đốt thêm thời gian cho hai mươi điểm cuối.
Nhắc lại cho gọn
Nén ảnh. Gỡ thứ thừa. Xem lại chỗ chứa. Ba việc đó giải quyết gần hết. Làm xong thì đo lại lần nữa để thấy con số đổi — thấy nó đổi thì lần sau mới có động lực làm tiếp.