Tối ưu Hóa Hình ảnh

Bài viết này thuộc phần 11 trong tổng số 16 bài viết trong Serie Tăng tốc Wordpress dùng WooCommerce

wp-content/uploads/2020/03/Speed-up-WordPress-150x150.jpg

Đối với trang web thegioitiendoc.com hình ảnh không phải là một vấn đề lớn. Toàn bộ ảnh khi được tải lên đều được nén lại và có kích thước phù hợp.

Tuy vậy, đối với hầu hết tất cả website chưa có bất kỳ hành động tối ưu nào. Hình ảnh chưa được tối ưu (nén, kích thước quá lớn,..) là nguyên nhân chính khiến website ì ạch.

Tối ưu hóa hình ảnh chính là công việc cưc kì quan trọng và không thể bỏ qua (kể cả với trang web đã tối ưu rồi)

Tối ưu hóa kích thước ảnh

Về cơ bản mình sẽ chia ra hai hướng để tối ưu ảnh.

Tối ưu trước khi tải ảnh lên WordPress

Khi sử bạn có một hình ảnh trên máy tính của bạn, bạn có thể sử dụng các phần mềm nén ảnh để tối ưu. Ví dụ như bạn dùng PhotoShop lúc xuất ảnh ra thì chọn định dạng tối ưu cho web là được.

Cũng có khá nhiều công cụ nén ảnh hàng loạt. Cái này bạn tự tìm hiểu thôi. Lan man quá không tốt.

Sử dụng Plugin để tối ưu ảnh trên hosting

Nếu bạn đang website của bạn đã có ảnh sẵn trên hosting rồi. Cách đơn giản nhất là sử dụng một plugin tối ưu ảnh thôi. Plugin này sẽ sử dụng tài nguyên trên hosting để tối ưu, do vậy hosting càng mạnh thì quá trình diễn ra càng nhanh, còn không thì cực kì chậm thôi.

Lợi ích thì rất rõ, không phát sinh chi phí, có thể tối ưu nhiều ảnh cùng lúc. Nhưng cũng có cái không tốt là hosting phải xịn, ảnh sau khi nén không thể so sánh với các dịch vụ nén ảnh khác được.

Còn plugin nén ảnh thì có rất nhiều, cá nhân mình đề cử EWWW Image Optimizer : Miễn phí, lâu đời, 700k lượt cài, nén nhanh, hỗ trợ webp,…

Sử dụng dịch vụ nén ảnh

Cũng không mấy khi dùng đến mấy dịch vụ kiểu này. Ảnh sẽ được gửi đến dịch vụ nén ảnh, ảnh sẽ được nén trên máy chủ của bên đó, nén xong thì gửi về hosting.

Bạn sẽ phải bỏ ra một lượng chi phí nhất định, tùy vào số lượng ảnh hay gói đăng ký. Hosting của bạn chẳng cần làm gì cả, ảnh cũng sẽ được nén tốt nhất có thể

Bạn có thể tham khảo qua Imagify hoặc ShortPixel Image Optimizer

Có một vài dịch vụ dạng CDN + tối ưu luôn: Nhưng mình nghĩ CDN mà không có máy chủ tại Việt Nam thì CDN làm giề.

Convert ảnh sang Webp

Webp là định dạng ảnh được chính Google tạo ra. Tuy rất ngon nhưng đám hàng Apple lại không hỗ trợ định dạng này. Vậy nên, hình ảnh đuôi .webp chỉ có thể hiển thị trên các trình duyệt không phải Safari và các trình duyệt cũ. Nói chung là cứ bật webp lên. Trình duyệt hỗ trợ thì dùng, không thì thôi.

Webp không hỗ trợ trình duyệt cũ cũng như Safari, vậy nên nếu người dùng sử dụng những trình duyệt này, ảnh sẽ được fallback lại jpg hoặc png. Mặt tiêu cực là hosting của bạn phải tốn thêm đĩa cứng để lưu thêm file webp.

Vậy khi nào nên sử dụng webp?

Trong hầu hết trường hợp (kể cả khi ảnh đã được nén ở local), bạn đều nên convert ảnh sang webp. Tuy nhiên nếu hosting của bạn chỉ có dung lượng quá nhỏ, bạn có thể bỏ qua định dạng ảnh này.

Để convert ảnh sang webp bạn có thể sử dụng plugin WebP Express hoặc EWWW Image Optimizer

Trì hoãn tải hình ảnh (Lazyload)

Nếu theme bạn sử dụng có tính năng này hãy bật nó lên hoặc sử dụng plugin cache có tính năng này.

Đối với website thegioitiendoc, theme đang sử dụng là flatsome. Tuy flatsome có sẵn tính tùy chọn lazy ảnh, nhưng cách lazy của Flatsome thực sự không ngon hơn tính năng lazy của WP Rocket Cache.

Nên mình chọn lazy của rocket. Đối với các plugin có tính năng tối ưu khác (Auto optiminize, Swift performance, Litespeed Cache,…) cũng có tính năng này, tùy vào plugin bạn chọn là gì mà sử dụng thôi.