Hướng dẫn đầy đủ về tối ưu hóa hiệu suất và cải thiện SEO cho website WooCommerce

Tối ưu hóa hiệu năng cốt lõi của trang web

Các trang web thương mại điện tử được xây dựng trên nền tảng WordPress và WooCommerce, hiệu suất của chúng ảnh hưởng trực tiếp đến trải nghiệm người dùng, tỷ lệ chuyển đổi và thứ hạng trên các công cụ tìm kiếm. Những trang web chạy chậm sẽ khiến khách hàng rời đi nhanh chóng và dẫn đến việc điểm số SEO bị giảm sút. Việc tối ưu hóa hiệu suất cốt lõi bắt đầu từ phía kỹ thuật; đây là nền tảng cho mọi hoạt động tối ưu hóa khác.

Thực hiện chiến lược bộ nhớ đệm hiệu quả

Một giải pháp lưu trữ đệm (cache) mạnh mẽ là công cụ giúp cải thiện hiệu suất một cách nhanh chóng và rõ rệt nhất. Trong môi trường WooCommerce, do có nhiều nội dung động (như giỏ hàng, giá cả, hàng tồn kho), việc sử dụng các giải pháp hỗ trợ lưu trữ đệm ở cấp độ trang (page-level cache) và lưu trữ đệm theo đoạn (fragment cache) là điều bắt buộc.

Đối với việc tối ưu hóa truy vấn cơ sở dữ liệu đối với dữ liệu động, việc lưu trữ dữ liệu trong bộ đệm đối tượng (object cache) là rất quan trọng. Được khuyến nghị sử dụng các hệ thống bộ đệm đối tượng bên ngoài như Redis hoặc Memcached. Bạn có thể thực hiện điều này bằng cách cài đặt chúng trên hệ thống của mình. Redis Object Cache Các plugin như vậy có thể được sử dụng để thực hiện điều này. Ngoài ra, việc chọn một plugin lưu trữ dữ liệu (cache) có hiệu suất cao (chẳng hạn như WP Rocket, W3 Total Cache) và cấu hình chúng một cách chính xác cho WooCommerce (chẳng hạn như loại trừ các trang liên quan đến giỏ hàng, quá trình thanh toán, và trang “Tài khoản của tôi”) có thể giúp giảm đáng kể tải lượng lên máy chủ.

Đọc thêm Hướng dẫn tối ưu WordPress cao cấp: Chiến lược nâng cao hiệu suất toàn diện từ tốc độ đến SEO。

Tối ưu hóa hình ảnh và tài nguyên đa phương tiện

Các trang web thương mại điện tử đầy rẫy hình ảnh sản phẩm, và những hình ảnh chưa được tối ưu hóa chính là nguyên nhân khiến trang web trở nên nặng nề và chậm trong việc tải. Đầu tiên, tất cả các hình ảnh nên được nén bằng các công cụ như TinyPNG, ImageOptim trước khi được tải lên. Thứ hai, cần áp dụng chiến lược thiết kế hình ảnh thích ứng với nhiều loại thiết bị khác nhau (chiến lược hình ảnh responsive).

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

Có thể sử dụng wp_get_attachment_image_srcset Các hàm này đảm bảo rằng nội dung được hiển thị trên WordPress phù hợp với nhiều kích thước màn hình khác nhau. Ngoài ra, nên sử dụng các định dạng hình ảnh hiện đại như WebP – chúng giúp giảm đáng kể kích thước tệp mà vẫn không làm ảnh hưởng đến chất lượng hình ảnh. Việc chuyển đổi định dạng hình ảnh và phân phối chúng theo nhu cầu có thể được thực hiện tự động thông qua các plugin (như Imagify, ShortPixel) hoặc các quy tắc trên máy chủ (như tệp .htaccess). Tính năng tải chậm (Lazy Load) cũng rất quan trọng; nó giúp chỉ tải những hình ảnh nào xuất hiện trong phạm vi hiển thị của người dùng.

Tinh giản và tối ưu hóa nguồn mã nguồn

Việc tích lũy quá nhiều tệp JavaScript và CSS có thể gây cản trở quá trình hiển thị trang web. Nhiệm vụ quan trọng nhất là hợp nhất (merge) và giảm kích thước (minify) các tệp này. Nhiều plugin nâng cao về hiệu suất web cung cấp chức năng này, nhưng bạn cần lưu ý đến thứ tự hợp nhất các tệp để tránh làm ảnh hưởng đến chức năng tương tác của WooCommerce.

