Ringkasan Pembahasan WordPress Performance di WPBKS Meetup

Pada hari Sabtu, 21 September 2019 yang lalu komunitas WordPress Bekasi mengadakan meetup di Kire Haus daerah Grand Galaxy City Bekasi. Teman-teman yang datang ada sekitar 15 orang, dan konsep meetupnya adalah diskusi secara kolektif.

Topik yang kita angkat adalah seputar performa WordPress dan terakhir kita ada diskusi singkat mengenai kemanan di WordPress.

Jadi tulisan ini saya buat untuk memberi ringkasan apa yang kita bahas di meetup tersebut.

Analisa Performa WordPress Frontend

Perangkat yang kita gunakan untuk analisa performa sebuah situs adalah:

1. Lighthouse
2. WebPageTest
3. Chrome Developer Tools > Performance
4. Chrome Developer Tools > Coverage

1. Lighthouse

Tools Lighthouse ini sudah tersedia di semua Google Chrome Browser, cara menggunakannya:

Disini ada beberapa Metrics yang perlu kita mengerti:

First Contentful Paint – waktu yang diperlukan pramban untuk melakukan proses memunculkan teks atau gambar pertama.
First Meaningful Paint – waktu yang diperlukan pramban untuk memunculkan konten di layar terlihat.
Speed Index – seberapa cepat konten muncul di layar
First CPU Idle – waktu pertama kali penggunaan CPU telah selesai
Time to Interactive – waktu yang dibutuhkan pramban untuk dapat berinteraksi, contoh klik, scrolling, animasi.
Max Potential First Input Delay – potensial keterlambatan pramban untuk memproses input pada saat sedang melakukan proses rendering.

Target semua orang tentunya performance score yang setinggi mungkin, kalau bisa sempurna 100. Tapi hal ini bukan menjadi patokan utama, sebab yang paling penting adalah bagaimana kita bisa memberikan konten website kita secepat mungkin ke user kita.

2. WebPageTest

Dengan menggunakan WebPageTest kita dapat melihat hal-hal yang lebih teknis daripada Lighthouse.

Sebagai contoh First Byte atau sering disebut Time To First Byte, ini indikator penting buat kita untuk mengukur seberapa cepat web server kita untuk melakukan respons terhadap 1 kunjungan.

Dan ditambah dengan ada waterfall view, disini kita bisa melihat setiap file-file yang didownload oleh pramban kita dalam kunjungan yang pertama kali.

Dari statistik diatas, kita bisa melakukan proses analisa, hal-hal apa saja yang membuat performa web kita terasa lambat. Sebagai contoh file css yang terlalu besar, image yang ukurannya besar dan fonts.

3. Chrome Developer Tools > Performance

Dalam proses development, kita dapat melakukan test performa situs kita untuk melihat seberapa berat proses kerja pramban kita untuk melakukan render situs kita.

Khususnya untuk situs yang menggunakan JavaScript yang banyak, tool ini sangat berguna, karena kita dapat melakukan analisis terhadap waktu yang dibutuhkan script untuk melakukan ekseskusi kode nya.

Di kebanyakan kasus, JavaScript yang di load terlalu banyak dan tidak diperlukan pada saat initial page load. Kita bisa melakukan code splitting dan menjalankan script tersebut saat dibutuhkan saja.

4. Chrome Developer Tools > Coverage

Dalam kebanyakan kasus, khusus-nya pengguna page builder atau plugin slider. Ukuran file css dan js nya terlalu besar atau sering disebut dengan bloated. Padahal kebanyakan dari script tersebut tidak diperlukan oleh pramban dalam melakukan rendering di halaman tersebut.

Untuk melakukan analisa terhadap apa yang dibutuhkan atau tidak, kita bisa menggunakan tool Coverage dari Google chrome browser.

Dari contoh video diatas, penggunaan Coverage dapat kita temukan bahwa file css tersebut, 90% nya tidak digunakan di beranda. Kita bisa memaksimalkannya dengan memisahkan file css untuk layout secara umum, dan untuk tiap-tiap konten.

Performa WordPress Backend

Ada beberapa pertanyaan dari grup, bagaimana melakukan perbaikan performa dari sisi backend. Berikut ringkasannya:

1. Penggunaan Cache, adalah hal yang terakhir dilakukan. Artinya itu bukan solusi pertama yang dilakukan
2. Yang perlu dilakukan adalah menganalisa kode yang dimiliki dan pastikan Query ke database efisien
3. Tidak menggunakan query didalam sebuah loop
4. Semua plugin cache yang ada, hanya akan fokus untuk melakukan cache terhadap query ke database dan membuat page cache
5. Apapun yang kita lakukan dari sisi backend tujuannya adalah agar TTFB (Time to First Byte) serendah mungkin, ideallnya dibawah 1 detik
6. Membaca 10up performance best practice

Sembari kita memesan kopi dan saling bercerita mengenai pengalaman dan hal-hal yang menarik di pekerjaan masing-masing, kita juga ikut membahas sedikit bagaimana faktor keamanan di WordPress.

Keamanan di WordPress

Kita tidak spesifik menggunakan plugin apapun dalam pembahasan kita, karena kita bisa lakukan hal-hal mendasar untuk memproteksi situs WordPress kita:

1. Gunakan username dan password yang random dan terdiri dari minimal 16 chracters.
2. Hindari username yang lemah sepeterti admin, administrator, dll
3. Untuk password coba lakukan tes di haveibeenpwned.com, disana adalah kumpulan password yang dikumpulan dari berbagai macam sumber. Jika password Anda termasuk didalamnya, segera ganti.
4. Selalu audit kode dari plugin atau themes sebelum di install.
5. Periksa plugin atau theme di wpvulndb.com, untuk memastikan plugin aman
6. Selalu lakukan update terhadap WordPress dan plugin.
7. Gunakan fitur proteksi terhadap brute force untuk wp-login.php, biasanya hosting telah menyediakannya, atau bisa menggunakan Cloudflare.

Sekian ringkasan dari hasil diskusi saat WordPress Bekasi Meetup, dan terima kasih buat mas Lulus Kurniawan, telah memberikan kesempatan dapat mengadakan meetup ini. Dan terima kasih buat mas Sofyan Sitorus dan Ridwan Arifandi (sukses buat launch nya bro) yang telah jadi host. Dan terima kasih buat teman-teman yang sudah datang dan berkontribusi.

Sekian dari saya, jika ada pertanyaan bisa komen langsung disini atau via Slack chat di chat.wp-id.org channel #bekasi.