Cara Mempercepat Loading Website Anda

Last Updated 0 Comments

Apakah website Anda lemot? Nah, artinya Anda membutuhkan panduan ini. Panduan mudah (Step by step) untuk membuat loading website Anda lebih cepat daripada sebelumnya.

mempercepat loading website
Kecepatan akses sebuah website terhitung masing-masing halaman, bukan hanya homepagenya saja.

Kecepatan akses sebuah website merupakan hal yang wajib untuk diperhatikan. Pada kesempatan kali ini, saya ingin membahas bagaimana cara mempercepat loading website tanpa harus ribet dan pusing tujuh keliling.

Taukah Anda? Apabila saat ini, faktor kecepatan akses untuk masing-masing halaman sebuah website menjadi poin penting dalam SEO alias menentukan peringkat pada mesin pencari seperti Google.

Adapun juga statement dari google yang menyatakan bahwasanya crawling googlebot hanya dibatasi selama 3 menit pertama. Sumber: Google Answer

Artinya, diusahakan sebisa mungkin kecepatan loading website Anda kurang dari 3 Menit agar googlebot dapat menelusuri halaman secara keseluruhan. Dilain sisi, memiliki website yang cepat juga disukai oleh para pengunjung online serta dapat meningkatkan konversi alias terjadinya penjualan (apapun bentuknya, entah itu jasa ataupun produk).

gtmetrix ulasanhosting.com

Gambar diatas merupakan hasil screenshot UlasanHosting.com dengan menggunakan tool GTMetrix. Hasil menunjukkan bahwa nilai dari kecepatan website kami sebesar 99% dan hanya membutuhkan waktu 1 detik untuk memuat halaman sepenuhnya.

Anda bisa menggunakan tool GTMetrix ataupun Google Page Speed untuk mengetahui seberapa cepat halaman website tersebut diakses. Kedua tool tersebut sangat saya rekomendasikan, selain menampilkan waktu yang dibutuhkan untuk memuat halaman juga memberikan informasi detail akan kondisi website Anda.

Website yang cepat umumnya memiliki nilai diatas 80% ketika menggunakan kedua tool tersebut, dan juga khusus untuk GTMetrix pada bagian Fully Load Time menunjukkan angka dibawah 5 detik.

5 Cara Mempercepat Loading Website Anda

page speed ulasan hosting

Adapun beberapa cara yang saya gunakan untuk mempercepat waktu loading suatu website, memang benar sebagian besarnya merupakan hal teknis, namun saya jamin hal tersebut tidaklah rumit untuk diterapkan, dan juga saya mengabaikan pembahasan mengenai plugin (khususnya yang berkaitan dengan setting) untuk website yang berbasis wordpress.

Dari dulu sampai dengan saat ini, saya hanya menggunakan plugin yang benar-benar dibutuhkan. Sedangkan banyak sekali plugin yang direkomendasikan oleh banyak pihak untuk mengoptimasi website agar lebih cepat untuk diakses, namun hal tersebut mayoritas saya abaikan (detailnya ada dibawah).

1. Menggunakan web hosting yang memiliki kualitas dan performa yang terbaik

Tidak dipungkiri bahwasanya pemilihan web hosting yang digunakan sangat berperan penting dalam menentukan performa kecepatan website Anda. Ibaratnya seperti memilih komputer antara pentium 1 dan pentium 4, pastinya komputer dengan pentium 4 memiliki performa yang lebih baik.

Saya tidak membahas detail mengenai hal tersebut, karena sebelumnya sudah saya buatkan halaman sendiri yang membahas detail tentang web hosting. Lihat selengkapnya: Shared Web Hosting Terbaik

2. Validitas struktur website (secara keseluruhan)

validator w3

Validitas struktur website meliputi banyak hal, misalnya struktur coding, database, assets (gambar, css, script, dll), dan juga tidak adanya asset atau link yang broken (rusak, hilang, atau adanya kesalahan dalam penulisan kode). Untuk mengetahui ada atau tidaknya broken link atau assets bisa menggunakan tool Dead Link Checker

Fokus utama pada poin ini (umumnya juga menjadi issue banyak orang) berada di validitas struktur coding, usahakan website Anda memiliki struktur coding yang valid agar browser dapat membacanya (rendering) secara mudah.

