Yovi Amanda Full time SEO content writer. Passionate to help people in the digital world through writing. She currently juggling between making articles for Niagahoster and raising her only child, Bhadrika Nagendra.

Cara Mempercepat Loading Website dengan Add Expires Headers

3 min read

Pernahkah Anda mendapat rekomendasi “Add Expires Headers” saat menggunakan GTMetrix? Rekomendasi dari tools cek kecepatan website ini terkait dengan kendala loading lambat. Jika dibiarkan, kenyamanan pengunjung website akan terganggu dan ranking di hasil pencarian bisa turun.

Jangan sampai hal ini terjadi, ya! Nah itulah kenapa penting untuk mengelola add expires headers dengan baik. Tujuannya, mempercepat loading website dan blog dengan memanfaatkan cache.

Lalu, bagaimana cara menambahkan expires header? Kami akan menjelaskan selengkapnya. Namun, sebelumnya mari pelajari dulu apa itu Expires Header.

Apa itu Expires Headers?

Expires header adalah baris kode yang memberitahu browser berapa lama seharusnya file cache sebuah situs disimpan. 

Penjelasan sederhananya seperti ini: 

Ketika user pertama kali mengunjungi sebuah halaman website, browser biasanya akan otomatis memuat file dari server. File tersebut bisa berupa HTML, Images, PDF, CSS, Javascripts, dan lainnya. File yang diterima kemudian disimpan di cache. File yang dimuat tadi kemudian disimpan di cache. 

Jadi, jika user ingin membuka halaman yang sama, cukup mengambil dari cache, tanpa meminta ke server lagi.

Namun, berapa lama seharusnya file tadi tersimpan di browser cache?

Nah, karena cache memiliki masa kedaluarsa (expired), penting untuk menentukan expires header yang sesuai. Kenapa demikian? 

Jika expires header-nya terlalu cepat, maka akan selalu ada permintaan langsung ke server. Selain proses loading lama, bisa-bisa Anda mendapatkan peringatan seperti, “Your server is not using expires header for your image,” (“Server Anda tidak memiliki expires header untuk image-nya). 

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.. 

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.

2 Cara Menambahkan Add Expires Header

Ada dua cara menambahkan add expires header: menggunakan plugin WordPress dan manual coding. Untuk manual coding, tentu Anda butuh keahlian pemrograman yang baik. Jika ingin lebih mudah, Anda bisa memanfaatkan beberapa plugin expires headers. 

Cara Add Expires Headers WordPress Secara Manual 

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!

1. Menggunakan Apache Web Server

Untuk menambahkan add expires header, Anda perlu mengakses file .htaccess. Cara termudah adalah melalui cPanel dengan langkah sebagai berikut:

Anda bisa login ke akun cPanel dengan username dan password yang sesuai. 

Login ke cPanel

 Setelah login, pilih menu File Manager.

File-Manager

Di dalam File Manager, piih folder public_html. 

File manager public_html

Setelah masuk ke public_html, Anda akan menemukan file .htaccess. Lakukan klik kanan di file ini, lalu pilih Edit.

Temukan file .htaccess dalam folder public_html

Langkah berikutnya, lakukan copy paste baris kode ini ke file .htaccess tersebut, seperti di bawah ini:

<IfModule mod_expires.c>

  ExpiresActive On
  # Images

  ExpiresByType image/jpeg "access plus 1 year"

  ExpiresByType image/gif "access plus 1 year"

  ExpiresByType image/png "access plus 1 year"

  ExpiresByType image/webp "access plus 1 year"

  ExpiresByType image/svg+xml "access plus 1 year"

  ExpiresByType image/x-icon "access plus 1 year"

  # Video

  ExpiresByType video/mp4 "access plus 1 year"

  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript

  ExpiresByType text/css "access plus 1 month"

  ExpiresByType text/javascript "access plus 1 month"

  ExpiresByType application/javascript "access plus 1 month"

  # Others

  ExpiresByType application/pdf "access plus 1 month"

  ExpiresByType application/x-shockwave-flash "access plus 1 month"

</IfModule>

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. 

Misalnya, file image dan video di atas menggunakan expiration 1 tahun. Pertimbangannya, jenis file tersebut tidak banyak mendapat update. Berbeda dengan CSS dan Javascript yang menggunakan expiration lebih cepat, yaitu 1 bulan.

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 Show Hidden Files. 

2. Menggunakan Nginx Server

Cara menambahkan expires header di Nginx lebih mudah, Anda bisa copy paste baris kode di bawah ini ke server block Anda.

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {

 expires 30d;

 add_header Cache-Control "public, no-transform";

}

Cara Add Expires Header WordPress dengan Plugin

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:

Pertama, masuk ke dashboard WordPress. Kemudian, masuk ke menu Plugins > Add New. Lalu, ketik Add Expires Headers di kolom pencarian.  

Plugins Add Expires Header

Setelah itu, klik Install Now, lalu Activate.

Instal plugin Add Expires Header

Pada menu Add Expires Header, klik Cache Setting.

Plugin Status

Selanjutnya, di halaman Cache Settings, pilih jenis file yang ingin Anda aktifkan cache-nya. Kemudian, tentukan berapa lama cache akan menyimpan file

Cache Settings

Jika pengaturan sudah dilakukan, klik Submit.

Selain Add Expires Headers, plugin lain yang bisa Anda gunakan adalah W3 Total Cache, WP Rocket, dan Leverage Browser Caching.

Saatnya Mengatur Expires Headers untuk Website Lebih Cepat!

Sekarang Anda sudah tahu bahwa salah satu cara untuk mempercepat loading website adalah dengan mengatur expires headernya. Anda dapat menentukan berapa lama cache menyimpan file sementara di browser sehingga tak perlu selalu meminta ke server.

Meskipun begitu, Anda perlu melakukannya sesuai kebutuhan website agar hasil yang didapat maksimal. Jangan lupa selalu lakukan pengecekan kecepatan website secara berkala. Tujuannya, untuk menjamin kenyamanan pengunjung dan mempertahankan posisi terbaik di hasil pencarian Google.

Ingat selalu bahwa kecepatan loading juga bisa mempengaruhi peringkat Anda di hasil pencarian Google. Jadi saran kami, lakukan pengecekan website secara rutin ya! 

Oya, jika Anda memiliki website WordPress dan ingin membuat website Anda lebih cepat dari website yang lain, WordPress Hosting Niagahoster dapat dijadikan pilihan. Dengan fitur WordPress Accelerator dari LiteSpeed, performa website Anda akan lebih optimal!

Semoga artikel ini bermanfaat, sampai jumpa di artikel berikutnya! 

Yovi Amanda Full time SEO content writer. Passionate to help people in the digital world through writing. She currently juggling between making articles for Niagahoster and raising her only child, Bhadrika Nagendra.

Leave a Reply

Your email address will not be published. Required fields are marked *