Jika Anda pengguna Elementor, semoga presentasi ini dapat berguna untuk teman2 semua. Presentasi ini mengenai cara optimasi kecepatan website yang menggunakan Elementor & WordPress.

1. Best Practice
ElementorOptimization
For WordPress
—

2. Disclaimer:
1. Cara &alatoptimasisetiaporangbisaberbeda
2. Hasiloptimasidipengaruhiolehbanyakhal:server (hosting),tema, plugindll
3. Saya bukanSpeedExpert,tapipraktisiWordPress(nontechie)

3. Page SpeedOptimizationTestingTools:
1. GT Metrix
2. GooglePage SpeedInsights
Goals:
Bukanuntukdapatskorpalingbagus,tapiutamanyamenganalisafaktoryang
berpotensimembuatwebsitelambatdanmencarisolusinyauntukkenyamanan
USER

4. BELUMDIOPTIMASI

5. SUDAH DIOPTIMASI

6. Elementor Optimization Process
6BasicSteps
1. Activate all Elementor settings related to performance on
the Experiments & Advance tab
2. Set Global Fonts to Default
3. Convert images to Webp files on the fly (Use Optimole
plugin)
4. Lazy load images, especially for Image Background CSS
(Use Optimize More Images)
5. Delay unused CSS (Use Optimize More CSS )
6. Activate the Litespeed cache plugin & Enable the
Litespeed Web Cache Manager on the cPanel

7. AlwaysBuild websites with a Performance Mindset
ImportantNotesbeforedoingoptimization
1. Gunakan server yang solid
2. Gunakan tema dan plugin WordPress yang ringan
3. Optimasi Font
4. Optimasi Gambar
5. Gunakan SVG icons
6. Buat tampilan Hero section (Above the fold) yang
sederhana dan fokus terhadap konversi
• Hindari JS di area Hero (Slider / Carousel)
• Gunakan powerful image, Headline & CTA
7. Buat tampilan website yang Hemat HTML DOM
dengan cara menggunakan Flexbox Container &
Widget seperlunya (Layout Optimization)
• Kurangi penggunaan widget Spacer atau
Column (container) kosong untuk membuat
jarak
• Gunakan padding / margin utnuk membuat
jarak
• Gunakan widget tersedia untuk membuat
beberapa element (Contoh: Image Box / Icon
Box)

8. LessisMORE
ThankYou