Ảnh sản phẩm đẹp nhưng nặng: cái giá phải trả cho tốc độ tải trang
Tốc độ tải trang là yếu tố đầu tiên chúng tôi kiểm tra khi làm SEO website và tối ưu trải nghiệm người dùng cho khách bán hàng online. Có lần khách than web của họ ế khách, chúng tôi mở trang chủ ra xem thì thấy hơn năm mươi tấm ảnh sản phẩm, mỗi tấm nặng vài megabyte. Khách bấm vào, đợi ba bốn giây chưa thấy ảnh hiện lên. Họ thoát ra tìm chỗ khác ngay.
Google đo thời gian này qua một chỉ số gọi là LCP, viết tắt của Largest Contentful Paint. Nói dễ hiểu, đây là lúc người dùng thấy được ảnh sản phẩm chính trên màn hình. Nó khác với lúc trang mới bắt đầu load.
LCP càng lâu, Google càng đánh giá trải nghiệm người dùng kém, ảnh hưởng trực tiếp đến SEO website. Thứ hạng tìm kiếm bị tụt xuống theo. Điều này xảy ra dù nội dung bài viết không hề thay đổi.
Một sai lầm chúng tôi hay thấy: chủ website chỉ tự kiểm tra tốc độ trên máy công ty. Ở đó mạng cáp quang cực nhanh, nhìn ảnh hiện ra ngay, thế là yên tâm. Nhưng phần lớn khách mua hàng lại vào bằng điện thoại, dùng mạng 4G ngoài đường.
Ảnh nặng vài megabyte trên mạng 4G tải rất chậm. Có khi mất năm sáu giây mới hiện hết. Đủ để khách sốt ruột thoát ra rồi.
Tin vui là chuyện này xử lý được. Không cần bỏ bớt ảnh, cũng không cần hy sinh chất lượng hiển thị. Chỉ cần đúng kỹ thuật, một trang có ba bốn chục ảnh sản phẩm vẫn tải xong trong hai giây. Phần dưới đây là cách chúng tôi vẫn làm cho các website bán hàng do mình phụ trách.
Tối ưu hình ảnh sản phẩm: chìa khoá cho SEO website và trải nghiệm người dùng
Ảnh sản phẩm là con dao hai lưỡi. Ảnh nét thì khách tin tưởng hơn, nhưng ảnh nét cũng đồng nghĩa file nặng hơn. Cân bằng hai thứ này ảnh hưởng trực tiếp đến tốc độ tải trang. Đây là việc đầu tiên chúng tôi làm với mọi website bán hàng.
Nén ảnh trước khi tải lên, đừng để WordPress tự lo hết
Ảnh chụp từ máy chuyên nghiệp hay điện thoại đời mới thường nặng ba đến tám megabyte một tấm. Con số này quá lớn cho một trang web. Chúng tôi thường nén xuống còn khoảng một trăm đến ba trăm kilobyte mỗi ảnh, tuỳ độ phức tạp của hình.
Cách làm không khó. Trước khi tải ảnh lên WordPress, dùng công cụ nén như TinyPNG hoặc Squoosh để giảm dung lượng. Hai công cụ này nén ảnh nhưng vẫn giữ được độ sắc nét, mắt thường khó nhận ra khác biệt.
Nếu quản lý hàng trăm ảnh sản phẩm cùng lúc, có thể cài thêm plugin nén tự động như Smush hoặc ShortPixel. Ảnh tải lên sẽ được xử lý ngay, không cần làm tay từng tấm.
Một sai lầm chúng tôi hay gặp là nén ảnh quá tay. Ảnh bị vỡ, nhìn mờ như chụp qua kính mờ, khách nhìn sản phẩm không rõ. Mất luôn niềm tin mua hàng vì chuyện nhỏ này.
Mẹo ở đây là nén theo tỷ lệ chất lượng khoảng tám mươi phần trăm. Mức này đủ nhẹ để tải nhanh. Vẫn đủ nét để thấy rõ chi tiết vải hay đường may sản phẩm.
Nếu đang làm lại giao diện từ đầu, đây là lúc nên nghĩ tới tốc độ. Ngay từ khâu thiết kế website bán hàng, đừng để việc tối ưu ảnh chỉ diễn ra sau khi site đã dựng xong. Lúc đó phải sửa đi sửa lại, mất công hơn nhiều.
Một điểm nhiều người bỏ qua: ảnh hiển thị trên trang danh mục dạng thu nhỏ. Nó không cần dùng chung file gốc với ảnh xem chi tiết sản phẩm. WordPress vốn tự tạo nhiều kích thước ảnh khi tải lên.
Nhưng nếu theme không gọi đúng kích thước nhỏ cho khu vực danh mục, trình duyệt vẫn âm thầm tải file gốc to đùng. Sau đó ảnh mới được tự thu nhỏ lại bằng CSS. Lỗi này khó nhận ra bằng mắt thường, chỉ lộ ra khi đo bằng công cụ kiểm tra tốc độ.
Định dạng ảnh hiện đại giúp nhẹ hơn JPG rất nhiều
Ngoài chuyện nén, định dạng file ảnh cũng quyết định tốc độ không kém. Đa số website vẫn dùng JPG hoặc PNG, hai định dạng ra đời đã lâu. WebP là định dạng mới hơn của Google.
Cùng một ảnh, dung lượng WebP chỉ bằng một phần tư đến một phần ba so với JPG. Chất lượng hình gần như không đổi.
Chuyển ảnh sản phẩm sang WebP không phức tạp. WordPress từ bản 5.8 trở lên đã hỗ trợ tải file WebP trực tiếp. Với ảnh cũ đã có sẵn trên site, có thể dùng plugin chuyển đổi hàng loạt. Chạy một lần là xong cả thư viện ảnh.
Có một lưu ý nhỏ: một số trình duyệt đời cũ chưa đọc được WebP. Vì vậy nên để WordPress tự tạo thêm bản JPG dự phòng. Trình duyệt nào không hỗ trợ WebP sẽ tự động nhận bản JPG thay thế.
Về chi phí, phần lớn công cụ nén ảnh có gói miễn phí đủ dùng cho website vừa và nhỏ. Chỉ khi xử lý vài nghìn ảnh mỗi tháng mới cần nâng lên gói trả phí. Mức phí thường chỉ vài trăm nghìn đồng.
Nếu website đang dùng giao diện có sẵn, chọn đúng mẫu ngay từ đầu cũng giúp việc tối ưu ảnh dễ hơn. Chúng tôi có tổng hợp một số giao diện đẹp cho website bán hàng vốn đã dựng sẵn tối ưu tốc độ. Anh chị có thể tham khảo thêm.
Vài kỹ thuật nữa giúp trang nhiều ảnh vẫn tải nhanh
Nén ảnh và đổi định dạng đã giải quyết phần lớn vấn đề. Nhưng với những trang có hàng trăm sản phẩm, chúng tôi vẫn cần thêm vài kỹ thuật nữa mới yên tâm.
Lazy load: chỉ tải ảnh khi khách cuộn tới
Có một khách hàng bán đồ nội thất. Trang danh mục của họ hiển thị hai trăm sản phẩm trên cùng một trang. Tải hết hai trăm ảnh ngay khi khách mở trang là điều bất khả thi cho tốc độ.
Giải pháp là lazy load, tạm dịch là tải ảnh theo kiểu lười biếng. Trình duyệt chỉ tải những ảnh đang hiện trên màn hình. Ảnh nào còn nằm phía dưới sẽ chờ khách cuộn chuột tới gần mới bắt đầu tải.
Sau khi bật lazy load cho trang danh mục này, thời gian tải ban đầu giảm rõ rệt. Từ khoảng sáu giây xuống còn hơn hai giây.
Bật lazy load hiện khá dễ. Nhiều theme WordPress đời mới đã tích hợp sẵn tính năng này, chỉ cần bật lên trong phần cài đặt. Nếu theme chưa hỗ trợ, có thể dùng plugin riêng, hoặc thêm thuộc tính loading=”lazy” vào thẻ ảnh.
Chọn một theme website bán hàng làm sẵn cũng là cách hay để có ngay những tính năng như vậy. Lập trình viên không cần can thiệp thêm, tính năng đã có sẵn trong theme. Đây cũng là một trong những ưu điểm khi dùng theme bán hàng có sẵn so với việc tự code lại.
CDN giúp ảnh tải nhanh dù khách ở xa máy chủ
Máy chủ website thường đặt cố định ở một nơi, ví dụ tại Việt Nam. Nếu khách truy cập từ miền Trung hay từ nước ngoài, dữ liệu phải đi quãng đường xa hơn. Mỗi chặng chậm thêm chút ít, cộng dồn lại vẫn cảm nhận được rõ.
CDN, viết tắt của Content Delivery Network, là mạng lưới máy chủ đặt rải rác ở nhiều khu vực. Ảnh sản phẩm được sao lưu sẵn trên các máy chủ gần người dùng nhất.
Khách ở Cần Thơ tải ảnh từ máy chủ gần Cần Thơ. Khách ở Hà Nội tải từ máy chủ gần Hà Nội. Không ai phải đi vòng về một điểm máy chủ duy nhất nữa.
Chi phí dùng CDN hiện không còn đắt như trước. Một số dịch vụ còn miễn phí cho website vừa và nhỏ, chỉ cần trỏ tên miền qua là dùng được.
Việc còn lại là duy trì, theo dõi định kỳ để ảnh mới cũng được đồng bộ qua CDN. Đây cũng là phần việc nằm trong cách quản trị website hiệu quả. Nhiều chủ shop hay bỏ qua phần này sau khi site đã lên xong.
Sau khi áp dụng các kỹ thuật trên, chúng tôi luôn kiểm tra lại bằng công cụ PageSpeed Insights của Google, hoặc GTmetrix. Hai công cụ này miễn phí. Chỉ cần dán link trang cần đo là ra ngay điểm số và danh sách ảnh còn nặng. Mục tiêu chúng tôi thường đặt là trên tám mươi điểm cho bản di động.
Một lỗi khác hay gặp với CDN: ảnh cũ vẫn còn lưu trong bộ nhớ đệm dù website đã đổi ảnh mới. Khách nhìn thấy ảnh cũ dù chủ shop đã cập nhật từ lâu. Cách xử lý là xoá cache trên CDN mỗi khi thay ảnh quan trọng.
Việc nên bắt đầu ngay hôm nay, trước khi tải thêm ảnh mới
Tốc độ tải trang không phải chuyện làm một lần rồi thôi. Mỗi lần thêm sản phẩm mới, dung lượng trang lại tăng thêm một chút. Nếu không kiểm tra định kỳ, sáu tháng sau trang web lại chậm như cũ, dù ban đầu đã tối ưu rất kỹ.
Lời khuyên của chúng tôi khá đơn giản: trước khi tải ảnh sản phẩm nào lên, hãy nén ảnh trước. Đổi sang WebP nếu có thể, đừng bỏ qua bước này. Việc này chỉ mất thêm một hai phút mỗi lần, nhưng cộng dồn lại giúp trang luôn nhẹ. Khách hàng hài lòng hơn, còn Google cũng ưu ái xếp hạng cao hơn cho những trang tải nhanh ngay từ cú click đầu tiên. Đây chính là cách đơn giản nhất để vừa làm SEO website vừa tối ưu trải nghiệm người dùng một cách bền vững.