Tối ưu hóa hình ảnh cho nội dung do AI tạo ra
Hình ảnh AI tạo ra một vấn đề về hiệu suất rất đặc thù. Bạn không thể biết kích thước, định dạng hay nội dung của hình ảnh cho đến khi quá trình tạo hoàn tất. Tuy nhiên, bạn vẫn cần phải ngăn chặn tình trạng tải chậm và xê dịch bố cục (layout shifts).
Tôi đã áp dụng các bước này khi xây dựng một trình tạo ảnh AI miễn phí.
Tối ưu hóa tiêu chuẩn thường giả định rằng bạn đã biết trước về hình ảnh. Bạn có thể tính toán kích thước và tối ưu hóa ngay từ lúc xây dựng (build time). Nhưng hình ảnh được tạo ra lại phá vỡ quy tắc này. Hình ảnh không hề tồn tại cho đến khi người dùng yêu cầu nó.
Cách xử lý việc phân phối:
- Đầu ra thô của AI thường là PNG. Các tệp PNG quá lớn, thường nằm trong khoảng từ 800KB đến 1,2MB.
- Chuyển đổi hình ảnh sang WebP. Các tệp WebP nhỏ hơn từ 25% đến 35% so với PNG ở cùng một chất lượng.
- Sử dụng chất lượng 85 cho WebP. Hình ảnh AI có nhiễu kết cấu (texture noise) tự nhiên. Các thiết lập cao hơn sẽ làm tăng dung lượng tệp mà không cải thiện chất lượng hình ảnh.
Cách ngăn chặn xê dịch bố cục:
Người dùng sẽ chọn tỷ lệ khung hình (aspect ratio) trước khi nhấn nút tạo. Hãy tận dụng điều này.
- Định trước kích thước của khung chứa (container) dựa trên tỷ lệ đã chọn (1:1, 16:9, v.v.).
- Việc này giúp giữ khung chứa ở đúng kích thước trước khi hình ảnh được tải về.
- Nó giúp loại bỏ hiện tượng xê dịch bố cục tích lũy (CLS).
Cách cải thiện tốc độ tải:
Hình ảnh được tạo ra thường là thành phần LCP (Largest Contentful Paint) lớn nhất.
- Đánh dấu hình ảnh là ưu tiên (priority) trong mã nguồn của bạn.
- Sử dụng liên kết preconnect cho CDN của bạn. Điều này giúp xử lý các bước bắt tay (handshake) DNS và TLS sớm hơn.
- Sử dụng skeleton loader chiếm đúng không gian mà hình ảnh cuối cùng sẽ lấp đầy.
Chiến lược lưu bộ nhớ đệm (Caching):
- Không lưu cache ở lớp suy luận (inference layer). Mỗi yêu cầu nên mang lại cảm giác mới mẻ.
- Lưu cache ở lớp CDN để tăng tốc độ phân phối.
- Mỗi hình ảnh có một URL duy nhất, vì vậy việc lưu cache mạnh mẽ (aggressive caching) là an toàn.
Kết quả của những thay đổi này:
- Dung lượng trung bình: 900KB xuống còn 200KB.
- LCP: 4,1 giây xuống còn 1,9 giây.
- CLS: Đã loại bỏ.
Tóm tắt các hành động:
- Chuyển đổi sang WebP với chất lượng 85.
- Định trước kích thước khung chứa bằng cách sử dụng tỷ lệ khung hình đã chọn.
- Thiết lập hình ảnh chính thành ưu tiên tải (priority loading).
- Lưu cache mạnh mẽ ở cấp độ CDN.
- Chỉ sử dụng lazy loading cho các nội dung phụ nằm dưới phần màn hình đầu tiên (below the fold).
Cộng đồng học tập tùy chọn: https://t.me/GyaanSetuAi