Adapun beberapa hal yang dapat mempengaruhi kecepatan loading website Anda jikalau melihat dari struktur coding halaman, misalnya saja adanya kesalahan penulisan tag (tag div namun tertulis dv), missing closing tag (tidak adanya tag penutup), penggunaan defer dan async pada file yang dimuat, dan lain sebagainya.

Tidak semua status error berdampak pada rendering halaman dan juga menandakan tidak valid, sebab untuk beberapa hal memang ada struktur website yang memang benar-benar tidak bisa diperbaiki.

Jika melihat gambar diatas, terdapat 4 Error dan 1 Warning. Sedangkan untuk status error merupakan script (tambahan coding) bawaan dari CDN (Content Delivery Network) yang saya pribadi tidak bisa mengubahnya. Banyak juga yang menganggap hal tersebut hanya sebatas misleading dan perlu diabaikan. Intinya, selama itu masih bisa dijangkau maka perbaikilah.

Perlu diketahui bahwasanya browser dapat menampilkan halaman website secara visual karena terbentuk dari struktur coding HTML. Untuk mengetahui tingkat validitas halaman website (seperti gambar diatas) bisa menggunakan tool Validator W3

3. Optimasi, kompres, dan menyesuaikan gambar dengan dimensi layout

Gambar merupakan salah satu komponen penting yang umumnya ada disetiap halaman website. Bahkan tidak sedikit yang memasang gambar lebih dari 5 ataupun 10 biji setiap halamannya, selama hal tersebut memang dibutuhkan maka bukan menjadi masalah.

Hubungan gambar yang terkait dengan kecepatan loading website terdiri dari 2 jenis, gambar sebagai entitas website (misalnya logo, background, dll) dan gambar sebagai penunjang artikel. Terdapat 3 jenis optimasi yang bisa dilakukan terkait dengan gambar, antara lain:

css sprites A. Optimasi gambar dengan menggunakan css sprites

Yang saya maksud disini adalah penggunaan beberapa gambar yang bisa dikombinasi menjadi satu gambar, umumnya digunakan untuk background yang disematkan kedalam file CSS.

Satu hal yang pasti, dengan menggunakan CSS Sprites maka akan mengurangi jumlah file yang bakal dimuat. Banyaknya jumlah file yang dimuat (total request) mempengaruhi kecepatan loading website Anda, bukan lagi mengenai besaran filenya.

Saya pribadi lebih baik memilih satu file dengan besaran 100kb dibandingkan dengan 10 file dengan total size 90kb. Hal tersebut berkaitan dengan entry atau data process, semakin banyak data yang diproses maka dari segi hosting membutuhkan performa lebih untuk menjalankannya.

B. Kompres gambar dengan kualitas standar (secukupnya)

Saya sama sekali tidak menyarankan melakukan kompres gambar yang terlalu berlebihan, terlebih lagi jika itu mengabaikan kualitas dari gambar itu sendiri. Jikalau ingin melakukan kompres gambar bisa menggunakan beberapa tool yang tersedia, yang paling penting diusahakan untuk memilih gambar dengan format SVG atau JPG dan jikalau ingin melakukan kompres maka bisa memilih (opsi) gambar dengan kualitas yang standar.

C. Menyesuaikan ukuran gambar dengan dimensi layout

Saya pribadi lebih fokus pada menyesuaikan ukuran gambar dengan dimensi layout atau tata letak gambar itu sendiri. Misalnya saja, setup layout untuk gambar memiliki dimensi lebar 300px, maka baiknya Anda memasang gambar dengan ukuran yang sama (acuannya pasti width atau lebar).

Anda bisa menggunakan salah satu format coding yang dapat membantu untuk menyesuaikan ukuran gambar berdasarkan resolusi device (misalnya saja antara versi desktop dan mobile), format codingnya dibawah ini:

<picture> <source media="(max-width: 749px)" srcset="URL Gambar Anda"> <source media="(max-width: 1024px)" srcset="URL Gambar Anda"> <img alt="Judul Gambar" src="URL Gambar Anda"> </picture>

Sebisa mungkin melakukan aktivitas diatas dengan cara manual, tanpa harus menggunakan plugin WordPress. Memang benar membutuhkan tenaga yang ekstra, namun untuk saya pribadi menganggap bahwasanya tidak semua optimasi harus menggunakan plugin.

Terlebih lagi, namanya Plugin itu pasti memberatkan kinerja hosting (saya yakin bahwasanya masih terdapat plugin lainnya yang telah terpasang dan dijalankan), oleh karena itu bijaklah dalam menggunakan plugin yang benar-benar dibutuhkan.

