Categories Cache Nén ảnh Swift Performance

Đánh giá tính năng tối ưu hóa ảnh của plugin Swift Performance

Tối ưu hóa ảnh là tính năng quan trọng, nó là plugin mà rất nhiều người đang cài trên website của họ, có các dòng độc lập chuyên sâu cho mục đích này, nổi tiếng có plugin ShortPixel.

Nói về 3 plugin cache mạnh hiện này là LiteSpeed cache, Swift Performance & WP-Rocket, có vẻ Swift cho tốc độ nén ảnh tốt nhất. Để so sánh thì WP-Rocket thậm chí còn không tích hợp sẵn tính năng này vào plugin của họ, mà yêu cầu cài thêm plugin trả phí Imagify (cũng của WP-Rocket) mới thoải mái nén ảnh được, tôi cho đây là điểm trừ đối với WP-Rocket. LiteSpeed cache cũng có tính năng nén ảnh, với gói free rất rộng rãi, đến mức hiếm lắm bạn mới phải mua gói trả phí của LiteSpeed…

PS: Tốc độ nén ảnh của LiteSpeed (dùng QUIC cloud) cũng rất tốt, trong vòng 24h nó có thể nén được 5000 ảnh (với hàng đợi nhanh/fast queue). Nếu trên LiteSpeed bạn nén bị chậm thì hoặc là do sai thông tin IP ở phần Settings trên QUIC (thường là do sau khi chuyển hosting), hoặc là bạn đã hết giới hạn fast queue.


Dông dài thế là đủ, giờ tôi sẽ đi vào phân tích các tính năng nén ảnh chính của Swift.

Tối ưu ảnh bằng Swift Performance
Giao diện nén ảnh của Swift Performance

Các tính năng cơ bản (simple view)

  • Tự động nén ảnh khi tải ảnh lên (Optimize Images on Upload): sử dụng API của Swift.
  • Có bốn cấp độ nén ảnh khác nhau (Image Optimizer), tôi thường dùng lossless, tức là nén không mất dữ liệu. Các lựa chọn còn lại sẽ nén mất dữ liệu, và ảnh có thể bị mờ, nếu dùng bạn nên thận trọng.
  • Giữ lại ảnh gốc (Keep Original Images): để phòng khi việc tối ưu không như ý bạn có thể khôi phục lại ảnh gốc.
  • Tạo ảnh định dạng WebP (Generate WebP): định dạng ảnh giúp tiết kiệm từ 20 – 30% dung lượng so với JPG & PNG
  • Nhúng ảnh WebP vào website (Serve WebP) khi có thể.
  • Sử dụng ảnh nền là WebP khi có thể (Serve WebP Background Images).
  • Nội tuyến các ảnh nhỏ (Inline Small Images). Các ảnh nhỏ dưới 1KB có thể chuyển thành dạng ảnh base64 để giảm số lượng kết nối.
  • Lazyload ảnh. Tính năng đặc biệt quan trọng trên trang nhiều ảnh, và giúp cải thiện tốc độ tải trang đáng kể.
  • Loại trừ URL ảnh không cho lazyload (Exclude Images URL). Những ảnh thuộc màn hình đầu tiên, điển hình như logo cần loại trừ không cần lazyload để nó hiển thị sớm nhất có thể.
  • Loại trừ ảnh không cần lazyload thông qua class của ảnh (Exclude Images by CSS classname). Một cách thức khác để loại bỏ tính năng lazyload trên hàng loạt ảnh. Ví dụ điển hình là ảnh feature image thường làm ảnh minh họa ngay đầu bài viết (và do vậy cũng thường nằm trong màn hình đầu tiên).
  • Nội tuyến ảnh nhỏ chất lượng thấp sử dụng trong lazyload (ảnh LQIP) để giảm số lượng kết nối (Inline Lazy Load Images). Đây là điểm cộng nữa của Swift- LQIP là kỹ thuật nén ảnh rất thú vị dù không phải mọi website đều phù hợp. Về mặt điểm số Google PageSpeed Insights, áp dụng kỹ thuật này cải thiện đáng kể thời gian điểm số hiển thị nội dung có kích thước lớn nhất. Tuy nhiên không giống LiteSpeed, bạn không điều chỉnh được chất lượng của ảnh LQIP này.

