Pernahkah Anda mendapat rekomendasi \u201cAdd Expires Headers\u201d saat menggunakan GTMetrix? Rekomendasi dari\u00a0tools cek kecepatan\u00a0website ini terkait dengan kendala loading lambat. Jika dibiarkan, kenyamanan pengunjung website akan terganggu dan ranking di hasil pencarian bisa turun.<\/p>\n
Jangan sampai hal ini terjadi, ya! Nah itulah kenapa penting untuk mengelola add expires headers dengan baik. Tujuannya,\u00a0mempercepat loading website\u00a0dan blog dengan memanfaatkan cache.<\/p>\n
Lalu, bagaimana cara menambahkan expires header? Kami akan menjelaskan selengkapnya. Namun, sebelumnya mari pelajari dulu apa itu Expires Header.<\/p>\n
Expires header adalah baris kode yang memberitahu browser berapa lama seharusnya file cache sebuah situs disimpan.<\/p>\n
Penjelasan sederhananya seperti ini:<\/p>\n
Ketika user pertama kali mengunjungi sebuah halaman website, browser biasanya akan otomatis memuat file dari server. File tersebut bisa berupa\u00a0HTML, Images, PDF, CSS, Javascripts, dan lainnya. File yang diterima kemudian disimpan di cache. File yang dimuat tadi kemudian disimpan di cache.<\/p>\n
Jadi, jika user ingin membuka halaman yang sama, cukup mengambil dari cache, tanpa meminta ke server lagi.<\/p>\n
Namun, berapa lama seharusnya file tadi tersimpan di browser cache?<\/p>\n
Nah, karena cache memiliki masa kedaluarsa (expired), penting untuk menentukan expires header yang sesuai. Kenapa demikian?<\/p>\n
Jika expires header-nya terlalu cepat, maka akan selalu ada permintaan langsung ke server. Selain proses loading lama, bisa-bisa Anda mendapatkan peringatan seperti, \u201cYour server is not using expires header for your image,<\/em><\/strong>\u201d (\u201cServer Anda tidak memiliki expires header untuk image-nya).<\/p>\n Di sisi lain, jika expires header terlalu lama, perubahan konten yang dilakukan tidak dapat segera ditampilkan. Sebab, browser masih menampilkan data lama yang tersimpan di cache..<\/p>\n Jadi, dengan menentukan add expires header, Anda bisa mengatur kapan waktu bagi browser harus mengambil file ke server. Serta, kapan ia cukup mengambil file dari cache saja.<\/p>\n Ada dua cara menambahkan add expires header: menggunakan\u00a0plugin WordPress\u00a0dan manual coding. Untuk manual coding, tentu Anda butuh keahlian pemrograman yang baik. Jika ingin lebih mudah, Anda bisa memanfaatkan beberapa plugin expires headers.<\/p>\n Sesuai dengan server yang Anda gunakan, inilah cara add expires header secara manual. Kami akan menjelaskan masing-masing cara melakukannya di server Apache dan Nginx. Oke, langsung saja simak penjelasannya di bawah ini ya!<\/p>\n Untuk menambahkan add expires header, Anda perlu mengakses file .htaccess. Cara termudah adalah melalui cPanel dengan langkah sebagai berikut:<\/p>\n Anda bisa login ke akun cPanel dengan username dan password yang sesuai.<\/p>\n Setelah login, pilih menu\u00a0File Manager<\/strong>.<\/p>\n Di dalam\u00a0File Manager<\/strong>, piih folder\u00a0public_html.\u00a0<\/strong><\/p>\n Setelah masuk ke\u00a0public_html<\/strong>, Anda akan menemukan file\u00a0.htaccess<\/strong>. Lakukan klik kanan di file ini, lalu pilih\u00a0Edit.<\/strong><\/p>\n Langkah berikutnya, lakukan copy paste baris kode ini ke file .htaccess tersebut, seperti di bawah ini:<\/p>\n Seperti terlihat di contoh tersebut, Anda sudah mengatur status expiration dalam keadaan aktif. Selain itu, Anda juga sudah mengatur expiration untuk masing-masing jenis file. Sesuaikan dengan kebutuhan Anda.<\/p>\n Misalnya, file image dan video di atas menggunakan expiration 1 tahun. Pertimbangannya, jenis file tersebut tidak banyak mendapat update. Berbeda dengan\u00a0CSS\u00a0dan\u00a0Javascript\u00a0yang menggunakan expiration lebih cepat, yaitu 1 bulan.<\/p>\n Jika sudah selesai mengedit dan mengaktifkan file expirations, jangan lupa untuk menyimpan perubahan kode file di .htaccess tadi. Jika ternyata file .htaccess nya hidden, Anda bisa menggunakan FTP untuk memunculkan opsi\u00a0Show Hidden Files.\u00a0<\/strong><\/p>\n Cara menambahkan expires header di Nginx lebih mudah, Anda bisa copy paste baris kode di bawah ini ke server block Anda.<\/p>\n Menambahkan baris kode ke file .htaccess membutuhkan keahlian coding. Tapi, jangan khawatir. ada cara termudah mengelola add expires header, yaitu menggunakan plugin. Berikut ini cara menggunakannya:<\/p>\n2 Cara Menambahkan Add Expires Header<\/span><\/h2>\n
Cara Add Expires Headers WordPress Secara Manual\u00a0<\/span><\/h3>\n
1. Menggunakan Apache Web Server<\/span><\/h4>\n
<IfModule mod_expires.c>\r\n\r\n ExpiresActive On\r\n # Images\r\n\r\n ExpiresByType image\/jpeg \"access plus 1 year\"\r\n\r\n ExpiresByType image\/gif \"access plus 1 year\"\r\n\r\n ExpiresByType image\/png \"access plus 1 year\"\r\n\r\n ExpiresByType image\/webp \"access plus 1 year\"\r\n\r\n ExpiresByType image\/svg+xml \"access plus 1 year\"\r\n\r\n ExpiresByType image\/x-icon \"access plus 1 year\"\r\n\r\n # Video\r\n\r\n ExpiresByType video\/mp4 \"access plus 1 year\"\r\n\r\n ExpiresByType video\/mpeg \"access plus 1 year\"\r\n\r\n # CSS, JavaScript\r\n\r\n ExpiresByType text\/css \"access plus 1 month\"\r\n\r\n ExpiresByType text\/javascript \"access plus 1 month\"\r\n\r\n ExpiresByType application\/javascript \"access plus 1 month\"\r\n\r\n # Others\r\n\r\n ExpiresByType application\/pdf \"access plus 1 month\"\r\n\r\n ExpiresByType application\/x-shockwave-flash \"access plus 1 month\"\r\n\r\n<\/IfModule>\r\n<\/code><\/pre>\n2. Menggunakan Nginx Server<\/span><\/h4>\n
location ~* \\.(js|css|png|jpg|jpeg|gif|svg|ico)$ {\r\n\r\n expires 30d;\r\n\r\n add_header Cache-Control \"public, no-transform\";\r\n\r\n}<\/code><\/pre>\nCara Add Expires Header WordPress dengan Plugin<\/span><\/h3>\n