Enam Langkah Praktis untuk Meningkatkan Performa Kecepatan Website

Badr Interactive
- 26 May 2020

Di ulasan sebelumnya, kami telah menjelaskan pentingnya kecepatan website atau Page Load Time sebuah website, cara menguji dan mengevaluasi performa website saat ini, dan menganalisis penyebabnya. Pada ulasan kali ini, insyaa Allah kami akan share lima tips jitu dan praktis untuk bisa meningkatkan performa Page Load Time sebuah website.

1. Optimasi dari Daftar Issue di Google Pagespeed Insight

Kembali ke contoh website yang kita uji sebelumnya menggunakan Google Pagespeed Insight yaitu Tokopedia. 

 


Gambar 1. Rekomendasi Optimasi yang Bisa Dilakukan

 

Google Pagespeed Insight tidak hanya memberikan penilaian performa namun juga memberikan rekomendasi untuk bisa meningkatkan Page Load Time website yang diuji. Dari sini, langkah-langkah optimasi bisa dimulai oleh web developer Anda.  Isunya bisa jadi karena main thread aplikasi yang cukup lama untuk memproses permintaan pengguna, sehingga perlu di efisiensikan lagi algoritmanya. Bisa juga pada file Javascript yang perlu dioptimasi, mekanisme caching, atau mengkompres aset gambar untuk meringankan load website. Detailnya akan dijelaskan pada langkah sebelumnya.

 

Poinnya dari sini, kita cukup bisa membuat perencanaan optimasi apa yang harus dilakukan, baik dikerjakan oleh internal tim kita maupun vendor yang akan ditunjuk.

2. Optimasi Aset Gambar (Image)

Setiap orang suka dengan website yang penuh dengan image yang eye-catching terutama untuk website seperti eCommerce yang mengandalkan image yang prima untuk bisa menunjukkan kualitas produknya. Namun, image adalah salah satu ‘pemakan’ bandwith terbesar dalam website. 

 

Ada dua solusi untuk mengoptimasi image:


1. Scale Appropriately. Misalnya dari ukuran 1000 x 1000 pixel, maka scale ulang secara proporsional misalnya di angka 100 x 100 pixel, seperti gambar berikut. 

Pastikan hasil scale proporsional sesuai dengan kebutuhan layout website, agar tidak terlalu besar namun jika tidak ‘pecah’.

 

Gambar 2. Scale Image Signifikan untuk Mengoptimasi Gambar

 


2. Compress. Cara ini juga bisa dilakukan selain scale. Kita dapat mengurangi image size tanpa mengurangi kualitas dari 25% hingga 80%. Ada banyak tools online di internet seperti tinypng.com, ImageOptim, JPEGmini, or Kraken. Jika Anda menggunakan website Wordpress bisa juga menggunakan plugin WP Smush Pro untuk mengkompres gambar di website Anda.

3. Pindahkan ke Server dengan Spek Lebih Tinggi

Banyak website yang masih lambat walaupun sudah di-tweak disana sini, ternyata masalah utamanya adalah spek server yang rendah, sedangkan pengguna yang mengakses mulai banyak. 

Ada beberapa rekan kami, yang hanya dengan meng-upgrade servernya, Page Load Time-nya melesat dan langsung masuk ke halaman pertama Google. Kami sudah pernah mengulas terkait tips memilih server. Pastikan Anda telah memilih server yang tepat untuk spesifikasi website Anda.

4. Implementasi Gzip Compression

Proses kerja Gzip sederhana yakni dengan melakukan kompresi file, kemudian browser yang akan meng-extract file sebelum menampilkannya ke pengguna. 

Gzip Compression dapat mengurangi secara drastis ukuran file website sehingga meminimalisir HTTP request dan mengurangi response time server. Gzip Compression dapat mengefisiensikan file HTML dan CSS menjadi 50% hingga 70%! 

Cara untuk mengimplementasi Gzip cukup dengan menambahkan beberapa baris kode pada website Anda atau menggunakan utility Gzip.

5. Gunakan Website Caching

Caching adalah mekanisme untuk menyimpan data website pada browser pengguna sehingga tidak perlu untuk me-request file-file yang sama berulang kali ke server setiap mereka mengakses website kita. Seberapa lama data website disimpan tergantung dari konfigurasi browser pengguna dan konfigurasi cache di sisi server.

 

Implementasi website caching bergantung pada teknologi. Jika menggunakan Wordpress, Anda dapat menggunakan plugin W3 Total Cache atau W3 Super Cache. Di sisi server, jika menggunakan VPS atau dedicated server, maka cache diatur pada konfigurasi server. 

6. Optimasi Semua Aspek (File HTML/CSS/Javascript, Web Font, Plugin) 

Lima optimasi diatas masih lambat juga? Coba periksa lagi semua aspek yang masih bisa dioptimasi. 

 

File-file seperti CSS, Javascript, atau HTML misalnya. Pastikan semua komponen di file tersebut digunakan, tidak ada ‘kode sampah’ yang masih tertinggal selama masa pengembangan. Minimalisasi ukuran file dengan layanan gratis seperti WillPeavy atau CSS Compressor.

 

Gambar 3. Optimasi File CSS dapat Mengurangi Ukuran File dengan Signifikan

 

Kurangi penggunaan Web Font karena menambahkan waktu dalam rendering sebuah halaman web. Web Font menambahkan request HTTP tambahan ke external resource sehingga berdampak pada page load time yang lebih lama. Pilih hanya font yang benar-benar digunakan saja. Jangan lupa periksa lagi apakah masih ada plugin, library, dan sejenisnya, peninggalan masa development, yang tidak digunakan. 





100+ Perusahaan bekerjasama dengan Badr Interactive untuk mengoptimalkan website dan aplikasi mereka.

Mari bergabung dan siapkan sistem terbaik untuk perusahaan Anda