Optimasi SastraPro
Untuk memaksimalkan performa Tema WordPress SastraPro, kami merekomendasikan penggunaan beberapa plugin berikut. Plugin-plugin ini akan membantu mengoptimalkan gambar dan mempercepat loading website Anda.
Belum Punya SastraPro?
Lihat halaman produk SastraPro untuk info fitur, demo, dan pembelian.
Plugin yang Direkomendasikan
1. Regenerate Thumbnails
Plugin: Regenerate Thumbnails by Alex Mills
Plugin ini berguna untuk membuat ulang ukuran thumbnail gambar sesuai dengan pengaturan tema SastraPro. Sangat direkomendasikan setelah:
- Menginstal tema SastraPro pertama kali
- Mengubah pengaturan ukuran gambar di WordPress
- Migrasi dari tema lain
Cara Penggunaan:
- Install dan aktifkan plugin Regenerate Thumbnails
- Buka menu Tools > Regenerate Thumbnails
- Klik tombol Regenerate Thumbnails for All Attachments
- Tunggu proses selesai
TIP
Jalankan regenerate thumbnails hanya sekali setelah instalasi tema. Setelah selesai, plugin ini bisa dinonaktifkan atau dihapus.
2. EWWW Image Optimizer
Plugin: EWWW Image Optimizer
Plugin ini mengompresi gambar secara otomatis tanpa mengurangi kualitas visual. Sangat efektif untuk mempercepat loading halaman.
Fitur Utama:
- Kompresi otomatis saat upload gambar
- Bulk optimize untuk gambar yang sudah ada
- Konversi ke format WebP
- Lazy loading gambar
Pengaturan yang Direkomendasikan:
- Install dan aktifkan plugin EWWW Image Optimizer
- Buka menu Settings > EWWW Image Optimizer
- Pada tab Basic:
- Aktifkan Remove Metadata untuk menghapus data EXIF
- Pilih level kompresi yang diinginkan
- Pada tab WebP:
- Aktifkan WebP Conversion untuk format gambar modern
- Klik Save Changes
Perhatian
Setelah mengaktifkan plugin, jalankan Bulk Optimize melalui menu Media > Bulk Optimize untuk mengompresi gambar yang sudah ada.
3. Autoptimize
Plugin: Autoptimize
Plugin ini mengoptimasi file CSS, JavaScript, dan HTML untuk mempercepat loading website.
Fitur Utama:
- Minify dan gabungkan file CSS
- Minify dan gabungkan file JavaScript
- Minify HTML
- Lazy load gambar
- Integrasi dengan CDN
Pengaturan yang Direkomendasikan:
- Install dan aktifkan plugin Autoptimize
- Buka menu Settings > Autoptimize
- Pada tab JS, CSS & HTML:
- Centang Optimize JavaScript Code
- Centang Optimize CSS Code
- Centang Optimize HTML Code
- Pada tab Images:
- Centang Lazy-load images (jika belum menggunakan lazy load dari plugin lain)
- Klik Save Changes and Empty Cache
Penting: jangan centang "Also defer inline JS?"
SastraPro memasang script kecil di <head> yang membaca preferensi tema (data-theme) sebelum halaman dirender untuk mencegah flash dark mode saat loading.
Jika di bagian Opsi JavaScript Anda mencentang "Do not aggregate but defer?", opsi sub "Also defer inline JS?" akan muncul. Biarkan KOSONG (jangan dicentang). Mencentangnya membuat Autoptimize menunda semua script inline, termasuk penentu tema, sehingga data-theme baru diterapkan setelah halaman tampil, lalu muncul kilatan mode gelap (flash) di awal load.
Ringkasnya:
- ☑ Do not aggregate but defer? boleh dicentang (external JS tetap di-defer)
- ☐ Also defer inline JS? WAJIB kosong
Pengaturan CSS lanjutan (disarankan)
Selain pengaturan dasar di atas, aktifkan juga:
- Aggregate all CSS files (tab JS, CSS & HTML): WAJIB aktif. Opsi Inline and Defer CSS tidak berlaku kalau agregasi CSS mati, semua file CSS tetap dimuat terpisah dan memblokir render.
- Inline and Defer CSS (tab JS, CSS & HTML): aktifkan supaya CSS tidak memblokir rendering. Browser tidak lagi menunggu file CSS terunduh sebelum menampilkan halaman.
- Kolom Above the fold CSS: boleh dikosongkan. Kalau kosong, seluruh CSS di-inline ke dalam HTML (HTML sedikit lebih besar, tapi tidak ada request CSS yang memblokir render). Kalau diisi critical CSS (CSS bagian atas halaman), sisanya dimuat async sehingga HTML lebih ramping.
TIP
Setelah mengaktifkan Autoptimize, periksa tampilan website Anda. Jika ada masalah, coba nonaktifkan opsi Aggregate JS-files atau tambahkan script yang bermasalah ke daftar exclusion.
Optimasi Iklan AdSense dan Script Analytics
Iklan dan script analytics adalah penyebab paling umum performa situs menurun. Bagian ini menjelaskan cara meminimalkan dampaknya di SastraPro. Panduan cara memasang kode iklan dan script ada di halaman Konfigurasi SastraPro.
Yang sudah ditangani SastraPro
- Iklan tidak menggeser konten: pemuatan iklan AdSense ditunda sampai halaman selesai dimuat.
- Koneksi ke Google lebih cepat: koneksi ke server Google disiapkan lebih awal.
- Iklan di dalam artikel: hanya muncul di halaman artikel, posisinya bisa diatur.
- Custom Scripts: tersedia kolom header (Google Analytics, Tag Manager) dan footer (script lain) di Customizer, plus opsi menonaktifkan jQuery.
Panduan Iklan AdSense
- Batasi jumlah unit iklan yang terpasang. Rekomendasi tidak lebih dari 3 iklan per halaman.
- Hindari iklan di area paling atas halaman (di atas lipatan). Penempatan terbaik: di dalam konten dan di bawah artikel.
- Nonaktifkan Auto ads AdSense karena penempatannya di luar kendali dan bisa merusak layout. Unit Iklan manual lebih direkomendasikan.
Panduan Script Analytics
- Jangan memasang Google Analytics dan Google Tag Manager bersamaan, pilih salah satu. Memasang keduanya membuat data dobel dan halaman makin berat.
- Pasang kode GA4 (gtag.js) di Customizer > Scripts > Header Scripts.
- Jika hanya butuh statistik pengunjung, pakai analytics ringan seperti Plausible atau Umami.
Urutan Optimasi
Untuk hasil optimal, ikuti urutan berikut:
- Regenerate Thumbnails - Jalankan sekali, lalu nonaktifkan
- EWWW Image Optimizer - Biarkan aktif untuk kompresi otomatis
- Autoptimize - Biarkan aktif untuk optimasi aset
- Optimasi iklan & analytics - Lakukan optimasi sesuai saran di atas
Tips Tambahan
- Gunakan hosting berkualitas - Performa server sangat mempengaruhi kecepatan website
- Aktifkan caching - Gunakan plugin caching seperti WP Super Cache atau W3 Total Cache