Cara Mempercepat Loading Website

Cara Mempercepat Loading Website

Cara Mempercepat Loading Website – Kecepatan website menjadi salah satu faktor fital yang harus diperhatikan, bukan hanya untuk menunjang peringkat di mesin pencari, namun website yang mempunyai loading cepat akan memberikan kenyamanan yang lebih untuk para penggunanya. Tingkat kenyamanan pengguna memiliki pengaruh besar terhadap keinginan untuk mengunjungi kembali website anda, yang secara langsung mempengaruhi sales atau transaksi yang terjadi di website anda.

Faktor Penyebab Website Lambat

Berikut beberapa faktor yang mempengaruhi kecepat website:

1. Server Respon
Server respon dapat dipengaruhi oleh beberapa faktor, antara lain:

  • Jarak antara server dan pengguna.
  • Sumber daya/spesifikasi server yang kurang.
  • Kecepatan internet server yang tidak memadai.
  • Terlalu banyak pengguna sember daya server – kemungkinan terjadi jika menggunakan shared hosting.

2. Ukuran/size Website
Ukuran Website adalah jumlah yang dikalkulasi dari setiap elemen website seperti gambar, video, .swf, .css, .js, dll. Semakin banyak elemen yang digunakan dan atau semakin besar ukuran masing-masing elemen maka semakin besar pula ukuran website. Sangat disarankan untuk melakukan optimasi dan mengkompres setiap elemen ke ukuran minimum sehingga tidak terlalu membebani dan dapat mengurangi ukuran website.

3. Logika Pemrograman
Penerapan logika pemrograman dalam membangun sebuah website sangat berpengaruh terhadap performa sebuah website. Penggunaan variabel dan struktur pengulangan dapat mempengaruhi kinerja server dalam melayani request yang terjadi saat halaman website di load.

Setiap variabel yang digunakan dalam script, akan menghabiskan tempat di memory server. Semakin banyak variabel yang digunakan semakin banyak pula alokasi memory yang dibutuhkan. Setiap perulangan diproses oleh prosesor server hosting, jika terlalu banyak perulangan yang terjadi, ini akan membebani server dan proses pelayanan oleh server akan melambat.

Jika layanan hosting anda memiliki spesifikasi server yang tinggi untuk website anda, maka hal ini tidak akan terlalu menjadi masalah. Namun kebanyakan dari kita menggunakan layanan shared hosting, yang mana satu sumber daya server digunakan bersama sejumlah penyewa hosting bersangkutan.

Tool dan Alat Bantu

Dalam melakukan optimasi kecepatan website, ada dua alat bantu gratis yang sering saya gunakan, antara lain:

1. Google PageSpeed Insight
Website yang disediakan oleh google ini sangat membantu dalam menelusuri hal-hal yang dapat mengurangi kecepat load halaman website. Mulai dari mendeteksi server respond time, render-blocking, script yang perlu diminify, gambar yang perlu di optimasi dan masih banyak lagi.

2. Whatsmyip.org
Website ini dapat mendeteksi apakah Http Compression sudah berjalan atau tidak. Ampuh dan gratis.

Optimalisasi untuk mempercepat loading website

Memempercepat performa sebuah website bukanlah hal yang sangat sulit dilakukan, dengan beberapa trik sederhana dibawah ini, akan memberikan dampak yang sangat signifikan terhadap kecepatan website anda, silahkan diterapkan dan perhatikan hasilnya.

1. Http Compression

Saat seseorang mengakses sebuah situs, ada beberapa request atau permintaan yang dikirmkan ke server. Permintaan ini berisikan elemen-elemen website antara lain file gambar, video, .swf, .js, .css, query database yang kemudian dikirimkan ke browser untuk di render sehingga bisa terlihat dalam bentuk website yang utuh.

Pengiriman file ke browser membutuhkan waktu yang berbeda-beda tergantung daripada ukuran/size file tersebut. Semakin besar ukuran file, semakin lama waktu yang dibutuhkan sampai halaman website siap untuk dirender.

Http Compression merupakan cara mempercepat website dengan mengkompres semua elemen website yang direquest kemudan dikirimkan ke browser. Dengan metode ini, ukuran setiap file dapat diperkecil sampai setengah dari ukuran asli, sehingga mengurangi bandwidth yang dibutuhkan dan mempercepat proses pengiriman.

Jika webserver yang digunakan adalah Apache, maka anda bisa menggunakan Mod_deflate untuk melakukan Http Compression. Pastikan Mod_deflate sudah aktif di server hosting anda, berikut adalah contoh penerapan Http Compression menggunakan Mod_deflate dan .htaccess.

        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
    
        # DEFLATE berdasarkan extensi file
        AddOutputFilter DEFLATE js css htm html xml

Kemudian bisa dicek apakah Http Compression sudah berjalan atau tidak, anda bisa menggunakan whatsmyip.org. Masukkan alamat website anda kemudian enter. Gambar di bawah menunjukkan jika Http Compression sudah berjalan.

Jika hasil tes menunjukkan Http Compression tidak berjalan, maka anda bisa menanyakan ke pihak hosting apakah Mod_deflate sudah aktif atau tidak, dan minta agar diaktifkan.

2. Browser Cache

Menggunakan browser cache merupakan cara yang efektif untuk mengoptimalisasi kecepatan website, khusunya untuk repeat-visitor. Browser memiliki kemampuan untuk menyimpan data halaman website di harddisk komputer, sehingga  saat user mengunjungi kembali halaman website tersebut, browser akan menampilkan cache terakhir yang tersimpan dan tidak perlu mendownload file web ke server, sehingga loading website akan menjadi super cepat.

