Tối ưu hóa ảnh WordPress năm 2026: Tốc độ và SEO

Cập nhật lần cuối: June 28, 2026

Hình ảnh trên WordPress thường là lý do lớn nhất khiến một trang tải chậm. Hãy nén chúng sang WebP trước khi tải lên, giới hạn chiều rộng hiển thị, bật lazy loading và responsive srcset, đồng thời đặt một CDN phía trước chúng. Bộ công cụ này đã giúp tôi giảm Largest Contentful Paint từ 3.8s xuống còn 1.1s trên một blog có nhiều media. Tôi đã tối ưu hóa hơn 100 trang WordPress bằng quy trình làm việc này, vì vậy phần còn lại của bài viết sẽ đi qua từng cài đặt mà tôi thực sự thay đổi.

Câu trả lời nhanh: bạn nên sửa cái gì trước?

Nén hình ảnh sang WebP trước khi tải lên, giới hạn chiều rộng hiển thị ở 1920px, giữ mỗi tệp dưới 200KB, bật lazy loading và responsive srcset, đồng thời đặt một CDN phía trước chúng. Chạy ShortPixel (hoặc EWWW) để chuyển đổi khi tải lên và Cloudflare cho việc phân phối edge. Hình ảnh chiếm từ 60 đến 80 phần trăm trọng lượng trang trên một blog điển hình, vì vậy đây là nơi bạn thấy sự cải thiện rõ rệt nhất.

Tại sao hình ảnh WordPress lại làm chậm bạn?

Trên một blog điển hình, hình ảnh chiếm từ 60 đến 80 phần trăm trọng lượng trang. Tôi đã đo cửa hàng WooCommerce tương tự trước và sau khi khắc phục vấn đề về hình ảnh: tổng kích thước trang giảm từ 9.4MB xuống còn 1.1MB và điểm PageSpeed di động tăng vọt từ 31 lên 78.

Những nguyên nhân phổ biến tôi thấy:

• Các tệp JPEG camera 4MB được tải lên trực tiếp từ điện thoại
• Sử dụng PNG trong khi WebP có thể nhỏ hơn một phần tư kích thước
• Một tệp duy nhất 2560px được phục vụ cho điện thoại 375px
• Không bật lazy loading, khiến trình duyệt tải xuống mọi hình ảnh cùng lúc

WordPress hiện đã đi kèm với các cài đặt mặc định tốt, nhưng nó sẽ không ngăn bạn tải lên một bức ảnh 6MB. Phần đó là trách nhiệm của bạn.

Làm thế nào để thay đổi kích thước trước khi tải lên?

Bước đơn lẻ này làm được nhiều hơn bất kỳ plugin nào. Hãy thay đổi kích thước về kích thước lớn nhất mà bạn thực sự hiển thị, sau đó nén. Đối với hầu hết các hình ảnh nội dung, đó là 1600 đến 1920px chiều rộng.

Quy trình trước khi tải lên của tôi:

1. Đưa lô hình vào công cụ thay đổi kích thước tối đa 1920px.
2. Chuyển sang WebP với chất lượng 80.
3. Kiểm tra đầu ra dưới 200KB.
4. Sau đó tải lên WordPress.

Đối với logic định cỡ đầy đủ, hướng dẫn thay đổi kích thước hình ảnh cho web đề cập đến các điểm ngắt (breakpoints), và hướng dẫn thay đổi kích thước hàng loạt xử lý toàn bộ thư mục cùng một lúc.

Làm thế nào để chuyển sang WebP và AVIF?

WebP nhỏ hơn JPEG từ 25 đến 35 phần trăm ở chất lượng bằng nhau, và lõi WordPress đã hỗ trợ nó từ phiên bản 6.5. AVIF nén nhỏ hơn WebP thêm 20 đến 30 phần trăm nữa, nhưng khả năng hỗ trợ của trình duyệt và trình chỉnh sửa vẫn còn rời rạc.

Tôi nén các hình ảnh hero sang cả hai định dạng và để CDN thực hiện việc đàm phán. Hướng dẫn của Google là phục vụ các định dạng hiện đại ở mọi nơi bạn có thể — xem sử dụng định dạng hình ảnh hiện đại trên web.dev.

Nếu bạn có một đống PNG đã trực tuyến, trình chuyển đổi PNG sang WebP sẽ hướng dẫn bạn quy trình chuyển đổi hàng loạt mà không làm hỏng các URL.

Bạn nên sử dụng plugin nén nào?

Tôi đã nén cùng một thư viện 1.200 hình ảnh qua mọi plugin lớn. Những đánh đổi trung thực dưới đây — không cái nào trả tiền cho tôi.

