Apa Itu CDN dan Kenapa Fotomu Lambat Tanpa Itu

Berat di HP dan lancar di laptop adalah petunjuk pertamanya

Perhatikan urutan yang muncul di layar waktu halaman dibuka di HP dengan sinyal seadanya. Kalau tulisannya keluar hampir seketika lalu foto-fotonya menyusul pelan satu per satu, sebagian masih abu-abu waktu Anda sudah selesai membaca, yang berat itu gambarnya.

Kalau seluruh halaman diam sebentar lalu muncul sekaligus, ceritanya lain dan penyebabnya ada di tempat lain, misalnya di server atau di skrip yang harus dijalankan browser sebelum apa pun bisa digambar.

Laptop kantor menyembunyikan gejala ini karena dua hal berjalan bersamaan di situ. Koneksinya jauh lebih lapang, dan file yang sama sudah tersimpan di browser Anda sejak kunjungan sebelumnya. Yang Anda lihat tiap pagi itu kunjungan ketujuh belas, sementara calon pembeli Anda selalu datang sebagai kunjungan pertama.

Penyebab paling sering bukan jarak servernya, tapi berat fotonya

Foto yang keluar dari kamera HP sekarang lebarnya beberapa ribu piksel dan ukurannya beberapa megabita per lembar. Ukuran itu masuk akal untuk dicetak. Untuk ditampilkan di kolom foto selebar layar HP, yang dibutuhkan cuma sebagian kecil dari itu.

Masalahnya baru terasa waktu jumlahnya banyak. Satu halaman katalog berisi belasan foto yang diunggah apa adanya bisa meminta puluhan megabita sebelum halamannya utuh. Di WiFi kantor itu lewat begitu saja. Di data seluler yang sedang berbagi sinyal dengan seisi jalan raya, itu detik-detik yang dihabiskan pengunjung menatap kotak kosong.

CDN tidak mengurangi satu megabita pun dari angka itu. Yang dia ubah cuma dari mana file tadi dikirim, dan foto berat yang dikirim dari lokasi terdekat tetap foto berat.

CDN adalah salinan file Anda yang dititipkan di banyak lokasi

Tanpa CDN, semua file website Anda duduk di satu komputer di satu lokasi fisik, yaitu hosting yang Anda sewa. Siapa pun yang membuka alamat Anda, dari kota mana pun, mengambil file dari komputer itu. Kalau bedanya domain dan hosting masih kabur, bagian itu kami urai terpisah di artikel soal domain, hosting, dan SSL.

CDN, kependekan dari content delivery network, menaruh salinan file yang jarang berubah di banyak server yang tersebar secara geografis. Yang dititipkan biasanya gambar, font, dan file CSS serta JavaScript. Waktu ada yang membuka website Anda, salinan itu dikirim dari titik yang paling dekat dengannya.

Analogi gudangnya begini. Selama ini tiap pesanan dikirim dari satu gudang pusat, jadi pembeli di kota jauh menunggu lebih lama daripada pembeli di sebelah gudang. CDN menitipkan stok yang sama di gudang-gudang cabang. Barangnya tetap sebesar itu, cuma perjalanannya yang lebih pendek.

Dari situ terlihat kapan dia menolong. Selisih jarak baru terasa kalau pengunjung Anda memang jauh dari servernya. Kalau semua pembeli Anda ada di satu kota dan fotonya berat, yang Anda pendekkan justru bagian perjalanan yang paling sedikit menyumbang lamanya.

Kecilkan dan ubah format fotonya dulu, CDN urusan sesudahnya

Ada tiga pekerjaan yang hasilnya jauh lebih besar daripada memindahkan file ke CDN, dan ketiganya dikerjakan sekali di awal.

• Potong ukurannya ke lebar yang benar-benar dipakai. Foto yang tampil selebar layar HP tidak butuh lebar beberapa ribu piksel. Kelebihan piksel itu tetap dikirim lewat jaringan, lalu dibuang browser saat menggambarnya.
• Ganti formatnya. JPG dan PNG yang keluar dari kamera atau dari desainer masih format lama. WebP dan AVIF menghasilkan file jauh lebih kecil pada tampilan yang sulit dibedakan mata. Situs yang kami bangun memakai Next.js dengan dua format itu dinyalakan, jadi browser yang mendukungnya menerima versi yang lebih ringan tanpa Anda mengerjakan apa-apa.
• Tahan foto yang belum kelihatan. Gambar di bagian bawah halaman bisa ditunda sampai pengunjung menggulir ke sana, supaya yang bersaing di detik-detik pertama cuma yang terlihat di layar.

