Cara Setting Plugin Litespeed Cache (2021) – Versi 4.3

Apakah dengan hanya menggunakan plugin Litespeed Cache mampu memenuhi persyaratan Core Web Vital?

Saya sudah menulis banyak mengenai optimasi kecepatan website hingga mencapai 100% di GTmetrix. Disana saya menggunakan kombinasi dari berbagai plugin dan layanan.

Kali ini saya mencoba menggunakan solusi Litespeed secara keseluruhan. Untuk hasil yang optimal Anda memerlukan layanan hosting dengan teknologi LiteSpeed Web Server.

Kenapa memilih Litespeed? 

Solusinya lengkap mulai dari:

  • CDN
  • Caching
  • Kompres gambar dengan versi webp
  • Proteksi dari Brute Force
  • Optimasi CSS
  • LQIP

Penasaran dengan hasilnya?

Hasilnya sebagai berikut …

Hasil GTmetrix dengan Litespeed

Core Web Vitals untuk Desktop …

Desktop Core Web Vitals

Core Web Vitals untuk Mobile …

Mobile Core Web Vitals

Panduan ini menggunakan:

General

General Settings

Automatically Upgrade – OFF. Saya lebih suka mengetahui fitur dan perubahan terbaru sebelum melakukan pembahar

Domain Key – Silahkan “Request Domain Key” untuk menggunakan layanan Quic.cloud. 

Server IP – Masukkan IP server hosting apabila Anda menggunakan layanan CDN Quic.cloud. Ini untuk menghilangkan waktu pencarian DNS atau CDN sehingga komunikasi antar server lebih cepat. 

Cache

Pengaturan kategori Cache hanya berlaku untuk pengguna server web LiteSpeed. 

Tips: Bagi Anda yang kesulitan dengan masalah teknis cache, saran saya gunakan WP Rocket. Karena WP Rocket fokus meningkatan Core Web Vitals, sedangkan Litespeed tidak.

Cache

Berikut pengaturan yang saya lakukan:

  • Enable LiteSpeed Cache – ON
  • Cache Logged-in Users – OFF
  • Cache REST API – ON
  • Cache Login Page – ON
  • Cache favicon.ico – ON
  • Cache PHP Resources – ON. Beberapa tema dan plugin memuat file CSS dan JS dengan menjalankan skrip PHP. File ini biasanya berupa file statis sehingga dapat di-cache. 
  • Cache Mobile – OFF. Apabila Anda menggunakan AMP (Accelerated Mobile Pages) silahkan aktifkan fitur ini.
  • List of Mobile User Agents – Hanya berfungsi apabila Anda mengaktifkan “Cache Mobile”
  • Drop Query String – Sesuai bawaan. 

TTL

TTL (Time to Live) memberitahu LiteSpeed berapa lama waktu penyimpanan file cache. Setelah waktu tersebut berakhir (kadaluarsa), permintaan baru dibuat secara dinamis kemudian disajikan kepada pengunjung pertama.

Halaman yang baru dibuat ini akan di-cache untuk disajikan kepada pengunjung berikutnya. Sampai dengan cache tersebut kadaluarsa. 

Angka yang lebih besar akan meningkatkan rasio hit cache Anda. Sehingga kemungkinan halaman dilayani dari cache. Konfigurasi standar adalah 604800 atau 1 minggu. 

Jangan khawatir Litespeed Cache akan memperbaharui otomatis setiap konten yang Anda perbaharui. Sehingga Anda bisa menggunakan nilai lebih tinggi dari 1 minggu. 

Biar ada gambaran kita pakai contoh ya …. 

Anda mempublish konten baru setiap 1 bulan sekali. Sedangkan kadaluarsa cache 1 minggu.

Kinerja server menjadi sia-sia karena cache terus diperbaharui setiap minggu sedangkan tidak ada konten yang baru. Kalau cuma 10 halaman mungkin tidak masalah, bayangkan apabila Anda punya ratusan bahkan ribuan halaman?

Setelah mengetahui cara kerjanya, sesuaikan TTL sesuai kebutuhan. 

  • Default Public Cache TTL – Waktu kadaluarsa halaman publik. Sesuaikan dengan berapa lama Anda publikasi konten baru.  
  • Default Front Page TTL – Waktu kadaluarsa halaman utama. Apabila halaman utama tidak pernah berubah silahkan ganti menjadi lebih lama.

Purge

Pada bagian ini saya menggunakan setting bawaan. 

Excludes

Saya tidak menggunakan fitur ini.

ESI

Pada bagian ini saya menggunakan setting bawaan. 

Object

Tidak semua hosting provider menyediakan fitur ini. Anda bisa aktifkan apabila memang tersedia. 

  • Object Cache – ON kalau fitur tersedia. 

Browser

Pengaturan ini mirip dengan TTL namun di sisi browser para pengunjung.  

  • Browser Cache – ON
  • Browser Cache TTL – 31557600 (1 tahun).

Advanced

  • Improve HTTP/HTTPS Compatibility – OFF. Tidak disarankan memiliki konten campuran HTTP dan HTTPS. Sebaiknya semua menggunakan HTTPS.
  • Instant Click – OFF. Fitur ini pada dasarnya memuat halaman pada saat kursor pengguna berada diatasnya. Sebaiknya dimatikan karena memberatkan server, apalagi kalau pengunjung website ribuan.

CDN

CDN Settings

Saya mendapatkan versi Enterprise atau setara 10GB pada hosting yang saya gunakan. Dengan kata lain mungkin sekitar 40,000 trafik. Lumayan kan?

Litespeed CDN di Quic.cloud

Salah satu yang saya suka dari CDN Quic.cloud adalah POP-nya ada di Jakarta. Seperti terlihat pada tampilan berikut.

quic.cloud penggunaan bandwidth
Catatan: Ini hasil coba beberapa hari (belum 1 minggu)
  • QUIC.cloud CDN – Saya sarankan untuk mengaktifkan fitur ini apabila Anda belum menggunakan CDN. 
  • Use CDN Mapping – OFF. Aktifkan apabila Anda tidak menggunakan Cloudflare atau Quic.cloud. 
  • Cloudflare API – khusus pengguna Cloudflare. Masukkan email, global API key, dan domain. Dengan cara ini, Litespeed Cache membersihkan cache Cloudflare saat anda melakukan purge di Litespeed.

Manage

Pada bagian ini khusus pengguna Cloudflare. 

Image Optimization

Layanan kompresi gambar GRATIS dari LiteSpeed. Bahkan kuota versi gratis mencapai 1000 gambar per bulan untuk pengguna basic.

Saya menggunakan hosting Niagahoster malah dapat versi Enterprise sampai 10,000 gambar per bulan.

Kuota Gambar di Litespeed

Bandingkan dengan Shortpixel yang versi gratis hanya 100 per bulan. 

Banyak banget ya!! 

Image Optimization Settings

  • Auto Request Cron – ON. Permintaan kompresi gambar akan dilakukan dibelakang layar. 
  • Auto Pull Cron – ON. . Pengambilan hasil kompresi gambar akan dilakukan dibelakang layar.
  • Optimize Original Images – ON
  • Remove Original Backups – OFF. Kecuali Anda yakin 100% dengan kualitas hasil kompresi Litespeed. 
  • Optimize WebP Versions – ON. Tipe kompresi generasi terbaru, dengan hasil lebih kecil. 
  • Optimize Losslessly – OFF. Kalau Anda fokus pada kualitas gambar dan di website merupakan portofolio untuk fotografi, sebaiknya pilih ON.
  • Preserve EXIF data – OFF. Karena gambar dapat diakses semua orang sebaiknya meta data di hapus. Contoh metadata seperti lokasi foto. 
  • Image WebP Replacement – OFF. Litespeed akan menggunakan gambar versi webp apabila browser pengguna mendukung. 
  • WebP Attribute To Replace – sesuai bawaan. 
  •  WebP For Extra srcset – ON
  • WordPress Image Quality Control – Semakin tinggi angkanya kualitas semakin bagus. Nilai rekomendasi 82. 

Page Optimization

CSS Settings

Anda perlu berhati-hati pada bagian ini. Salah setting akan membuat website menjadi berantakan dan tidak berjalan seperti seharusnya. 

  • CSS Minify – OFF. Saran saya ini sebaiknya OFF. Kecuali Anda mengaktifkan CSS Combine dan Generate UCSS.
  • CSS Combine – OFF. Setting ini sering menjadi sumber masalah, pastikan test dengan benar!
  • Generate UCSS – OFF. Kalau Anda aktifkan CSS Combine, aktifkan fitur ini.
  • CSS HTTP/2 Push – ON
  • Load CSS Asynchronously – OFF. Ini salah satu penyebab FOUC (flash of unstyled content)
  • Generate Critical CSS – OFF
  • Generate Critical CSS In Background – OFF. Setting ini bergantung pada setting di atasnya.
  • Inline CSS Async Lib – OFF
  • Font Display OptimizationDefault atau Block

JS Settings

  • JS Minify – OFF. Berbeda dengan kebanyakan rekomendasi orang lain, saran saya ini sebaiknya OFF. 
  • JS Combine – OFF. Setting ini sering menjadi sumber masalah, pastikan test dengan benar!
  • JS HTTP/2 Push – ON
  • Load JS Deferred – Delayed. Kalau Anda mengalami kendala kembalikan ke OFF. Delay artinya tidak menjalankan JS sampai mendeteksi aktivitas pengguna (seperti klik tombol atau gerakan mouse).

Kalau Anda mau mengaktifkan Load JS Deferred, pastikan JS tersebut berada di luar tampilan utama. 

Misalkan ini adalah tampilan utama di layar.

Halaman Utama Website Daudwihardi

Apabila JS terletak di bawah tampilan ini maka boleh di deferred atau delayed. Atau dengan kata lain, pengguna harus scroll terlebih dahulu baru sampai di JS tersebut.

Apabila JS letaknya di bagian atas, Anda harus exclude JS tersebut di bagian Tuning sehingga tidak di deferred atau delayed.

Optimization Settings

  • CSS/JS Cache TTL – 604800 (1 minggu)
  • HTML Minify – OFF. 
  • Inline CSS Minify – OFF
  • Inline JS Minify – OFF
  • DNS Prefetch untuk mengakses lebih dulu DNS di luar website Anda. Sehingga akes buka halaman menjadi lebih cepat. Contohnya website YouTube apabila Anda melakukan embed di halaman. Contoh lain apabila Anda menggunakan Google Analytics, bisa juga masukkan domain tersebut disini. 
  • DNS Prefetch Control – ON 
  • Remove Query Strings – ON
  • Load Google Fonts Asynchronously – OFF
  • Remove Google Fonts – Tergantung Anda menggunakan atau tidak. 
  • Remove WordPress Emoji – ON
  • Remove Noscript Tag – ON

Media Settings

  • Lazy Load Images – OFF. Tergantung kebutuhan Anda, saya lebih suka OFF. 
  • Basic Image Placeholder – Yang pengguna lihat sebelum gambar aslinya tampil.
  • Responsive Placeholder – ON kalau Anda menggunakan Lazy Load. Ini memberikan kotak kosong sehingga tampilan tidak berubah ketika Anda scroll.
  • Responsive Placeholder SVG – Menggunakan SVG sebagai pengganti responsive placeholder.
  • Responsive Placeholder Color – Biasanya warna abu-abu. 
  • LQIP Cloud Generator – OFF. Apabila Anda aktifkan maka akan tampil gambar asli tapi versi blur (kabur). Gunanya untuk mempercepat halaman tampil. Ketika pengguna sampai di gambar tersebut, maka gambar di ganti ke versi asli.
  • Generate LQIP In Background – OFF 
  • Lazy Load Iframes – Kalau Anda embed YouTube bisa aktifkan fitur ini. 
  • Inline Lazy Load Images Library – OFF 

Media Excludes

Apabila ada gambar yang mau dikecualikan silahkan isi disini. 

Localization Settings

  • Gravatar Cache – OFF. Apabila Anda memiliki banyak komentar silahkan di aktifkan.
  • Gravatar Cache Cron – OFF. Aktifkan bila Anda menggunakan fitur komentar. 
  • Gravatar Cache TTL – 604800

Database

Manage

Disini tempat untuk melakukan optimasi dan pembersihan database.

Optimasi Database dengan Plugin Litespeed

Pada bagian Database Table Engine Converter pastikan semua database di perbaharui ke Innodb. Karena Innodb mempunyai kinerja lebih baik daripada MyISAM. Backup terlebih dahulu sebelum melakukan konversi.

Litespeed Database Table Engine Converter

DB Optimization Settings

  • Revisions Max Number – Sesuaikan dengan kebutuhan.
  • Revisions Max Age – Sesuaikan dengan kebutuhan.

Crawler

Biasanya layanan hosting tidak mengaktifkan fitur ini karena bisa memberatkan server mereka. Intinya fitur ini untuk mempersiapkan cache setiap halaman sehingga siap ketika pengguna butuhkan. 

Kenapa butuh dipersiapkan? 

Ketika TTL kadaluarsa maka butuh pengunjung pertama baru cache terbentuk. Bagi pengunjung pertama halaman akan terasa lebih lambat karena cache belum terbentuk. 

Nah, fungsi crawler mempersiapkan cache bahkan jika belum pengunjung pertama. Sehingga cache selalu siap. 

Toolbox

Purge

Biasanya purge sudah dilakukan otomatis ketika Anda memperbaharui halaman. Namun apabila Anda ingin melakukan secara manual silahkan menggunakan fitur disini. 

Import/Export

Anda bisa melakukan import/export konfigurasi disini.

Anda mungkin menyukai:

Suka Artikel Ini?

Dapatkan tips, catatan buku dan kumpulan artikel menarik yang hanya saya bagikan ke peserta buletin.

foto daud

Daud Wihardi

Daud Wihardi adalah salah satu pendiri konsultan IT di Edavos. Seorang yang tertarik dengan online marketing, dunia bisnis dan smartphone fotografi.