ShortPixel Image Optimizer là thứ tôi cài đặt đầu tiên. Việc nén Glossy trông giống hệt mắt tôi, nó tự động tạo WebP và AVIF, và nó viết lại markup để phục vụ chúng. Gói miễn phí là 100 hình ảnh mỗi tháng, đủ để kiểm tra nhưng không đủ để dọn sạch một lượng lớn dữ liệu cũ.

Smush có giao diện sạch sẽ và các cài đặt mặc định tốt, nhưng gói miễn phí không chuyển đổi sang WebP — điều đó nằm sau tường phí Pro. Hoàn hảo nếu bạn đã trả tiền cho nó, hạn chế nếu bạn chưa.

EWWW Image Optimizer là lựa chọn của tôi cho các trang web khối lượng lớn. Nó tối ưu hóa hình ảnh cục bộ không giới hạn miễn phí và chỉ tính phí cho CDN và exactDN của nó. Thiết lập phức tạp hơn ShortPixel.

Imagify có tích hợp chặt chẽ với WP Rocket và một thanh trượt ba cấp độ đơn giản. Chất lượng nén rất tốt; giới hạn tín dụng hàng tháng là ràng buộc chính đối với các cửa hàng lớn.

Làm thế nào để responsive srcset thực sự hoạt động?

WordPress tự động tạo thumbnail, medium, large và một vài kích thước trung gian, đồng thời xuất ra srcset cho bạn — nhưng chỉ khi theme của bạn sử dụng wp_get_attachment_image() thay vì mã hóa cứng các thẻ <img>.

Một ví dụ về markup mà WordPress phát ra:

<img
  src="hero-1536x800.webp"
  srcset="hero-768x400.webp 768w,
          hero-1200x628.webp 1200w,
          hero-1536x800.webp 1536w"
  sizes="(max-width: 768px) 100vw, 1200px"
  loading="lazy"
  width="1536" height="800"
  alt="Storefront hero image">

Cách tôi xác minh nó: mở DevTools, giới hạn tốc độ ở Slow 4G, tải lại và kiểm tra tab Network. Điện thoại phải yêu cầu tệp 768w, chứ không phải 1536w. Nếu mọi thiết bị đều tải cùng một tệp, theme đã bị lỗi hoặc một page builder đang bỏ qua markup responsive.

Làm thế nào để bật lazy loading?

Kể từ WordPress 5.5, mọi <img> mặc định nhận loading="lazy", và 6.1 đã thêm gợi ý fetchpriority="high" cho hình ảnh lớn đầu tiên để nó không bị xung đột với lazy loader. Bạn hiếm khi cần plugin nào cho việc này nữa.

Tài liệu lazy-loading của WordPress chính thức liệt kê các bộ lọc nếu bạn cần loại trừ hình ảnh LCP hoặc lazy-load iframe. Cơ chế sâu hơn nằm trong bài viết lazy load images của chúng tôi, bao gồm lỗi phổ biến là lazy-loading hero above the fold.

CDN cắt giảm thời gian tải hình ảnh như thế nào?

CDN phục vụ các tệp từ edge gần người dùng nhất và loại bỏ các vòng đi khứ hồi (round-trips) từ origin của bạn. Sau khi tôi chuyển một khách hàng từ JPEG lưu trữ tại origin sang Cloudflare plus Polish, TTFB trên hình ảnh đã giảm từ 420ms xuống còn 60ms ở Singapore và Brazil.

Những gì tôi cấu hình:

• Cloudflare với Polish bật (lossless plus WebP).
• Cache mọi thứ trong /wp-content/uploads/.
• Bộ nhớ cache trình duyệt 1 năm cho các loại MIME của hình ảnh.
• WP Offload Media chỉ khi bạn bị ràng buộc với S3.

Để thiết lập đầy đủ bao gồm cả header cache và quy tắc purge, hướng dẫn CDN hình ảnh đi sâu vào chi tiết. Sự đánh đổi về định dạng nằm trong so sánh WebP vs AVIF.

Hỗ trợ WebP của core WordPress có đủ không?

Một phần. Kể từ 6.5, bạn có thể tải lên WebP trực tiếp và WordPress xử lý việc thay đổi kích thước, điều này rất tuyệt vời. Nhưng lõi không chuyển đổi các JPEG hiện có của bạn, không tự động tạo AVIF, và không đàm phán định dạng theo trình duyệt. Một plugin hoặc CDN vẫn thực hiện công việc đó.

Nếu bạn bắt đầu một trang web hoàn toàn mới hôm nay và chỉ tải lên WebP, lõi là đủ. Đối với bất kỳ trang web nào cũ hơn — điều này gần như áp dụng cho mọi người — bạn cần lớp plugin. Xem ghi chú trường core WordPress để biết những thay đổi media đang diễn ra.

