Cara Mengaktifkan Leverage Browser Caching diWordpress | SatuManado – Apakah Sobat mencari cara mengaktifkan Leverage Browser Caching di WordPress? atau Sobat mungkin ingin untuk menggunakan Leverage Browser Caching WordPress Plugin. Biasanya Masalah Leverage Browser Caching sering kita sadari saat melalukan tes kecepatan website yang sedang kita kelola. Karena, saat sobat sudah melalukan tes kecepatan akses situs Sobat, maka Sobat akan mendapatkan hasil analisa yang menyarankan Sobat untuk Mengaktikan Leverage Browser Caching. Dan jika saya tidak salah, kemungkinan Sobat sudah mencari cara untuk meningkatkan kecepatan website Sobat. Dan jika saya tidak salah lagi, mungkin Sobat sudah mencoba beberapa website penyedia layanan untuk pengecekan kecepatan akses site Sobat seperti Google PageSpeed atau GTmatrix ada juga PingDom. Nah dari Hasil Tes yang sobat lakukan disalah satu website diatas kemungkinan akan menyarankan Sobat untuk mengaktifkan Leverage Browser Caching melalui Htaccess sebagai solusi untuk membuat website sobat lebih cepat dan Wussss.

Sobat juga dapat melakukan pengecekan browser caching dibrowser sobat dengan tools ini

Cek Browser Cache Tools - satumanado
Cek Browser Cache Tools – satumanado

dengan Tools ini sobat bisa melihat interval waktu yang ditentukan untuk menyimpan dan mengupdate file yang dicache untuk browser lengkap dengan type cache control.

Sobat mungkin sudah menemukan dan membaca beberapa referensi bahwa Leverage browser caching melalui Htaccess dapat membantu Sobat untuk meningkatkan kecepatan situs Sobat. Dan Benar, Sobat berada padan Jalan yang benar dengan memanfaatkan Browser Cache pasti akan membantu Sobat untuk meningkatkan kecepatan loading website Sobat.

Memahami Cache Dan Browser Caching

Cara Mengaktifkan Leverage Browser Caching diWordpress – Mekanisme cache beroperasi antara server dan browser pengunjung, baik pada server atau pada komputer pengunjung. Dapat menyimpan salinan file (seperti html/php/css/js file, Gambar, dll) atau string kode akses lebih cepat daripada harus terus-menerus memintanya dari server. Untuk situs web, cara yang paling efektif untuk file cache adalah untuk memanfaatkan browser caching. Tetapi ada cara lain untuk menggunakan caching untuk keuntungan Sobat juga. Menggunakan satu atau beberapa mekanisme cache untuk situs web Sobat dapat sangat meningkatkan performa halaman web Sobat. Mekanisme cache paling penting untuk kecepatan halaman adalah browser caching.

Sebagian besar file statis yang digunakan pada halaman web dapat disimpan pada komputer pengunjung Sobat untuk diakses saat kembali mengunjungi situs Sobat. Setiap kali pengunjung mengakses halaman baru di situs web Sobat, file-file ini kemudian dapat diakses dari komputer pengunjung bukan server Sobat, yang akan mempercepat situs web Sobat.

Kenapa Leverage Browser Caching Dapat meningkatkan kecepatan Akses Website

Cara Mengaktifkan Leverage Browser Caching diWordpress – Setiap kali browser memuat halaman web browser harus men-download semua file web untuk bisa menampilkan halaman web. termasuk semua HTML, CSS, JavaScript dan gambar.

Beberapa halaman mungkin hanya terdiri dari beberapa file dan menjadi kecil ukurannya – mungkin beberapa kilobyte. tapi tidak semua seperti itu ada juga website yang memiliki banyak file, dan hal ini dapat menambah besarnya data yang akan didownload hingga menjadi beberapa megabyte atau lebeih. Twitter.com misalnya adalah 3 MB +.

Dari penjelasan diatas terdapat 2 masalah yaitu.

  • File-file besar ini akan memakan waktu lebih lama untuk didownload dan tampilkan oleh browser dan akan sangat menyedihkan jika Sobat menggunakan koneksi internet yang lambat (atau perangkat mobile).
  • Setiap file membuat permintaan yang terpisah ke server. Lebih banyak permintaan ke server Sobat secara bersamaan, maka semakin banyak juga pekerjaan yang perlu harus ditangani server, yang akan berdampak mengurangi kecepatan pemuatan halaman Sobat dibrowser pengguna atau pengunjung.

Gambar dibawah ini memperlihatkan bagaimana browser caching dapat mempercepat pemuatan sebuah website

Melihat file yang sudah ter-cache dengan inspek elemen - satumanado
Melihat file yang sudah ter-cache dengan inspek elemen – satumanado

Perhatikan pada kolom “time” yang merupakan waktu yang diperlukan browser untuk mendownload file yang bersangkutan. disitu terlihat “23ms” waw sangat cepat bukan? hal itu disebabkan karna file tersebut sudah berada distorage lokal atau tersimpan dibrowser maka tidak dibutuhkan waktu yang lama untuk memanggil kembali file tersebut saya bilang memanggil karna memang browser sudah tidak mendownload file tersebut.

Browser caching dapat membantu dengan penyimpanan beberapa file ke dalam browser pengguna sehingga file berada lokal dikomputer pengguna tempatnya dibrowser. Pada saat pertama kali mereka ke situs Sobat maka akan membutuhkan waktu yang sama untuk memuat, namun ketika pengguna mengunjungi kembali situs web Sobat, me-refresh halaman, atau bahkan mengunjungi halaman yang berbeda di situs Sobat, browser mereka sudah memiliki beberapa file yang mereka butuhkan secara lokal.

Bagaimana cara kerja Browser Caching ?

Cara Mengaktifkan Leverage Browser Caching diWordpress – Cara kerja Browser caching adalah dengan menSobati halaman tertentu, atau bagian dari halaman, Contohnya Logo website atau juga Script bahkan file CSS Yang Harus diupdate pada interval yang berbeda. Logo Sobat pada website Sobat, misalnya, tidak mungkin sobat menganti logo website sobat setiap hari. Dengan men-caching logo ini, kita dapat memberitahu browser pengguna untuk hanya download gambar ini seminggu sekali atau bahkan setahun sekali kalo menurut saya. Maka setiap pengguna yang tadi mengunjungi web sobat dalam seminggu tidak akan mendownload gambar logo website sobat.

Cara kerja Browser caching - Satu Manado
Cara kerja Browser caching – Satu Manado

Karena server web sudah memberitahu browser untuk menyimpan file ini dan tidak men-download file tersebut ketika Sobat datang kembali untuk menghemat waktu pengguna/Pengunjung Sobat dan bandwidth server web Sobat.

Bagaimana Cara Mengaktifkan Leverage Browser Caching ?

Cara Mengaktifkan Leverage Browser Caching diWordpress – Untuk mengaktifkan browser caching Sobat perlu mengedit header HTTP Sobat untuk mengatur waktu kedaluwarsa untuk beberapa jenis file. bagaimana cara mengedit HTTP header Sobat?. untuk mengedit HTTP header dan cara menggunakan browser caching diwordpress dapat dilakukan, dengan mengedit File .Htaccess

Ada 2 cara untuk mengaktifkan Leverage Browser Caching yaitu:

  • pertama mengaktifkan browser caching dengan mengedit File .Htaccess
  • yang kedua mengaktifkan browser caching dengan menggunakan Plugins wordpress

Mengaktifkan Leverage Browser Caching dari File .Htaccess

untuk mengedit file .Htaccess sobat harus mencari file Htaccess sobat diserver, hal ini bisa dilakukan melalui “file manager” diCpanel atau dengan menggunakan fitur dari plugins yoast SEO. Untuk mengaktifkan browser caching dengan mengedit file .Htaccess memiliki code yang berbeda pada sever yang berbeda juag sobat untuk sekrang ini ada beberapa server yaitu Server Apache, Server NGINX dan Windows Server kita akan membahas cara mengaktifkan leverage browser caching pada ketiga server tadi.

Mengaktifkan Leverage Browser Caching Htaccess Pada server Apache

Cara Mengaktifkan Leverage Browser Caching diWordpress – Jika sobat menggunakan Apache server maka sobat dapat mengaktifkan Leverage Browser Caching dengan memasukan kode dibawah ini kedalam file .Htaccess.

Memasukan Expires Headers pada server Apache

silahkan copy code dibawah lalu paste pada file .htaccess sobat kemudian save.

## EXPIRES CACHING satumanado ##
ExpiresActive On
AddType application/vnd.ms-fontobject .eot 
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
ExpiresByType application/vnd.ms-fontobject "access 1 year"
ExpiresByType application/x-font-ttf "access 1 year"
ExpiresByType application/x-font-opentype "access 1 year"
ExpiresByType application/x-font-woff "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType text/html "access 1 hour"
ExpiresByType text/css "access 14 days"
ExpiresByType text/x-javascript "access 3 weeks"
ExpiresByType application/javascript "access 1 month"  
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType image/gif "access 2 months"
ExpiresByType image/png "access 2 months"
ExpiresByType image/jpg "access 2 months"
ExpiresByType image/jpeg "access 2 months"
ExpiresByType image/gif "access 2 months"
ExpiresByType application/pdf "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES CACHING satumanado ##

jika sudah selesai maka hasilnya akan seperti gambar dibawah ini.

Expires caching file htaccess - satumanado
Expires caching file htaccess – satumanado

Untuk mengaktifkan browser caching Sobat juga perlu mengedit header HTTP Sobat untuk mengatur waktu kedaluwarsa untuk beberapa jenis file.

Memasukan Cache-Control Headers pada server Apache

Tambahkan kode berikut ke .htaccess file. Sobat dapat mengedit waktu akses tipe file dan cache sesuai dengan keinginan Sobat. pada kode ini waktu diatur ke 2592000 detik, yang adalah 30 hari. silahkan simpan.

# 1 Bulan untuk asset file static
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Contoh akses time yang berbeda.

# 1 TAHUN
Header set Cache-Control "max-age=29030400, public"

# 1 BULAN
Header set Cache-Control "max-age=2592000, public"

# 1 MINGGU
Header set Cache-Control "max-age=604800, public"

# 1 JAM
Header set Cache-Control "max-age=3600, public"

# TIDAK MENCACHE SEMUA FILE
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

Pilihlah waktu interval untuk update cache yang sesuai dengan konten sobat.

Hasil setelah code browser caching dimasukan - satumanado
Hasil setelah code browser caching dimasukan – satumanado

jika sobat telah memasukan kode diatas ke file Htaccess dengan benar maka akan tampak seperti ini.

Mengaktifkan Leverage Browser Caching Htaccess Pada server NGINX

Jika Sobat pengguna Nginx server Sobat dapat memanfaatkan web browser caching oleh mengedit dan menambahkan kode dalam .conf file berikut. Copy dan paste kode ini. Sobat dapat menemukan konfigurasi file ini di sini… /etc/nginx/sites-enabled/default

Mengaktifkan Expires Headers pada server NGINX

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}
location ~* \.(pdf|html|swf)$ {
expires 90d;
}

Memasukan Cache-Control Headers pada server NGINX

 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 90d;
add_header Cache-Control "public, no-transform";
}

Jika Sobat memiliki beberapa situs web pada NGINX Server. Saya sarankan Sobat untuk membuat xyz.conf file dan menambahkan kode yang disebutkan di atas. Simpan file pada folder ini /etc/nginx/sites-available/xyz.conf
Reload nginx server setelah mengedit: /etc/init.d/nginx reload
Selamat Sobat telah berhasil mengaktifkan Leverage Browser Caching pada NGINX Server.

Mengaktifkan Leverage Browser Caching dengan Plugins

Cara Mengaktifkan Leverage Browser Caching diWordpress – Sekarang, mari kita Lihat pada populer Leverage Browser Caching WordPress Plugin. Namun Saya tetap menyarankan untuk menggunakan kode dalam Htaccess file daripada menggunakan WP Plugin. Tapi, saat ini Plugins yang dapat diSobatlkan. WordPress plugin Populer untuk Leverage Browser Caching.

WP Fastest Cache – WordPress plugin

WP Fastest Cache adalah salah satu Plugin paling populer dan direkomendasikan untuk Leverage Browser Caching WordPress Plugin. Dengan Rating Lima bintang WP Plugin ini juga tersedia di repositori WordPress gratis. Plugin WP Fastest Cache tercatat memiliki lebih dari 300.000 Instalasi aktif.

  1. Download dan ‘Cache WP tercepat’ WordPress Plugin.
  2. Klik pengaturan plugin WP fastest cache.
  3. Klik pada kotak centang Browser Caching seperti ditunjukkan pada gambar dan klik tombol “submit”.
  4. Pesan “Options have been saved” akan ditampilkan setelah itu.
  5. selesai. Sobat telah berhasil mengaktifkan Leverage Browser Caching dengan plugins pada website Sobat.

Selain Leverage browser caching, plugin ini dilengkapi dengan beberapa fitur yang sangar yang dapat meningkatkan kecepatan halaman contohnya,

  • Mengaktifkan kompresi Gzip
  • Mengecilkan HTML dan CSS
  • Menggabungkan file CSS dan JS file untuk mengurangi permintaan HTTP
  • Plugin ini juga dapat menghasilkan file HTML satic dinamis situs WordPress, dll.

Demikian artikel Tentang Cara Mengaktifkan Leverage Browser Caching diWordpress (Dengan atau tanpa Plugin) semoga bisa bermanfaat bagi sobat sekalian.

TINGGALKAN KOMENTAR

Please enter your comment!
Silahkan masukan nama Anda disini

This site uses Akismet to reduce spam. Learn how your comment data is processed.