Các tính năng nâng cao (advanced view)

  • Lựa chọn thư mục lấy ảnh (Image source) gồm chỉ thư viện ảnh media (Media Library) hoặc cả thư mục WP-Content (WP-CONTENT Directory).
  • JPEG quality và PNG quality, nơi bạn dùng để thiết lập chất lượng ảnh.
  • Có tính năng Resize Large Images để dùng trong trường hợp trước đây bạn up các ảnh quá lớn lên website, gây lãng phí dung lượng & có khả năng làm tăng thời gian tải trang. Bạn có thể dùng tính năng này để chuyển nó về kích cỡ ảnh phù hợp hơn.
  • Tôn trọng các tiêu chuẩn lazyload (Respect Lazyload Standards) được dùng để loại trừ các ảnh có class là skip-class hoặc data-skip-lazy.
  • Tải trước ảnh khi nó đi vào khung hình (Preload Sensitivity).
  • Load ảnh dựa vào tương tác người dùng (load images on User Interaction), bật nếu bạn muốn tải đầy đủ ảnh chỉ khi có tương tác người dùng (di chuyển chuột, cuộn, bắt đầu chạm).
  • Ảnh lazyload chiếm chỗ (Lazyload Placeholder). Với ba lựa chọn Blurred, Transparent, Low Quality.
  • Ép dùng ảnh đáp ứng (Force Responsive Images). Ép tất cả các ảnh sử dụng thuộc tính srcsrt nếu nó có thể.

Hướng dẫn tối ưu ảnh với Swift

Bạn chuyển sang tab Image Optimizer > Scan Images để nó quét hết ảnh trên website đưa vào danh sách ảnh cần nền, lúc sau khi nó quét xong, bạn nhấn Optimize Images (All) để nó tối ưu tất cả ảnh này.

Tốc độ nén và tạo ảnh webp của Swift rất tốt, 1-2s là xong một ảnh. Giả dụ trang bạn có đến 20K ảnh nó cũng chỉ mất nửa ngày, cùng lắm là một ngày sẽ xong tất.

PS: Tính năng nén ảnh mới up lên sử dụng API của Swift, hiện tôi không rõ tính năng nén ảnh cũ có sử dụng API hay là dùng tài nguyên máy chủ. Với tốc độ tốt như vậy, tốt đoán là sử dụng tài nguyên máy chủ của chính người dùng. Để có câu trả lời chính xác, tôi sẽ liên hệ bên Swift hỏi lại họ sau.

Một điểm yếu mà tôi nhận thấy ở phần nén ảnh của Swift đó là nó có thể bị dừng giữa chừng (chẳng hạn 50%), và nó không bắt đầu lại từ chỗ mà nó dừng giữa chừng! Do vậy bạn có thể mất công nén lại ảnh đã nén. [May mắn cho chúng ta là hiện tượng dừng giữa chừng rất hiếm khi xảy ra].

Trong trường hợp bị như vậy hoặc là bạn nhấn nút để nén lại tất (cách nhanh nhất), hoặc là bạn dùng tính năng lọc (click vào All status rồi chọn Not Optimized để lấy các ảnh chưa nén).

Thông tin kỹ thuật

Ảnh backup lẫn ảnh webp (nếu bạn bật các tính năng này) đều được lưu trữ cùng thư mục với ảnh gốc, định dạng của chúng như sau:

  • Ảnh backup: có đuôi kiểu .jpg.swift-original
  • Ảnh webp: có đuôi kiểu .jpg.webp

Kiểm tra tính năng lồng ảnh webp vào website

Để tích hợp định dạng ảnh webp vào trang bạn nên chọn tính năng Use <picture> elements ở mục Server WebP thuộc phần Settings, sau đó purge tất cả cache để cập nhật này được thực hiện.

Nếu chọn Use rewrites việc tích hợp WebP có thể không thành công hoặc có vấn đề khi kết hợp với CDN, Cloudflare.

Việc tích hợp WebP trên Swift rất đơn giản, ngoài ra họ có tạo fallback (dự phòng) cho các trình duyệt không hỗ trợ.

Back to Top