{"id":1505,"date":"2020-02-01T21:58:28","date_gmt":"2020-02-01T14:58:28","guid":{"rendered":"https:\/\/www.indowhiz.com\/articles\/?p=1505"},"modified":"2023-04-25T17:13:23","modified_gmt":"2023-04-25T10:13:23","slug":"pedoman-umum-meningkatkan-kecepatan-situs-web","status":"publish","type":"post","link":"https:\/\/www.indowhiz.com\/articles\/id\/pedoman-umum-meningkatkan-kecepatan-situs-web\/","title":{"rendered":"Pedoman Umum Meningkatkan Kecepatan Situs Web"},"content":{"rendered":"\n

Saat ini, hampir semua pengguna internet tidak sabar menunggu pemuatan halaman web manapun. Mereka inginnya instan, yang biasanya tidak lebih dari 2-5 detik<\/a>. Kalau tidak, mereka akan mencari situs lain dengan konten sejenis. Jadi, kecepatan loading<\/em> atau pemuatan halaman web merupakan kesan pertama bagi pengunjung situs.<\/p>\n\n\n\n\n\n\n\n

Dominasi ponsel pintar<\/h2>\n\n\n\n

Mayoritas orang<\/a> memakai ponsel untuk mengakses internet, seperti pada Gambar 1. Statistik blog saya juga menunjukkan fakta ini, yang memunculkan masalah lain. Secara umum, rata-rata performa ponsel berada jauh di bawah <\/a>performa desktop. Akibatnya, pemuatan halaman web di ponsel akan lebih lambat daripada di desktop.<\/p>\n\n\n\n

\"Pengunjung
Gambar 1. Pengunjung blog saya pada tahun 2019<\/figcaption><\/figure>\n\n\n\n

Kemungkinan besar sama dengan situs web lain. Pastinya, kita akan terus berusaha untuk membangun konten serta fungsionalitas situs web kita. Hal ini akan membantu pengunjung merasa nyaman, dan meningkatkan jumlah pengunjung. Namun, jika pemuatan halaman situs web kita mulai lambat, lalu lintas akan mulai menurun, dan para pengunjung mungkin tidak akan kembali lagi.<\/p>\n\n\n\n

Jadi, jika itu menjadi salah satu masalahmu, saya akan memberikan beberapa rekomendasi untuk mempercepat pemuatan situs web kamu. Mungkin beberapa bagian memerlukan pengetahuan teknis. Tetapi saya akan mencoba menulisnya sesederhana mungkin. <\/p>\n\n\n\n

Memeriksa performa situs web<\/h2>\n\n\n\n

Sebelum kamu mulai memperbaiki situs web, pertama-tama, kamu perlu tahu bagaimana performa situs web kamu saat ini. kamu bisa menggunakan beberapa situs layanan analisis daring (online<\/em>) seperti PageSpeed Insights<\/a>, GTMetrix<\/a>, Pingdom<\/a>, atau semacamnya. Untuk yang luring (offline<\/em>), kamu dapat menggunakan fitur Audit di menu developer tools pada peramban (browser<\/em>) Chrome. <\/p>\n\n\n\n

Pada PageSpeed Insights atau Audit Chrome, cukup perhatikan pada bagian performa mobile<\/em> atau ponsel. Karena, akan memberikan diagnosis yang lebih baik. Kadang-kadang, saya mendapatkan skor 99\u2013100 pada performa desktop, tapi hanya mendapatkan skor 50\u201370 di performa mobile<\/em> atau ponsel.<\/p>\n\n\n\n

\"cek
Gambar 2. Contoh hasil analisis pada PageSpeed Insights (atau Audit di Chrome)<\/figcaption><\/figure>\n\n\n\n

Gambar 2 di atas menunjukkan contoh hasil analisis<\/a> performa suatu halaman web. Gulir (scroll<\/em>) ke bagian detail diagnostik, seperti Gambar 3, untuk melihat sebab-sebab performa pemuatan atau loading<\/em> halaman situs menjadi lambat. Bahkan pada situs web yang sama, terkadang beberapa halaman yang berbeda bisa menghasilkan diagnostik yang berbeda pula.<\/p>\n\n\n\n

\"Contoh
Gambar 3. Contoh hasil diagnostik pada PageSpeed Insights<\/figcaption><\/figure>\n\n\n\n

Untuk versi yang lebih terperinci, kamu dapat membuka detail setiap performa. Jadi, kamu bisa fokus memperbaiki setiap detail performa tersebut. <\/p>\n\n\n\n

Lakukan backup<\/em> terlebih dahulu! <\/h2>\n\n\n\n

Sebelum kamu mencoba meningkatkan kecepatan situs web, kamu harus membuat backup<\/em> atau cadangan situs web kamu. Ini wajib! <\/p>\n\n\n\n

Semua konten, kustomisasi, atau modifikasi di situs web kamu dapat hilang dalam hitungan detik. Jadi, kalau itu terjadi (semoga saja tidak!), kamu cukup mengembalikannya seperti semula dari backup<\/em> atau cadangan terbaru.<\/p>\n\n\n\n

1. Optimalkan penggunaan templat, widget<\/em>, dan plugin<\/em><\/h2>\n\n\n\n

Jika kamu menggunakan CMS (misal WordPress, Joomla, atau bahkan Blogger), maka bisa jadi templat, widget<\/em>, dan plugin yang kamu pakai merupakan penyebab lambatnya pemuatan halaman web kamu. Cobalah buka beberapa halaman web kamu, periksa apakah situs web kamu menampilkan banyak objek dan widget<\/em>. Objek-objek itu termasuk apa pun yang dapat kamu lihat dengan jelas, seperti bagian-bagian layout, gambar, bentuk-bentuk, ataupun animasi.<\/p>\n\n\n\n

Performa pemuatan halaman web akan semakin lambat seiring banyaknya jumlah objek. Jika templat kamu menggunakan terlalu banyak objek, widget<\/em>, dan animasi, maka mungkin kamu perlu mengganti templat kamu. Mungkin saja dengan sedikit usaha, sudah meningkatkan performa secara drastis.<\/p>\n\n\n\n

Pilih templat yang minimalis, ringan, atau versi AMP<\/h3>\n\n\n\n

Kalau kamu memakai Blogger\/Blogspot, pertimbangkan untuk memakai templat bawaan (default<\/em>) dari blogger. Templat ini umumnya ringan dan responsif. Di sisi lain, templat \u201cAccelerated Mobile Pages<\/em>\u201d (AMP) memiliki performa yang jauh lebih baik pada ponsel daripada templat non-AMP. Namun hingga saat ini blogger belum menyediakan templat default versi AMP. Jika kamu ingin templat AMP, kamu bisa membuat<\/a>, mencari, atau membelinya dari pengembang pihak ketiga. Selanjutnya, Untuk memeriksa apakah templat yang sedang kamu gunakan sudah memenuhi kriteria AMP, kamu dapat mengunjungi situs AMP Project<\/a>.<\/p>\n\n\n\n

Jika kamu memakai WordPress, Joomla, atau CMS lainnya, maka pastikan kamu mencari templat yang minimalis dan ringan. Pilih templat yang menampilkan objek sesedikit mungkin. Kurangi penggunaan ikon sosial share, slider, widget<\/em>, animasi, atau elemen menarik lainnya. Mungkin kamu juga perlu mempertimbangkan apakah perlu menggunakan animasi atau tidak, kecuali situs web kamu menjual gambar atau animasi. Selain itu, pengembang AMP juga menawarkan plugin resmi AMP untuk WordPress<\/a>. Bahkan, saat ini sudah banyak templat WordPress dari pihak ketiga yang mendukung AMP.<\/p>\n\n\n\n

Kurangi jumlah penggunaan widget <\/em><\/h3>\n\n\n\n

Selain templat, terlalu banyak widget juga memperlambat proses pemuatan halaman web. Karenanya, kurangi penggunaan widget <\/em>sebisa mungkin. Setiap widget <\/em>yang akan dipasang, pertimbangkan dahulu apakah widget <\/em>tersebut hanya terlihat bagus atau memang wajib ada. Apapun yang hanya terlihat bagus tapi tidak wajib, tidak boleh digunakan.<\/p>\n\n\n\n

Pertimbangkan untuk menggunakan widget <\/em>yang paling penting saja, seperti bilah pencarian, kategori, dan posting terbaru. Artinya, pertimbangkan untuk menghapus widget <\/em>yang hanya “menarik”, kecuali para pengunjung sangat bergantung pada fungsionalitasnya. Sadari bahwa, pengunjung membuka situs webmu untuk mencari konten, bukan widget<\/em>.<\/p>\n\n\n\n

Kurangi jumlah plugin<\/em> yang terpasang<\/h3>\n\n\n\n

Ketika bekerja dengan CMS, plugin<\/em> pasti sangat penting. Banyak plugin, termasuk plugin SEO<\/a>, cache, optimasi gambar, dan minifikasi, yang mungkin perlu untuk kita pasang di situs web. Berbagai fitur dan fungsi tambahan ini sangat banyak membantu pemilik situs dalam mengembangkan situs webnya. Tapi, hal itu sangat berpengaruh kepada performa kecepatan website. Semakin banyak plugin terpasang, pasti semakin lambat pemuatan halaman webnya. Jadi, pilihlah plugin yang paling penting saja untuk menjaga performa situs web tetap optimal. Utamakan kualitas dan performa terlebih dahulu daripada lainnya<\/a>.<\/p>\n\n\n\n

2. Gunakan server web LiteSpeed<\/h2>\n\n\n\n

Beberapa sumber membuktikan<\/a> bahwa, server web Litespeed memiliki performa lebih tinggi daripada server web lain seperti Apache atau Nginx. Bagi pengguna WordPress dengan server web LiteSpeed, gunakan plugin LiteSpeed Cache for WordPress (LSCWP<\/a>), untuk meningkatkan kinerja kecepatan situs web kamu. Plugin ini menangani banyak optimasi, seperti caching<\/em>, minifying<\/em>, optimasi gambar, dan banyak lagi, semuanya gratis. <\/p>\n\n\n\n

Dalam pengalaman saya menggunakan plugin cache di WordPress, plugin LiteSpeed Cache jauh melebihi plugin serupa lainnya, bahkan dengan plugin lain yang versi berbayar. Terlebih lagi, plugin ini memberi kamu fitur tambahan seperti Pengoptimalan Gambar. <\/p>\n\n\n\n

Fitur optimasi gambar akan memproses gambar kamu di server LiteSpeed, kemudian mengirimnya kembali ke server kamu untuk penyimpanan. Karenanya kamu tidak perlu membayar server lain untuk penyimpanan gambar. Tapi kelemahannya, servermu akan lebih cepat penuh kalau terlalu banyak mengunggah gambar ke WordPress. Karena itu, mungkin kamu perlu menyesuaikan anggaran hosting web sesuai dengan kebutuhan. <\/p>\n\n\n\n

3. Nyalakan fitur cache<\/em><\/strong><\/h2>\n\n\n\n

Peramban (browser<\/em>) meminta halaman web dari server. Kemudian, server melakukan beberapa perhitungan yang rumit, termasuk membuat header<\/em>, konten, sidebar<\/em>, dan footer<\/em>. Terakhir, server mengirimkan hasilnya ke peramban. Inilah adalah interaksi normal antara peramban dan server.<\/p>\n\n\n\n

Pengunjung situs atau peramban lain juga mungkin meminta halaman yang sama. Pastinya, isi halamannya akan tetap sama. Oleh karena itu, dengan mengaktifkan web caching<\/a><\/em>, server tidak perlu mengulangi semua perhitungan yang kompleks itu. Tetapi cukup mengirimkan halaman web dari hasil perhitungan terakhir. Itulah sebabnya, web caching<\/em> adalah salah satu fitur penting yang perlu kamu gunakan.<\/p>\n\n\n\n

Saat ini teknologi web caching<\/em> semakin pintar. Ketika administrator mengubah sesuatu di sebuah halaman web, web caching<\/em> akan menghapus cache<\/em> terakhir, dan kemudian secara otomatis menghitung ulang halaman dan menyimpan hasil terbarunya.<\/p>\n\n\n\n

Web caching<\/em> mungkin tidak terlalu meningkatkan skor PageSpeed \u200b\u200bInsights, GTMetrix, atau Pingdom. Tapi ini tetap merupakan sebuah optimasi terhadap situs web kamu. Yang pasti, hal ini akan sangat mengurangi beban server dan meningkatkan skor SEO.<\/p>\n\n\n\n

Saat ini, sudah ada banyak plugin web caching<\/em> bagi para pengguna CMS. Jadi, cukup pasang dan aktifkan saja salah satunya. Untuk pengguna blogger, memang tidak ada plugin web caching<\/em>. Tapi, kemungkinan besar Google sudah mengaktifkan web caching<\/em> di server mereka.<\/p>\n\n\n\n

4. Gunakan CDN<\/h2>\n\n\n\n

Secara umum, jarak dari server menuju lokasi pengunjung merupakan salah satu faktor penentu kecepatan transfer. Dalam hal ini, content delivery network<\/em> (CDN) sangat membantu dalam meningkatkan kecepatan transfer tersebut. Ini karena CDN menggunakan server di berbagai negara untuk mendistribusikan konten. Alhasil, pengunjung akan mendapatkan konten yang sama dari server CDN terdekat.<\/p>\n\n\n\n

Di sisi lain, kamu mungkin hanya menargetkan area atau negara lokal. Misalkan, servermu ada di Jakarta (Indonesia) dan target pasarmu juga ada di Indonesia. Maka, CDN mungkin tidak menunjukkan dampak apapun pada kecepatan pemuatan web. Dalam kasus ini, CDN hanya akan membantu mengurangi beban di servermu.<\/p>\n\n\n\n

CDN gratis<\/h3>\n\n\n\n

Saat ini, sudah banyak layanan CDN gratis, seperti Cloudflare<\/a>, Quic.cloud<\/a>, dan Jetpack\u2019s site accelerator (Jetpack CDN)<\/a>, yang menawarkan fitur-fitur yang mengagumkan. <\/p>\n\n\n\n

Cloudflare merupakan CDN paling populer<\/a>. Tidak heran, banyak admin situs yang memilih menggunakan Cloudflare. Di sisi lain, Quic.cloud dan Jetpack\u2019s site accelerator (Jetpack CDN) memerlukan situs WordPress dan plugin khusus.<\/p>\n\n\n\n

Kode library<\/em> dari CDN<\/h3>\n\n\n\n

Selain caching<\/em>, beberapa CDN, seperti Cdnjs<\/a> milik Cloudflare and Google Hosted Libraries<\/a>, juga menyediakan berkas kode library<\/em> umum. Mereka memberikan akses publik ke berkas kode library<\/em> umum, seperti JQuery, Web Font Loader<\/em>, D3.js, dan berkas kode library<\/em> lainnya. Jadi, kecuali kamu memiliki server yang besar dan kuat, kami sarankan untuk memanggil berkas umum tersebut dari CDN apabila situsmu membutuhkannya.<\/p>\n\n\n\n

Semisal halaman situs kamu membutuhkan berkas JQuery, maka kamu cukup mencantumkan salah satu kode berikut pada HTML kamu:<\/p>\n\n\n\n

<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.3\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.3\/jquery.min.js\"><\/script><\/code><\/pre>\n\n\n\n
5. Optimasi gambar<\/strong><\/h2>\n\n\n\n
Mayoritas pengunjung yang membaca artikel, blog, atau konten apapun, cenderung lebih paham dengan adanya gambar. Karena itu, kamu mungkin memiliki banyak gambar dalam sebuah halaman. Namun, karena setiap gambar akan mempengaruhi kecepatan situs web, jadi, gunakan gambar sesedikit mungkin dan seefektif mungkin. <\/p>\n\n\n\n
Memperkecil ukuran berkas gambar<\/h3>\n\n\n\n
Selain itu, setiap gambar yang digunakan dalam situs web<\/a> perlu dioptimalkan. Optimalkan ukuran berkas (file<\/em>) gambar sekecil mungkin, tanpa banyak mempengaruhi kualitasnya. Ada beberapa cara yang dapat kamu pilih:<\/p>\n\n\n\n