7 mẹo tối ưu hóa hình ảnh WordPress hiệu quả

CDN

Nguyễn Trọng Nhân

2202

18-05-2022

Tối ưu hóa hình ảnh WordPress là việc cần thiết để cải thiện thời gian tải trang bằng cách giảm kích thước tệp mà không làm giảm chất lượng ảnh. Thời gian tải trang nhanh chóng rất quan trọng đối với SEO và cải thiện trải nghiệm khách hàng tốt hơn. Vậy làm thế nào để tối ưu hóa hình ảnh trên WordPress? Trong bài viết này, Bizfly Cloud sẽ hướng dẫn bạn một số mẹo nhanh chóng để tự động hóa tối ưu hóa hình ảnh cho WordPress.

Tại sao Tối ưu hóa Hình ảnh trong WordPress lại quan trọng?

Hình ảnh và các tệp đa phương tiện khác đã trở thành một yếu tố quan trọng trong việc cải thiện trải nghiệm người dùng khi web trở nên trực quan hơn. Theo HTTPArchive, nguyên nhân phổ biến nhất của hiện tượng “page bloat” là do hình ảnh không được tối ưu hóa. Trong vài năm qua, nhiều nhà phát triển web đã nhận thấy tốc độ trang web giảm đáng kể và hình ảnh là một trong những thủ phạm chính.

Với hình ảnh chiếm tới 75% trọng lượng trang web trung bình, khách truy cập không có đủ kiên nhẫn để đợi trang web tải chậm và 39% sẽ rời đi trước khi tải. Đặc biệt đối với các ngành thương mại điện tử và bất động sản, nơi mà nội dung chủ yếu dựa vào hình ảnh, thì việc tối ưu hóa hình ảnh cần được ưu tiên. Hơn nữa, các thuật toán của Google xem xét hiệu suất trang web khi hiển thị kết quả tìm kiếm, có nghĩa là các trang web chậm hơn sẽ ít có khả năng hiển thị ở đầu danh sách hơn. Mục tiêu của việc tối ưu hóa hình ảnh là tối đa hóa chất lượng của hình ảnh với ít byte và pixel nhất, do đó sẽ cải thiện tốc độ tổng thể của trang web của bạn.

Làm thế nào để tối ưu hóa hình ảnh cho WordPress?

Trước khi tải lên

1. Đảm bảo định dạng hình ảnh đúng

Trước khi tải hình ảnh lên CMS, việc chọn định dạng hình ảnh phù hợp dựa trên những gì bạn muốn truyền đạt là điều cần thiết; đặc biệt là vì CMS sẽ nén hình ảnh mà không thay đổi định dạng. Đối với các trang web WordPress, đây là những khuyến nghị:

- Chọn PNG nếu yêu cầu chi tiết nhỏ; phù hợp cho logo và graphic

- Chọn JPEG cho ảnh vì nó có khả năng nén tốt

- Sử dụng WebP giúp tăng nén 25 - 35% so với JPEG và PNG, giúp tối ưu hiệu suất web. Hạn chế duy nhất là vì nó là một định dạng hình ảnh hiện đại, vẫn còn một tỷ lệ nhỏ các trình duyệt không hỗ trợ nó. Làm thế nào để tối ưu hóa hình ảnh cho WordPress cho các định dạng như vậy? Bạn sẽ cần các công cụ có thể phát hiện trình duyệt của người dùng và cung cấp định dạng hình ảnh phù hợp cho họ.

2. Biết kích thước hình ảnh của bạn

Sẽ rất tốt nếu bạn thay đổi kích thước hình ảnh của mình trước khi tải lên nếu bạn biết mục đích của những hình ảnh này. Bạn không cần hình ảnh trên 1000px nếu bạn định sử dụng nó như một biểu tượng nhỏ trên trang web. Kích thước lớn hơn có nghĩa là những nội dung này có trọng lượng lớn hơn, khiến việc tối ưu hóa khó khăn hơn.

Kích thước hình ảnh WordPress cần lưu ý khi tải hình ảnh lên thư viện phương tiện là nó tạo ra một tập hợp các kích thước trong khi vẫn giữ lại hình ảnh gốc:

- Kích thước đầy đủ (hình ảnh gốc)

- Lớn (1024px)

- Trung bình (300px)

- Hình thu nhỏ (150px)

Những thay đổi kích thước này được thực hiện để bạn có thể sử dụng nó theo những cách khác nhau mà không cần phải thay đổi kích thước chúng theo cách thủ công. Hãy nhớ rằng mỗi hình ảnh trùng lặp chiếm dung lượng máy chủ, vì vậy sẽ rất tốt nếu bạn hủy kích hoạt chúng nếu bạn không cần chúng.

