Pembuat halaman seperti Elementor menambahkan kemampuan desain visual ke WordPress, tetapi mereka juga memperkenalkan tambahan CSS, JavaScript, dan elemen DOM yang dapat memperlambat waktu pemuatan halaman. Untuk situs yang dibangun dengan Elementor Pro, optimasi kinerja bukanlah opsional—itu berdampak langsung pada pengalaman pengguna, skor Core Web Vitals, dan peringkat mesin pencari.
Dalam panduan ini, kami membahas teknik praktis untuk menjaga situs Elementor Anda tetap cepat, berdasarkan pengujian dan pengukuran yang nyata. Setiap rekomendasi mencakup dampak kinerja yang diharapkan sehingga Anda dapat memprioritaskan optimasi yang paling penting untuk situs Anda.
Memahami Jejak Kinerja Elementor
Sebelum mengoptimalkan, penting untuk memahami apa yang ditambahkan Elementor ke halaman Anda:
| Komponen | Apa yang Ditambahkan | Ukuran Tipikal |
|---|---|---|
| CSS Frontend | Gaya widget, aturan responsif, penataan kustom | 50-200 KB |
| JavaScript Frontend | Animasi, karusel, lightbox, interaksi | 80-150 KB |
| Elemen DOM | Div pembungkus untuk bagian, kolom, widget | 500-3000+ elemen |
| Google Fonts | File font eksternal untuk tipografi kustom | 20-100 KB per font |
| Ikon | Font Awesome atau pustaka ikon kustom | 30-80 KB |
Halaman Elementor yang tipikal menghasilkan 200-400 KB aset frontend tambahan. Dibandingkan dengan halaman yang dibangun dengan editor blok default (Gutenberg), ini mewakili peningkatan 3-5x dalam payload CSS/JS. Tujuan dari optimasi adalah untuk mengurangi beban ini tanpa mengorbankan kualitas desain yang disediakan oleh Elementor.
Langkah 1: Aktifkan Fitur Kinerja Bawaan
Elementor mencakup beberapa pengaturan kinerja yang sering diabaikan oleh banyak pengguna. Arahkan ke Elementor → Pengaturan → Kinerja (atau Elementor → Pengaturan → Fitur di versi terbaru):
| Pengaturan | Apa yang Dilakukan | Dampak |
|---|---|---|
| Pemuatan Aset yang Ditingkatkan | Memuat CSS/JS hanya di halaman yang menggunakan Elementor | Menghemat 100-200 KB di halaman non-Elementor |
| Pemuatan CSS yang Ditingkatkan | Menghasilkan file CSS terpisah alih-alih gaya inline | Mengaktifkan caching browser untuk CSS |
| Lazy Load Gambar Latar Belakang | Menunda pemuatan gambar latar belakang yang tidak terlihat | Mengurangi berat halaman awal sebesar 30-60% |
| Output DOM yang Dioptimalkan | Mengurangi elemen pembungkus yang tidak perlu | 5-15% lebih sedikit elemen DOM |
| Kontainer Flexbox | Mengganti bagian/kolom lama dengan Flexbox yang lebih ramping | 30-50% lebih sedikit elemen DOM per tata letak |
Mengaktifkan semua pengaturan ini adalah optimasi yang paling berdampak untuk situs Elementor mana pun. Jika Anda belum mengaktifkan fitur ini, mulai dari sini sebelum menjelajahi teknik lainnya.
Langkah 2: Gunakan Kontainer Flexbox Alih-alih Bagian
Sistem tata letak lama Elementor menggunakan nesting Bagian → Kolom → Widget, yang menghasilkan banyak elemen pembungkus. Sistem Kontainer Flexbox yang lebih baru menghasilkan HTML yang jauh lebih ramping:
| Metode Tata Letak | Elemen DOM (tata letak 3 kolom) | Kelas CSS |
|---|---|---|
| Bagian + 3 Kolom | ~12 elemen | ~18 kelas |
| Kontainer Flexbox | ~4 elemen | ~6 kelas |
| Pengurangan | 67% lebih sedikit | 67% lebih sedikit |
Untuk halaman baru, selalu gunakan Kontainer Flexbox. Untuk halaman yang sudah ada, pertimbangkan untuk memigrasi tata letak saat Anda mengeditnya berikutnya. Hasil visualnya identik—perbedaannya sepenuhnya ada pada output HTML yang dihasilkan.
Langkah 3: Optimalkan Gambar
Gambar biasanya merupakan aset terbesar di halaman web mana pun, dan halaman Elementor dengan desain yang banyak menggunakan gambar sangat terpengaruh. Praktik utama optimasi gambar:
- Ubah ukuran sebelum mengunggah: Unggah gambar dengan ukuran yang akan ditampilkan. Gambar hero yang ditampilkan dengan lebar 1400px seharusnya tidak diunggah dengan lebar 4000px
- Gunakan format WebP: Gambar WebP 25-35% lebih kecil dibandingkan JPEG dengan kualitas yang sebanding. WordPress 6.x mendukung WebP secara native
- Aktifkan lazy loading: Elementor menyertakan lazy loading untuk gambar. Verifikasi bahwa ini diaktifkan di Pengaturan WordPress → Media → Lazy Loading
- Gunakan gambar responsif: Elementor secara otomatis menghasilkan atribut srcset. Pastikan gambar yang Anda unggah mencakup beberapa ukuran (WordPress menghasilkan ini secara default)
- Kompres gambar: Gunakan plugin optimasi gambar seperti WP Smush Pro untuk mengompres gambar tanpa kehilangan kualitas yang terlihat
Untuk panduan komprehensif tentang optimasi gambar, lihat panduan optimasi gambar WordPress kami.
Langkah 4: Minimalkan Pemanggilan Font
Font kustom menambah permintaan HTTP dan berat file. Setiap keluarga Google Font menambah 20-100 KB tergantung pada jumlah bobot yang dimuat. Untuk mengoptimalkan:
- Batasi hingga 2-3 keluarga font: Satu untuk judul, satu untuk teks tubuh sudah cukup untuk sebagian besar desain
- Batasi bobot font: Muat hanya bobot yang benar-benar Anda gunakan (misalnya, 400 dan 700 alih-alih 100-900)
- Self-host Google Fonts: Unduh font dan sajikan dari server Anda sendiri untuk menghilangkan pencarian DNS ke fonts.googleapis.com. Plugin seperti OMGF atau Perfmatters dapat mengotomatiskan ini
- Gunakan font-display: swap: Mencegah teks tidak terlihat selama pemanggilan font. Elementor menerapkan ini secara default
- Pertimbangkan font sistem: Tumpukan font sistem (seperti -apple-system, BlinkMacSystemFont, Segoe UI) dimuat secara instan tanpa permintaan jaringan
Langkah 5: Kurangi Jumlah Widget
Setiap widget Elementor menghasilkan HTML, CSS, dan berpotensi JavaScript. Mengurangi jumlah widget secara langsung mengurangi berat halaman:
- Gabungkan konten teks: Gunakan satu widget Text Editor dengan judul HTML alih-alih widget Heading + Text Editor terpisah
- Gunakan CSS alih-alih widget: Widget spacer menambah elemen DOM. Gunakan padding/margin pada widget yang berdekatan sebagai gantinya
- Hindari widget duplikat: Alih-alih menyembunyikan/menampilkan widget yang berbeda untuk mobile/desktop, gunakan CSS responsif untuk mengadaptasi satu widget
- Batasi animasi: Animasi masuk menambah pendengar acara JavaScript dan CSS. Gunakan secara selektif pada elemen kunci, tidak pada setiap widget
Langkah 6: Gunakan Plugin Caching
Caching mengubah halaman WordPress dinamis menjadi file HTML statis, menghilangkan pemrosesan PHP dan kueri database pada kunjungan ulang. Plugin caching yang direkomendasikan untuk situs Elementor:
| Plugin | Fitur Utama untuk Elementor | Harga |
|---|---|---|
| WP Rocket | Optimasi CSS/JS, pemuatan malas, pembersihan database, integrasi CDN | $59/tahun |
| LiteSpeed Cache | Caching tingkat server (memerlukan server LiteSpeed), optimasi gambar | Gratis |
| FlyingPress | Self-hosting Google Fonts, hapus CSS yang tidak digunakan, tunda pemuatan JS | $60/tahun |
Fitur "Hapus CSS yang Tidak Digunakan" dan "Tunda Eksekusi JavaScript" dari WP Rocket sangat efektif untuk situs Elementor karena menargetkan CSS/JS berlebih yang dihasilkan oleh Elementor. Dalam pengujian kami, WP Rocket mengurangi beban CSS efektif dari halaman Elementor sebesar 40-60%.
Langkah 7: Hapus CSS dan JavaScript yang Tidak Digunakan
Elementor memuat CSS untuk semua widget yang terdaftar secara default. Dengan Pemuatan Aset yang Ditingkatkan diaktifkan (Langkah 1), ini membatasi CSS pada widget di halaman saat ini. Namun, optimasi lebih lanjut dimungkinkan:
- Hapus CSS yang Tidak Digunakan dari WP Rocket: Menganalisis setiap halaman dan menghasilkan file CSS spesifik halaman dengan hanya aturan yang berlaku
- Tunda JavaScript: Tunda JavaScript yang tidak kritis (animasi, karusel) hingga interaksi pengguna (klik, gulir, tekan tombol)
- Plugin Asset Clean Up: Nonaktifkan CSS/JS plugin tertentu secara manual di halaman di mana mereka tidak diperlukan
Teknik-teknik ini dapat mengurangi beban CSS sebesar 50-70% dan menghilangkan JavaScript yang menghalangi rendering sepenuhnya, menghasilkan peningkatan signifikan pada Largest Contentful Paint (LCP) dan First Input Delay (FID).
Langkah 8: Optimalkan Server dan Hosting
Optimasi frontend hanya dapat berjalan sejauh ini jika waktu respons server Anda lambat. Untuk situs Elementor:
- Gunakan PHP 8.2+: PHP 8.x adalah 15-25% lebih cepat daripada PHP 7.4 untuk beban kerja WordPress
- Aktifkan OPcache: Caching opcode PHP menghilangkan recompilation file PHP
- Gunakan CDN: Sajikan aset statis (CSS, JS, gambar) dari server tepi yang secara geografis lebih dekat dengan pengunjung Anda
- Pertimbangkan hosting WordPress terkelola: Penyedia seperti Cloudways, SiteGround, dan Kinsta mengoptimalkan infrastruktur mereka khusus untuk WordPress
Untuk rekomendasi hosting dan panduan pengaturan, lihat panduan hosting WordPress kami.
Mengukur Hasil Optimisasi Anda
Gunakan alat ini untuk mengukur dampak dari setiap optimisasi:
| Alat | Apa yang Diukur | URL |
|---|---|---|
| Google PageSpeed Insights | Core Web Vitals, skor kinerja, rekomendasi spesifik | pagespeed.web.dev |
| GTmetrix | Waktu muat, ukuran halaman, permintaan, analisis waterfall | gtmetrix.com |
| Chrome DevTools (tab Jaringan) | Ukuran sumber daya individu, urutan pemuatan, hambatan | Terintegrasi dalam browser Chrome |
| WebPageTest | Pem testing multi-lokasi, tampilan filmstrip, metrik lanjutan | webpagetest.org |
Uji sebelum dan setelah setiap optimisasi untuk mengonfirmasi perbaikan. Fokus pada metrik Core Web Vitals ini:
- LCP (Largest Contentful Paint): Target di bawah 2,5 detik
- FID (First Input Delay): Target di bawah 100 milidetik
- CLS (Cumulative Layout Shift): Target di bawah 0,1
Pertanyaan yang Sering Diajukan
Apakah Elementor secara signifikan memperlambat WordPress?
Elementor menambahkan 200-400 KB aset frontend dibandingkan dengan editor default. Ini terlihat tetapi dapat dikelola dengan optimisasi yang tepat. Teknik dalam panduan ini dapat mengurangi dampak kinerja Elementor sebesar 50-70%, mendekatkan kecepatan halaman ke yang dapat dicapai dengan editor blok sambil mempertahankan fleksibilitas desain Elementor.
Haruskah saya beralih dari Sections ke Flexbox Containers di halaman yang ada?
Untuk halaman yang Anda edit secara aktif, bermigrasi ke Flexbox Containers sangat berharga—pengurangan DOM cukup signifikan. Namun, tidak perlu membangun ulang setiap halaman sekaligus. Prioritaskan halaman dengan lalu lintas tinggi (halaman utama, halaman arahan, halaman produk) dan konversi yang lain secara bertahap.
Apakah WP Rocket kompatibel dengan Elementor?
Ya. WP Rocket sepenuhnya kompatibel dengan Elementor dan merupakan salah satu plugin caching yang paling direkomendasikan untuk situs Elementor. Fitur Remove Unused CSS dan Delay JavaScript-nya sangat efektif dalam mengurangi overhead frontend Elementor.
Berapa banyak widget Elementor yang terlalu banyak di satu halaman?
Tidak ada jumlah tetap, tetapi usahakan untuk menjaga ukuran DOM di bawah 1.500 elemen untuk kinerja yang baik. Sebagai pedoman, 30-50 widget di satu halaman adalah tipikal; 100+ widget sering menunjukkan peluang untuk mengonsolidasikan (menggabungkan widget teks, menghapus spacer, menyederhanakan tata letak).
Apakah animasi Elementor mempengaruhi kinerja?
Ya. Animasi masuk menambahkan pendengar acara JavaScript dan transisi CSS. Di perangkat seluler, animasi yang berlebihan dapat menyebabkan jank (stuttering yang terlihat saat menggulir). Gunakan animasi secara selektif—batasi pada elemen kunci yang mendapat manfaat dari gerakan (CTA, sorotan fitur) dan hindari menganimasi setiap widget di halaman.
Bisakah saya menggunakan Elementor dan tetap mendapatkan skor 90+ di PageSpeed?
Ya, dengan optimisasi yang tepat. Dengan mengaktifkan fitur kinerja Elementor, menggunakan Flexbox Containers, mengoptimalkan gambar, menghosting font sendiri, dan menggunakan plugin caching seperti WP Rocket, adalah realistis untuk mencapai skor PageSpeed 90+ di sebagian besar halaman Elementor. Halaman yang banyak gambar mungkin memerlukan upaya optimisasi tambahan.
Bangun Situs Cepat dengan Elementor Pro
Dapatkan Elementor Pro dengan fitur kinerja bawaan, Flexbox Containers, dan pemuatan aset yang dioptimalkan. Pasangkan dengan WP Rocket untuk kecepatan optimal.
Jelajahi Elementor Pro →