Quan trọng hơn nữa, việc loại bỏ các đoạn mã không được sử dụng (Code Elimination) và trì hoãn việc tải các đoạn JavaScript không quan trọng là rất cần thiết. Đối với WooCommerce, nhiều plugin của bên thứ ba có thể tải các tập tin script và style chỉ khi cần thiết trên những trang cụ thể. Bạn có thể sử dụng các công cụ hoặc phương pháp như… wp_dequeue_script 和 wp_dequeue_style Hook: Được sử dụng dựa trên các điều kiện nhất định (chẳng hạn như việc kích hoạt hoặc vô hiệu hóa chức năng). is_product() 或 is_shop() (Các thẻ điều kiện) được sử dụng để kiểm soát chính xác quá trình tải các tài nguyên. Ví dụ, chỉ tải script chọn biến thể trên trang sản phẩm.

function my_deregister_scripts() {
    if ( ! is_product() ) {
        wp_dequeue_script( 'wc-add-to-cart-variation' );
    }
}
add_action( 'wp_print_scripts', 'my_deregister_scripts', 100 );

Tối ưu hóa cơ sở dữ liệu và phía máy chủ

Hiệu quả xử lý dữ liệu ở phía máy chủ (back-end) của trang web trực tiếp ảnh hưởng đến tốc độ tạo ra các trang hiển thị trên trình duyệt. Một cơ sở dữ liệu quá phức tạp và không được bảo trì đúng cách, cùng với các máy chủ được cấu hình sai lầm, có thể trở thành những rào c

Đọc thêm Hướng dẫn tối ưu hóa toàn diện website WordPress: Chiến lược cải thiện tốc độ, bảo mật và SEO。

Dọn dẹp và tối ưu cơ sở dữ liệu định kỳ

Trong quá trình vận hành, WooCommerce liên tục tạo ra nhiều dữ liệu, chẳng hạn như các phiên truy cập đã hết hạn, các phiên bản đã sửa đổi của đơn hàng đã được hoàn tất, hoặc các dữ liệu tạm thời không còn cần thiết nữa. Những dữ liệu này dần dần làm chậm tốc độ thực hiện các thao tác truy vấn (query).

Cần được dọn dẹp định kỳ. wp_posts Các bản thảo tự động và phiên bản sửa đổi trong bảng, cùng với… wp_options Các bản ghi tạm thời (Transients) trong bảng. Có thể sử dụng như WP-Optimize 或 Advanced Database Cleaner Những plugin này thực hiện các tác vụ dọn dẹp một cách an toàn. Đồng thời, nên sử dụng chúng định kỳ. OPTIMIZE TABLE Hoặc sử dụng các tính năng của plugin để tối ưu hóa cấu trúc bảng trong cơ sở dữ liệu, giúp giảm thiểu tình trạng phân mảnh dữ liệu (data fragmentation) và tiết kiệm không gian lưu trữ.

Chọn máy chủ phù hợp và cấu hình máy chủ.

Các máy chủ chia sẻ (shared hosting) thường không thể hỗ trợ các trang web WooCommerce có lưu lượng truy cập vượt mức trung bình. Chúng tôi khuyên bạn nên sử dụng các dịch vụ lưu trữ được tối ưu hóa riêng biệt cho WooCommerce, như Nexcess, Kinsta, VPS hoặc máy chủ đám mây (cloud servers).

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

Ở cấp độ máy chủ, hãy đảm bảo rằng bạn đã kích hoạt phiên bản PHP mới nhất (chẳng hạn PHP 8.x) và cấu hình đầy đủ OPcache. Việc sử dụng các công cụ như Nginx thay thế Apache thường mang lại khả năng xử lý đồng thời tốt hơn. Đối với các trang web có lượng truy cập lớn, hãy xem xét triển khai CDN (mạng phân phối nội dung) để phân phối các tài nguyên tĩnh (hình ảnh, CSS, JS) đến các máy chủ trên toàn thế giới, giúp giảm thời gian truy cập cho người dùng.

Tối ưu hóa các truy vấn cụ thể trong WooCommerce