Để tùy chỉnh hoặc loại bỏ những thay đổi kích thước này, bạn sẽ phải đi tới cài đặt phương tiện trên trang tổng quan. Bạn sẽ thấy các kích thước hình ảnh mà chúng tôi đã đề cập và bạn nên thay đổi tất cả chúng thành kích thước mong muốn của mình (để tùy chỉnh chúng) hoặc thành 0 (để chỉ lưu hình ảnh gốc).

Sau khi tải lên

1. Sử dụng Nén hình ảnh

Nén hình ảnh trên WordPress kém hiệu quả hơn do thuật toán nén mặc định của nó. Nó nén hình ảnh xuống 82% khi người dùng tải lên kể từ phiên bản 4.5. Nén hình ảnh trước khi tải chúng lên WordPress cho phép bạn kiểm soát loại và mức độ nén cũng như chất lượng hình ảnh. Điều này có thể được thực hiện thủ công thông qua phần mềm chỉnh sửa hình ảnh như Adobe.

Vì bạn sẽ cần nén tất cả nội dung trực quan vào trang web của mình, nên làm như vậy theo cách thủ công có thể cực kỳ tốn thời gian. Ngày nay, nhiều công cụ trực tuyến như tinypng.com có thể giúp bạn xử lý hàng loạt hình ảnh của mình mà không ảnh hưởng nhiều đến chất lượng. Nén cũng liên quan đến loại định dạng hình ảnh bạn chọn vì các định dạng hình ảnh hiện đại như WebP mang lại khả năng nén hiệu quả.

Điều tuyệt vời về WordPress là cài đặt các plugin có thể giúp tự động hóa quá trình đó đồng thời cho phép bạn kiểm soát chất lượng.

2. Sử dụng hình ảnh tương thích (Responsive image)

WordPress đã có hỗ trợ hình ảnh tương thích kể từ năm 2015, giúp dễ dàng hiển thị hình ảnh ở các độ phân giải khác nhau cho bất kỳ kích thước màn hình nào mà khách truy cập của bạn có thể đang sử dụng. Các thông số thẻ hình ảnh (srcset) mà CMS có vẫn còn hơi hạn chế với các lựa chọn đáp ứng cơ bản.

Đối với những người dùng hiểu biết về kỹ thuật hơn, bạn chắc chắn có thể chọn các cách khác nhau để tạo hình ảnh tương thích. Chúng bao gồm sử dụng các yếu tố hình ảnh, JavaScript và CSS Media Queries.

Một thách thức khác đối với hình ảnh tương thích trong WordPress là các bản sao trùng lặp có thể chiếm không gian máy chủ đáng kể. Cách giải quyết là người dùng có thể xem xét các giải pháp lưu trữ đám mây và phân phối thích ứng thông qua các dịch vụ hoặc plugin của bên thứ ba như Cloudimage hay Just Responsive Images.

3. Lazy Load Images

Là một chiến lược tối ưu hóa, "lazy load" tải nội dung hiển thị trước rồi đợi phần còn lại của nội dung bên dưới màn hình đầu tiên tải xuống và hiển thị. Nó giúp tăng tốc thời gian tải trang web để người dùng xem trang web của bạn nhanh hơn và bởi vì nó chỉ cung cấp hình ảnh được xem, bạn sẽ tiết kiệm được băng thông máy chủ của mình. Đó là điều Google yêu thích và là chiến lược bạn nên thực hiện, đặc biệt khi trang web của bạn có nhiều hình ảnh và hình ảnh độ phân giải cao.

Một cách để triển khai đó là sử dụng thuộc tính tải (src) trên phần tử “img” để thông báo cho trình duyệt ngừng tải các hình ảnh chưa có trên màn hình cho đến khi người dùng cuộn xuống. Một lần nữa, các plugin cần được xem xét cho các tùy chọn tải lười nâng cao như tùy chỉnh và tự động hóa.

4. Tối ưu hóa hình ảnh cho SEO

Khi trình thu thập thông tin của công cụ tìm kiếm đến trang web của bạn, họ không thể nhìn thấy hình ảnh bạn đã tải ở đó. Trừ khi bạn cung cấp cho họ thêm thông tin về hình ảnh, họ sẽ không biết những hình ảnh đó là gì hoặc tầm quan trọng của chúng đối với trang web của bạn.

Tối ưu hóa hình ảnh cho SEO , bao gồm siêu dữ liệu, các từ mô tả cho tên tệp, thẻ alt và tiêu đề cho hình ảnh, là điều cần thiết để trình thu thập thông tin của công cụ tìm kiếm có thể hiểu hình ảnh trên trang web của bạn.

