Panduan Optimasi Performa Kecepatan Website (WordPress)

Optimasi Kecepatan halaman adalah bidang yang kompleks, dipengaruhi oleh banyak faktor seperti kecepatan server, pengaturan yang dipilih, jenis konten, dan ukuran gambar pada halaman. Dalam dokumen ini, saya membagikan informasi umum berupa berbagai tips optimasi yang dapat membantu saat membangun konten Anda.

Notes: Tips ini optimal digunakan pada Avada Theme Builder, namun juga berlaku untuk website secara umum, dan tentu saja yang berbasis WordPress.

Ada beberapa faktor yang mempengaruhi kecepatan website secara umum, dan sebaiknya dipersiapkan sebelum meng-implementasikan tips spesifik berikutnya.

• kemampuan server
• pengaturan yang dipilih
• jenis konten, dan ukuran gambar

Saya sebagai awam akan berbagi sedikit, secara spesifik bagaimana meng-optimalkan kecepatan loading web dari segi membangun konten.

Semakin banyak elemen atau konten di halaman, semakin tinggi jumlah nodenya, dan makin banyak yang harus dirender. Ini yang disebut jumlah DOM berlebih dalam uji coba. Apakah semua konten itu benar-benar perlu ada di homepage, atau bisa dipindah ke subhalaman?

“Above the fold” adalah istilah yang berasal dari dunia percetakan, yang mengacu pada bagian atas halaman koran yang terlihat saat dilipat. Dalam konteks web, “above the fold” merujuk pada bagian pertama dari halaman situs yang langsung terlihat oleh pengunjung tanpa perlu menggulir (scroll) ke bawah. Jadi, elemen-elemen yang ditempatkan di area ini dianggap lebih penting karena langsung dilihat pengunjung begitu membuka halaman.

Kecuali jika memang penting untuk desain, hindari menggunakan konten bergerak seperti Slider. Kalau mau gambar hero yang besar, lebih baik pakai gambar statis. Kalau pakai slider, slide-nya biasanya dikendalikan oleh JS dan harus menunggu dokumen lainnya siap dulu sebelum dirender sepenuhnya. Ini bisa menurunkan skor kecepatan halaman. Kalau mau slider tampil di desktop tapi nggak di mobile, kamu bisa pakai rendering kondisional supaya slider hanya tampil di desktop, lalu tambahkan konten terpisah untuk mobile.

Hindari gambar yang terlalu besar (baik dari segi dimensi maupun ukuran file). Gambar memang penting untuk sebuah situs web, tapi pastikan pilihan gambar tersebut sesuai dengan kebutuhan dan sudah dioptimalkan.

Optimisasi gambar berarti mengurangi ukuran file gambar tanpa mengorbankan kualitas terlalu banyak, sehingga gambar tetap terlihat bagus namun tidak memperlambat waktu muat halaman. Dimensi mengacu pada ukuran fisik gambar (misalnya, lebar dan tinggi), sementara ukuran file mengacu pada seberapa besar file gambar tersebut dalam byte (misalnya, KB atau MB).

Gunakan format webp atau svg jika memungkinkan, saya merekomendasikan xncovert untuk mengubah format gambar umum menjadi format yang lebih bersahabat dengan Performa website. Tersedia untuk Windows dan Mac.

Atur gambar terbesar di above the fold untuk melewati lazy loading. Opsi ini tersedia untuk gambar latar belakang container dan elemen gambar, dan hanya dapat digunakan jika pengaturan lazy loading di global disetel ke Avada (yang direkomendasikan). Dengan mengatur gambar untuk melewati lazy load, gambar akan dimuat lebih cepat—ini penting untuk pengukuran LCP (Largest Contentful Paint) dalam Google Core Web Vitals. Jika kamu menghasilkan critical CSS, ini juga akan digunakan sebagai tanda untuk memuat gambar terlebih dahulu (preload), yang dapat meningkatkan waktu muat lebih lanjut.

• Lazy loading adalah teknik yang menunda pemuatan gambar atau elemen lain hingga diperlukan, seperti ketika pengunjung menggulir ke bawah halaman.
• LCP mengukur waktu yang dibutuhkan untuk memuat elemen terbesar yang terlihat di layar, yang berpengaruh pada pengalaman pengguna.
• Critical CSS adalah CSS yang digunakan untuk merender halaman dengan cepat, memastikan elemen yang paling penting ditampilkan lebih dulu.

Penggunaan cerdas warna latar belakang, gradien, dan SVG ringan bisa memberikan dampak besar. Mereka memberikan kesan visual yang menarik tanpa mempengaruhi waktu muat halaman.