Trong quá trình tìm kiếm sản phẩm trên WooCommerce, đặc biệt là trên trang cửa hàng và trang phân loại sản phẩm, có thể xuất hiện nhu cầu truy vấn các dữ liệu siêu dữ liệu (metadata) phức tạp. Việc tối ưu hóa các thao tác xử lý dữ liệu liên quan đến đơn hàng có thể được thực hiện một cách đáng kể bằng cách kích hoạt tính năng Lưu trữ Đơn hàng Hiệu suất Cao (High-Performance Order Storage – HPOS). Đây là cấu trúc dữ liệu mới được giới thiệu bởi WooCommerce, nhằm mục đích tách dữ liệu đơn hàng ra khỏi các phần khác của hệ thống. wp_posts Loại bỏ các bảng không cần thiết để nâng cao hiệu quả truy vấn.

Hãy bật tính năng này trong phần “WooCommerce > Cài đặt > Nâng cao > Bảng cơ sở dữ liệu tùy chỉnh” ở phía sau hệ thống. Ngoài ra, hãy đảm bảo rằng các bảng cơ sở dữ liệu (đặc biệt là…) được thiết lập đúng cách. wp_woocommerce_order_itemmeta Bảng metadata đã được thiết lập các chỉ mục (index) phù hợp, nhằm tăng tốc độ thao tác lọc và sắp xếp sản phẩm.

Đọc thêm Hướng dẫn tối ưu tốc độ website WordPress toàn diện: Lộ trình thực hành từ cơ bản đến nâng cao。

Nâng cao trải nghiệm người dùng và tốc độ chuyển đổi (Conversion Speed)

Mục đích cuối cùng của việc tối ưu hóa hiệu suất là phục vụ người dùng và thúc đẩy doanh số bán hàng. Phản hồi trực quan nhanh chóng và trải nghiệm tương tác mượt mà có thể giúp tăng tỷ lệ chuyển đổi mua hàng.

Tối ưu hóa các con đường hiển thị trang (rendering paths) quan trọng và các chỉ số web cốt lõi

Hãy theo dõi các chỉ số Web cốt lõi (Core Web Vitals) của Google: Thời gian vẽ nội dung cuối cùng (Last Content Paint – LCP), Thời gian phản hồi khi người dùng nhập lần đầu (First Input Delay – FID) / Thời gian vẽ lại phản hồi của người dùng (Interactive Paint – INP), và Độ lệch bố cục tích lũy (Cumulative Layout Shift –CLS). Đối với WooCommerce, trọng tâm tối ưu hóa LCP thường nằm ở hình ảnh sản phẩm chính, tiêu đề và giá cả. Hãy đảm bảo rằng những nội dung này được tải trước, để tránh bị cản trở bởi các tài nguyên khác.

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

Việc tối ưu hóa INP đòi hỏi phải đảm bảo hiệu suất thực thi của JavaScript. Các tác vụ phức tạp nên được chia nhỏ thành các phần nhỏ hơn, và các thao tác tương tác của người dùng (chẳng hạn như việc nhấp vào nút “Thêm vào giỏ hàng”) cần được xử lý ưu tiên. Việc tối ưu hóa CLS yêu cầu bố cục trang web phải ổn định và không thay đổi một cách đột ngột. Các phần tử như hình ảnh, video nên được định nghĩa rõ ràng về kích thước, và việc chèn nội dung mới vào phía trên nội dung hiện có (chẳng hạn như quảng cáo pop-up) cần được tránh; điều này đặc biệt quan trọng trên trang danh sách sản phẩm và trang chi tiết sản phẩm.

Triển khai các tối ưu hóa cho giỏ hàng và quá trình thanh toán sử dụng công nghệ Ajax

Trải nghiệm khi trang web được làm mới sau khi người dùng nhấp vào nút “Thêm vào giỏ hàng” theo cách truyền thống khá tệ. Việc triển khai tính năng “Thêm vào giỏ hàng” bằng Ajax cho phép người dùng thêm sản phẩm vào giỏ hàng mà không cần rời khỏi trang hiện tại, đồng thời cung cấp phản hồi trực quan ngay lập tức (chẳng hạn như hiển thị khay giỏ hàng ở góc màn hình). Tính năng này thường được cung cấp bởi các giao diện thiết kế (theme) hoặc các plugin (chẳng hạn như tính năng tích hợp sẵn trong WooCommerce).

