Ngomong-ngomong soal blog, adakah resolusi baru yang akan kamu jalankan untuk menambah jumlah pengunjung saat ini? Karena saya pun sedang melakukan hal yang sama, dipikir-pikir kenapa tidak sekalian saja dibuat tutorial.
Kali ini tema yang ingin saya kedepankan adalah mengenai cara untuk membuat loading atau waktu muat halaman website Wordpress lebih cepat, beserta konteks dari optimasi tersebut.
Kenapa Website Harus Cepat?
Faktanya, plugin, tema, konten dan jumlah pengunjung adalah beban bagi server dimana Wordpress terpasang. Tanpa optimasi beban tersebut akan membuat website lambat atau bahkan tidak dapat diakses.
Imbasnya pengunjung akan mendapatkan user experience yang tidak menyenangkan, dimana mereka akan menghindari untuk kembali membuka halaman website tersebut. Menurut data yang ada, 53% kunjungan web versi mobile yang memerlukan waktu loading lebih dari 3 detik akan ditinggalkan pengunjung.
Google sadar betul tentang hal tersebut, oleh karena itulah mereka mendorong para pengelola web untuk melakukan optimasi. Sebagai imbalannya mereka akan menampilkannya di peringkat—hasil pencarian yang lebih baik.
Mulai dari Mana?
Kalau sudah paham tentang penting dan hubungannya dengan sumber pengunjung maka selanjutnya adalah mencari tahu apa saja sih yang harus dioptimasi agar loading Wordpress menjadi cepat.
Walau pun terlihat rumit dan susah sebenarnya optimasi yang harus dilakukan sebenarnya hanya terdiri dari 2 hal yang sederhana saja yaitu meringankan beban server (backend) dan cara menyajikannya di browser (frontend).
Optimasi Backend
Kalau saya analogikan sih back-end itu ibarat jantung atau dapurnya Wordpress yang terdiri dari server, aplikasi dan seluruh proses yang terjadi di bagian tersebut. Adapun yang akan kita lakukan saat ini adalah mencari cara untuk membuat sisi server bisa berjalan secara maksimal.
1. Hosting
Membuat loading website ringan dan cepat bagaikan merakit sebuah mobil balap. Kita harus bisa memastikan setiap bagian yang digunakan memang didesain untuk mendukung kinerjanya nanti. Nah, hosting ini adalah salah satu bagiannya.
Biasanya hosting tercepat dan VPS murah itu menyediakan teknologi yang relevan dengan kebutuhan saat ini, seperti:
- SSD (solid state drive) mempunyai kecepatan baca dan tulis yang jauh lebih cepat. Di atas kertas kemampuan tersebut tentu akan mempengaruhi kecepatan server dalam mengolah data.
- HTTP/2 yaitu protokol jaringan terbaru yang secara khusus dibuat agar jalur komunikasi antara website dan pengguna menjadi lebih cepat dan singkat.
- Sistem cache yang terintegrasi dengan web server itu sendiri. Contohnya Varnish pada Nginx atau Litespeed di Apache.
Sebagai tambahan pastikan juga paket yang dipilih benar-benar pas dengan kebutuhan kamu karena nantinya sumber daya (CPU, kapasitas penyimpanan dan memori) yang ada harus seimbang dengan beban dari tema, plugin hingga kepadatan arus kunjungan.
2. Tema dan Plugin
Tema dan plugin yang baik biasanya sudah disertai dengan fitur yang lengkap. Teorinya sih semakin banyak fungsinya makan semakin bagus, tapi jangan lupa juga bahwa hal tersebut bisa berimplikasi pada menurunnya performa.
Biar tidak dilema maka kita harus cari jalan tengahnya dengan berpatokan pada poin-poin berikut ini:
- Tema tersebut harus dilengkapi fitur bawaan yang sesuai dengan kebutuhan, tidak kurang dan tidak lebih. Contohnya jika yang akan kamu buat adalah blog maka carilah tema dengan fitur-fitur yang secara fungsional memang mendukung aktivitas blog, bukan yang lain.
- Pastikan tema dan plugin yang digunakan adalah yang paling ringan diantara sejenisnya. Cara yang paling praktis adalah dengan mencari perbandingan dan review pengguna.
- Hindari plugin berat dan selalu gunakan hanya untuk untuk hal-hal yang krusial, misalnya yang berhubungan dengan SEO, keamanan dan performa itu sendiri.
3. Cache
Fungsi utama dari cache di sisi server atau yang dalam bahasa teknisnya di sebut object cache digunakan untuk mempercepat respon Wordpress dalam menampilkan konten kepada pengunjung, dengan jalan menyimpan informasi tertentu dari database ke sebuah memori khusus dalam jangka waktu tertentu.
Skema ini tentu jauh lebih efisien jika dibandingkan dengan cara lama yang harus mengulang database queries untuk melayani setiap request dari pegunjung, bahkan untuk halaman yang sebenarnya sama.
Kalau mau tahu lebih banyak kamu bisa baca di opsi redis sebagai object cache eksternal.
4. HTTP/2
Pada dasarnya ada 2 hal yang dilakukan oleh HTTP/2 dalam memaksimalkan kecepatan Wordpress, yaitu compress header dan server push resources namun kita hanya perlu mengaktifkan salah satunya saja karena untuk kompresi sendiri biasanya sudah bekerja secara otomatis.
Server push ini pada dasarnya adalah mengirimkan resource—css javascript, font, gambar dll sebelum peramban memintanya, dengan kata lain memotong rantai komunikasi agar halaman bisa lebih cepat tampil di peramban.
5. Microservices
Memecah fungsi dan fitur Wordpress menjadi layanan yang terpisah, misalnya fitur komentar, penyimpanan gambar dan fungsi lainnya. Disqus, Algolia, Cloudinary dan CDN adalah beberapa diantara yang banyak digunakan.
Meskipun tidak wajib tapi kalau dilakukan hal ini tentu bisa lebih meringankan beban server secara signifikan.
Frontend
Jika tahap pertama tadi lebih difokuskan untuk mereduksi beban server maka pada bagian ini kita akan mencari cara agar output dari backend bisa ditindaklanjuti oleh perangkat pengguna dengan cepat.
1. CSS & Javascript
Tanpa pengelolaan yang baik keduanya bisa membuat website menjadi lambat. Karena itu kita harus membuat susunan dan struktur css danjavascript dalam koridor yang ideal agar browser pengunjung mampu memprosesnya secara cepat, dengan cara:
- Memindahkan javascript tepat sebelum penutup tag
</body>atau menggunakan atribut defer dan async. - Menggunakan inline css agar bisa lebih cepat terbaca oleh peramban.
- Minify dan bundling baik css dan javascript untuk mengurangi request aset yang harus diunduh oleh peramban setiap membuka halaman.
- Hapus duplikasi dan css dan javascript yang sebenarnya tidak diperlukan.
2. Image
Sajikan gambar responsif dengan ukuran yang relevan, sehingga ukuran aset yang diunduh peramban lebih efisien. Salah satu cara yang paling banyak dilakukan adalah dengan mengadopsi srcset.
Hal selanjutnya yang berkaitan dengan image adalah penggunaan lazy loading, dimana peramban hanya akan mengunduh gambar pada bagian yang terlihat di layar.
3. Cache
Kalau di bagian backend tadi kita buat memori khusus dari database maka pada bagian ini cache akan kita tujukan untuk menyimpan konten halaman yang berupa html, css, javascript dan gambar. Dengan adanya konten versi cache maka server Wordpress tidak perlu lagi memproses request yang masuk.
4. AMP
AMP ini pada dasarnya hampir sama dengan cache yang di sebutkan di atas tadi, hanya saja berbeda dalam hal:
- Format. Walaupun ending-nya sama-sama html namun AMP punya struktur yang berbeda dengan html pada umumnya.
- Akses. Setiap konten versi AMP akan disimpan di infrastruktur Google karena pada dasarnya diperuntukan bagi pengunjung—dengan perangkat mobile yang berasal dari mesin pencari Google.
5. PWA
Dengan progressive web apps website Wordpress bisa disulap layaknya seperti apikasi native yang:
- Mampu diakses secara instan bahkan ketika offline atau dalam keadaan sinyal yang buruk sekalipun
- Respon yang lebih cepat dengan pengalaman pengguna yang jauh lebih baik
PWA bekerja melalui service worker yang akan memerintahkan browser menyimpan aset statis dari halaman web ke dalam memori perangkat. Sehingga halaman yang sudah dibuka sebelumnya—melalui internet bisa diakses ulang meskipun offline.
6. CDN
Fungsi utama dari CDN adalah menyebarkan konten website (versi cache) ke berbagai tempat di dunia ini. Tujuannya sederhana, yaitu agar pengunjung bisa mengakses konten ke server yang posisinya dekat dengan mereka.
Rangkuman
Nah, enaknya dari Wordpress adalah apapun optimasi yang perlu dilakukan bisa dipraktekan tanpa perlu berurusan dengan koding. Dengan modal plugin dan pengetahuan tentang prosesnya maka semua bisa langsung beres.
Soal berhasil atau tidaknya optimasi yang dilakukan tentu akan tergantung dari sejauh mana kamu mau mempraktekannya.