• Warna latar belakang dan gradien adalah cara sederhana untuk menambah estetika tanpa menambah elemen berat seperti gambar.
• SVG (Scalable Vector Graphics) adalah format gambar berbasis vektor yang sangat ringan, sehingga cocok untuk tampilan grafis yang tajam dan cepat dimuat, bahkan di perangkat dengan resolusi tinggi.

Hindari animasi di above the fold, karena alasan yang sama dengan menggunakan slider. Menggunakan animasi di bagian bawah halaman masih diperbolehkan, tapi kamu ingin area yang pertama kali terlihat (viewport) dimuat dengan cepat dan stabil tanpa ada gerakan.

Animasi yang terlalu banyak atau terlalu cepat dapat memperlambat waktu muat halaman, dan jika muncul di area yang pertama kali dilihat pengunjung, bisa mengganggu pengalaman pengguna.

Jika kamu memiliki pilihan antara menggunakan gambar latar belakang kolom atau elemen gambar (untuk mencapai hal yang sama), pilihlah elemen gambar. Kemampuan responsifnya lebih baik dan waktu muatnya akan lebih cepat.

Elemen gambar lebih fleksibel, karena dapat menyesuaikan ukuran dengan baik pada perangkat yang berbeda, sementara gambar latar belakang terkadang tidak seoptimal itu dalam hal responsivitas dan bisa memperlambat muatan halaman.

Gunakan Layout Sections untuk setiap area. Ketika Layout Sections digunakan untuk setiap bagian situs (seperti header, bar judul halaman, footer, konten), Avada akan lebih memahami apa yang perlu dirender, sehingga aset dapat dioptimalkan. Elemen builder juga akan tetap terjaga dan diperbarui, sementara fitur lama tidak. Ini sangat penting untuk bagian header untuk menghindari CLS (Cumulative Layout Shift).

• Layout Sections membantu mengorganisir halaman dengan lebih terstruktur, memungkinkan sistem untuk merender elemen dengan cara yang lebih efisien.
• CLS adalah metrik dalam Core Web Vitals yang mengukur seberapa banyak elemen pada halaman bergeser setelah halaman dimuat, yang bisa mengganggu pengalaman pengguna.

Hindari embed kecuali jika benar-benar diperlukan. Misalnya, menyematkan formulir pihak ketiga atau banyak feed Twitter di homepage. Selain harus menunggu mereka untuk dimuat, mereka sering membawa aset tambahan yang mungkin tidak dibutuhkan. Untuk formulir, misalnya, lebih baik menggunakan Avada Forms jika memungkinkan.

• Embed adalah menyematkan konten dari situs atau layanan lain ke halaman webmu, seperti video, formulir, atau feed sosial. Meskipun berguna, ini dapat memperlambat waktu muat karena elemen eksternal ini perlu dimuat terlebih dahulu.
• Avada Forms adalah fitur bawaan dari tema Avada yang memungkinkan kamu membuat formulir tanpa harus mengandalkan layanan pihak ketiga.

Gunakan opsi global Facade untuk elemen YouTube dan Vimeo. Ini akan membuat video hanya dimuat saat diklik, sehingga mengurangi konten yang dimuat di halaman secara keseluruhan.

Dengan menggunakan Facade, video akan terlihat seperti elemen interaktif, tapi file video baru akan dimuat hanya saat pengguna mengklik untuk memutar. Ini membantu menghemat waktu muat halaman dan mengurangi beban pada server.

Pilih-pilih dalam menggunakan plugin tambahan. Semakin banyak plugin yang digunakan, semakin banyak aset yang dimuat dan penggunaan memori yang lebih tinggi. Jika ada opsi untuk menggunakan fitur di Avada daripada plugin, kami sangat menyarankan itu. Aset dari Avada digabungkan untuk lebih efisien dibandingkan dengan plugin.

Plugin memang bisa menambah fungsionalitas, tapi sering kali membawa aset tambahan yang memperlambat waktu muat halaman. Menggunakan fitur bawaan Avada akan membuatnya lebih cepat dan lebih ringan.

Buat set ikon kustom sendiri dan matikan Font Awesome. Jika kamu hanya berencana menggunakan beberapa ikon, coba manfaatkan fitur Avada icons dan buat set ikon ringan milikmu sendiri.

Sebagai alternatif, jika kamu tetap ingin menggunakan Font Awesome, matikan subset ikon yang tidak digunakan di Global Options – Theme Features.

Dengan membuat set ikon kustom, kamu hanya memuat ikon yang benar-benar diperlukan, yang akan mengurangi beban halaman dan mempercepat waktu muat. Font Awesome adalah pustaka ikon populer, tetapi bisa menambah ukuran halaman jika tidak digunakan dengan bijak.

