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 …
Core Web Vitals untuk Desktop …
Core Web Vitals untuk Mobile …
Panduan ini menggunakan:
- Theme GeneratePress
- Hosting dari Dracoola
Download eBook Membongkar Rahasia ChatGPT dengan mengisi form berikut.
eBook akan dikirimkan ke email
Cara Setting Plugin Litespeed Cache:
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. Apabila
- 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?
Salah satu yang saya suka dari CDN Quic.cloud adalah POP-nya ada di Jakarta. Seperti terlihat pada tampilan berikut.
- 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 Dracoola malah dapat versi Enterprise sampai 10,000 gambar per bulan.
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 Losslessly – OFF. Kalau Anda fokus pada kualitas gambar dan di website merupakan portofolio untuk fotografi, sebaiknya pilih ON.
- Preserve EXIF/XMP data – OFF. Karena gambar dapat diakses semua orang sebaiknya meta data di hapus. Contoh metadata seperti lokasi foto.
- Image WebP Replacement – ON. 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.
- UCSS Inline – OFF
- Load CSS Asynchronously – OFF. Ini salah satu penyebab FOUC (flash of unstyled content)
- Inline CSS Async Lib – OFF
- Font Display Optimization – Default 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 Combine External and Inline – OFF.
- 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). Delayed sangat membantu untuk meningkatkan nilai Core Web Vitals.
Kalau Anda mau mengaktifkan Load JS Deferred, pastikan JS tersebut berada di luar tampilan utama.
Misalkan ini adalah tampilan utama di layar.
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.
HTML Settings
- HTML 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.
- Add Missing Sizes – ON
Viewport Images
- Viewport Images – OFF. Apabila Anda menggunakan Lazy Load maka ON.
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.
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.
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.
Suka Artikel Ini?
Untuk tetap up-to-date dengan artikel terbaru dan tips menarik, ayo bergabung di dalam buletin saya.
Daud Wihardi
Daud Wihardi adalah co-founder dari konsultan IT di Edavos. Seorang yang tertarik dengan digital marketing, dunia bisnis dan trading saham.