Cara Menambahkan Expires Headers di Website, Apa Manfaatnya?

Menambahkan Expires Headers bisa menjadi jawaban kalau kamu pernah mengalami website lambat saat dibuka. Apa sih Expires Headers itu? 

Singkatnya, ini adalah instruksi yang memberi tahu browser berapa lama ia harus menyimpan konten tertentu sebelum memeriksa versi terbaru dari server. 

Nah, di dalam artikel ini, kita akan membahas cara menggunakan Expires Headers serta manfaatnya bagi kinerja website.

Cara Kerja Expires Headers

Sebelum kamu belajar cara menambahkan Expires Headers pada website, sebaiknya kamu perlu memahami bagaimana cara kerja elemen ini. 

Expires Headers ini bekerja dengan cara memberi tahu browser web berapa lama sebuah file harus disimpan di cache. Ini seperti, “Hei, simpan file ini di sini selama X hari, jadi saat pengunjung kembali, mereka tidak perlu download lagi.”

Jadi, saat pengunjung pertama kali mengunjungi website kamu maka browser akan mengunduh file tersebut. Namun pada kunjungan berikutnya, jika file sudah ada di cache, waktu loading halaman jadi lebih cepat. 

Kamu bisa mengatur Expires Header ini berdasarkan jenis file tertentu. Beberapa file umum yang diatur dengan Expires Headers, seperti gambar, file CSS, file JavaScript, file font, video dan audio, serta file icon dan favicon.

Selain itu, kamu bisa menentukan periode kadaluarsa (berapa lama) yang dibutuhkan untuk memaksimalkan efektivitas Expires Headers, misalnya:

• Cache Jangka Pendek (beberapa jam hingga beberapa hari), cocok untuk file yang berubah secara berkala seperti logo. 
• Cache Jangka Panjang (minggu, bulan, atau bahkan setahun), cocok untuk sumber daya statis seperti gambar, font, dan skrip pihak ketiga yang jarang berubah.

Cara Menambahkan Expires Headers

Terdapat tiga cara untuk menambahkan Expires Headers di website kamu, yaitu:

• Konfigurasi Manual: Edit file .htaccess (Apache)
• Konfigurasi Manual: Nginx
• Plugin WordPress: Jika kamu menggunakan website WordPress, dan biasanya lebih mudah prosesnya. 

Yuk, kita bahas satu per satu cara menambahkan Expires Headers dengan ketiga metode tersebut secara terperinci:

#1 Metode Edit File .htaccess

Mengedit kode di file .htaccess menjadi cara yang efektif untuk menambahkan elemen Expires Headers. Cara ini berarti kamu mengatur cache di server web Apache. Berikut ini langkah-langkahnya:

Langkah 1: Akses File .htaccess:

Pertama, kamu perlu akses ke file .htaccess yang ada di direktori root website kamu. Bisa pakai aplikasi FTP seperti FileZilla atau masuk lewat panel kontrol hosting kamu, misalnya cPanel.

Langkah 2: Buat Cadangan:

Sebelum kamu mengedit, jangan lupa buat salinan cadangan dari file .htaccess kamu. Ini penting biar aman kalau ada yang nggak beres saat mengedit.

Langkah 3: Buka File .htaccess:

Buka file .htaccess dengan editor teks. Kalau kamu pakai cPanel, biasanya ada editor yang gampang dipakai.

Langkah 4: Tambahkan Kode Expires Headers:

Di dalam file .htaccess, tambahkan kode berikut buat atur Expires Headers:

<IfModule mod_expires.c>
    ExpiresActive On

    # Gambar (images)
    ExpiresDefault "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    
    # CSS
    ExpiresByType text/css "access plus 1 month"
    
    # JavaScript
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"

    # Font
    ExpiresByType font/woff "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"

    # Dokumen
    ExpiresByType application/pdf "access plus 1 month"
    
    # Video
    ExpiresByType video/mp4 "access plus 1 month"
</IfModule>

Berikut ini penjelasan kode di atas yang perlu kamu ketahui:

• ExpiresActive On: Nyalakan Expires Headers.
• ExpiresDefault: Atur waktu kadaluarsa default buat file yang tidak disebutkan.
• ExpiresByType: Atur waktu kedaluwarsa spesifik untuk jenis file tertentu.

Langkah 5: Simpan Perubahan:

Setelah menambahkan kode, jangan lupa simpan perubahan yang kamu buat di file .htaccess.

#2 Metode Nginx

Langkah 1: Akses File Konfigurasi Nginx:

Pertama, kamu perlu mengakses file konfigurasi Nginx sebagai sudo. File ini biasanya berada di /etc/nginx/nginx.conf atau di dalam folder /etc/nginx/sites-available/. Pastikan kamu punya akses ke server melalui SSH atau terminal.

Langkah 2: Buka File Konfigurasi:

Gunakan editor teks seperti nano atau vi untuk membuka file konfigurasi. Misalnya, jika kamu menggunakan nano, perintahnya bisa seperti ini:
sudo nano /etc/nginx/nginx.conf

Langkah 3: Tambahkan Kode Expires Headers:

