Memindahkan pembuatan thumbnail dari backend PHP ke Cloudflare Workers menghilangkan seluruh beban CPU pada server asal (origin server) untuk situs hosting video yang melayani jutaan gambar setiap hari. Peralihan ini juga memindahkan latensi pemrosesan gambar dari pusat data ke edge, memangkas waktu respons, dan membuat biaya bandwidth menjadi lebih terprediksi.

Mengapa model lama gagal

Situs tersebut, sebuah platform yang menampilkan puluhan ribu video, menyematkan hingga 40 thumbnail dalam satu halaman. Setiap thumbnail diubah ukurannya sesuai permintaan oleh skrip PHP yang membaca file asli dan mengubah skalanya. Saat crawler mengunjungi situs tersebut, server backend akan mengalami kemacetan (stall).

Pemrosesan edge menyelesaikan lima persyaratan inti

API thumbnail kelas produksi harus menangani:

  • Fan-in – menarik gambar sumber dari banyak host pihak ketiga.
  • Fan-out – menghasilkan beberapa ukuran (misalnya, kartu 320 px, gambar hero 640 px).
  • Negosiasi format – menyajikan WebP atau AVIF jika browser mendukungnya untuk menghemat bandwidth.
  • Cache – memastikan permintaan pertama mungkin memakan biaya, tetapi setiap permintaan berikutnya menjadi gratis.
  • Keamanan – mencegah siapa pun menyalahgunakan layanan untuk memproses gambar sembarangan.

Cloudflare Workers menangani setiap poin tersebut tanpa menyentuh CPU origin:

  1. Kedekatan (Proximity) – Workers berjalan di pusat data yang dekat dengan pengguna, sehingga gambar yang diproses menempuh jalur yang lebih pendek.
  2. Built-in Image Resizing – Fitur Image Resizing dari platform ini melakukan pekerjaan piksel, sehingga tidak memerlukan library khusus.
  3. Cache API – Workers menyimpan gambar yang telah diubah ukurannya di edge; setelah permintaan pertama, edge akan menyajikannya secara langsung.
  4. Keamanan yang dapat diprogram – Sebuah skrip kecil memvalidasi tanda tangan HMAC, menerapkan daftar izin (allow-list) untuk hostname dan lebar gambar, serta menormalisasi kunci cache untuk menghindari cache poisoning.

Cara kerja sistem

  1. Origin membuat URL bertanda tangan – Backend menyimpan kunci rahasia dan menambahkan tanda tangan HMAC ke setiap permintaan thumbnail. URL tersebut juga menyertakan lebar dan format yang diinginkan.
  2. Worker memverifikasi tanda tangan – Saat diterima, Worker menghitung ulang HMAC dengan rahasia bersama (shared secret). Jika tanda tangan hilang atau salah, permintaan akan ditolak, sehingga menghentikan penyalahgunaan.
  3. Penegakan daftar izin (Allow-list) – Skrip memeriksa apakah hostname sumber ada dalam daftar yang telah ditentukan dan apakah lebar yang diminta adalah salah satu ukuran yang didukung. Ini mencegah host berbahaya masuk ke dalam cache.
  4. Normalisasi kunci cache – Tanda tangan itu sendiri dihapus dari kunci cache; kunci tersebut hanya berisi URL sumber, lebar, dan format. Hal ini meningkatkan peluang bahwa pengguna berbeda yang meminta gambar yang sama akan mendapatkan entri cache yang sama.
  5. Edge fetch dan resize – Jika gambar belum ada di cache, Worker mengambil gambar asli dari host pihak ketiga, menjalankan Image Resizing API, dan menyimpan hasilnya di cache edge.
  6. Cache warming – Setelah setiap crawl, sebuah skrip Python ringan melakukan permintaan awal (pre-request) untuk thumbnail terbaru. Dengan demikian, pengguna asli pertama akan menerima respons dari cache alih-alih menunggu operasi resize.

Dampak terukur setelah satu bulan

  • CPU Origin untuk gambar – Turun menjadi nol; backend tidak pernah lagi memproses byte gambar.
  • Kecepatan penyajian HTML – Meningkat secara nyata karena server tidak lagi terhambat oleh pekerjaan pemrosesan gambar.
  • Tingkat cache hit edge – Mencapai 96%, yang berarti hampir setiap permintaan terpenuhi dari edge tanpa perlu pengambilan data ke backend.
  • Latensi – Menurun karena gambar sekarang disajikan dari pusat data yang dekat dengan pengguna, bukan dari origin pusat.
  • Prediktabilitas bandwidth – Dengan caching di edge, lalu lintas keluar dari origin menjadi stabil dan mudah diprediksi.

Kesimpulan

Memindahkan pembuatan thumbnail ke Cloudflare Workers mengubah hambatan (bottleneck) yang berbasis CPU menjadi cache edge dengan biaya hampir nol. Origin sekarang hanya menerbitkan URL bertanda tangan, sementara edge menangani pengambilan, pengubahan ukuran, negosiasi format, dan penyajian hasil cache. Untuk situs apa pun yang sangat bergantung pada gambar—terutama platform video yang menampilkan puluhan thumbnail per halaman—pendekatan edge-first ini memberikan halaman yang lebih cepat, biaya yang terprediksi, dan pemisahan yang lebih bersih antara “apa yang akan ditampilkan” (origin) dan “bagaimana cara menyajikannya” (edge).