Kesalahan Umum: Tidak Mengaktifkan ETag untuk Static Assets

Pada pengembangan aplikasi web, optimisasi performa sangat penting agar pengalaman pengguna tetap maksimal. Salah satu aspek yang sering terlewat adalah aktivasi ETag pada static assets seperti gambar, CSS, dan JavaScript. Banyak pengembang yang belum menyadari dampak dari tidak mengaktifkan ETag pada file statis.

Apa itu ETag?

ETag (Entity Tag) adalah mekanisme HTTP yang digunakan untuk mengidentifikasi versi tertentu dari sebuah file. ETag dihasilkan oleh server dan dikirim ke klien melalui header saat permintaan pertama dilakukan. Ketika klien membutuhkan file yang sama di masa mendatang, browser akan mengirimkan ETag ke server untuk memastikan apakah file tersebut sudah berubah atau belum.

• Fungsi Utama ETag: Membantu browser mengenali apakah file telah berubah sehingga hanya mengambil file baru jika memang diperlukan.
• Efek: Penghematan bandwidth & waktu loading situs lebih cepat, karena hanya file yang benar-benar berubah yang akan diunduh ulang.

Kesalahan Umum: Tidak Mengaktifkan ETag

Banyak website tidak mengaktifkan ETag secara default pada file statis. Akibatnya, setiap kali user mengakses situs, browser akan melakukan permintaan download ulang terhadap file-file statis meskipun file tersebut belum berubah.

• Menambah beban pada server.
• Mengurangi kecepatan website.
• Memboroskan bandwidth, baik dari sisi server maupun pengguna.
• Pengalaman pengguna menjadi tidak optimal.

Bagaimana ETag Bekerja?

Setiap file statis seperti gambar atau CSS akan diberi kode unik (ETag) oleh server. Saat browser meminta file:

• Server mengirim file beserta ETag (misal ETag: "abc123").
• Browser menyimpan ETag.
• Jika browser ingin mengakses file yang sama lagi, browser mengirimkan If-None-Match beserta ETag ke server.
• Server membandingkan ETag. Jika sama, server mengirimkan HTTP 304 Not Modified, artinya file di cache user masih valid.

GET /assets/logo.png HTTP/1.1
If-None-Match: "abc123"

HTTP/1.1 304 Not Modified
    

Pentingnya ETag Untuk Static Assets

• Meminimalisir request yang tidak perlu.
• Mengoptimalkan kecepatan loading halaman.
• User tidak perlu mengunduh file yang belum berubah.
• Server menjadi lebih efisien.

Solusi: Terapkan ETag pada Static Files

Solusi terbaik adalah dengan mengaktifkan ETag pada file-file statis agar cache browser dapat bekerja optimal. Berikut langkah-langkah yang dapat Anda lakukan sesuai dengan jenis server yang digunakan:

1. Apache

Aktifkan ETag dengan menambahkan konfigurasi berikut pada .htaccess:

FileETag MTime Size
    

Dengan konfigurasi ini, ETag akan dihasilkan berdasarkan waktu modifikasi dan ukuran file.

2. Nginx

Pada server Nginx, Anda dapat mengaktifkan ETag melalui konfigurasi:

etag on;
    

Pastikan baris tersebut berada dalam blok http atau server.

3. Express JS (Node.js)

Express JS secara default sudah mengaktifkan ETag. Namun, Anda bisa mengontrol perilaku dengan:

const express = require("express");
const app = express();

app.set("etag", "strong"); // Pilihan: "weak", "strong", atau false
    

Dengan ini, setiap response akan memiliki ETag.

Tips Implementasi

• Pastikan ETag diterapkan pada seluruh file statis yang sering diakses, terutama gambar, CSS, dan JS.
• Periksa header response dengan curl atau tool Network pada browser:

curl -I https://domain.com/assets/file.css
    

Perhatikan apakah header ETag muncul di response.

Manfaat Setelah ETag Aktif

• Situs menjadi lebih cepat karena static file tidak selalu diunduh ulang.
• Penghematan bandwidth baik dari sisi server maupun pengguna.
• Menambah kepercayaan pengguna karena pengalaman akses menjadi lancar.
• Mengurangi biaya operasional server hosting.

Kesimpulan

Tidak mengaktifkan ETag pada static assets merupakan kesalahan umum yang berdampak pada performa website. Dengan mengaktifkan ETag, Anda dapat memastikan bahwa browser hanya mendownload file saat terjadi perubahan, sehingga website tetap ringan dan cepat. Terapkan ETag segera pada file-file statis menggunakan metode yang sesuai dengan server Anda untuk optimisasi performa.