Cara Praktis Membuat Loading Wordpress Ringan dan Lebih Cepat

Ngomong-ngomong soal blog, adakah resolusi baru yang akan kamu jalankan untuk menambah jumlah pengunjung saat ini? Kalau belum bagaimana kalau saat ini kita mencari tahu cara mengoptimalkan performa Wordpress supaya lebih ringan dan mudah diakses?

Kebetulan saya pun sedang melakukan hal yang sama, dipikir-pikir kenapa tidak sekalian saja membuat tulisan supaya teman-teman bisa paham konteks dari pentingnya membuat performa Wordpress lebih baik lagi.

Kenapa Performa itu Penting?

Sebagian besar blogger mungkin mengamini, tahu atau sedikitnya pernah mendengar bahwa masalah performa punya pengaruh terhadap SEO dan traffic. Kalau menurut kamu bagaimana? Menurut saya sih itu benar karena faktanya:

1. Tanpa Optimasi Wordpress akan Bermasalah

Platform CMS seperti Wordpress berjalan secara dinamis, di mana performanya akan ditentukan oleh kinerja server (back-end) yang akan bergantung kepada cara kita menjalankan aktivitas yang berkaitan dengan Wordpress itu sendiri.

Misalnya saja konten, tema, plugin bahkan jumlah traffic yang jika digabung akan mempengaruhi proses server side scripting (php, database) yang pada akhirnya akan mempengaruhi waktu muat halaman.

2. Keterbatasan Teknologi dan Perangkat Pengguna

Jika ada hal penting yang harus kita ketahui tentang pengunjung blog maka kita harus mau memperhatikan kenyamanan mereka, karena faktanya sebagian besar traffic blog didominasi oleh perangkat mobile entry-level dengan sumber daya terbatas dan koneksi lambat.

Dengan kondisi seperti itu sudah bisa kita bayangkan pengalaman mereka ketika mengakses halaman website yang berat dan memerlukan waktu muat yang cukup lama. Tentu bukan pengalaman yang menyenangkan bukan?

3. Kehilangan Banyak Pengunjung

Menurut data yang Google miliki, 53% kunjungan web versi mobile yang memerlukan waktu loading lebih dari 3 detik akan ditinggalkan pengunjung. Jika kita berpegangan pada data tersebut maka setiap website yang tidak dioptimasi beresiko kehilangan pengunjung dalam jumlah yang cukup signifikan.

Resiko tersebut akan menjadi lebih besar karena Google sendiri mengikutsertakan faktor kecepatan dalam algoritmanya sebagai salah satu faktor untuk menilai ranking atau peringkat halaman di mesin pencari.

Dengan mempertimbangkan poin-poin beserta data yang ada di atas sebenarnya kita sudah bisa menilai betapa besarnya pengaruh performa blog terhadap jumlah pengunjung yang akan datang.

Kalaupun itu masih kurang kamu bisa melihat sendiri lonjakan pengunjung meutiarahmah.com setelah melakukan optimasi. Cukup signifikan bukan? Pun dengan website besar seperti Pinterest dan Instagram versi web yang pada akhirnya bisa mencetak lebih banyak conversion rate.

Sekarang tinggal tanya diri sendiri… Mau mengambil resiko kehilangan pengunjung, atau mulai benah-benah dan mencari sumber masalah yang membuat Wordpress berat dan lemot?

Bagaimana Cara Membuat Wordpress Cepat dan Ringan?

Rasanya sudah jadi rahasia umum kalau pengguna Wordpress self-hosted sering dibuat frustasi oleh masalah performa. Wajar juga sih, apalagi tidak semua penggunanya paham seluk-beluk Wordpress yang sifatnya sangat teknis.

Susah, ribet dan pastinya bikin pasrah…

Tapi tahu tidak kalau sebenarnya membuat website dan blog menjadi cepat itu tidak serumit yang dipikirkan, apalagi kalau kamu adalah pengguna Wordpress yang secara teknis lebih dimudahkan dalam segala urusannya dengan bantuan plugin.

Optimasi yang selama ini dianggap susah ternyata hanya terdiri dari 2 hal yang sederhana saja, yaitu meringankan beban server (back-end) dan penyajian konten statis (front-end) di perangkat pengguna. Yuk langsung saja simak dan praktikan melalui roadmap di bawah ini.

Back-end

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. Memilih Hosting Tercepat

Membuat website ringan dan cepat bagaikan merakit sebuah mobil balap. Kita harus bisa memastikan setiap bagian yang digunakan memang didesain untuk kecepatan. Misalnya mesin, yang dalam hal ini bisa kita sejajarkan sebagai hosting.

