Xuất bản: Ngày 24 tháng 6 năm 2026
Nuvemshop (còn được gọi là Tiendanube ở khu vực Mỹ La-tinh nói tiếng Tây Ban Nha) là nền tảng thương mại điện tử hàng đầu trong khu vực, hỗ trợ hơn 180.000 cửa hàng trực tuyến. Khi người bán tuỳ chỉnh trang chủ của họ thông qua nhiều giao diện và bố cục nội dung linh hoạt, việc đảm bảo tải trang nhanh chóng trong sự đa dạng này sẽ đặt ra những thách thức kỹ thuật riêng.
- Nội dung lớn nhất hiển thị (LCP) tình trạng tốt hơn 68%, từ 57% lên 96% trong một năm, cho thấy sự thay đổi lớn trong cách các cửa hàng hiển thị nội dung ở đầu khung nhìn cho người dùng thực.
- Tỷ lệ đáp ứng Các chỉ số quan trọng về trang web đã tăng từ 48% lên 72%, tức là hiện có gần 3 trong số 4 cửa hàng đáp ứng ngưỡng hiệu suất cơ bản của Google.
- Mức độ tương tác với chiến dịch Mua sắm đã cải thiện đáng kể: Khi phân tích cùng một nhóm cửa hàng Brazil hoạt động trong tháng 1 năm 2025 và tháng 1 năm 2026, khách truy cập trên thiết bị di động thông qua kết quả tìm kiếm tự nhiên trên Google cho thấy:
- Tỷ lệ chuyển đổi tăng 8,9% (từ phiên thành đơn đặt hàng có tính phí)
- Tỷ lệ tương tác với giỏ hàng tăng 8,4% (từ phiên truy cập đến giỏ hàng)
- Thiết bị di động mang lại mức tăng lớn nhất, phù hợp với những nơi có mức cải thiện LCP đáng kể nhất.
Những kết quả này phù hợp với nghiên cứu của Deloitte do Google uỷ quyền (hơn 30 triệu phiên trên 37 thương hiệu), theo đó, việc cải thiện tốc độ tải 0,1 giây có thể tăng tỷ lệ chuyển đổi bán lẻ lên 8,4%, xác thực hướng đầu tư của chúng tôi.
Thách thức: Phát hiện LCP trong bố cục thương mại điện tử linh động
Vào đầu năm 2025, chỉ có 48% cửa hàng của chúng tôi đạt ngưỡng Core Web Vitals và 57% có điểm LCP tốt. Giả thuyết ban đầu của chúng tôi là trọng lượng hình ảnh hoặc độ trễ của máy chủ. Chúng tôi đã sai.
Thông qua hoạt động phân tích bằng PageSpeed Insights trên hàng nghìn cửa hàng, chúng tôi nhận thấy nền tảng của mình cho phép người bán sắp xếp các phần trên trang chủ một cách linh hoạt: băng chuyền, biểu ngữ, lưới sản phẩm và mô-đun tuỳ chỉnh có thể xuất hiện theo bất kỳ thứ tự nào.
Tính linh hoạt này đã gây ra một vấn đề không lường trước được: phần tử phù hợp không phải lúc nào cũng được xác định là LCP. Trong các cửa hàng có băng chuyền (chiếm 85% mặt tiền cửa hàng của chúng tôi), đôi khi một biểu ngữ ở phía dưới khung hiển thị được đánh dấu là LCP thay vì hình ảnh đầu tiên trong băng chuyền, tuỳ thuộc vào cách trang hiển thị trên các màn hình và thiết bị khác nhau. Điều này có nghĩa là nỗ lực tối ưu hoá của chúng tôi không mang lại hiệu quả như mong đợi: Chúng tôi đang tối ưu hoá những phần tử không phải là phần tử LCP.
Không giống như các nền tảng SaaS thông thường, chúng tôi không thể chỉ sửa trang chủ. Chúng tôi cần một giải pháp hoạt động trên mọi cấu hình giao diện, cách sắp xếp phần và chế độ tuỳ chỉnh của người bán có thể có, mà không làm hỏng các cửa hàng hiện có hoặc hạn chế sự tự do sáng tạo.
Bố cục thích ứng ảnh hưởng như thế nào đến việc chọn phần tử LCP
Thông qua hoạt động phân tích bằng PageSpeed Insights và hoạt động giám sát người dùng thực, chúng tôi nhận thấy các hiệu ứng chuyển đổi CSS trên băng chuyền và biểu ngữ bị trì hoãn khi các phần tử hiển thị cho thuật toán phát hiện LCP của trình duyệt. Mặc dù người dùng nhận thấy băng chuyền tải trước, nhưng đôi khi trình duyệt đánh dấu một biểu ngữ trong phần thứ hai là phần tử LCP (Nội dung lớn nhất hiển thị) – vì khả năng hiển thị của phần tử đó không bị trì hoãn bởi hiệu ứng chuyển cảnh.
Chúng tôi xác định được 3 nguyên nhân gốc rễ:
- Quá trình chuyển đổi CSS bị trì hoãn khi các phần tử được coi là hiển thị, đẩy quá trình phát hiện LCP sang khung hình không chính xác.
- Tính năng tải từng phần đã được áp dụng cho những hình ảnh ở đầu khung nhìn cần tải ngay lập tức.
- Việc thiếu các tín hiệu ưu tiên có nghĩa là những hình ảnh quan trọng nhất không được tải trước.
Chúng tôi cũng nhận thấy phần lớn các phép đo LCP đến từ các trang danh mục và sản phẩm, chứ không chỉ trang chủ. Điều này có nghĩa là các bản sửa lỗi của chúng tôi cần được áp dụng nhất quán trên tất cả các loại trang có lưu lượng truy cập cao.
Triển khai: khắc phục 3 nguyên nhân gốc trên quy mô lớn
Sau khi xác định được nguyên nhân, chúng tôi đã dễ dàng khắc phục vấn đề. Chúng tôi áp dụng các nguyên tắc này một cách nhất quán trên tất cả các chủ đề và loại trang chính, nhưng mỗi nguyên tắc đều đòi hỏi phải có phạm vi cẩn thận để tránh tạo ra các vấn đề mới.
- Đã xoá hiệu ứng chuyển đổi CSS cho các phần ở vị trí đầu tiên. Các phần xuất hiện đầu tiên trên trang hiện được kết xuất ngay lập tức, đảm bảo trình duyệt phát hiện chúng là các thành phần LCP mà không có độ trễ nhân tạo.
Đã xóa tính năng tải từng phần khỏi hình ảnh ở đầu khung nhìn. Đối với hình ảnh trong phần đầu tiên, chúng ta sẽ xoá
loading="lazy"có điều kiện để loại bỏ độ trễ khi tải tài nguyên. Chúng tôi đã cẩn thận chỉ giới hạn phạm vi này cho hình ảnh đầu tiên trong các phần ở vị trí đầu tiên:<!-- Before --> <img src="slide-1.webp" loading="lazy" alt="Featured product"> <!-- After --> <img src="slide-1.webp" alt="Featured product">Thêm các tín hiệu ưu tiên rõ ràng. Bằng cách thêm
fetchpriority="high", chúng ta cho trình quét tải trước của trình duyệt biết rằng hình ảnh LCP là tài nguyên có mức độ ưu tiên cao nhất, cho phép trình duyệt khám phá và tải xuống hình ảnh này sớm hơn, trước khi bố cục và quá trình kết xuất hoàn tất. Chúng tôi đã thêm logic xác thực để đảm bảo các tín hiệu ưu tiên chỉ áp dụng khi phần tử thực sự ở vị trí có thể là ứng cử viên LCP: Việc thêmfetchpriority="high"vào quá nhiều hình ảnh sẽ phản tác dụng, vì nếu mọi thứ đều có mức độ ưu tiên cao thì sẽ không có gì là ưu tiên cả.<!-- Before --> <img src="slide-1.webp" alt="Featured product"> <!-- After --> <img src="slide-1.webp" fetchpriority="high" alt="Featured product">Giảm độ trễ thông qua tính năng lưu vào bộ nhớ đệm ở rìa. Lưu vào bộ nhớ đệm là một phương pháp hiệu quả để giảm thời gian tải, nhưng trong thương mại điện tử, phương pháp này có một rủi ro thực sự: Việc phân phát dữ liệu cũ về giá và kho hàng sẽ ảnh hưởng trực tiếp đến niềm tin của khách hàng và doanh thu. Chúng tôi đã tiếp cận vấn đề này một cách thận trọng bằng cách giám sát các chỉ số kinh doanh cùng với dữ liệu hiệu suất, tối đa hoá kết quả tìm kiếm trong bộ nhớ cache trong khi đảm bảo rằng chúng tôi không bao giờ lưu vào bộ nhớ đệm nội dung có thể gây hại cho trải nghiệm của người bán hoặc người mua.
Mức tác động và kết quả: LCP cải thiện từ 57% lên 96%
| Chỉ số (tháng 1 năm 2025 đến tháng 1 năm 2026) | Mức cải thiện tương đối |
|---|---|
| LCP (tốt) | +68% (57% đến 96%) |
| Core Web Vitals (tỷ lệ đạt) | +50% (48% đến 72%) |
| Tỷ lệ chuyển đổi (từ phiên sang đơn đặt hàng có tính phí) – kết quả tự nhiên trên Google dành cho thiết bị di động | Tăng 8,9% |
| Mức độ tương tác với giỏ hàng (từ phiên đến giỏ hàng) – kết quả tự nhiên trên Google dành cho thiết bị di động | Hơn 8,4% |
Những điểm cải tiến này đã giúp Nuvemshop và Tiendanube trở thành nền tảng thương mại điện tử có hiệu suất cao nhất ở Brazil, Argentina và Mexico.
Những điểm chính cần ghi nhớ và suy ngẫm sau sự kiện
Cấu trúc có khả năng tuỳ chỉnh cao của Nuvemshop có nghĩa là chúng tôi không thể dựa vào các chiến lược tối ưu hoá tiêu chuẩn. Vấn đề thực sự không phải là trọng lượng hình ảnh hay độ trễ của máy chủ: Đó là do trình duyệt chọn các phần tử không mong muốn làm LCP do hiệu ứng chuyển đổi CSS, thiếu tín hiệu ưu tiên và tính năng tải từng phần được áp dụng cho hình ảnh ở đầu khung nhìn.
Cách khắc phục khá đơn giản sau khi chúng tôi hiểu rõ nguyên nhân gốc rễ: Xoá hiệu ứng chuyển đổi khỏi các phần ở vị trí đầu tiên, xoá tính năng tải từng phần khỏi hình ảnh ở đầu khung hiển thị và thêm tín hiệu ưu tiên rõ ràng. Chúng tôi đã áp dụng điều này một cách nhất quán trên tất cả các chủ đề cốt lõi, loại trang và hơn 180.000 cửa hàng trên nền tảng của chúng tôi.
Kết quả đã chứng minh hiệu quả: Tỷ lệ vượt qua LCP tăng từ 57% lên 96%, tỷ lệ vượt qua Chỉ số quan trọng cốt lõi tổng thể trên web tăng từ 48% lên 72% và các nhà bán hàng ghi nhận được những lợi ích có thể đo lường: Tỷ lệ chuyển đổi tăng 8,9% và mức độ tương tác với giỏ hàng trên thiết bị di động tăng 8, 4%. Cửa hàng trực tuyến nhanh chóng không chỉ là một thành tựu về kỹ thuật mà còn trực tiếp thúc đẩy sự thành công của người bán.