Jika kamu menambahkan CSS kustom di child theme, kemungkinan lebih baik menambahkannya ke custom CSS di global options. Ini bisa berbeda-beda, tapi biasanya CSS child theme dimuat secara terpisah sebagai bagian dari permintaan lain, sementara custom CSS global options dikompilasi ke dalam file utama bersama dengan yang lainnya.

Menambahkan CSS di global options membuat pengelolaan kode lebih efisien dan mempercepat waktu muat, karena semuanya digabungkan dalam satu file. Sebaliknya, CSS di child theme mungkin memerlukan permintaan terpisah yang bisa memperlambat proses pemuatan halaman.

Generate Critical CSS untuk konten above the fold. Opsi ini dapat diaktifkan di Performance Wizard, atau di tab Global Options > Performance. Setelah diaktifkan, kamu bisa menghasilkan Critical CSS untuk halaman tertentu agar konten yang terlihat pertama kali (above the fold) dapat dimuat lebih cepat.

Critical CSS adalah CSS yang diperlukan untuk merender bagian halaman yang pertama kali dilihat oleh pengunjung. Dengan menghasilkan Critical CSS, kamu memastikan bahwa hanya gaya yang dibutuhkan untuk tampilan awal halaman yang dimuat terlebih dahulu, mempercepat waktu muat halaman dan meningkatkan pengalaman pengguna.

Hindari parallax di perangkat mobile. Jika kamu menggunakan efek parallax pada kontainer, matikan untuk versi mobile. Ini tidak akan terlalu mempengaruhi desain halaman, namun efek parallax dapat membuat halaman menjadi kurang responsif di perangkat mobile. Ini sangat penting untuk pengukuran time to interactive dalam Google Core Web Vitals.

Parallax adalah efek visual di mana latar belakang bergerak lebih lambat daripada konten di depannya. Meskipun tampak menarik di desktop, di perangkat mobile parallax bisa memperlambat interaksi dan memperburuk pengalaman pengguna.

Hindari popup otomatis. Popup untuk mendapatkan langganan newsletter mungkin terlihat menarik, tetapi akan dianggap negatif oleh Google PageSpeed Insights karena berdampak buruk pada pengalaman pengguna.

Popup otomatis dapat mengganggu pengunjung, memperlambat waktu muat halaman, dan mempengaruhi interaktivitas halaman, yang semuanya bisa merugikan skor Core Web Vitals dari situsmu. Sebaiknya, buatlah popup yang lebih responsif atau tampilkan dengan cara yang lebih ramah pengguna, misalnya setelah beberapa waktu atau saat pengunjung sedang menavigasi halaman.

Kesimpulan dari semua materi di atas adalah pentingnya mengoptimalkan kecepatan muat halaman dan pengalaman pengguna di website. Beberapa langkah yang bisa diambil untuk mencapai ini antara lain:

1. Kurangi elemen yang tidak perlu – Semakin banyak elemen di halaman, semakin berat proses rendering yang diperlukan. Pastikan setiap elemen yang digunakan memiliki tujuan yang jelas dan tidak membebani halaman.
2. Optimalkan gambar – Gunakan gambar dengan ukuran dan dimensi yang sesuai serta pastikan gambar terkompresi untuk mempercepat waktu muat halaman.
3. Gunakan teknik seperti lazy loading dan skip untuk gambar yang besar – Terapkan lazy loading pada gambar dan video, kecuali untuk gambar penting di bagian atas halaman yang perlu dimuat lebih cepat.
4. Minimalisir penggunaan slider dan animasi – Hindari slider dan animasi di bagian atas halaman karena dapat memperlambat muatannya, terutama pada perangkat mobile.
5. Gunakan fitur bawaan tema (seperti Avada) – Menggunakan fitur tema seperti Avada Forms atau Avada icons lebih efisien daripada plugin pihak ketiga yang membawa beban tambahan.
6. Buat set ikon kustom dan matikan Font Awesome jika tidak dibutuhkan – Menggunakan ikon kustom mengurangi beban karena hanya memuat ikon yang diperlukan.
7. Gunakan critical CSS untuk konten yang terlihat pertama kali – Dengan mengoptimalkan critical CSS, kamu memastikan bagian halaman yang pertama kali dilihat dimuat lebih cepat.
8. Matikan efek parallax di perangkat mobile – Efek parallax bisa memperburuk responsivitas halaman di mobile dan mempengaruhi skor time to interactive.
9. Hindari popup otomatis – Meskipun popup bisa menarik, mereka dapat mengganggu pengguna dan berdampak negatif pada skor PageSpeed Insights.

Dengan mengimplementasikan langkah-langkah di atas, kamu dapat meningkatkan kecepatan muat halaman, mengurangi beban server, serta memberikan pengalaman pengguna yang lebih baik, yang pada akhirnya juga berpengaruh positif pada SEO dan Core Web Vitals.