Lalu seperti apa sih ciri-ciri hosting tercepat itu?

Cara mengenalinya mudah kok. Biasanya hosting bagus dan tercepat itu menyediakan teknologi yang relevan dengan kebutuhan saat ini. Misalnya seperti:

• Penyimpanan SSD. 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. HTTP/2 adalah sebuah protokol jaringan terbaru yang secara khusus dibuat agar jalur komunikasi antara website dan pengguna menjadi lebih cepat dan singkat.
• Cache di sisi Server. Sistem cache yang saya maksud ini bukanlah cache yang umumnya dipasang melalui plugin, melainkan sistem yang terintegrasi dengan web server itu sendiri. Contohnya Varnish pada Nginx atau Litespeed di Apache.

Kira-kira seperti itulah standar minimun sebuah hosting yang pas untuk kebutuhan saat ini. Jadi kalau ada yang mengaku terbaik namun di bawah standar yang saya sebutkan di atas bisa jadi itu cuma gimmick marketing saja.

Oh ya, 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. Gunakan Tema dan Plugin dengan Bijak

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 3 hal 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 melalui internet. Salah satu contohnya seperti artikel perbandingan performa tema dari Colorlib.
• Hindari plugin berat dan selalu gunakan hanya untuk untuk hal-hal yang krusial, misalnya yang berhubungan dengan SEO, keamanan dan performa itu sendiri.

Gampang kan? Setidaknya dengan catatan tadi kamu bisa mendapatkan fitur sesuai kebutuhan tanpa harus mengorbankan kinerja Wordpress.

3. Cache di Sisi Server

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.

Sayangnya object cache sangat jarang ditemukan pada layanan shared hosting yang digunakan oleh blogger seperti kita pada umumnya. Jadi kalau hosting yang sekarang digunakan tidak mendukung fitur tersebut pilihannya ya pindah.

…tapi bukan berarti tidak bisa.

Selain bisa pindah ke VPS murah kamu juga bisa menggunakan layanan cloud hosting yang lebih ringan biayanya. Dewaweb misalnya, yang bisa saya katakan unik karena untuk saat ini adalah satu-satunya shared hosting yang menyediakan opsi redis sebagai object cache eksternal yang terintegrasi dengan LiteSpeed Cache.

4. Memanfaatkan HTTP/2

Anggap saja halaman ini adalah paket yang terdiri dari ratusan mainan lego yang dikemas secara terpisah dalam gudang server. Ada html, javascript, css, font dan gambar. Menurut kamu apa yang harus dilakukan server pada lego-lego tersebut?

Kalau tujuannya mempersingkat waktu, maka idealnya server harus menyatukan lego-lego tersebut ke dalam sebuah kemasan yang ringkas di mana browser bisa menerimanya dengan cepat tanpa harus mondar-mandir untuk mengambil lego satu per satu.

Nah, hal tersebut hanya bisa dilakukan jika servernya punya protokol jaringan HTTP/2, jadi pastikan dahulu kalau hosting yang kamu gunakan sudah mendukung.

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 compress sendiri biasanya sudah bekerja secara otomatis.

Sepengetahuan saya plugin yang bisa melakukan hal ini sangat jarang, tapi bukan berarti tidak ada. Salah satu yang saya gunakan adalah HTTP/2 Server Push . Kalau kamu menemukan yang lain boleh di-share melalui kolom komentar.

5. Gunakan Layanan Pihak Ke-3 (opsional)

Tidak wajib tapi kalau dilakukan bisa lebih meringankan beban server. Maksudnya sih layanan pihak ke-3 ini adalah untuk menggantikan fitur-fitur yang sebelumnya menggunakan bawaan dari Wordpress, seperti kolom komentar dan fitur pencarian.

Comment system dan fitur pencarian yang ada di Wordpress bekerja dengan mengambil informasi dari database. Bayangkan jika ada ratusan request pada kedua fitur tersebut secara bersamaan? Tentu bisa bikin gempor server…

Layanan disqus sendiri bisa langsung menggunakan plugin tapi untuk algolia memang ada beberapa tahap untuk mempersiapkannya. Kalau mau mencobanya silahkan baca di panduan cara memasang algolia instan search di Wordpress.

Front-end

Jika tahap pertama tadi lebih difokuskan untuk mereduksi beban server maka pada bagian ini kita akan mencari cara agar output yang dihasilkan oleh proses di sisi server bisa ditindaklanjuti oleh perangkat pengguna dengan cepat.

1. CSS dan Javascript