Trước khi tải lên, bạn nên đặt tên mô tả tệp của mình và sau đó sau khi tải lên thông qua thư viện phương tiện; bạn có thể bao gồm phần còn lại của siêu dữ liệu như tiêu đề và văn bản thay thế.

Tuy nhiên, đối với các doanh nghiệp tải lên nhiều hình ảnh hàng ngày, chẳng hạn như Bất động sản, blogger và Thương mại điện tử, việc đưa các thẻ này lên hàng trăm, hàng nghìn nội dung trực quan là điều không thể. Một lần nữa, các plugin tối ưu hóa hình ảnh có sẵn để giúp bạn làm như vậy.

5. Sử dụng CDN

Phần cuối cùng của bài toán Tối ưu hóa hình ảnh cho WordPress là truyền tải hình ảnh đến người dùng cuối bằng mạng phân phối nội dung nhanh như tên lửa (CDN). CDN là mạng lưới các máy chủ trải rộng trên toàn cầu lưu trữ nội dung tĩnh trên một trang web gần vị trí của khách truy cập. Ưu điểm của nó bao gồm:

• Độ trễ thấp hơn và thời gian tải nhanh hơn
• Giảm tải băng thông cho máy chủ
• Tăng hiệu suất, tối ưu dữ liệu website
• Cải thiện SEO, cải thiện thứ hạng trang
• Bảo vệ các trang web khỏi các cuộc tấn công DDOS, giúp che dấu địa chỉ IP thật của máy chủ gốc

CDN là vũ khí không thể thiếu của các website hiện đại để tối đa tốc độ và hiệu suất. Hiện nay, Bizfly CDN là mạng phân phối nội dung của Bizfly Cloud hỗ trợ tăng tốc, tối ưu và bảo vệ website hàng đầu Việt Nam được nhiều doanh nghiệp tin tưởng lựa chọn. Sử dụng Bizfly CDN, hình ảnh sẽ được tối ưu hoá toàn diện:

- Tinh gọn các Metadata hình ảnh

CDN giúp loại bỏ các siêu dữ liệu EXIF bao gồm các thông tin về Date and time, Camera settings, bản quyền... để giảm dung lượng ảnh và web "nhẹ" hơn, tải nhanh hơn.

- Nén ảnh giảm dung lượng, giữ nguyên chất lượng cao tuyệt đối của hình ảnh

- Tự động chỉnh sửa kích cỡ hình ảnh

Các hình ảnh sẽ ngay lập tức được tự động tối ưu và điều chỉnh kích cỡ sao cho phù hợp với tiêu chuẩn hình ảnh của website.

- Tối ưu tốc độ website bằng Progressive Image Loading

Với tính năng này, ban đầu website sẽ vẫn hiển thị toàn bộ hình ảnh trong khi mới chỉ tải được một phần dữ liệu, nghĩa là hình ảnh sẽ hiển thị nhòe trước khi hoàn tất tải xuống. Điều này giúp cải thiện đáng kể trải nghiệm của người dùng, khiến người dùng cảm thấy hình ảnh đang được hiển thị nhanh hơn.

- Tối ưu CSS và JS

Bizfly CDN tích hợp khả năng tối ưu CSS và JS (các nội dung tĩnh như text, ảnh…) bằng cách gỡ bỏ các ký tự không cần thiết trong mã nguồn các file CSS và JS, giúp làm giảm kích thước file, từ đó đẩy tốc độ tải của website nhanh hơn gấp nhiều lần.

- Rule Engine - Tính năng tùy chỉnh theo các điều kiện cho trước

Rule Engine là tính năng cho phép tùy chỉnh các thao tác xử lý requests hoặc tùy chỉnh logic Caching trên hệ thống CDN dựa theo các điều kiện đã được thiết lập trước như cấu hình cors, cấu hình browser cache, điều hướng truy cập theo thiết bị, cookies…

Ví dụ, với việc cài đặt điều kiện cho Rule Engine, tất cả các giao thức truy cập là HTTP sẽ đều được chuyển hướng sang HTTPS, giúp tối ưu SEO tốt hơn.

Phân luồng truy cập theo thiết bị, CDN nhận dạng thiết bị để đảm bảo người dùng luôn nhìn thấy nội dung tối ưu với thiết bị mà họ đang sử dụng. Ví dụ khi người dùng dùng iPhone để truy cập website, Rule Engine CDN sẽ định dạng loại thiết bị và chuyển request đến server lưu trữ dữ liệu mobile. Nhờ đó mà dữ liệu hiển thị tương thích với thiết bị, đem đến trải nghiệm về hình ảnh, âm thanh chất lượng cao hơn.

>> Có thể bạn quan tâm: Top 6 công cụ giảm dung lượng ảnh mà vẫn giữ nguyên chất lượng hiển thị trên website