Quy trình thanh toán là bước cuối cùng và cũng là bước quan trọng nhất trong quá trình chuyển đổi khách hàng. Nên cố gắng giảm số lượng trường trên trang thanh toán, kích hoạt chức năng tự động điền địa chỉ, và cung cấp nhiều phương thức thanh toán khác nhau. Sử dụng các công cụ như… WooCommerce PayPal Payments Loại plugin này cho phép tích hợp các phương thức thanh toán như PayPal hoặc thẻ tín dụng trực tiếp vào trang web, giúp tránh việc người dùng phải được chuyển hướng đến các trang khác. Điều này giúp giảm tỷ lệ người dùng rời bỏ trang web, từ đó nâng cao trải nghiệm sử dụng dịch vụ

Đảm bảo trải nghiệm tương tác thân thiện trên thiết bị di động (đáp ứng nhanh với các thay đổi kích thước màn hình).

Hơn một nửa lưu lượng truy cập vào các trang web thương mại điện tử đến từ các thiết bị di động. Bạn cần đảm bảo rằng trang web WooCommerce của mình tải nhanh và dễ sử dụng trên các thiết bị di động. Điều này đòi hỏi bạn phải sử dụng thiết kế thân thiện với mọi thiết bị (responsive design) và tiến hành kiểm thử chặt chẽ trên nền tảng di động. Các điểm nhấp (như nút bấm) cần có kích thước đủ lớn (không nhỏ hơn 44x44 pixel), nội dung văn bản phải rõ ràng và dễ đọc; đồng thời kích thước hình ảnh trên trang web cũng cần được điều chỉnh phù hợp để tránh tình trạng tải những hình ảnh có kích thước quá lớn, gây tốn thời gian và dung lượng dữ liệu.

Chiến lược tối ưu hóa trang web cho công cụ tìm kiếm (Search Engine Optimization – SEO)

Một trang web tải nhanh là nền tảng cơ bản cho việc tối ưu hóa công cụ tìm kiếm (SEO), nhưng bên cạnh đó, các trang web sử dụng nền tảng WooCommerce còn cần những chiến lược cấu trúc hóa chuyên biệt để giúp các công cụ tìm kiếm hiểu rõ hơn nội dung sản phẩm của bạn.

Xây dựng kiến trúc thông tin rõ ràng và cấu trúc URL

Một cấu trúc trang web rõ ràng về mặt logic sẽ giúp người dùng và các công cụ thu thập dữ liệu từ trang web (như công cụ tìm kiếm) dễ dàng di chuyển và tìm kiếm thông tin. Việc sử dụng cấu trúc mặc định của WooCommerce, bao gồm các thư mục /shop/, /product/ và /product-category/, thường là một khởi đầu tốt. Hãy tránh sử dụng các địa chỉ URL quá phức tạp hoặc chứa quá nhiều tham số không cần thiết.

Hãy tối ưu hóa cài đặt các liên kết cố định (Permalinks) để đảm bảo rằng địa chỉ URL của sản phẩm ngắn gọn và chứa các từ khóa quan trọng. Ví dụ, hãy sử dụng cấu trúc “/product/product-name/” thay vì các cấu trúc chứa ngày tháng hoặc mã số ID. Đồng thời, hãy thiết lập mối quan hệ phân cấp có ý nghĩa và mô tả rõ ràng giữa các danh mục sản phẩm và thẻ (tags) của chúng.

Tối ưu hóa các yếu tố SEO trên trang sản phẩm

Mỗi trang sản phẩm đều là một trang đích (landing page) độc lập, vì vậy cần được tối ưu hóa SEO một cách toàn diện. Điều này bao gồm việc viết nội dung độc đáo và hấp dẫn… và tiêu đề HTTP Hãy mô tả sản phẩm một cách chi tiết, chứ không chỉ đơn thuần sử dụng tên sản phẩm. Hãy kết hợp các từ khóa một cách tự nhiên vào nội dung mô tả, và sử dụng các thẻ tiêu đề (H1, H2, H3) để tổ chức cấu trúc nội dung một cách rõ ràng.

