Tối ưu ảnh và asset trên frontend gồm những kỹ thuật nào?

Ảnh thường là phần nặng nhất của trang, nên tối ưu:

• Lazy-load ảnh ngoài viewport: <img loading="lazy"> — hoãn tải tới khi gần cuộn đến.
• Responsive images: srcset + sizes để trình duyệt tự chọn kích thước hợp với DPR/viewport → không tải ảnh to thừa trên mobile.
• Định dạng hiện đại: WebP/AVIF nhẹ hơn JPEG/PNG đáng kể; dùng <picture> để fallback.
• Đặt width/height (hoặc aspect-ratio) để tránh layout shift (CLS).
• Nén ảnh, phục vụ qua CDN, preload ảnh LCP, decoding="async".

Với asset khác: minify, gzip/brotli, và code splitting cho JS/CSS.