Sesudah tiga hal itu beres, CDN baru menambah sesuatu yang terasa. Urutannya tidak bisa dibalik. Memasang CDN di atas foto yang belum dikecilkan akan membuat Anda menyimpulkan CDN tidak ada gunanya, padahal yang keliru cuma urutan pengerjaannya.

Kunjungan kedua terasa cepat karena cache, dan itu pekerjaan yang berbeda

Browser menyimpan file yang sudah pernah diunduh supaya tidak mengambilnya lagi di kunjungan berikutnya. Berapa lama simpanan itu dianggap masih segar ditentukan instruksi yang dikirim server bersama filenya.

Di situs ini, aset gambar dikirim dengan instruksi cache tiga puluh hari. Pengunjung yang kembali dalam sebulan tidak mengunduh ulang foto yang sama, dan halamannya muncul hampir seketika. Angka itu sengaja tidak dibuat setahun, supaya gambar yang Anda ganti dengan nama file sama tidak tersangkut lama di HP pengunjung lama.

Ini juga alasan kenapa penilaian Anda sendiri terhadap kecepatan website Anda hampir selalu terlalu bagus. Anda sudah memegang semua filenya. Untuk menilai dengan adil, buka website Anda di jendela penyamaran atau di HP yang belum pernah membukanya, dan pakai data seluler.

Dua pemeriksaan gratis yang menunjukkan di mana letak masalahnya

Yang pertama pakai mata. Buka website Anda di HP dengan data seluler, lewat jendela penyamaran. Lihat apa yang muncul duluan dan apa yang tertinggal. Teks dulu lalu foto menyusul lama berarti gambarnya berat. Semuanya diam bersama-sama lalu muncul serentak berarti penyebabnya di luar gambar.

Yang kedua pakai alat. Buka PageSpeed Insights dari Google, masukkan alamat website Anda, pilih tab mobile. Yang perlu Anda baca bagian saran di bawah, bukan angka besarnya. Saran bernada "properly size images", "serve images in next-gen formats", atau "efficiently encode images" adalah pengakuan alat itu bahwa fotonya memang kebesaran.

Kalau Anda ingin bukti yang paling telanjang, klik kanan salah satu foto di website Anda, simpan ke komputer, lalu lihat ukuran filenya. Foto yang tampil di halaman dan ukurannya masih megabitaan sudah menjawab pertanyaan Anda tanpa alat apa pun.

Website yang isinya sedikit foto sering belum butuh CDN sama sekali

Website usaha kecil berisi profil, daftar layanan, harga, dan tombol WhatsApp beratnya didominasi teks. Halaman seperti itu, kalau dibangun sebagai halaman statis yang sudah jadi sebelum pengunjung datang, sudah ringan tanpa tambahan apa pun.

Tandanya berubah waktu isi visualnya bertambah. Katalog produk dengan puluhan foto, galeri hasil kerja yang terus tumbuh, halaman portofolio fotografer atau desainer interior, atau website yang pengunjungnya datang dari banyak kota dan luar negeri. Di situ gambar sudah jadi bagian terbesar dari berat halaman Anda, dan memperpendek jarak kirimnya memberi selisih yang bisa dirasakan.

Ada satu keuntungan lain yang jarang disebut. Foto yang dilayani dari CDN berhenti membebani hosting Anda tiap kali ada yang membuka halaman, jadi lonjakan pengunjung setelah satu postingan ramai tidak langsung menyeret seluruh website ikut melambat.

Di paket kami CDN mulai dari Business, dan Starter memang belum memakainya

Starter Rp 1.500.000 berisi website statis Next.js. Halamannya sudah jadi sebelum pengunjung datang, gambarnya disajikan dalam format WebP dan AVIF, dan file-nya ikut di hosting yang sudah termasuk setahun. Untuk website berisi profil, layanan, harga, dan kontak, itu sudah cukup ringan.

Business Rp 5.000.000 memindahkan foto dan visual Anda ke Cloudflare Storage dengan CDN. Paket ini juga yang punya blog dan galeri foto atau produk, dan dua hal itulah yang bikin CDN-nya masuk akal, karena isi visualnya terus bertambah. Selama satu bulan masa support, penambahan dan penggantian gambar bisa Anda minta lewat kami tanpa perlu panel admin.

Sebelum memutuskan naik paket, kerjakan dulu pemeriksaan dua langkah tadi. Kalau yang keluar dari PageSpeed Insights adalah saran soal ukuran dan format gambar, mengecilkan foto Anda sendiri sudah memperbaiki sebagian besarnya tanpa biaya. Kalau fotonya sudah ringan dan halaman galerinya tetap berat karena jumlahnya banyak, di situ CDN jadi pengeluaran yang terbayar. Isi kedua paket berdampingan bisa Anda baca di halaman harga.