Cara lajukan website jenis WordPress dibawah 2 saat, admin hanya guna 1 plugin sahaja. Korang kena fokus, try & error dan faham akan jenis website WordPress korang serta jenis web server atau web hosting korang guna.
UPDATE: Panjang sangat nak baca? Korang boleh tengok LIVE di Facebook saya disini.
Selain tu, design web juga mempengaruhi kelajuan website korang. Jadi design pun kena ada cara. Nanti admin share posting pasal User Interface (UI) dan User Experience (UX). UI dan UX ni sangat berkait dengan web design.
Bergantung pada Test tools mana korang nak guna. GTMetrix, PageSpeed Insight atau ThinkWithGoogle.
Sebelum kita pergi ke cara-cara lajukan website, korang kena faham apa itu cache dan pastikan korang guna jenis web server hosting dibawah:
- LiteSpeed Web Server (Pakej Web Hosting yang menawarkan Web Server LiteSpeed)
- Minimum 1 vCPU dan 2GB ram bagi pengguna Virtual Private Server (VPS)
- Jika korang guna Shared (Premium, Business dan apa sahaja nama) Hosting atau WordPress Hosting, pastikan korang guna dari Hosting Provider yang boleh dipercayai dan yang paling penting adalah laju. Boleh baca 5 Web Hosting Malaysia Yang Terbaik & Mesra Pengguna.
- Paling penting, tahu guna WordPress. Install, uninstall, tahu baca menu dan sebagainya. Nak belajar WordPress boleh baca Kursus WordPress Yang Trusted & Terbaik ni.
Tak tahu guna web server atau web hosting jenis apa? Cuba tanya hosting provider korang. Nak tukar dan pindah hosting atau nak upah admin untuk buat web optimization ni?
Boleh WhatsApp admin di 0167072335 atau pilih sahaja TOP 3 web hosting provider yang admin senarai di dalam link diatas.
Apa itu Cache?
Sebelum kita pergi ke cara-cara lajukan website korang, korang kena faham apa itu cache? Cache ni adalah komponen hardware atau software yang menyimpan data supaya data tersebut dapat load dengan cepat jika di-request lagi atau di masa akan datang.
Contoh jika korang layari laman web Facebook kali pertama, browser korang akan download cache ni kedalam komputer, laptop atau smartphone korang.
Jadi bila korang layari laman web Facebook ni semula, data yang korang download dulu akan load terus di komputer, laptop atau smartphone korang.
Tak perlu download lagi cache tu kecuali, jika ada pengubahsuaian atau update yang dilakukan oleh Facebook.
Jika terdapat pengubahsuaian atau update oleh Facebook contohnya, dia tukar design ke, buang menu ke, tambah menu ke, jadi cache baru akan di-download semula oleh browser korang dan disimpan didalam komputer, laptop atau smartphone korang.
Cara Lajukan Website WordPress Menggunakan Plugin LS Cache dari LiteSpeed
1. Pasang plugin LS Cache. Pergi ke menu Plugins -> Add New dan taip sahaja LS Cache di Search Plugin form tu seperti dibawah.
Klik button Install Now dan Activate plugin LS Cache ni terus.
2. Pergi ke menu LiteSpeed Cache -> General dan tekan button Request Domain Key. Kita akan send request pada QUIC.cloud server untuk dapatkan domain key.
Kegunaan domain key untuk kita optimize image, guna CDN dan banyak lagi. Biasanya kita akan dapat domain key dalam 5-10 minit. Korang boleh cek lepas 5-10 minit dengan pergi ke page General ni semula.
Jangan lupa ON kan setting Guest Mode, Guest Optimization dan Save Changes. Automatically Upgrade dan Notifications tu terpulang pada korang nak on atau tidak.
Automatically Upgrade ni dia akan auto-update plugin LS Cache dan Notifications tu akan tunjuk berita terkini tentang versi terkini, bugs dan promosi.
Server IP tu masukkan IP Address server korang contoh macam 123.123.21.1. Korang boleh tengok kat hosting panel Server IP korang. Kalau korang pakai CPanel, boleh tengok gambar dibawah.
3. Pergi ke menu Cache dan ON kan Cache Mobile jika design atau URL web korang berbeza dalam versi mobile dan dekstop.
Admin ON sebab design web admin berbeza dengan dekstop. Ada parts seperti widget admin yang keluar di Dekstop dan di Mobile tidak keluar. ON setting ni juga jika web korang bukan jenis Responsive.
Lain-lain tu biar je default dan pergi terus ke tab ESI.
4. Di tab ESI ni pula, jika web server hosting korang adalah LiteSpeed Enterprise (Ada beza OpenLiteSpeed dengan LiteSpeed Enterprise ya), korang boleh ON kan Enable ESI ni.
ESI ni dia akan cache dalam page yang dynamic ataupun page yang tak boleh cache seperti page checkout, cart dan sebagainya. Dia akan exclude form-form seperti comment form, checkout form dan sebagainya didalam ESI Blocks.
Jadi ada sesetengah part dalam page yang dynamic (page yang sepatutnya kena exclude cache) boleh di cache dengan ESI ni dan mengecualikan parts-parts seperti form dan sebagainya.
Jangan lupa pergi ke tab WooCommerce untuk ON kan juga fungsi ESI untuk WooCommerce. By default, biasanya fungsi ni memang sudah ON jika korang menggunakan Plugin WooCommerce.
5. Pergi ke tab Object dan ON setting Object Cache. Method korang boleh pilih Memcached atau Redis. Jika korang pilih Memcached, port korang mestilah 11211 dan jika korang pilih Redis, port dia mestilah 6379. Save Changes dan selesai.
Object Cache ni sangat penting sebab fungsi dia adalah menyimpan keputusan data dari database yang di minta oleh pengguna web korang supaya dia boleh load dengan cepat di komputer, laptop atau smartphone pengguna web korang.
Cara ni dapat mengurangkan beban kepada server web hosting korang.
P/S: Tak semua provider web hosting ada fungsi Object Cache ni. Jika Status korang lihat failed, cuba hubungi hosting provider korang samaada mereka ada pasang ke tidak memcached atau redis ni.
6. Pergi ke tab Browser dan jangan lupa ON kan Browser Cache kemudian tekan button Save Changes.
*Bab CDN admin langkau dulu sebab CDN ni adalah pilihan jika cara-cara disini masih tidak berkesan sangat melajukan website korang. InshaAllah posting akan datang, admin akan share pasal CDN dan cara pasangnya.
7. Pergi ke menu Image Optimization dan pergi ke tab Image Optimization Settings terus. ON kan setting-setting berikut:
- Auto Request Cron – Dia akan request secara automatik dari server korang ke server QUIC.cloud untuk optimize image yang ada dalam website korang.
- Auto Pull Cron – Dia akan tarik image yang telah dioptimize di server QUIC.cloud dan set terus di website korang secara automatik.
- Optimize Original Images – Dia akan optimize image asal korang upload. Optimize ni maksudnya dia kecilkan saiz fail image tu kepada minimum.
- Remove Original Backups – Dia akan buang image asal yang korang upload dan gantikan image yang telah dioptimizekan.
Bergantung juga dengan pilihan korang. Kalau korang rasa nak buat manual, dan tak nak libatkan Cron Job server atau WordPress korang, korang boleh OFF Auto Request Cron dan Auto Pull Cron.
Begitu juga kalau korang nak simpan image original dalam hosting korang dan cuma nak optimize sahaja, OFF kan sahaja setting Remove Original Backups.
Seterusnya, ON kan setting-setting berikut:
- Create WebP Versions – Dia akan optimize dan convert images korang ke format WebP iaitu format gambar khas untuk lihat di internet yang lebih kecil saiznya dan lebih efisyen.
- Image WebP Replacement – Dia akan gantikan format jpg, png gambar korang ke format WebP. Ingat, format WebP lebih ringan dan lebih kecil berbanding jpg dan png.
Jangan tekan save changes dulu, ON kan dulu WebP For Extra srcset. Ini bermaksud, dia akan replace image format lain seperti jpg, png yang berada di luar website korang kepada format WebP.
Contoh, jika korang tidak upload image korang di website korang tapi korang guna link image yang di hos di tempat lain, maka dengan setting ini dia akan tukar image tadi kepada format WebP.
Korang juga boleh set kan kualiti image korang di WordPress Image Quality Control. Default value pun dah ok iaitu 82 tapi kalau korang rasa nak kualiti cantik, korang boleh naikkan sikit kepada 92.
Kalau korang rasa macam kualiti terlebih cantik pula, boleh kurang kan 82 ke 72.
Ingat, jika kurang kualiti gambar akan kurang cantik dan saiz gambar akan berkurangan. Jika lebih kualiti gambar akan lebih cantik tapi saiz gambar juga akan meningkat. Jangan lupa Save Changes lepas dah set semua.
Untuk manual tanpa ON setting Auto Request Cron dan Auto Pull Cron, korang boleh pergi terus ke tab Image Optimization Summary dan tekan button Send Optimization Request.
Lepas tu korang kena cek balik kat sini dalam 10 minit – 60 minit, bila button Pull Image tu boleh tekan, korang tekan button Pull images tu.
Lihat di Image Information sebelah kanan untuk lihat adakah image optimization korang dah selesai sepenuhnya, jika 100% bermakna dah selesai.
PERHATIAN!
Page Optimization dapat membuatkan design web korang tidak dipaparkan dan berfungsi dengan betul. Pastikan setiap setting korang ON, korang kena ingat dan ON kan satu demi satu kemudian cek dan test.
Best practice adalah, ON satu setting, cek design dan fungsi web korang di dekstop dan mobile. Jika ok, korang boleh teruskan ON setting seterusnya.
Jika TAK OK korang boleh OFF, cari puncanya seperti CSS, JS atau Image dan kemudian excludekan CSS, JS atau Image tu di bahagian Page Optimization > Tuning (untuk CSS dan JS) dan Page Optimization > Media Excludes (untuk image).
8. Setting berkait dengan minify dan combine CSS admin akan langkau kerana setting ini sangat teknikal dan banyak perlu dikaji kerana setiap web css mereka tidak sama.
Admin hanya on setting Load CSS Asynchronously sahaja kerana fungsi ini dia akan optimize CSS kita menggunakan service QUIC.cloud.
Fungsi Load CSS Asynchronously ni, web page kita akan load dengan cepat kerana CSS dan HTML tidak akan diproses secara serentak tetapi web korang akan dipaparkan tanpa sebarang format (kosong hanya text sahaja).
Jadi bagi mengelakkan berlakunya paparan tanpa sebarang format (text sahaja), service QUIC.cloud ni dia telah hasilkan Critical CSS yang berfungsi memaparkan kandungan bahagian atas dengan betul.
Perlukan Bantuan atau Khidmat Melajukan Website WordPress Anda?
Susah sangat nak buat step-step diatas atau pening kepala asyik buat tak jadi?
Boleh upah Admin serendah RM300 sahaja. Boleh dapatkan quotation disini.