Di dalam blok server atau location yang sesuai, kamu bisa menambahkan kode berikut untuk mengatur Expires Headers:

location ~* \.(jpg|jpeg|gif|png|css|js|woff|woff2|pdf|mp4)$ {
    expires 1y;  # Atur kedaluwarsa untuk 1 tahun
    add_header Cache-Control "public, max-age=31536000";  # 1 tahun dalam detik
}

Penjelasan kode di atas:

• location ~* \.(jpg|jpeg|gif|png|css|js|woff|woff2|pdf|mp4)$: Blok ini menangani file dengan ekstensi yang disebutkan.
• expires 1y;: Mengatur waktu kedaluwarsa untuk 1 tahun.
• add_header Cache-Control "public, max-age=31536000";: Menambahkan header Cache-Control untuk mengatur kebijakan caching.

Langkah 4: Simpan Perubahan:

• Setelah menambahkan kode, simpan perubahan di editor. Jika kamu menggunakan nano, tekan CTRL + X, kemudian Y, dan terakhir Enter untuk menyimpan.

Langkah 5: Uji Konfigurasi Nginx:

Sebelum menerapkan perubahan, penting untuk memeriksa apakah konfigurasi Nginx tidak memiliki kesalahan. Gunakan perintah berikut:
sudo nginx -t

Langkah 6: Restart Nginx:

Jika tidak ada kesalahan, restart Nginx untuk menerapkan perubahan:
sudo systemctl restart nginx

#3 Metode Plugin WordPress

Kalau kamu menggunakan WordPress, itu lebih mudah dalam menambahkan elemen Expires Headers pada website. Kamu tidak perlu mempelajari kode atau konfigurasi server. 

Beberapa plugin yang bisa kamu gunakan untuk menambahkan Expires Headers adalah: WP Rocket, W3 Total Cache, LiteSpeed Cache, dan Hummingbird. 

Misalnya, kamu menggunakan WP Rocket, ikuti langkah-langkah berikut tentang cara menambahkan Expires Headers:

Langkah 1: Instalasi dan Aktivasi

• Beli dan download WP Rocket (jika kamu belum melakukannya).
• Dari dashboard WordPress, buka “Plugin” -> “Add New”.
• Unggah file zip plugin WP Rocket dan aktifkan.

Langkah 2: Konfigurasikan Expires Header

• Navigasi ke halaman pengaturan WP Rocket.
• Buka tab “File Optimization”.
• Di bagian “File CSS & JS”, ​​aktifkan opsi untuk mengatur Header Kedaluwarsa untuk file CSS dan JavaScript.
• Sesuaikan periode kadaluarsa sesuai kebutuhan. WP Rocket menawarkan pengaturan default yang masuk akal.

Langkah 3: Optimasi Tambahan

WP Rocket menyediakan rangkaian pengaturan optimasi Expires Headers untuk menyempurnakan kinerja website kamu, di antaranya:

• Optimasi gambar
• Minify CSS dan JavaScript
• Optimasi database
• Lazy loading
• Integrasi CDN

Setelah kamu menambahkan Expires Headers, dengan salah dari dari ketiga metode tersebut, dan memastikannya sudah berfungsi dengan baik, kamu bisa memakai alat pengujian kayak Google PageSpeed Insights atau GTmetrix. Masukkan URL situs kamu dan lihat hasilnya buat cek apakah Expires Headers sudah diterapkan.

Manfaat Menggunakan Expires Headers

Dengan menerapkan Expires Headers dengan benar, kamu bisa merasakan manfaat berikut ini:

• Tingkatkan Kecepatan Halaman: Menambahkan Expires Headers membuat waktu loading halaman lebih cepat, terutama bagi pengunjung yang kembali, karena browser sudah menyimpan file di cache.
• Tangani Lonjakan Lalu Lintas: Saat ada lonjakan pengunjung, Expires Headers membantu mengurangi beban server dengan membiarkan browser menggunakan file yang sudah disimpan, sehingga server tidak terbebani.
• Tingkatkan Pengalaman Pengguna (UX): Website yang lebih cepat meningkatkan kepuasan pengunjung dan mengurangi rasio pentalan, membuat mereka lebih betah berlama-lama di website kamu.
• Manfaat Potensial SEO: Kecepatan loading yang meningkat dapat berdampak positif pada peringkat pencarian di mesin pencari, membantu lebih banyak orang menemukan website kamu.

Kesimpulan

Itulah tiga metode cara menambahkan Expires Headers untuk mengoptimalkan kinerja website, terutama dari segi kecepatan loading website. Kamu bisa menggunakan dua cara manual, yakni mengedit file .htaccess dan nginx dan menggunakan plugin jika kamu memakai WordPress. 

Jelas bahwa Expires Headers bukan hanya tentang teknis semata, tetapi juga berpengaruh besar pada pengalaman pengguna dan performa situs. Jadi, pastikan kamu sudah menerapkannya dengan baik, ya.

Hosting Unlimited dari IDwebhost menjadi pilihan tepat untuk mendukung penggunaan Expires Headers. Dengan layanan hosting yang cepat dan andal, IDwebhost memastikan pengaturan kamu berjalan lancar, sehingga website bisa melesat lebih cepat.