Tối ưu hiệu năng Optimizely bằng Cloudflare Image Resizing

Các hình ảnh lớn, chưa tối ưu là kẻ thù chính của Core Web Vitals. Bằng cách chuyển giao việc xử lý hình ảnh cho Cloudflare, chúng ta có thể phục vụ các định dạng thế hệ mới (WebP/AVIF) với kích thước hoàn hảo mà không làm quá tải máy chủ Optimizely CMS của mình.

Triển khai từng bước

1. Tạo Url Builder Extension

Đầu tiên, hãy tạo một phương thức extension mạnh mẽ để xử lý việc ghi lại URL. Điều này đảm bảo chúng ta chỉ áp dụng các chuyển đổi cho các tài sản phù hợp.

File: CmsIv.Web/Business/Extensions/UrlExtensions.cs

using EPiServer;
using EPiServer.Core;
using EPiServer.ServiceLocation;
using System.Web;

namespace CmsIv.Web.Business.Extensions
{
    public static class UrlExtensions
    {
        public static string GetCloudflareUrl(this ContentReference imageRef, int width, int quality = 80)
        {
            if (ContentReference.IsNullOrEmpty(imageRef)) return string.Empty;

            var urlResolver = ServiceLocator.Current.GetInstance<EPiServer.Web.Routing.IUrlResolver>();
            var originalUrl = urlResolver.GetUrl(imageRef);

            // Ensure we are working with a valid relative path
            if (string.IsNullOrEmpty(originalUrl)) return string.Empty;

            // Cloudflare Image Resizing syntax: /cdn-cgi/image/format=auto,width={width},quality={quality}/{path}
            return $"/cdn-cgi/image/format=auto,width={width},quality={quality}{originalUrl}";
        }
    }
}

2. Triển khai trong Razor Views

Cập nhật các view của bạn để yêu cầu chính xác kích thước cần thiết cho vùng chứa.

File: CmsIv.Web/Views/Shared/Blocks/HeroBlock.cshtml

@using CmsIv.Web.Business.Extensions
@model CmsIv.Web.Models.Blocks.HeroBlock

<img src="@Model.HeroImage.GetCloudflareUrl(1200)"
     alt="@Model.Heading"
     width="1200"
     height="600"
     loading="eager"
     fetchpriority="high" />

Các lỗi thường gặp và giải pháp

Lỗi	Nguyên nhân	Giải pháp
"Image Resizing is Disabled"	Tính năng chưa được bật trong Cloudflare Dashboard.	Truy cập Speed > Optimization > Image Resizing và bật nó lên.
Ảnh bị hỏng trên Localhost	Cloudflare không thể tìm nạp ảnh từ `localhost`.	Bọc logic trong kiểm tra `!IsDevelopment()` hoặc sử dụng một tunnel như Ngrok.
Lỗi Cumulative Layout Shift (CLS)	Tải ảnh mà không có kích thước rõ ràng.	Luôn luôn xác định nghiêm ngặt các thuộc tính `width` và `height` trong HTML.

Thực hành tốt nhất

Nên: Sử dụng format=auto để Cloudflare phục vụ AVIF cho người dùng Chrome và WebP cho các trình duyệt khác.
Nên: Tạo các breakpoint cụ thể (ví dụ: Mobile: 400px, Tablet: 800px, Desktop: 1200px) thay vì khớp 1:1 với user-agent.
Không nên: Áp dụng thay đổi kích thước cho các file SVG hoặc GIF, vì điều này có thể làm hỏng hoạt ảnh hoặc chất lượng vector.

Xác minh

Để xác minh việc triển khai:

Mở tab Network trong Chrome DevTools.
Kiểm tra các header yêu cầu hình ảnh.
Tìm kiếm cf-bg-managed: img hoặc content-type: image/avif.
Xác nhận kích thước tệp nhỏ hơn đáng kể so với tài sản gốc trong CMS.