Kecepatan loading halaman website merupakan salah satu parameter User Experience (UX) yang dapat di ukur secara pasti.
Selain itu, kecepatan loading halaman website merupakan salah satu ranking signal dari Algoritma Google yaitu Core Web Vital yang resmi di perkenalkan pada 28 Mei 2020 dan di rilis di pertengan Juni 2020.
Dari sisi pengunjung website pun juga sama. Bayangin kalau visitor yang masuk ke website kalian harus menunggu lama untuk melihat konten kalian, sedangkan mereka punya banyak pilihan website lain di halaman pertama.
Belum lagi kalau ujung-ujungnya website kalian gagal di jangkau karena connection timeout. Gimana gak bete tuh visitor. 😤😤😤
Untuk itu, kali ini kita akan bahas tuntas semua masalah tersebut.
Saya akan rangkum apa saja faktor yang dapat mempengaruhi kecepatan loading halaman website yang menurut saya penting dan berpengaruh.
Time To First Byte(TTFB)
Time To First Byte atau disingkat TTFB adalah sebuah metrik yang mengukur berapa lama waktu yang dibutuhkan user (client) pada saat melakukan request ke server sampai server memberikan response pertamanya.
Ilustrasi sederhanyanya seperti ini. Bayangkan pada saat kalian makan di sebuah restoran.
TTFB bisa kita ibaratkan waktu yang dibutuhkan restoran tersebut pada saat pertama kali kalian menyerahkan menu yang kalian order sampai menu pertamanya datang (biasanya sih minuman).
Sama seperti website, pada saat kalian mengakses sebuah halaman website, ada serangkaian proses sampai akhirnya kalian bisa melihat konten di website tersebut.
Yang saya beri kotak merah itu adalah proses sebelum kalian menerima byte pertama dari request yang kalian minta ke server.
Nilai TTFB yang baik adalah di bawah 800 milisecond atau 0.8 detik, ideal nya 400 milisecond (0,4 detik) karena ada proses lain setelah nya.
TTFB ini mutlak server connection jadi tidak ada pengaruh sama sekali terhadap koneksi internet pengguna (client).
Sebenarnya, TTFB ini adalah bagian dari loading time, jadi masih terbilang sangat luas cakupannya.
Untuk itu kita akan bahas lebih detail lagi beberapa faktor lainnya.
Cache (Di baca KaSh)
Cache adalah komponen software atau hardware yang fungsinya untuk menyimpan data atau temporary data dalam sebuah sistem komputer.
Cache ini sangat bermanfaat untuk meringankan beban kerja CPU server kalian.
Kalau kalian perhatikan gambar diatas di kotak no 2 ada cache.
Sistem akan melihat apakah ada cache yang tersimpan di browser client ataupun diserver untuk request yang diminta.
Dengan begitu server tidak perlu bekerja secara berulang-ulang untuk memproses request yang sama.
Secara general Cache ini ada 2 jenis.
Server Level Cache
Server Caching adalah temporary data yang di simpan di dalam server website, dimana saat client atau visitor melakukan request data yang sama maka server tidak memprosesnya atau meng-compile ulang data sudah di proses sebelumnya.
Server akan mengambil data dari cache dan langsung memberi response ke client.
Ada 3 jenis server cache :
1. Opcode Caching
Opcode Cache adalah ekstensi untuk kode PHP, dimana ekstensi ini akan menyimpan hasil compile function PHP tersebut ke bentuk Bytecodes ke dalam memory server kita.
Nantinya saat terjadi request yang berulang/sama server akan mengambil data dari memory tersebut dan tidak meng-complie semua function tersebut dari awal secara terus menerus.
Opcode ini sangat berfungsi sekali jika themes dan plugin yang kalian gunakan banyak menggunakan function PHP untuk memprosesnya.
2. Object Cache
Object Cache berfungsi untuk menyimpan hasil dari query ke database. Sehingga nantinya server tidak perlu melalukan request query kembali ke database untuk mengambil data yang sama.
3. CDN Cache
CDN cache ini berfungsi untuk menyimpan data server kita ke berbagai lokasi negara. Sehingga saat visitor mengakses website kita, mereka akan mengakses server yang terdekat dengan lokasi visitor kita tersebut.
CDN sangat membantu jika website kita menargetkan audience/visitor dari berbagai negara.
Atau jika kalian menggunakan server yang berlokasi di US atau EU tapi menargetkan audience di Indonesia.
Client-Side Caching (Browser Cache)
Browser cache adalah temporary data yang di simpan di local komputer client baik di local drive atau di memory (RAM), sehingga saat terjadi request yang sama, browser tidak memintanya ke server melainkan mengambil data dari local komputer client.
Jenis file yang di simpat di browser cache:
- Css File
- Javascript File
- HTML File
- Media File
- Dan beberapa jenis multimedia lainnya.
Semua Plugin cache yang kalian gunakan di wordpress sebenarnya hanya meng-handle cache dari sisi Client ini (Browser Caching).
Ya sudah jelas lah yah, mereka tidak punya privilege untuk mengakses server kita.
Jadi kalau kalian test ke web speed testing tools biasanya tidak ada perubahan segnifikan, namun dapat dirasakan oleh visitor yang berkunjung ke website kalian.
Kesimpulannya:
Semaksimal mungkin selalu terapkan cache untuk website wordpress kalian baik server cache dan juga brower cache.
Bagi pengguna share hosting mungkin akan sangat terbatas dari sisi server cache, namun kalian bisa memaksimalkan menggunakan browser cache.
Ada banyak plugin cache yang bisa kalian gunakan yang paling populer dan gampang penggunaannya adalah Litespeed (untuk pengguna server litespeed) dan WP Rocket.
Jangan lupa gunakan CDN cache untuk kalian yang lokasi servernya di US atau EU. Free CDN yang bisa digunakan misalnya Cloudflare dan Quic.cloud (untuk pengguna LiteSpeed)
Page Compression
Page Compression sangat bermanfaat untuk mengkompres data yang di kirim dari server sehingga file yang di terima browser ukurannya lebih kecil.
Karena ukurannya kecil, maka waktu download data-nya lebih cepat.
Sebagian besar web hosting sudah menerapkan compression ini di servernya, namun tidak ada salahnya kalian cek kembali apakah content yang di kirim dari server di kompres atau tidak.
Ada 2 jenis page compression yang paling familiar saat ini yaitu GZip dan Google Brotli.
Untuk cek apakah konten yang kalian download dari server di kompres atau tidak, kalian bisa Inspect Element > Network. Lalu cek bagian halaman page web kalian (biasanya di paling atas).
Lalu cek bagian Content-Encoding di Response Server.
Dari gambar diatas, server mengirimkan data yang di kompres dalam bentuk br (brotli).
Jumlah Request & Ukuran File
Faktor selanjutnya adalah banyaknya jumlah request dan besarnya ukuran file yang di request dari server.
Kedua hal ini sangat berpengaruh khususnya untuk visitor yang memiliki koneksi internet yang tidak terlalu cepat.
Untuk cek berapa banyak jumlah request dan besarnya file request, kalian bisagunakan shortcode ctrl+shift+j di keyboard kalian. Lalu ke tab network dan centang bagian disable cache supaya kita tau berapa besar file yang dikirim dari server.
Reload halaman tersebut, lalu cek di bagian bawah berapa banyak jumlah request yang diminta ke server.
Dilihat dari gambar diatas dibagian bawah paling kiri, ada 49 Request yang masing masing besar file request bisa kalian liat di bagian size.
Lalu di sebelahnya ada keterangan 414 Kb Transferred. Ini menunjukan besarnya file yang di kirim oleh server.
Dan disebelahnya lagi ada informasi 1.1 Mb Resources. Ini menunjukan ukuran file yang sebenarnya.
Kenapa file nya bisa berbeda ? Itu semua karena Page Compression yang kita bahas sebelumnya.
File yang sebenarnya 1.1 Mb di kompres oleh server menjadi 414 Kb sehingga ukuran file yang di download hanya sebesar 414Kb. Setelah di download file tersebut di Ekstrak menjadi 1.1Mb.
Bayangin kalau server kalian tidak menerapkan page compression ini, Maka setiap terjadi request, client harus men-download file sebesar 1.1Mb.
Itu sebabnya page compression sangat penting.
Faktor yang mempengaruhi banyaknya request dan besarnya file request adalah Themes dan Plugin yang kalian gunakan.
Ada plugin yang menerapkan Style dan Script ke wordpress kita, alhasil akan menambah jumlah request yang terjadi.
Untuk Themes bisa kalian cek demo pagenya (kalau yang berbayar), cek berapa banyak jumlah request dan ukuran filenya.
Banyak themes yang mengklaim SEO Themes, namun bagian kecil ini tidak di perhatikan.
Kenapa banyak yang suka themes GeneratePress? ya karena ini.
Frekuensi Request
Selain jumlah request dan besarnya file yang di request, seberapa sering request tersebut terjadi juga berpengaru ke kecepatan loading dari halaman website kalian.
Yang mempengaruhi jumlah frekuensi request ada banyaknya visitor yang masuk kedalam website kalian.
Semakin banyak maka semakin banyak request yang terjadi di waktu yang bersamaan.
Untuk itu penting sekali penggunaan cache dan optimasi diatas untuk mengatasi masalah tersebut.
Jika memang frekuensinya sudah terlalu tinggi, maka akan menyebabkan kerja server yang terlalu berat secara terus menerus. Hasilnya bisa jadi server lama merespon permintaan atau malah servernya down.
Untuk itu, rutin cek/monitor bagaimana kinerja server yang kalian gunakan. Kalau kalian sering melihat data seperti ini dalam kurun waktu yang cukup lama:
Maka coba pertimbangkan untuk meng-upgrade spesifikasi server yang kalian pakai saat ini.
Render-Blocking Resources
Render Blocking Resources adalah kumpulan URL yang mem-blocking browser untuk segera me-render halaman konten website atau Google menyebutnya First Paint.
Posisi URL ini biasanya berada di HTML Tag <head>. Ada 2 jenis URL yang di Flags sebagai blocking resource yaitu script dan stylesheets.
Maksudnya blocking disini adalah browser harus menunggu file css dan javascript tersebut selesai di load sebelum menampilkan konten ke visitor.
Kalau kalian perhatikan gambar diatas, FC (First Paint), FCP (First Content Paint) dan LCP(Larges Content Paint) terjadi setelah semua file css selesai di load.
Yang di baik adalah browser tidak harus menunggu file tersebut selesai di loading, sehingga bisa segera me-render content website tersebut.
Solusinya adalah dengan men-defer (menunda) semua resource yang mem-blocking tersebut.
Render Blocking Resources ini ada pembahasannya sendiri, dimana kalian akan belajar apa itu critical css, unused css, preload, defer, async dan juga solusi mengatasi masalah tersebut, baik menggunakan plugin atau tidak.
Above The Fold
Above The Fold atau on-screen element adalah tampilan halaman website yang dilihat visitor sebelum mereka melakukan scroll.
Sudah optimasi file CSS, JavaScript, Lazy Load, dll, tapi kenapa masih ter-detect Render Blocking? Masalahnya mungkin di Above The Fold ini.
Above The Fold akan mempengaruhi critical element sebuah halaman saat di loading. Yang mana Script, Stylesheet, font image tersebut terpaksa di load agar visitor bisa segera melihat content-nya.
Dengan kata lain walaupun kalian sudah optimasi defer CSS dan JavaScript, Lazy Load, dll, Selama element tersebut berada di Above The Fold, maka tetap akan nge-blocking render.
Contoh yang paling sering terjadi adalah penggunaan fitur Slider yang mana slider ini dijalankan menggunakan javascript. karena posisinya di above the fold, maka javascript tersebut akan segera di loading walaupun kalian defer.
Solusinya, kalian bisa mengurangi fitur animasi atau fungsi javascript di above the fold. Atau untuk javascript kalian bisa menggunakan fitur delay dibandingkan menggunakan fitur defer.
Image, Video & Media lainnya
Menambah media ke dalam konten tentu juga akan menambah jumlah request, yang artinya akan menambah waktu untuk memprosesnya.
Untuk yang menggunakan File Media (Image, Video, Audio, dll), gunakan fitur lazyload agar filter tersebut di loading saat user melakukan scroll dan mendekati file media tersebut.
Cara nya dengan menambah attr loading=lazy pada tag. Namun perlu di ingat juga, lakukan lazy ini hanya pada image yang berada di Below The Fold (Off-Screen View).
Karena seperti yang saya katakan sebelumnya, semua element yang berada di above the fold akan segera di render jadi percuma menambahkan attr lazy di file image tersebut.
Ada banyak juga plugin untuk mengoptimasi file media. Atau kalian bisa menggunakan cara manual menggunakan function PHP atau Javascript.
Kesimpulan
Kecepatan loading halaman website wajib kalian perhitungkan karena saat ini Core Web Vital menjadi salah satu ranking signal di Algoritma Google.
8 Faktor yang saya sebutkan di atas adalah faktor inti yang mempengaruhi kecepatan loading halaman website.
Penggunaan Themes yang ringan, dan mengurangi jumlah penggunaan plugin merupakan cara yang cukup mudah untuk kalian terapkan untuk menghemat resource server kalian dan membuat kecepatan loading halaman website kalian optimal.