4. Kompres dan atau minify file HTML, Script, dan CSS

Terdapat 2 cara yang bisa dilakukan, yaitu dengan cara merapatkan struktur coding (menghilangkan karakter spasi dan tab) untuk semua jenis file dan mengkombinasi beberapa file (hanya untuk script dan CSS) tergabung menjadi 1 file dengan ekstensi yang sama.

Script yang dimaksudkan disini adalah semua jenis script entah itu Javascript ataupun JSON.

Untuk memudahkan melakukan kompres ataupun minify semua jenis file yang saya sebutkan diatas lebih baik menggunakan tool yang banyak tersedia di Google, mudahnya langsung searching ke google dengan menggunakan kata kunci "compress/minify jenis file", untuk jenis file bisa diganti dengan HTML, Script, atau CSS.

Ingat! Menghilangkan karakter spasi hanya boleh dilakukan (berlaku) dengan kondisi dimana spasi itu berada diluar tag, apabila Anda salah dalam melakukan kompress maka struktur coding Anda tidak akan terbaca. Oleh karena itu, saran saya sebelum melakukan kompres file mohon datanya untuk dibackup dulu.

Pada intinya, tujuan dari melakukan kompres dan atau minify untuk ketiga jenis file tersebut untuk mengecilkan file size (akibat adanya karakter spasi dan tab diluar tag) dan juga mengurangi total request alias jumlah file yang dimuat.

Apakah cukup signifikan perubahannya? Bisa inspect langsung dengan menggunakan tool GTMetrix atau Google Page Speed. Signifikan atau tidaknya semua bergantung pada kondisi websitenya masing-masing.

5. Gunakan cache dan gzip compress via htaccess

gzip compress

Belum pernah sama sekali saya menggunakan bantuan plugin untuk melakukan setup cache dan gzip compress pada semua website yang saya miliki. Caranya cukup mudah, hanya mencari file htaccess yang biasanya tersembunyi di file manager lalu melakukan input code (tinggal copy-paste saja).

Untuk codenya bisa dilihat disini GTMetrix: Browser Caching dan GTMetrix: GZip Compress

Dari semua komponen untuk meningkatkan kecepatan loading website, menggunakan cache dan mengaktifkan gzip compress adalah hal yang paling signifikan.

Kalau hanya untuk menangani urusan caching ataupun gzip compress, sebenarnya kedua hal tersebut sangatlah mudah tanpa harus ribet dan pusing dengan settingan Plugin misalnya saja plugin W3 Total Cache.

Bukannya didalam plugin itu sudah satu paket ya mas? Betul sekali, hanya saja saya pisahkan secara fungsinya. Didalam plugin W3 Total Cache yang saya incar sebenarnya ada di Optimasi Database, bukan cache, compress, minify dan lain sebagainya.

Berarti yang tersisa hanya optimasi database saja kan, oleh karena itu saya cenderung memilih plugin antara W3 Total Cache atau WP Optimize hanya untuk kebutuhan optimasi database.

*** Munculnya istilah plugin (yang kami maksudkan) hanya berlaku untuk pengguna WordPress.

Pada intinya, melakukan setup cache ataupun gzip compress merupakan hal yang wajib untuk dilakukan guna meningkatkan kecepatan website Anda. Apapun caranya, entah itu melalui htaccess (manual) ataupun menggunakan bantuan plugin yang pasti website Anda telah terpasang kedua hal tersebut.

Tidak lupa juga untuk melakukan optimasi database (disarankan dengan menggunakan plugin) sebab untuk cara manualnya sangat susah untuk dijelaskan.

Kesimpulan

Kecepatan website Anda terhitung untuk masing-masing halaman, bukan hanya homepage (halaman depan) saja. Setidaknya untuk saat ini kelima cara diatas merupakan hal yang bersifat pokok alias sebisa mungkin untuk dipenuhi dan juga hal tersebut tidak memandang jenis ataupun platform website yang digunakan, berlaku secara umum. Apabila Anda masih bingung ataupun memiliki pertanyaan seputar bagaimana cara mempercepat loading website, maka bisa tinggalkan pesan pada kolom komentar dibawah dan nanti sebisa mungkin akan dijawab sesuai dengan sepengetahuan saya.

Belum Ada Komentar
Formulir Komentar
Bantu kami dalam menilai kualitas dari artikel atau panduan diatas.