Danh sách kiểm tra hiệu suất trước khi xuất bản

• Mọi hình ảnh nội dung đều dưới 200KB.
• WebP được phục vụ, với JPEG dự phòng.
• Hero nhận fetchpriority="high", không phải loading="lazy".
• srcset hiện diện và điện thoại tải tệp nhỏ.
• CDN cache /wp-content/uploads/.
• Văn bản alt mô tả hình ảnh trong 18 đến 140 ký tự.
• LCP dưới 2.5s và CLS dưới 0.1 trong PageSpeed.

Tóm tắt

Thay đổi kích thước, nén sang WebP, để WordPress và một plugin xây dựng srcset responsive, lazy-load bên dưới phần nhìn thấy (below the fold), và cache tại edge. ShortPixel cộng với Cloudflare là bộ công cụ tôi tìm đến đầu tiên; EWWW là lựa chọn của tôi khi thư viện lớn và ngân sách bằng không.

Một lưu ý thực tế: việc nén mất dữ liệu mạnh sẽ cuối cùng làm bạn thất vọng đối với các bức ảnh sản phẩm và màn hình retina nơi kết cấu rất quan trọng. Tôi giữ bản gốc trong bộ nhớ đám mây và tái xuất từ đó, bởi vì một khi bạn ghi đè nguồn bằng bản sao mất dữ liệu, chi tiết đã biến mất vĩnh viễn.

Các câu hỏi thường gặp

WordPress 6.5 có làm cho các plugin tối ưu hóa hình ảnh trở nên không cần thiết không?

Chỉ đối với các trang web hoàn toàn mới chỉ tải lên WebP từ ngày đầu tiên. Core 6.5 thay đổi kích thước các bản tải lên WebP và phục vụ các kích thước responsive, nhưng nó không chuyển đổi thư viện JPEG hiện có, không tạo AVIF, và không thực hiện đàm phán định dạng theo trình duyệt. Bất kỳ trang web nào có thư viện media hiện có vẫn cần một plugin hoặc CDN cho việc đó.

Plugin tối ưu hóa hình ảnh WordPress miễn phí tốt nhất là gì?

Gói miễn phí của EWWW Image Optimizer bao gồm nén và chuyển đổi WebP mà không cần API trả phí. ShortPixel cung cấp 100 hình ảnh miễn phí mỗi tháng, phù hợp với các trang web nhỏ. Đối với thư viện lớn với ngân sách bằng không, EWWW là mặc định thực tế; đối với tự động hóa và AVIF, các gói trả phí của ShortPixel hoặc Imagify là đáng giá.

Tôi có nên phục vụ WebP hay AVIF trên WordPress?

WebP là mặc định phổ quát, AVIF nếu bạn có thể mã hóa nó và khán giả của bạn chủ yếu sử dụng trình duyệt hiện đại. WebP hoạt động ở khắp mọi nơi hiện tại, AVIF nhỏ hơn khoảng 50% nhưng mã hóa chậm hơn và bỏ qua một số trình duyệt cũ hơn. Hãy xuất bản AVIF với fallback WebP thông qua phần tử <picture> để bao phủ cả hai.

WordPress có nén hình ảnh của tôi không?

Có — WordPress tạo ra nhiều phiên bản thay đổi kích thước cho mọi bản tải lên và áp dụng nén nhẹ. Nhưng nó không chuyển định dạng (ngoài WebP 6.5), không tối ưu hóa mạnh mẽ, và không loại bỏ metadata. Một plugin sẽ xử lý những bước đó.

Bộ công cụ tối ưu hóa hình ảnh WordPress tốt nhất là gì?

ShortPixel (nén và WebP/AVIF) cộng với Cloudflare (phân phối edge) là bộ công cụ tôi tìm đến đầu tiên; EWWW khi thư viện lớn và ngân sách bằng không. Sự kết hợp này xử lý nén, định dạng hiện đại và cache edge. Hãy giữ bản gốc trong bộ nhớ đám mây và tái xuất từ đó, bởi vì ghi đè nguồn bằng một bản sao mất dữ liệu sẽ làm mất chi tiết vĩnh viễn.

Hình ảnh tín dụng

• Máy đánh chữ cổ điển với nhãn giấy WordPress — ảnh của Suzy Hazelwood trên Pexels
• Không gian làm việc laptop văn phòng tại nhà để chỉnh sửa trang WordPress — ảnh của cottonbro studio trên Pexels
• Laptop xem trước trang thanh toán website trên bàn sạch — ảnh của Caio trên Pexels
• Thiết lập máy tính hai màn hình của nhà phát triển hiển thị mã và phần mềm chỉnh sửa hình ảnh — ảnh của Lukas Blazek trên Pexels