Panduan lengkap cara optimasi LiteSpeed Cache WordPress plugin

Siapa yang ingin website atau blog-nya lambat, pasti semua webmaster atau blogger ingin agar website atau blog-nya bisa diakses dengan cepat, loading dengan kejapan mata, ~wuzz wuzz.

Lihat blog ini, pada pengujian PageSpeed Insight, mendapatkan skor 100 di mobile dan 100 di desktop. Skor tersebut adalah skor sempurna.

Salah satu rahasianya ada pada peng-optimalan cara setting plugin LiteSpeed Cache.

Nah, bagaimana saya melakukannya?

Akan saya bahas lengkap dari A ke Z di tulisan ini.

Tulisan ini akan sangat panjang, maka saya buatkan daftar isinya di bawah:

Apa itu WordPress cache?

Sudah banyak riset yang membuktikan bahwa website yang loading-nya lambat akan ditinggal oleh pengunjung-nya.

Contohnya Amazon, mereka mengklaim bahwa setiap peningkatan 100ms terjadi peningkatan penjualan sebanyak 1%.

Selain itu studi yang dilakukan di Google, setiap satu detik loadingnya lebih lambat, trafik mereka turun 20%.

Karenanya sangat penting untuk memerhatikan kecepatan website kita. Anda bisa membaca studi kasus saya bagaimana saya mendapatkan 100/100 PageSpeed Insight.

Salah satu rahasia mempercepat loading website adalah dengan cache. Dalam komputer, cache adalah tempat penyimpanan yang bisa diakses dengan sangat cepat.

Jika data disimpan dalam database, untuk mengambilnya maka perlu mengakses database…

…tetapi jika memakai cache, tidak perlu mengakses database. Karena data di copy pada sebuah cache, biasanya dalam memory…

…dan tentunya mengambil data dari memory jauh lebih cepat daripada dari storage (db disimpan di storage).

Bayangkan sebuah supermarket, cache bisa dibilang adalah rack yang paling depan. Rack ini sangat efisien karena Anda tidak perlu mencarinya ke belakang.

WordPress cache

Sekilas kuliah singkat saya tentang cache. Mari kita memahami special cache seperti WordPress Cache.

Sama seperti cache pada umumnya, tujuan WordPress Cache adalah untuk membuat pengambilan data lebih efisien.

Karena WordPress memakai arsitektur client-server tradisional, maka setiap Anda membuka halaman web. Server akan mencari resource-resource apa yang Anda minta.

gambar 1. Arsitektur model Client-Server

Resource-resource tersebut seprti gambar, file javascript, css, html, dan data.

Setiap kali Anda berpindah halaman web atau melakukan refresh, Anda meminta kembali reseource-resource yang mungkin sebelumnya sudah Anda minta.

Di sini masalahnya. Anda mengulangi request yang sama.

Bagaimana seandainya, untuk resource-resource yang sudah diminta sebelumnya tidak diminta kembali?

Nah itulah yang coba dilakukan oleh plugin-plugin WordPress Cache seperti LiteSpeed Cache, W3TC, WP SuperCache, WPRocket, dan lainnya.

Sampai di sini, saya harap Anda sudah mengerti apa itu cache.

Tujuan saya, setelah Anda membaca tulisan ini. Anda bisa konfigurasi sendiri plugin WordPress Cache khususnya LiteSpeed Cache. Anda tidak buta mengikuti tutorial yang bersebaran di internet.

Pengaturan umum LiteSpeed cache

Pada pengaturan umum, seharusnya semua jenis plugin WordPress Cache memiliki ini. Pengaturan ini sangat common dalam dunia caching, Tidak peduli Anda memakai plugin cache apa.

Berikut di bawah adalah pengaturan yang terdapat pada LiteSpeed Cache.

Browser cache

Masalah pertama pada cache yang coba kita selesaikan adalah mengurangi request file-file statis ke server.

Seperti yang saya jelaskan di atas, dengan arsitektur client-server setiap kali kita membuka halaman, kita (melalui browser) selalu meminta file-file baru ke server, seperti gambar, css, javascript, dll.

Jika Anda memakai browser Google Chrome atau Firefox, coba Anda buka developer tools. Caranya klik kanan pada halaman yang Anda buka lalu buka tab NetworkAll.

Developer tool pada Firefox (Sebelum di-cache browser)
gambar 2. Developer tool pada Firefox (Sebelum di-cache browser)

Pada gambar 2 saya coba membuka halaman blog ini di Firefox. Anda dapat melihat apa-apa saja yang di-request oleh client (browser) ke server.

Perhatikan pada kolom Transferred, Anda bisa melihat ukuran-ukuran dari file yang di-request ke server. Ketika server mengembalikan file-file tersebut, tentu ada resource yang server gunakan.

Nah, sekarang kita akan coba gunakan browser cache.

Dengan mengaktifkan browser cache, nantinya server akan “menyuruh” browser untuk menyimpan file-file yang sebelumnya sudah di-request di browser. Sehingga ketika nantinya ada suatu halaman yang memakai resource yang sama, tidak perlu melakukan request ke server lagi.

Developer tool pada Firefox (setelah di-cache browser)
gambar 3. Developer tool pada Firefox (setelah di-cache browser)

Pada gambar 3 saya sudah menggunakan browser cache. Pada tab Transferred Anda dapat melihat beberapa file sudah di cache di browser. Lihat pada kolom latency-nya, menunjukan 0 (zero).

Latency nol jelas membuat web di-load jadi sangat ringan. Wuzz wuzz~

Balik lagi ke LiteSpeed Cache. Untuk membuka browser cache, Anda buka LiteSpeed CacheBrowser.

Pada bagian Browser Cache SettingsBrowser Cache, untuk mengaktifkan browser cache. Anda hanya perlu merubah OFF ke ON seperti gambar 4 di bawah.

Berapa lama file-file statis tersebut disimpan di browser?

Anda bisa setup di bagian Browser Cache TTL (Time To Live). Hitungannya detik. Sebaiknya Anda masukan saja seberapa sering file statis di browser Anda akan update. Dalam kasus saya karena tidak terlalu sering, saya simpan satu bulan.

LiteSpeed browser cache settings
gambar 4. LiteSpeed browser cache settings

Anda bisa membaca detail lengkap pengaturan browser cache di dokumentasi LSCache.

Auto minify

Pada dasarnya web dibangun dari tiga komponen utama. HTML, JavaScript, dan CSS. Saya yakin Anda tahu ketiga jenis komponen ini.

Nah, cara menulis HTML, JavaScript dan CSS memiliki aturan-aturan sendiri.

Sebagai manusia yang menulis kode dari tiga komponen tersebut, manusia sebenarnya hanya peduli pada readability-nya. Apakah mudah dibaca orang lain atau tidak.

Nah terkadang, karena keterbaasan manusia, orang yang menulis kode HTML, JavaScript, atau CSS bisa saja menulisnya dengan “komentar” yang menjelaskan untuk apa kode ini…

…atau menulisnya kurang efisien (Kodenya panjang-panjang).

Nah di-sinilah masalahnya.

Semakin panjang kode, kode tersebut akan di proses (oleh browser) dengan waktu yang lebih lama. Dengan resource (CPU + Memory) yang lebih banyak juga…

…ini juga yang menyebabkan beberapa web yang optimasinya buruk bisa membuat komputer panas.

Masalah ini bisa kita selesaikan dengan optimasi ketiga komponen tersebut, HTML, CSS, dan JavaScript.

Tidak perlu menjadi developer. Cukup mengerti konsep dasar ini, saya yakin Anda bisa mengoptimasinya dengan LiteSpeed Cache.

Optimasi HTML

Masuk ke LiteSpeed CachePage OptimizationHTML Settings.

Untuk mengoptimasi HTML, Anda hanya perlu merubah HTML Minify dari OFF ke ON.

Jika Anda memakai Google Fonts, LSCache juga menyediakan fitur load fonts-nya secara asynchronous.

Anda juga bisa men-disable WordPress Emoji. Saya rasa, fitur ini useless.

Sisanya biarkan saja OFF. Kenapa? karena jika kita aktifkan berpotensi membuat fitur-fitur lain menjadi broken. Aktifkan jika Anda tahu apa yang Anda lakukan.

Anda bisa membaca lengkap pengaturan optimasi HTML di dokumentasi LiteSpeed Cache.

Optimasi CSS

Masuk ke LiteSpeed CachePage OptimizationCSS Settings.

Untuk mengoptimasi CSS, Anda hanya perlu merubah CSS Minify dari OFF ke ON.

Tetapi LiteSpeed Cache bisa lebih dari sekedar minify. Sepertinya mereka paham betul permasalahan web developer untuk optimasi CSS.

Permasalahan dari CSS adalah efiesiensi-nya. Pada kenyataannya setelah install plugin ini itu, setiap plugin memiliki CSS-nya masing-masing.

Akibatnya apa?

Jika file CSS jadi banyak, maka requestnya ada banyak juga.

Dan tebak apa?

Beberapa halaman mungkin saja tidak perlu CSS yang di-load tersebut. Jadinya CSS yang segitu banyaknya di-load tidak berguna sama sekali. Malah memberatkan load web.

Untungnya LiteSpeed memiliki fitur ajaib.

CSS Combine

Fitur ini akan menggabungkan semua file-file CSS dalam satu file CSS saja. Anda aman untuk mengaktifkan fitur ini.

Pada bagian Generate UCSS, fitur ajaib ini akan me-remove CSS yang tidak dipakai pada halaman tertentu. Nantinya, setiap halaman memiliki CSS-nya masing-masing.

Load CSS Asynchronously

Fitur ini akan membuat CSS di load tanpa menunggu antrian file-file lain. Dengan begitu browser dapat me-render halaman dengan lebih cepat.

Optimasi JavaScript

JavaScript bisa dibilang adalah mesin dalam sebuah website atau blog. JavaScript memegang peran krusial, jika JavaScript dalam sebuah web broken, sangat mungkin bahwa web tersebut tidak bisa diakses.

Untuk bagian optimasi, Anda harus berhati-hati menggunakannya. TIdak semudah menggantu OFF ke ON.

Masuk ke LiteSpeed CachePage OptimizationJS Settings.

Yang paling aman Anda bisa mengaktifkan JS Minify. JS Minify tidak merubah banyak, tugasnya hanya menghapus kode komentar, whitespace yang tidak diperlukan, dan semicolon. Tujuannya agar file JavaScript lebih kecil saja.

Sisanya bisa anda OFF.

Pengaturan optimasi JavaScipt di LiteSpeed Cache
gambar 5. Pengaturan optimasi JavaScipt di LiteSpeed Cache

Jika Anda ingin mencoba optimasi JavaScript lebih jauh, syaratnya Anda harus mengerti JavaScript terlebih dahulu.

Atau…

Anda bisa berkonsultasi dengan saya, saya sendiri sudah terbiasa koding JavaScript.

Object cache

Salut jika Anda masih membaca tulisan ini. Sampai titik ini seharusnya Anda sudah belajar 6 SKS jika kuliah formal.

Okeh, selanjutnya adalah Object Cache.

Apa si maksud Object?

Object di sini maksudnya adalah file logical yang sifatnya kompleks. Jika HTML dan CSS adalah file-file yang statis dan simpel. Nah yang dimaksud kompleks seperti apa sih?

…contohnya adalah hasil query dari database.

Apa maksudnya?

Tulisan blog atau data-data blog itu disimpan dalam sebuah database. Dan untuk mengaksesnya mengunakan query atau perintah khusus.

Setiap request query, resource-nya berbeda-beda. Ada yang ringan, ada yang berat, ada yang sangat berat. Dan koneksi ke database ini sangat mahal.

Nah, bagaimana jika untuk setiap query-query yang sama, kita tidak perlu me-request langsung ke database. Kita bisa menyimpan hasil-hasil dari query tersebut ke dalam sebiah text khusus…

…sehingga nantinya, kita hanya perlu me-request ke text khusus tersebut.

Tidak ada koneksi ke database artinya web jadi jauh lebih ringan.

Bagaimana Object Cache bekerja
gambar 6. Bagaimana Object Cache bekerja (sumber gambar: https://www.gigaspaces.com/blog/in-memory-cache/)

Untungnya, untuk membuat object cache dengan LiteSpeed Cache sangatlah mudah. Masuk ke LiteSpeed CacheObject.

Pada bagian Object Cache, untuk mengaktifkan-nya Anda tinggal mengganti OFF ke ON. Itu saja dan semuanya sudah di-handle dibelakang layar oleh LiteSpeed.

Fitur pembeda LiteSpeed cache

Apa yang membedakan LiteSpeed Cache plugin dengan plugin sejenis?

LiteSpeed cache adalah plugin pelengkap untuk server yang memakai LiteSpeed web server. LiteSpeed web server ini di-design sedemikian rupa untuk mengoptimasi aplikasi-aplikasi yang ditulis dengan PHP contohnya seperti WordPress.

Web server ini sangat cepat bahkan lebih cepat dari Apache dan Nginx.

LiteSpeed Web server 12x lebih cepat dari Nginx dan 84x lebih cepat dari Apache
gambar 7. LiteSpeed Web server 12x lebih cepat dari Nginx dan 84x lebih cepat dari Apache

Untuk hosting yang mendukung LiteSpeed sendiri, sudah banyak. Rekomendasi saya Dewaweb atau IDCloudHost. Selain saya sudah mencobanya sendiri, dua hosting ini sudah tersertifikasi LiteSpeed partner.

Optimasi gambar

Karena saya memakai LiteSpeed Enterprise webserver, saya bisa memakai fitur ini unlimited. Selain pada paket Enterprise, fitur ini dibatasi.

Okey, jadi begini…

Sejatinya, gambar yang Anda upload di WordPress. WordPress tidak optimasi gambarnya. Support WordPress terhadap file gambar juga terbatas.

Gambar yang diupload jika ukurannga 1MB, yang ditampilakan akan tetap 1MB. Artinya halaman akan di-load dengan berat.

Bagaimana jika gambar yang kita upload 1MB, bisa ditampilkan dengan ukuran 100KB?

Kita bisa saja memakai plugin lain untuk optimasi gambar agar ukurannya lebih kecil dan dirubah ke format gambar yang lebih efisien. Tetapi biasanya berbayar dan memberatkan server.

Nah, dengan memakai LiteSpeed server + LiteSpeed Cache plugin, kita tidak perlu khawatir.

LiteSpeed akan mengoptimasi gambar yang kita upload di server cloud mereka, yang artinya tidak akan memberatkan server kita.

Masuk ke LiteSpeed CacheGeneral Settings. Anda wajib memiliki Domain Key sebelum optimasi gambar.

Domain Key LiteSpeed Cache
gambar 8. Domain Key LiteSpeed Cache

Setelah memiliki Domain Key, masuk ke LiteSpeed CacheImage Optimization. Buka tab Image Optimization Settings.

Pada halaman ini, yang paling penting yang harus Anda aktifkan adalah Auto Pull Cron, Optimize Original Images, dan Create WebP Versions. Sisanya biarkan OFF.

Auto Pull Cron

Fitur ini akan membuat optimasi gambar di server cloud LSCache setiap kali Anda melakukan upload gambar. Jadinya Anda tidak perlu manual optimasi lewat dashboard.

Optimize Original Images

Ketika kita upload gambar, WordPress tidak akan optimasi gambar itu. Mengaktifkan fitur ini, nantinya setiap gambar yang diupload. LSCache akan mengoptimasi gambar tersebut.

Akan ada dua file gambar, yang original dan hasil optimasi. Anda masih bisa memilih nantinya ingin menampilkan yang mana.

Create WebP Versions

Gambar yang Anda upoad akan di konversi ke WebP. WebP ini adalah format gambar yang lebih efisien di banding JPG dan PNG. Dengan kualitas yang sama, tetapi ukurannya bisa jauh lebih kecil.

Untuk memeriksa apakah setting ini berhasil, Anda bisa membuka tab developer tool. Lalu buka kolom gambar.

Perbandingan sebelum dan setelah di-optimasi dengan format gambar WebP
gambar 9. Perbandingan sebelum dan setelah di-optimasi dengan format gambar WebP

Lazy Load Image

Lazy Load atau Lazy Loading memunkinkan pengunjung blog hanya me-request gambar yang tampil di layar saja. Contohnya, jika pengunjung tidak scroll ke bawah, browser tidak akan request gambar-gambar yang ada di bawah.

Masuk ke LiteSpeed CachePage Optimization. Buka tab Media Settings

Agar Lazy Load bisa bekerja dengan baik, selain menyalakan, kita juga perlu specify secara eksplisit ukuran gambar.

Untungnya, Anda tidak perlu repot-repot manual memberikan attribut size secara manual. Di halaman yang sama Anda bisa aktifkan Add Missing Sizes.

Selebihnya, di halaman Media Settings ini adalah fitur-fitur pemanis saja. Tidak berpengaruh ke performa web atau blog.

QUIC CDN

CDN biasanya adalah fitur yang berbayar. Tetapi di LiteSpeed Cache, jika Anda memakai LiteSpeed Webserver Anda bisa memakai fitur ini gratis.

Perlu di catat, saya tidak memakai fitur ini. Alasannya karena server saya dan target audience saya adalah Indonesia. Saat ini saya memakai server IDCloudHost region Indonesia.

Tetapi, jika Anda ingin mengaktifkan fitur CDN ini, caranya mudah.

Masuk ke LiteSpeed CacheCDN. Buka tab QUIC.cloud CDN Setup

Anda harus memiliki akun di QUIC.cloud. Setelah itu, Anda bisa link akun QUIC.cloud Anda dengan LiteSpeed Cache.

Link QUIC.cloud dengan LiteSpeed Cache
gambar 10. Link QUIC.cloud dengan LiteSpeed Cache

Masuk ke LiteSpeed CacheCDN. Buka tab CDN Settings. Di bagian ini sekarang Anda bisa aktifkan QUIC.cloud CDN dari OFF ke ON.

Menghapus cache / purge cache

Ada kalanya kita ingin melihat langsung perubahan yang sudah kita lakukan pada blog kita. Tetapi jika mengaktifkan fitur cache, perubahan tidak langsung terlihat oleh pengguna. Note, ada TTL (Time to Live).

Bagaimana cara invalidate cache?

Kita bisa memanfaatkan fitur purge cache. Jika Anda memakai Admin Toolbar, purge cache bisa langsung diakses.

Purge cache dari Admin Toolbar
gambar 11. Purge cache dari Admin Toolbar

Anda juga bisa akses purge cache dari LiteSpeed CacheToolbox.

Kesimpulan

Saya sangat puas dengan kombinasi LiteSpeed webserver + LiteSpeed cache plugin. Hasilnya sangat bagus. Beban server menjadi ringan dan blog ini bisa diakses dengan sangat cepat.

Hosting yang support LiteSpeed Enterprise juga cukup banyak, Anda bisa melihatnya di halaman hosting partner LiteSpeed. Saya sendiri memakai Dewaweb dan IDCloudHost, keduanya sudah tersertifikasi dan memakai LiteSpeed Enterprise.

Pada studi kasus yang saya lakukan, dengan mengoptimalkan LiteSpeed Cache saya bisa mendapat skor sempurna 100/100 dan semua metriks Core Web Vitals berwarna hijau.

Selanjutnya Saya akan membahas bagaimana mengoptimalkan LiteSpeed Cache dan Cloudflare.

So, jangan lupa untuk subsribe ke blog ini, bisa melalui email dengan mengisi optin di bawah, RSS Feed, Google News, atau dengan berkomentar di halaman ini dan cek subscribe.

Happy blogging 🎉🎉🎉

28 pemikiran pada “Panduan lengkap cara optimasi LiteSpeed Cache WordPress plugin”

  1. Saya pengguna litespeed, saya belum oprek lebih dalam, dan baru sekedar menyambungkan litespeed cache dengan quiccloud. Ibaratnya website belum teroptimasi dengan baik. Setelah saya jalan-jalan kesini, ketemu artikel mengenai litespeed cache, penjelasannya mudah dipahami dan cukup jelas. Mantap sekali ya.

    Balas
    • Thank you udah berkunjung dan berkomentar kak. Tadi komentarnya double, saya approve yang ini aja. Soalnya ada avatarnya 😄

      Syukurlah kalo bisa bantu, in case ada kesulitan nanti boleh bang di follow-up di sini… hehe

      Happy blogging

      Balas
    • Thank you, senang bisa membantu. Goalmya si saya pengen nantinya pembaca bisa setup sendiri tanpa, gak sekedar ikut2an tutorial, hehe. 🙂

      Balas
  2. Saya berencana untuk migrasi ke wordpress belakangan ini, tapi masih mengumpulkan informasi mengenai hal hal yang mesti dipersiapkan, dan banyak sekali saya temui tips optimasi kecepatan situs dan salah satunya ini (Optimasi LiteSpeed Cache WordPress). Thanks untuk informasi bro. ~Tweet Ilmu

    Balas
    • Betul, kalo ngomongon migrasi hosting gak lepas dari pro sama cons nya. Termasuk hosting yang mensupport fitur2 yang kita cari, seperti LiteSpeed optimized hosting.

      Kalo perlu bantuan let me know ya kak. Semoga membantu.

      Balas
  3. aku bukan penggunga wordpress, sih. cuma artikel ini sangat informatif dan bermanfaat jika suatu waktu aku migrasi ke wordpress hehe

    Balas
  4. Kebetulan di blog saya pakai WP Super Cache, sebenarnya sih saya juga belum oprek2 tentang plugin tersebut, setelah baca tentang lite speed, fungsinga komplet juga, jadi pengen install dan optimasi juga.

    Balas
    • Betul bang. Plugin cache ujung2nya gitu juga. Yang jadi pembeda kalo LiteSpeed ada optimasi gambar sama lazy-load.

      Install aja bang, kalo ada yg kurang jelas saya siap bantu.

      Balas
  5. Keren Ka Nadiar, saya juga lagi belajar membersihkan cache, eh dapet artikel ini. Sangat membantu sekali. Step by step nya saya coba jalankan. Thankyou, Ka.

    Balas
  6. Di salah satu web hosting yang saya pakai ada pilihan redis dan ada juga LiteSpeednya di cPanelnya. Apa saya perlu aktifkan keduanya atau salah satunya aja ya?

    Balas

Tinggalkan komentar