Pertanyaan “Seberapa cepatkah website Anda?”, pasti selalu muncul untuk para web developer. Tantangan sebagai web developer saat ini bukan hanya membangun sebuah back end yang handal ataupun front end yang user friendly / responsive design. Tapi juga memastikan halaman yang diakses oleh pengguna di-load oleh web browser dengan benar dan cepat. Meskipun back end sangat handal dan halaman front end sangat menarik, tapi jika load time dari halaman lambat. Maka bisa dipastikan pengguna akan sangat tidak nyaman dan kemudian meninggalkan website kita.
Apakah berpengaruh terhadap SEO? Ya, kecepatan website tentunya juga merupakan indikator yang diambil oleh Google untuk me-ranking website. Jadi bisa dipastikan, semakin lambat website kita maka semakin tenggelam di mesin pencari Google.
Tip dan trik mempercepat website :
- Cek kembali coding
Untuk memastikan coding yang kita gunakan berjalan optimal, pastikan semua coding berfungsi kalau bisa diperingkas dan tidak ada yang tidak digunakan. Misalnya optimisasi query di database, hindari penggunaan banyak variable, hindari men-load library yang tidak diperlukan termasuk di dalamnya library yang di-load dari link external. Begitupun kalau kita memakai external resource, pastikan tidak ada broken link lebih lengkapnya di sini. - Cache
Cache menjadi cara ampuh untuk mempercepat loading website. Model cache yang pertama adalah menaruh cache di perangkat klien misalnya untuk static resource (js, css, gambar). Cara yang kedua menaruh hasil render dari sebuah halaman di server, artinya ketika seorang pengguna membuka sebuah halaman yang sudah pernah dibuka sebelumnya. Server tidak perlu mengeksekusi kode dari awal sampai akhir, pengguna hanya membuka hasil render dari pengguna sebelumnya. Cara ketiga menggunakan redis cache untuk mempercepat penggunaan struktur data, lebih jelasnya di sini. - Minification script
Hapus semua karakter yang tidak perlu dari kode sumber tanpa mengubah fungsinya. Termasuk karakter white space, karakter baris baru, komentar, dan kadang-kadang blok pembatas, yang digunakan untuk menambahkan pembacaan kode tetapi tidak diperlukan untuk itu untuk mengeksekusi. - Combine external script
Kadang kala kita menggunakan banyak file css dan banyak file js. Usahakan untuk menggabungkan file css menjadi 1 file begitupun untuk file javascript. Sehingga web browser hanya perlu me-request 1 kali saja untuk css atau javascript. - Gunakan CDN untuk static resource
Anda tentunya mesti bayar untuk menggunakan CDN. Tapi dampak yang akan Anda dapatkan akan sangat besar. CDN adalah sistem server terdistribusi yang memberikan halaman web dan konten web lainnya untuk pengguna berdasarkan lokasi geografis dari pengguna, asal halaman web dan server pengiriman konten.
Layanan ini efektif dalam mempercepat pengiriman konten dari situs dengan lalu lintas tinggi dan website yang memiliki jangkauan global. Semakin dekat server CDN dengan pengguna secara geografis, semakin cepat konten akan dikirim ke pengguna. - Optimisasi gambar
Konten gambar biasanya kalau ditotal akan memiliki ukuran yang besar dibandingkan dengan resource yang lain. Untuk optimisasi gambar bisa dilakukan dengan memastikan ukuran gambar sesuai dengan yang diminta, misalnya tidak perlu menggunakan ukuran gambar 1600px x 800px untuk gambar thumbnail 100px x 100px. Kemudian optimisasi dilakukan dengan mengurangi ukuran gambar tanpa mengabaikan kualitasnya. Hal ini bisa dilakukan dengan berbagai macam tool image editing baik yang online maupun terinstal di PC/laptop. - Tambahkan expires header di static resource
Tambahkan http expires header atau cache control di setiap file static resource (gambar, css, js, dll) yang bermaksud untuk menaruh file tersebut di perangkat pengguna dalam jangka waktu tertentu. Sehingga ketika pengguna mengakses website kita kembali, web browser tidak perlu men-load resource dari server dan hanya mengambilnya kembali dari cache. - Gunakan mekanisme lazy loading untuk gambar
Lazy loading adalah pola desain umum yang digunakan dalam pemrograman komputer untuk menunda inisialisasi obyek sampai titik di mana diperlukan. Hal ini dapat berkontribusi untuk efisiensi dalam operasi program jika benar dan tepat digunakan. Misalnya, gambar yang terletak di footer tidak akan di-load oleh web browser ketika halaman website pertama kali dibuka. Gambar ini baru akan di-load jika pengguna men-scroll halaman ke bawah sampai bagian footer.
Bagaimana cara mengukur kecepatan dan optimisasi website?
Ada banyak tool yang bisa digunakan untuk melihat seberapa baik optimisasi yang kita lakukan, tapi untuk mengukur kecepatan website serta melihat proses bagaimana proses rendering halaman dari website gunakanlah tool ini : Webpagetest. Dari tool itu, kita bisa menentukan dari mana test dilakukan beserta web browser yang digunakan. Cukup menarik bukan?