Apapun platform-nya website tidak akan pernah luput dari penggunaan css dan javascript karena tanpa keduanya maka website akan sangat membosankan, baik dalam hal tampilan maupun interaksinya.

Yang akan kita lakukan saat ini adalah membuat susunan dan struktur keduanya dalam koridor yang ideal agar browser pengunjung mampu memprosesnya secara cepat, dengan cara:

• Hindari Render Blocking Resources. Javascript dari yang berasal dari tema dan plugin yang terpasang tidak selalu dalam posisi yang ideal. Kondisi seperti itulah yang disebut dengan render blocking resource di mana konten dan tampilan blog bisa tertunda akibat penempatan javascript yang kurang tepat. Jalan terbaik yang bisa dilakukan adalah memindahkan javascript dari <head> ke posisi penutup tag </body> atau di bagian footer.
• Minify dan Bundling. Suka atau tidak tema dan plugin yang digunakan kamu saat ini membawa banyak aset css dan javascript eksternal yang pada akhirnya bisa menjadi masalah bagi perangkat pengguna. Dilema bukan? Dihilangkan salah dibiarkan pun salah. Satu-satunya solusi yang paling masuk akal adalah membuatnya jadi seringkas mungkin dengan cara menghapus baris kosong serta spasi di setiap asset tersebut (minify) dan menyatukan aset sejenis yang terpisah (bundling)
• Menghapus Duplikasi dan Aset yang Tidak Terpakai. Hal lain yang menjadi nilai minus dari tema dan plugin Wordpress adalah duplikasi atau keberadaan css dan javascript pada halaman yang sebetulnya tidak membutuhkan aset tersebut. Cara mengakalinya memang agak tricky karena kita harus benar-benar tahu betul mana yang duplikasi dan mana yang tidak terpakai. Salah menghapusnya malah bisa menyebabkan malfungsi pada bagian tertentu yang ada di blog kamu.

Ketiga poin di atas sebenarnya bisa dilakukan secara manual, tapi menurut saya sih sebaiknya hindari, apalagi jika kamu tidak memiliki bekal pengetahuan yang cukup.

Sebagai gantinya kamu bisa memanfaatkan plugin seperti Scripts to Footer—memindahkan javascript, Merge + Minify + Refresh—minify/bundling, dan Asset Cleanup—menghapus aset yang tidak diperlukan.

2. Menyajikan Gambar Secara Efisien

Di balik foto atau gambar ilustrasi yang biasa kita sajikan dalam setiap artikel ternyata menyimpan masalah tersendiri yang ujung-ujungnya membuat halaman kita menjadi lemot. Penyebabnya bukan soal banyak sedikitnya gambar yang disajikan tapi lebih kepada cara penyajian yang keliru.

Serve Scaled Image

Masalah yang sering timbul dari penggunaan gambar adalah ketidakefisienan proses yang harus dilakukan browser untuk menampilkan gambar tersebut.

Karena secara default, Wordpress hanya menyajikan 1 sumber gambar yang ukurannya bisa jadi tidak sesuai dengan layar perangkat pengunjung.

Katakan saja gambar yang diunggah berukuran 720 piksel. Apakah ideal jika pengguna smartphone yang layarnya kecil harus mengunduh sumber gambar yang ukuran dan beratnya dua kali lipat dari yang semestinya?

Optimasi yang paling ampuh bisa dilakukan dengan memasang plugin yang secara otomatis akan memproses unggahan gambar menjadi beberapa ukuran yang berbeda. Dengan cara tersebut tag <img> pada html pun bisa menampilkan opsi ukuran yang lebih variatif sehingga browser bisa memilih sumber ukurannya paling sesuai.

Lazyload

Sebenarnya saya masih bingung untuk menerjemahkan istilah ini, tapi kalau dilihat dari fungsinya sih lazyload adalah sekumpulan perintah javascript yang ditujukan agar browser menunda pemuatan gambar pada bagian yang belum terlihat pada layar.

Salah satu contohnya bisa dilihat pada halaman berikut ini.

Seperti yang kamu lihat halaman tersebut memiliki 2 gambar, tapi ketika pertamakali terbuka browser hanya mengunduh gambar yang terlihat saja, sedangkan yang belum terlihat akan ditunda hingga pengunjung menggulirkan layar pada bagian tersebut.

Kurang keren bagaimana coba. Cukup dengan memasang plugin javascript saja, halaman yang tadinya lemot karena penggunaan gambar secara masif bisa disulap 180° menjadi ringan dan cepat.

Sampai di sini sudah paham kan cara mengelola gambar pada konten? Tunggu apa lagi? yuk segera pasang plugin Responsify—serve scaled image dan Lazy Load WP Rocket—lazyload.