Namun, browser membutuhkan ijin untuk menyimpan cache website, disinilah peran kita sebagai web developer untuk melakukan seting dan memberikan ijin tersebut.

Untuk mengaktifkan browser cache, bisa dilakukan melalui file .htaccess atau HTML.

Mengaktifkan Browser cache melalui HTML:
Tempatkan code di bawah ini di antara tag head

<META HTTP-EQUIV=”EXPIRES” CONTENT=”Mon, 28 Jul 2014 11:12:01 GMT”>

Meta tag di atas memberitahukan kepada browser bahwa halaman bersangkutan valid sampai tanggal 28 juli 2014. Sampai tanggal tersebut tercapai, browser akan menggunakan cache yang tersimpan untuk melayani permintaan pengguna.

Mengaktifkan Browser Cache menggunakan .htaccess:

ExpiresActive On
ExpiresByType image/gif "access plus 1 year" #Expire setelah 1 tahun
ExpiresByType image/png "access plus 1 year" #Expire setelah 1 tahun
ExpiresByType image/jpg "access plus 1 year" #Expire setelah 1 tahun
ExpiresByType image/x-icon "access plus 1 year" #Expire setelah 1 tahun
ExpiresByType application/pdf "access plus 1 year" #Expire setelah 1 tahun
ExpiresByType application/x-javascript "access plus 1 month" #Expire setelah 1 bulan
ExpiresByType text/plain "access plus 1 month" #Expire setelah 1 bulan
ExpiresByType text/css "access plus 1 week" #Expire setelah 1 minggu

3. Minify .js, .css, .html

Ide dari Mininify adalah menghapus whitespace (spasi, enter, tab), sehingga script dalam file tersebut menjadi lebih pendek dan mengurangi size/ukuran file tersebut.

Melakukan penghapusan whitespace secara manual memang pekerjaan yang membutuhkan waktu dan membosankan, oleh karena itu, saya sangat menyarankan menggunakan tool atau alat bantu.

Anda bisa menggunakan Addon Google Pagespeed Insight untuk mengukur kecepatan website – disarankan menggunakan browser google chrome.

Pertama buka dulu halaman website yang ingin diukur kecepantanya kemudian klik kanan dan pilih inspect element atau tekan tombol f12 kemudian klik tab PageSpeed, dalam kasus ini saya menggunakan browser google crhome.

Seperti terlihat pada gambar di atas, klik tombol Start Analyzing untuk memulai pengecekan kecepatan, pada hasil tes akan muncul file script yang perlu di-minify (jika ada). Klik Minify Javascript yang ada di sebelah kiri halaman untuk melihat file Javascript yang perlu di-minify, begitu juga dengan file CSS dan Html. Di sebelah kanan masing-masing file yang perlu di-minify ada link dengan anchor text See optimized content yang mengarah ke halaman script yang sudah di-minfy, Anda bisa klik link tersebut, copy semua text yang terlihat di layar dan mengganti isi file script bersangkutan.

4. Mengatasi render-blocking css dan javascript

Sebagian besar website yang beredar di internet bisa dipastikan menggunakan file CSS dan javascript untuk mempercantik tampilan website dan meningkatkan kemampuan website dalam melayani pengguna.

Namun, dalam penerapanya seringkali terjadi penundaan perenderan halaman website karena harus menunggu hingga file CSS dan atau Javascript tertentu selesai di-load, hal ini lah yang disebut dengan istilah render-blocking.

Mengatasi render-blocking CSS

Untuk mengatasi render-blocking CSS sebenarnya cukup mudah, ide mengatasi masalah ini adalah memindahkan tempat dimana file CSS dipanggi/diload. Pada umumnya, file CSS di panggil di dalam tag head, kita pindahkan dan tempatkan pemanggilan CSS di bagian paling bawah halaman yaitu footer.

Dengan begini, file CSS akan di load setelah semua isi dari halaman selesai di-load, serta akan mengatasi render-blocking CSS.

Mengatasi render-blocking Javascript

Render-blocking Javascript dapat diatasi menggunakan atribut defer. Atribut defer memungkinkan browser untuk merender halaman website sambil mendownload script dan menunda pengeksekusian script tersebut sampai seluruh halaman selesai dirender. Dengan begini, pengguna dapat melihat isi website lebih cepat.

JOGJA ONE SOLUTION – KURSUS BISNIS ONLINE JOGJA | JASA PROMOSI JOGJA | JASA PEMBUATAN WEBSITE JOGJA | INTERNET MARKETING JOGJA | JASA SEO JOGJA | AHLI WEBSITE | PELATIHAN INTERNET MARKETING | SOFTWARE APLIKASI JOGJA | JASA SOFTWARE JOGJA Kami hadir memberi solusi untuk kebutuhan media promosi bisnis atau usaha Anda. Grafik order dan omzet meningkat. Dapatkan website murah, desain menarik, kompleks, dan full maintenance dengan harga yang terjangkau KLIK DISINI. Atau hubungi kami di Telp (0274) 5017127 | WA : 0888 0289 8802

JOGJA ONE SOLUTION – Kami hadir memberi solusi untuk kebutuhan media promosi bisnis atau usaha Anda. Grafik order dan omzet meningkat. Dapatkan website murah, desain menarik, kompleks, dan full maintenance dengan harga yang terjangkau KLIK DISINI. Atau hubungi kami di Telp (0274) 5017127 | WA : 0888 0289 8802


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat