Panduan LiteSpeed Cache Untuk PrestaShop

Sekarang mungkin Anda sudah mulai familiar dengan Litespeed Cache. Jika Anda belum tahu, software dari LiteSpeed ini dapat membantu Anda mempercepat website Anda dengan teknologi caching. Jika Anda belum tahu apa itu caching, Anda bisa membaca artikel kami, Pengenalan Cache dan Jenis-Jenisnya.

LiteSpeed Cache untuk PrestaShop

Bagi Anda pemilik website PrestaShop, LiteSpeed Cache sudah tersedia untuk PrestaShop.

LSCPS berkomunikasi dengan LiteSpeed ​​Web Server dan LSCache untuk menyimpan dan menyajikan copy halaman web statis yang dinamis. Ini dapat sangat membantu website Anda untuk mengurangi waktu loading agar semakin cepat.

Lalu apa saja yang bisa dilakukan LiteSpeed Cache di website PrestaShop? Berikut adalah beberapa hal yang dapat dilakukan LiteSpeed Cache untuk Prestashop:

• LiteSpeed Cache untuk Prestashop (LSCPS) memiliki cara kerja yang sama dengan LiteSpeed Cache untuk CMS lainnya. LSCPS menggunakan kemampuan caching super cepat karena dibangun langsung ke LiteSpeed Web Server. Ini tentunya berbeda dengan modul cache PretaShop lainnya. Modul cache PrestaShop lainnya masih membutuhkan potentially-resource-intensive PHP untuk bisa bekerja.
• Dalam cara kerjanya, LiteSpeed Cache untuk PretaShop sendiri akan secara otomatis membuat cache halaman-halaman website berikut dengan GET request atau permintaan GET (termasuk AJAX GET): Home, Categories, Products, CMS, New Products, Best Sales, Suppliers, Manufacturers, Prices Drop, dan Sitemap.
• Informasi pengguna dapat di-cache secara pribadi melalui blok ESI dan otomatis dihapus ketika informasi berubah. Dukungan untuk cart dan sign in sudah bersifat built-in. Itu berarti bahwa ketika pengguna yang masuk mengunjungi halaman produk, halaman produk juga disajikan dari cache.
• Modul pihak ketiga lainnya yang berisi informasi pribadi dapat dengan mudah ditambahkan.
• Update di area admin toko akan secara otomatis memicu purge atau pembersihan halaman terkait di cache.
• Cache dapat secara manual dihapus dari admin PrestaShop
• LiteSpeed Cache untuk PrestaShop mendukung beberapa toko, multi-bahasa, multi-currency, geolocation, dan mobile view.
• Copy halaman terpisah dapat di-cache untuk beberapa kelompok logged-in users yang berbeda.

Cara Menginstall LiteSpeed Cache Untuk PrestaShop

Sebelum Anda menginstall LiteSpeed Cache di PrestaShop, ada beberapa hal yang harus diperhatikan. Website PrestaShop Anda harus memiliki LiteSpeed Web Server Enterprise Edition 5.2.1 Build 7 atau versi selanjutnya dan LSCache Module.

Instalasi LiteSpeed Cache Untuk PrestaShop

• Konfigurasi server dan/atau virtual-host-level cache root dan cache policy dengan mengatur setup Anda di bagian Web Server Configuration.
• Matikan juga module page caches lainnya yang tidak akan bisa bekerja sama dengan LSCPS
• Download plugin LiteSpeed Cache untuk PrestaShop
• Login ke Admin PrestaShop, masuk ke Modules > Modules & Services, kemudian klik Upload a Module.
• Pilih zip file LSCPS.
• Aktifkan module dengan masuk ke LiteSpeed Cache > Settings dan atur pilihan Enable LiteSpeed Cache ke YES.

.htaccess Update

Ketika Anda mengaktifkan atau menon-aktifkan LiteSpeed Cache dari plugin, file .htaccess akan secara otomatis di update. Tetapi jika updatenya gagal (biasanya karena file permission), Anda bisa juga mengupdate-nya secara manual.

Di bagian atas file .htaccess yang ada di root document instalasi PrestaShop, tambahkan kode berikut:

# LITESPEED_CACHE_START Do not remove this comment line, LiteSpeedCache plugin will automatically update this block

<IfModule LiteSpeed>

CacheLookup on

</IfModule>

# LITESPEED_CACHE_END

Mengkustomisasi LiteSpeed Cache Plugin untuk PrestaShop

Ada beberapa widgets dan fitur PrestaShop yang membutuhkan kustomisasi sendiri sebelum mereka bisa digunakan dengan LSCPS. Berikut ini adalah kustomisasi yang bisa Anda lakukan di PrestaShop v1.6 dan v.1.7.

Kustomisasi LiteSpeed Cache untuk PrestaShop v1.6

Widgets dan fitur berikut membutuhkan kustomisasi sebelum Anda bisa digunakan dengan LSCPS:

• Viewed Products Block
• Compare Products Feature
• Blockcart Template

Matikan Viewed Products Block

Menggunakan Viewed Products Block memang tidak direkomenadasikan karena ini tidak cache-friendly. Anda bisa mematikan ini di area module list.

Update Template for Compare Products Feature

Jika Anda menggunakan fitur Compare Product, Anda perlu men-define block ESI agar mereka bisa bekerja dengan baik setelah LSCPS diinstall.

Buka template file yang sesuai di editor. Default template biasa ada di themes/default-bootstrap/product-compare.tpl tetapi jika Anda menggunakan tema kustom, ini akan ada di folder tema itu sendiri. Cari text berikut ini: {count($compared products) }. Setiap Anda menemukan text seperti di atas, tambahkan hooks LiteSpeed ESI agar terlihat seperti di bawah ini:

{if $comparator_max_item}

<form method="post" action="{$link->getPageLink('products-comparison')|escape:'html':'UTF-8'}" class="compare-form">

<button type="submit" class="btn btn-default button button-medium bt_compare bt_compare{if isset($paginationId)}_{$paginationId}{/if}" disabled="disabled">

<span>{l s='Compare'} (<strong class="total-compare-val">{hook h="litespeedEsiBegin" m="lsc_compareproduct" field="comparedcount"}{count($compared_products)}{hook h="litespeedEsiEnd"}</strong>)<i class="icon-chevron-right right"></i></span>

</button>

<input type="hidden" name="compare_product_count" class="compare_product_count"

value="{hook h="litespeedEsiBegin" m="lsc_compareproduct" field="comparedcount"}{count($compared_products)}{hook h="litespeedEsiEnd"}" />

<input type="hidden" name="compare_product_list" class="compare_product_list" value="" />

</form>

{if !isset($paginationId) || $paginationId == ''}

{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}

{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}

{addJsDef comparator_max_item=$comparator_max_item}

{addJsDef comparedProductsIds=$compared_products}

{/if}

{/if}

{addJsDef comparedProductsIds=$compared_products}

Kustomisasi Blockcart Template

Jika permintaannya sampai ke back end, sebuah pop-up overlay akan muncul jika sebuah item di add ke keranjang. Jika request di-serve dari cache, overlay tidak akan muncul, walaupun cart-nya diupdate dengan benar. Ini akan muncul di tema default-bootstrap dan lainnya. Ini juga bisa disebabkan oleh smarty template active overlay counter. Ketika konten di-serve dari block ESI sebagai request terpisah, counter value akan menjadi 2. Jadi jika Anda ingin overlay ini untuk terus muncul, Anda perlu memodifikasi smarty template theme Anda.

Modifikasi your_active_theme/modules/blockcart/blockcart.tpl

Ganti dengan line berikut ini:

{if !$PS_CATALOG_MODE && $active_overlay == 1}

<div id="layer_cart">

Ganti line berikut:

{if !$PS_CATALOG_MODE && $active_overlay == 1}

Menjadi:

{if !$PS_CATALOG_MODE && $active_overlay}

Sekarang pop-up overlay akan terus muncul. Jika Anda mengganti atau mengupdate theme, Anda perlu melakukan ini lagi.

Kustomisasi PrestaShop v1.7

PrestaShop v1.7 memperkenalkan elemen {widget} dan {widget_block} yang dapat digunakan dalam template Smarty secara langsung.

Untuk memastikan ada space untuk widget, Anda harus mendefinisikannya sebagai blok ESI. Saat ini, ini tidak dapat dilakukan secara otomatis. Anda harus menempatkan hook LSCache secara manual untuk menandai awal dan akhir setiap blok ESI di dalam template. LSCache bergantung pada hook ini untuk memicu injeksi ESI.

Saat ini hanya berdampak pada keranjang (ps_shoppingcart) dan blok login (ps_customersignin) pada saat penulisan ini.

Widgets sebagai Blok ESI

The Cart (ps_shoppingcart) dan Login (ps_customersignin) blok sudah memiliki hook yang ditentukan dalam template “klasik” default sehingga tidak perlu mengubah file template untuk blok-blok tertentu dalam template tertentu. Jika ps_shoppingcart dan ps_customersignin tidak dipicu melalui hooks, tetapi melalui {widget} atau {widget_block}, Anda harus memperbarui file template secara manual.

Surround {widget name = “ps_customersignin”} dengan hook ESI seperti:

{hook h="litespeedEsiBegin" m="ps_customersignin" field="widget"}

{widget name="ps_customersignin"}

{hook h="litespeedEsiEnd"}

Jika widget juga menyertakan parameter hook, Anda harus menyertakannya dalam litespeedEsiBegin juga. Misalnya, {widget name = "module_name" hook = "specific_hook"}

akan berubah menjadi

{hook h="litespeedEsiBegin" m="module_name" field="widget" hook="specific_hook"}{widget name="module_name"}{hook h="litespeedEsiEnd"}

Widget Blocks akan menjadi Blok ESI

Untuk {widget_block}, jika ada kode html apa pun, Anda harus menyisihkannya ke dalam file template. Jadi ini:

{widget_block name=”module_name”}Smarty / html{/widget_block}

Menjadi:

{hook h="litespeedEsiBegin" m="module_name" field="widget_block" tpl="template_path.tpl"}{widget_block name=”module_name”}Smarty / html{/widget_block}{hook h="litespeedEsiEnd"}

Dimana konten <template path>.tpl cocok dengan apa yang ditulis pada Smarty/html section. Ini memperbolehkan Anda untuk menggunakan ESI untuk memberi ruang untuk widget dan mengumpulkan konten lagi nantinya.

Mencoba LiteSpeed Cache Plugin untuk PrestaShop

Untuk melihat apakah halaman website Anda sudah disajikan dari LSCSP, Anda bisa melakukan langkah-langkah di bawah ini:

• Navigasi website Anda dan buka browser’s developer tools
• Klik tab Network pada inspector
• Refresh halaman
• Di tab lain, masuk ke cache manager dan purge cache Anda
• Kembali ke tab sebelumnya, reload halamannya, dan klik resource pertama yang ada di daftar di halaman inspector. Resource ini berupa file HTML dan mungkin terlihat seperti http://example.com/ atau /.
• Anda seharusnya menemukan x-LiteSpeed-Cache: miss dan x-LiteSpeed-Cache-Control:public, max-age=1800 dan x-LiteSpeed-Tag: F, B.1. Jika Anda melihat ini, berarti LSCache sudah aktif dan halaman ini akan dicache untuk visitor-visitor selanjutnya.
• Jika Anda me-reload halaman Anda untuk kedua kalinya, Anda akan melihat x-LiteSpeed Cache: hit. Dengan melihat ini berarti halaman website sudah disajikan dari cache dan LiteSpeed Cache untuk PrestaShop sudah dikonfigurasi dengan benar.

Catatan: Jika Anda melihat x-LiteSpeed-Cache ada lagi setelah Anda melakukan purging, ini mungkin terjadi karena seseorang mengunjungi halaman website tersebut setelah Anda melakukan purge, tetapi sebelum Anda me-refresh halaman untuk mengeceknya.

Simpulan

Di artikel ini kami sudah membahas bagaimana cara menginstall, mengaktifkan, mengkustomisasi, dan mencoba LiteSpeed Cache Plugin untuk PrestaShop. Selain itu PrestaShop, LiteSpeed Cache juga tersedia untuk CMS lain seperti LiteSpeed Cache untuk Joomla dan LiteSpeed Cache untuk WordPress. Tidak hanya itu, LiteSpeed juga tersedia untuk CMS lainnya seperti Magento, Drupal, XenForo dan MediaWiki. Dewaweb sudah menyediakan LiteSpeed Cache untuk pelanggan hosting murah Dewaweb, sehingga Anda hanya perlu mengaktfikan dan mengkonfigurasinya. Dewaweb akan terus membahas dan memberi panduan tentang LiteSpeed Cache untuk CMS lainnya jadi jika Anda menggunakan CMS yang sudah disebutkan di atas, baca terus blog kita ya! Semoga membantu!