Đừng bỏ qua yếu tố SEO cho hình ảnh. Hãy thêm những mô tả cho mỗi hình ảnh sản phẩm, và đảm bảo rằng các mô tả đó chứa các từ khóa liên quan đến sản phẩm đó. alt Điều này rất quan trọng đối với cả việc tìm kiếm hình ảnh và truy cập dễ dàng (truy cập không gặp trở ngại).

Tạo dữ liệu có cấu trúc phong phú

Dữ liệu có cấu trúc (Structured Data) là một định dạng tiêu chuẩn hóa, được sử dụng để cung cấp thông tin ngữ cảnh rõ ràng về trang web cho các công cụ tìm kiếm. Đối với các trang web thương mại điện tử, điều quan trọng nhất là cần thêm (dữ liệu có cấu trúc) vào nội dung trang web của mình. Product、AggregateRating(Nếu có bình luận) và BreadcrumbList Mô hình (Pattern).

Điều này có thể được thực hiện tự động thông qua các plugin như Rank Math SEO, Yoast SEO for WooCommerce, hoặc bằng cách thêm các thông tin cần thiết vào mã nguồn của template chủ đề (theme template) một cách thủ công. Các thông tin phong phú (Rich Snippets) có thể giúp tăng đáng kể tỷ lệ nhấp vào kết quả tìm kiếm; ví dụ như hiển thị giá cả, đánh giá và tình trạng hàng tồn kho trong kết quả tìm kiếm.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "蓝色经典T恤",
  "image": "https://example.com/t-shirt.jpg",
  "description": "一款由100%纯棉制成的舒适经典T恤。",
  "sku": "TS001-BLUE",
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/product/blue-t-shirt/",
    "priceCurrency": "CNY",
    "price": "99.00",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Tóm lại

Tối ưu hóa trang web WooCommerce là một quá trình tổng thể bao gồm các thao tác điều chỉnh kỹ thuật, thiết kế trải nghiệm người dùng và tiếp thị qua các công cụ tìm kiếm (SEO). Từ việc triển khai hệ thống lưu trữ dữ liệu (cache) và tối ưu hóa hình ảnh một cách hiệu quả, đến việc điều chỉnh cấu hình cơ sở dữ liệu và máy chủ, những bước này là nền tảng quan trọng để nâng cao tốc độ trang web. Trên cơ sở đó, việc tập trung vào các chỉ số web cốt lõi, tương tác Ajax mượt mà và trải nghiệm trên thiết bị di động sẽ trực tiếp góp phần nâng cao tỷ lệ chuyển đổi khách hàng. Cuối cùng, thông qua cấu trúc thông tin rõ ràng, việc tối ưu hóa nội dung trang sản phẩm (SEO) và sử dụng dữ liệu có cấu trúc (structured data) sẽ giúp sản phẩm và nội dung của bạn được hiển thị rõ ràng hơn trên các công cụ tìm kiếm. Bằng cách tuân theo hướng dẫn này để thực hiện các bước tối ưu hóa một cách có hệ thống, trang web WooCommerce của bạn không chỉ sẽ nổi bật về tốc độ, mà còn có thể thu hút và giữ chân nhiều khách hàng hơn trong môi trường thương mại điện tử đầy cạnh tranh.

FAQ 常见问题

Các plugin lưu trữ dữ liệu (cache plugins) có thể ảnh hưởng đến các chức năng động của WooCommerce, chẳng hạn như giỏ hàng (shopping cart) không?

Các plugin lưu trữ (cache) được cấu hình đúng cách sẽ không ảnh hưởng đến các chức năng động (dynamic functions). Điều quan trọng là cần loại trừ những trang chứa thông tin cụ thể của người dùng (như giỏ hàng, quá trình thanh toán, thông tin tài khoản, cũng như các trang sản phẩm có nút “Thêm vào giỏ hàng”) khỏi việc được lưu trữ trong bộ nhớ đệm (cache).

Hầu hết các plugin lưu trữ đệm (cache) nâng cao đều cung cấp các tùy chọn chuyên dụng để “không lưu trữ trang nào đó” hoặc thiết lập “quy tắc loại trừ” (exclusion rules). Bạn cần thêm các URI của các trang cốt lõi trong WooCommerce (ví dụ: /cart/, /checkout/, /my-account/) vào danh sách các trang được loại trừ. Đồng thời, hãy đảm bảo rằng hệ thống lưu trữ đệm (như Redis/Memcached) đang hoạt động bình thường để xử lý các truy vấn nhanh chóng đối với dữ liệu động.

