Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Plugins
Code

Mengkonfigurasi W3 Total Cache: Advanced Minification Settings

by
Length:ShortLanguages:
This post is part of a series called Configuring W3 Total Cache.
Configuring W3 Total Cache: Advanced Page Cache II
Configuring W3 Total Cache: Advance Database Cache

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Pada artikel sebelumnya, Kita menyelesaikan konfigurasi pengaturan Page Cache. Pada artikel ini, kita melanjutkan dengan setup W3 Total Cache dengan melihat setting untuk General, HTML & XML, JS, CSS dan Advanced Settings yang semuanya terdapat di menu General.

Mari kita lihat apa yang ditawarkan W3TC.

Mengecilkan

Minification kode adalah penghapusan karakter yang tidak perlu dari kode sumber. Mini, bila digunakan sebagai awalan, berarti kecil. Dengan demikian, tujuan minification adalah membuat kode sumber "lebih kecil" dalam rangka meningkatkan kinerjanya.

Pertama-tama, klik Minify di dalam item menu Performance yang ada di menu Dashboard:

General

Mari kita melihat setiap pengaturan yang ditawarkan di menu General.

1. Rewrite URL Structure

Ini adalah praktik yang baik untuk menulis ulang struktur URL untuk menyematkan CSS dan JavaScript. Menggunakan variabel query string pada sumber daya seperti ini cenderung digunakan kembali dalam waktu load halaman yang meningkat, jadi aktifkan opsi ini.

2. Disable Minification for Logged in Users

Seperti yang ditunjukkan oleh opsinya, jika Anda mengaktifkan pengaturan ini, maka pengguna yang diautentikasi tidak akan menerima halaman yang minimalkan. Saya biasanya menyarankan agar tidak mengaktifkan opsi ini. Perilakunya harus sama untuk pengguna yang masuk dan keluar dari situs.

3. Minify Error Notification

Anda dapat menggunakan opsi ini untuk menerima pemberitahuan email setiap kali terjadi kesalahan dalam proses minification.

Pada titik ini, simpan pengaturannya.

HTML & XML

Pengaturan menu HTML & XML adalah sebagai berikut:

1. HTML Minify Settings

Di bagian plugin ini, kita perlu mengaktifkan minifikasi HTML, CSS, dan JavaScript. Kita tidak akan khawatir tentang meminimalkan feed dan tidak akan mengaktifkan opsi untuk menghapus line break.

Jika Anda mulai mengalami masalah dengan gaya atau perilaku halaman Anda, Anda dapat mulai melakukan debugging dengan menonaktifkan opsi CSS dan JavaScript.

2. Ignored Comment Stems

Proses minification menghapus semua komentar kode agar mengurangi ukuran halaman. Pada saat yang sama, Anda tidak benar-benar ingin melakukannya dengan hal-hal seperti komentar Google AdSense.  Secara default, W3TC menawarkan prefiks ini untuk kita sehingga mereka tidak pernah dihapus dari kode. Anda dapat menyimpan bagian tersebut apa adanya atau menyertakan komentar tambahan.

Sekali lagi, simpan pengaturannya.

JavaScript

Mari beralih ke menu JavaScript.

1. JavaScript Minification Settings

JavaScript Minification Settings

Pastikan pengaturan ini diperbarui dengan banyak pengujian Saat diminimalkan, JavaScript dapat menyebabkan perilaku aneh saat diminimalkan.

  • Optimal Settings: Berdasarkan pengalaman saya dengan server dan klien yang berbeda, sebaiknya gunakan apa yang Anda lihat pada screenshot di atas: Aktifkan minification JavaScript, aktifkan opsi Combine only, dan biarkan pegaturan perilaku ditetapkan sebagai Default (blocking). Jika Anda masih mengalami masalah dengan perilaku situs, Anda dapat menonaktifkan setelan ini.
  • Extreme Settings: Menggunakan Minify daripada Combine only akan mengecilkan JavaScript yang, pada gilirannya, dapat mengakibatkan perilaku tidak menentu. Ini juga terjadi bila Anda memilih metode JavaScript non-blocking dari elemen select. Anda juga dapat memilih untuk mengaktifkan setelan ini untuk segmen pengguna Anda (yaitu melakukan A/B testing) untuk menentukan kinerja terbaik.

Sekali lagi, simpan pengaturannya.

CSS

Sekarang mari kita lihat pengaturan untuk stylesheet kita.

CSS Minify Settings & @import Handling

Pertama, aktifkan CSS minification. Selanjutnya, aktifkan pilihan untuk menghilangkan line break yang berbeda dengan JavaScript, CSS tidak mungkin terpengaruh dengan menghapus whitespace. Kedua, pilih Process untuk penanganan @import.

Jika Anda mengetahui sedikit tentang CSS, Anda tahu bahwa @import digunakan untuk mengimpor file CSS lain menjadi satu. Metode ini cenderung memperlambat load halaman. Untuk meningkatkan efisiensi, W3TC memproses penanganan @import dan membuat satu file CSS dari itu.

Sekali lagi, simpan pengaturan Anda.

Advanced

Akhirnya, mari kita lihat pengaturan Advanced.

File Name Length Test & File Name Length

Sebaiknya nonaktifkan setelan ini. Ketika proses minification di W3TC menggabungkan beberapa file ke dalam satu file, ia menggunakan area ini untuk menentukan panjang filename. Jangan mengubah apapun di sini, sampai kecuali Anda tahu apa yang Anda lakukan.

Update External Files

Dalam pengaturan ini, tentukan interval antara download dan update file di dalam cache minify. Saya sarankan menggunakan opsi default 24-jam (yaitu 86400 detik).

Garbage Collection Interval

Jika Anda men-cache data ke disk, ini adalah dimana Anda menentukan seberapa sering data cache yang kadaluarsa dihapus. Untuk situs yang sibuk, nilai yang lebih rendah adalah yang terbaik. Jika Anda tidak memiliki nilai default, maka 864000 adalah pengaturan yang baik.

Other Advance Settings

Karena kita telah menetapkan auto-mode untuk melakukan minification, area ini membantu kita mengendalikan halaman, user agent, dan file tertentu, yang ingin kita hapus dari minification.

  • Never minify the following pages: Halaman-halaman yang disebutkan di sini tidak akan diminimalkan.
  • Never minify the following JS files: File JavaScript yang ditentukan tidak akan diminimalkan.
  • Never minify the following CSS files: File CSS yang ditentukan tidak akan diminimalkan.
  • Rejected user agents: Menentukan user agent yang seharusnya tidak menerima konten normal dan tidak di-minimalkan
  • Include external files/libaries: Semua file eksternal yang seharusnya diminimalkan ditentukan di sini.

Simpan pengaturannya sekali lagi.

Kesimpulan

Itu saja untuk pengaturan lanjutan. Jika Anda telah memilih mode auto untuk melakukan minification, maka pengaturan minification Anda untuk W3TC berakhir di sini.

Jika Anda memiliki pertanyaan, beri tahu saya dengan menggunakan form di bawah ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.