Việc chuyển việc tạo ảnh thu nhỏ (thumbnail) từ backend PHP sang Cloudflare Workers đã loại bỏ hoàn toàn tải CPU trên máy chủ gốc (origin server) cho một trang web lưu trữ video phục vụ hàng triệu hình ảnh mỗi ngày. Sự thay đổi này cũng đẩy độ trễ xử lý hình ảnh từ trung tâm dữ liệu ra vùng biên (edge), giúp cắt giảm thời gian phản hồi và làm cho chi phí băng thông trở nên dễ dự đoán hơn.

Tại sao mô hình cũ bị lỗi

Trang web này, một nền tảng hiển thị hàng chục nghìn video, nhúng tới 40 ảnh thu nhỏ trên một trang duy nhất. Mỗi ảnh thu nhỏ được thay đổi kích thước theo yêu cầu bởi một script PHP đọc tệp gốc và thay đổi tỷ lệ. Khi các trình thu thập dữ liệu (crawlers) truy cập trang web, máy chủ backend sẽ bị đình trệ.

Xử lý tại vùng biên (Edge) giải quyết năm yêu cầu cốt lõi

Một API tạo ảnh thu nhỏ cấp độ sản xuất (production-grade) phải xử lý được:

  • Fan-in – lấy hình ảnh nguồn từ nhiều máy chủ bên thứ ba.
  • Fan-out – tạo ra nhiều kích thước khác nhau (ví dụ: thẻ 320px, ảnh hero 640px).
  • Format negotiation – cung cấp định dạng WebP hoặc AVIF khi trình duyệt hỗ trợ để giảm băng thông.
  • Cache – đảm bảo yêu cầu đầu tiên có thể tốn kém nhưng mọi yêu cầu tiếp theo đều miễn phí.
  • Security – ngăn chặn bất kỳ ai lạm dụng dịch vụ để xử lý các hình ảnh tùy ý.

Cloudflare Workers giải quyết từng điểm này mà không chạm vào CPU của máy chủ gốc:

  1. Proximity – Workers chạy tại các trung tâm dữ liệu gần người dùng, vì vậy hình ảnh đã xử lý sẽ đi qua quãng đường ngắn hơn.
  2. Built-in Image Resizing – Tính năng Image Resizing của nền tảng sẽ thực hiện các tác vụ xử lý pixel, loại bỏ nhu cầu sử dụng thư viện tùy chỉnh.
  3. Cache API – Workers lưu trữ hình ảnh đã thay đổi kích thước tại vùng biên; sau yêu cầu đầu tiên, vùng biên sẽ phục vụ trực tiếp hình ảnh đó.
  4. Programmable security – Một script nhỏ sẽ xác thực các chữ ký HMAC, thực thi danh sách cho phép (allow-list) các hostname và chiều rộng, đồng thời chuẩn hóa các khóa cache (cache keys) để tránh nhiễm độc cache (cache poisoning).

Cách thức hệ thống hoạt động

  1. Origin tạo các URL có chữ ký – Backend giữ một khóa bí mật và đính kèm chữ ký HMAC vào mỗi yêu cầu ảnh thu nhỏ. URL cũng bao gồm chiều rộng và định dạng mong muốn.
  2. Worker xác thực chữ ký – Khi nhận được yêu cầu, Worker sẽ tính toán lại HMAC bằng khóa bí mật dùng chung. Nếu chữ ký bị thiếu hoặc sai, yêu cầu sẽ bị từ chối, giúp ngăn chặn việc lạm dụng.
  3. Thực thi danh sách cho phép (Allow-list) – Script kiểm tra xem hostname nguồn có nằm trong danh sách đã định nghĩa trước hay không và chiều rộng được yêu cầu có nằm trong các kích thước được hỗ trợ hay không. Điều này ngăn chặn việc lưu cache các máy chủ độc hại.
  4. Chuẩn hóa khóa cache (Cache key normalization) – Bản thân chữ ký sẽ được loại bỏ khỏi khóa cache; khóa này chỉ chứa URL nguồn, chiều rộng và định dạng. Điều này làm tăng khả năng các người dùng khác nhau khi yêu cầu cùng một hình ảnh sẽ truy cập vào cùng một mục đã được lưu trong cache.
  5. Edge fetch và resize – Nếu hình ảnh chưa được lưu trong cache, Worker sẽ lấy ảnh gốc từ máy chủ bên thứ ba, chạy Image Resizing API và lưu kết quả vào edge cache.
  6. Cache warming – Sau mỗi lần crawl, một script Python nhẹ sẽ thực hiện yêu cầu trước (pre-request) cho các ảnh thu nhỏ mới nhất. Nhờ đó, người dùng thực tế đầu tiên sẽ nhận được phản hồi từ cache thay vì phải chờ đợi thao tác thay đổi kích thước.

Tác động có thể đo lường được sau một tháng

  • CPU của máy chủ gốc cho hình ảnh – Giảm xuống mức 0; backend không bao giờ phải xử lý các byte hình ảnh nữa.
  • Tốc độ phục vụ HTML – Cải thiện đáng kể vì máy chủ không còn bị chặn bởi các tác vụ xử lý hình ảnh.
  • Tỷ lệ cache hit tại Edge – Đạt 96%, nghĩa là hầu như mọi yêu cầu đều được đáp ứng từ vùng biên mà không cần lấy dữ liệu từ backend.
  • Độ trễ – Giảm xuống vì hình ảnh hiện được phục vụ từ một trung tâm dữ liệu gần người dùng thay vì từ một máy chủ gốc trung tâm.
  • Khả năng dự đoán băng thông – Với việc lưu cache tại vùng biên, lưu lượng truy cập đi từ máy chủ gốc trở nên ổn định và dễ dự báo.

Kết luận

Việc chuyển việc tạo ảnh thu nhỏ sang Cloudflare Workers đã biến một nút thắt cổ chai do giới hạn CPU thành một bộ nhớ đệm vùng biên (edge cache) với chi phí gần như bằng không. Máy chủ gốc giờ đây chỉ việc cấp các URL có chữ ký, trong khi vùng biên sẽ xử lý việc lấy ảnh, thay đổi kích thước, thương lượng định dạng và phục vụ các kết quả đã được lưu cache. Đối với bất kỳ trang web nào phụ thuộc nhiều vào hình ảnh—đặc biệt là các nền tảng video hiển thị hàng chục ảnh thu nhỏ trên mỗi trang—cách tiếp cận ưu tiên vùng biên (edge-first) mang lại các trang web nhanh hơn, chi phí dễ dự đoán và sự phân tách rõ ràng hơn giữa "cần hiển thị gì" (origin) và "cách thức phân phối nó" (edge).