Khi bật chức năng lưu trữ đơn hàng hiệu năng cao, có những rủi ro nào không?

Việc kích hoạt tính năng HPOS trong WooCommerce là một cải tiến đáng kể, tuy nhiên quá trình chuyển đổi cần được thực hiện một cách thận trọng. Rủi ro lớn nhất liên quan đến khả năng tương thích giữa các thành phần của hệ thống. Trước khi kích hoạt tính năng này, bạn cần đảm bảo rằng chủ đề (theme) và tất cả các plugin đang sử dụng (đặc biệt là các plugin liên quan đến thanh toán, giao hàng, đăng ký thành viên, v.v.) đều tương thích hoàn toàn với HPOS.

WooCommerce cung cấp một công cụ hỗ trợ tính tương thích. Được khuyến nghị nên thực hiện quá trình di chuyển và kiểm thử trước tiên trên bản sao lưu toàn bộ trang web hoặc trong môi trường staging (thử nghiệm). Hãy đảm bảo rằng tất cả các chức năng liên quan đến đơn hàng (tạo đơn hàng, chỉnh sửa đơn hàng, thanh toán, đồng bộ dữ liệu, v.v.) đều hoạt động bình thường trước khi bật chức năng này trong môi trường sản xuất.

Làm thế nào để biết những phần nào của trang web của tôi đang làm chậm tốc độ truy cập?

Bước đầu tiên là tiến hành chẩn đoán tốc độ hoạt động của hệ thống. Chúng tôi khuyến nghị sử dụng các công cụ miễn phí sau: Google PageSpeed Insights (cung cấp các chỉ số Web cốt lõi và gợi ý về cách tối ưu hóa), GTmetrix (cung cấp phân tích chi tiết về quá trình xử lý trang web và đánh giá hiệu suất), và WebPageTest (thực hiện các bài kiểm thử đa địa điểm một cách sâu rộng hơn).

Những công cụ này sẽ chỉ ra những vấn đề cụ thể, chẳng hạn như những hình ảnh có kích thước quá lớn, các đoạn mã JavaScript không được sử dụng, hoặc thời gian phản hồi chậm của máy chủ (TTFB – Time To First Byte) là nguyên nhân gây ra sự chậm trễ trong trải nghiệm người dùng. Đối với việc phân tích các hoạt động trên phía máy chủ và các truy vấn cơ sở dữ liệu, bạn có thể xem xét sử dụng plugin Query Monitor. Plugin này có thể hiển thị trực tiếp tất cả các truy vấn cơ sở dữ liệu và các đoạn mã PHP được thực thi trong quá trình tải trang, giúp bạn xác định chính xác các điểm nghẽn về hiệu suất.

Đến mức độ nào thì việc tối ưu hóa hình ảnh sản phẩm mới được coi là phù hợp?

Việc tối ưu hóa hình ảnh đòi hỏi phải cân bằng giữa chất lượng hình ảnh và kích thước tệp. Một tiêu chuẩn hữu ích là: đối với hình ảnh dùng cho màn hình toàn màn hình hoặc làm nền, kích thước tệp nên được kiểm soát ở mức dưới 200KB; đối với hình ảnh dùng cho nội dung thông thường, nên dưới 100KB; còn đối với các biểu tượng nhỏ hoặc hình ảnh trang trí, kích thước tệp nên nhỏ hơn 30KB.

Về mặt các chỉ số kỹ thuật, cần đảm bảo rằng tất cả hình ảnh đều đã được nén theo phương thức có hại (lossy) hoặc không có hại (lossless). Đối với hình ảnh sản phẩm thuộc lĩnh vực nhiếp ảnh, bạn có thể thử sử dụng chất lượng nén 70%-85%. Ngoài ra, cần sử dụng các định dạng hiện đại như WebP, và tạo ra nhiều phiên bản hình ảnh có kích thước khác nhau (dưới dạng srcset) để trình duyệt có thể lựa chọn tệp phù hợp nhất cho màn hình của từng thiết bị, nhằm tránh việc tải về những hình ảnh có kích thước lớn dành cho màn hình máy tính trên màn hình nhỏ.