3. Memasang Plugin Cache

Kalau di bagian back-end 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…

WP Super Cache bisa jadi opsi terbaik untuk mengaplikasikan cache di sisi front-end tapi jika hosting yang kamu miliki menggunakan LiteSpeed maka saya lebih menyarankan plugin LiteSpeed Cache. Kalau mau cari perbandingannya silahkan baca di artikel plugin cache terbaik untuk Wordpress yang pernah saya tulis beberapa waktu yang lalu.

4. AMP & PWA (Opsional)

AMP ini pada dasarnya hampir sama dengan cache yang di sebutkan di atas tadi. Boleh dibilang serupa tapi tak sama, karena ada perbedaan dalam hal:

Format

Walaupun ending-nya sama-sama html namun AMP punya struktur yang berbeda dengan html pada umumnya.

Penyimpanan

Setiap konten versi AMP yang ada di website kita akan di simpan di jaringan server milik Google sebagai file statis.

Akses

Konten versi AMP hanya bisa diakses oleh pengunjung dengan perangkat mobile melalui mesin pencari Google.

Google bukan pemain tunggal untuk fitur semacam ini karena Telegram dan Facebook pun punya Instant Articles yang kurang lebih mirip-mirip dengan AMP.

Over all AMP dan aplikasi sejenisnya saya anggap hanya sebatas pertolongan pertama bagi website yang performanya benar-benar bermasalah, karena kalau kamu sudah melakukan optimasi secara menyeluruh maka apapun perangkatnya website akan tetap bisa diakses secara cepat.

Kamu bisa mendapatkan banyak pilihan plugin semacam ini di wordpress.org. Khusus untuk AMP sebaiknya gunakan plugin AMP yang merupakan hasil kolaborasi tim Wordpress dan Google sendiri.

Lanjut ke PWA…

Bayangkan jika Wordpress milikmu bisa diakses secara offline? Mungkin terdengarnya seperti hal yang mustahil, tapi percaya atu tidak semua itu bisa dilakukan dengan mudah hanya dengan memasang plugin yang super ringan.

Pluginnya sendiri ada banyak, tapi yang sudah saya coba langsung sih baru PWA dan Super Progressive Web Apps yang pada dasarnya kedua plugin tersebut bekerja dengan cara memanfaatkan teknologi yang bernama service workers.

Website yang memiliki aplikasi service worker akan memerintahkan browser pengunjung untuk menyimpan aset statis dari halaman website dalam memori perangkat, jadi setiap halaman yang sudah dibuka sebelumnya melalui internet nantinya bisa diakses ulang tanpa koneksi internet.

5. Content Delivery Network (Opsional)

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.

Kenapa opsional? Hemat saya sih fitur CDN ini hanya efisien jika target pengunjung mu memang dari seluruh penjuru dunia, tapi kalau server mu ada di Indonesia dan targetnya pengunjungnya lokal maka CDN akan jadi hal yan mubazir dan tidak efisien.

Misalnya pengunjung dari jakarta diarahkan ke server yang ada di Jepang atau Singapura. Absurd kan?

Eniwey, kalau kondisinya memang membuat mu membutuhkannya maka Cloudflare adalah pilihan yang terbaik. Disamping ‘murmer’ karena gratis, biasanya Cloudflare sudah terintegrasi dengan sistem di hosting.

Kesimpulan

Pada akhirnya kita bisa mengambil kesimpulan bahwa membuat website ringan dan cepat itu merupakan bagian dari sebuah formula penting yang menentukan sukses atau tidaknya tujuan yang kita sandarkan pada website. Formula apa coba?

Yup betul sekali, jawabanya adalah SEO! Mengambil hati Google sekaligus menyenangkan para pengunjung yang akan menjadi:

• Pembaca konten, jika fokusnya hanya untuk menulis
• Sumber pendapatan iklan, jika memasang Adsense atau sejenisnya
• Leads atau pembeli produk jika memang berjualan atau mengikuti program afiliasi

Nah, kalau Wordpress mu masih lemot dan berat tentu akan semakin memperkecil kemungkinan untuk mendapatkan salah satu dari ketiga goal tersebut.

Untuk besar kecilnya pencapaian itu sendiri akan tergantung dari sejauh mana kamu mau mempraktekannya. Mudah, simpel dan tidak memerlukan pengetahuan koding, tapi, kalau ada rangkaian di atas yang tidak bisa kamu aplikasikan, atau pada akhirnya masih lemot maka kemungkinan besar hosting-nya yang bermasalah, dengan kata lain ya harus pindah.