Cara Mempercepat Loading Website

5 Cara Mempercepat Loading Website WordPress Hingga 50%


Dalam panduan ini, saya akan bagikan beberapa trik atau cara untuk meningkatkan kecepatan loading website Anda.


Dari yang awalnya seperti ini:

sebelum dioptimasi

Menjadi seperti ini:

setelah dioptimasi

Laod time berkurang hingga 50%!


Bagaimana caranya? Silahkan lanjutkan membaca panduan ini hingga tuntas.


Ditulis oleh Willya Randika (Founder Penasihat Hosting)

Dislaimer:

  • Artikel ini berisi link affiliasi/referral, saya akan mendapatkan komisi jika Anda membeli apapun yang saya rekomendasikan di dalam panduan ini. Terima kasih atas support Anda. Baca lebih lengkap.

Pertama-tama, saya punya berita baik buat Anda:

Panduan ini adalah panduan yang mudah, karena tidak diperlukan pengetahuan teknis untuk dapat mengikutinya.

Dan jika Anda mengikuti panduan ini langkah demi langkah, Anda pun bisa mendapatkan hasil yang sama atau bahkan lebih. 

... bahkan jika Anda bukanlah seorang WordPress Specialist.

... ataupun seorang programmer.

Secara singkat:

Jika Anda ingin meningkatkan kecepatan loading website, Anda akan menyukai panduan ini.

2 Hal Yang Perlu Anda Lakukan dan Perhatikan Sebelum Memulai Optimasi Kecepatan Website

1. Tes Kecepatan atau Performa Website Anda Saat Ini

Pertama-tama, Anda perlu melakukan tes kecepatan website Anda terlebih dahulu.

Agar Anda bisa membandingkan hasilnya (BEFORE dan AFTER).

Rekomendasi saya:

Untuk kedua alat diatas, pastikan Anda memilih lokasi server yang dekat dengan lokasi pengunjung website Anda.

Karena bisa memberikan indikasi yang lebih tepat untuk kecepatan website Anda saat ini.

Namun sayangnya kedua alat tersebut tidak menyediakan lokasi server yang dekat dengan Indonesia, jadi hasil page load time nantinya tidak bisa dijadikan patokan.

Catatan:

Dalam panduan ini, saya menggunakan GTMetrix.com sebagai acuan, karena selaion tool ini lebih populer dan banyak dipakai sebagai referensi dikalangan blogger dan internet marketer, pun lebih friendly untuk pemula.

Yang terpeting dari itu semua adalah kecepatan website Anda terasa lebih ringan, lebih cepat dan score GTMetrix pun lebih bagus setelah mengaplikasikan tips-tips optimasi yang saya bagikan dalam panduan ini.

2. Jangan Terlalu Terobsesi Untuk Mendapatkan Score yang Sempurna

Apapun yang menjadi sebab permasalahan loading website Anda menjadi lambat, saya yakin semuanya bisa diatasi dengan tips-tips yang saya berikan dalam panduan ini.

Tapi ingat:

Jangan terlalu terobsesi untuk mendapatkan nilai yang sempurna. Score 100/100 itu tidak realistis. Jadi jangan terus mencoba mendapatkannya.

Mengapa?

Pertama, Anda bisa gila mencoba dan mencoba.

Kedua, upaya ekstra Anda dalam mencoba tidak akan sepadan dengan hasil yang di dapatkan nantinya. Lebih baik Anda melakukan hal lain daripada terus mencoba mendapatkan yang sempurna.

Ketiga, jika Anda berharap ranking website Anda di Google akan meningkat drastis setelah kecepatan website Anda sempurna, maka buang harapan Anda itu jauh-jauh, karena Google tidak menjadikan faktor kecepatan sebagai faktor besar, setidaknya untuk saat ini. 

Apa kata Google tentang speed sebagai signal untuk merangking website

Sumber: Search Engine Land

Tapi beberapa hal yang akan terjadi jika website Anda lambat:

  • Akan mengurangi traffic pengunjung
  • Berkurangnya tingkat konversi yang berdampak pada berkurangnya jumlah pendapatan
  • Memberikan pengalaman yang buruk bagi pengunjung website
  • Mengurangi atau bahkan menghilangkan tingkat loyalitas pelanggan


5 Cara Mempercepat Loading Website

Jika Anda tidak ingin hal buruk diatas terjadi pada bisnis Anda, maka mulailah untuk melakukan optimasi untuk meningkatkan kecepatan loading halaman website Anda.


1. Pilih Hosting yang Cepat dan Handal

Hosting adalah salah satu yang paling berdampak besar bagi kecepatan website.

Karena pada saat seseorang mengunjungi website Anda, informasi kunjungan tersebut dikirim dari hard drive penyedia hosting ke browser pengunjung Anda. Ini adalah hambatan pertama yang ditemui.

Bagaimana cara penyedia hosting mengatur jaringan server, infrastruktur atau teknologi yang digunakan, semuanya mempengaruhi kecepatan website.

Dan sayangnya, Anda tidak dapat melakukan apapun jika hosting yang Anda gunakan saat ini lambat selain menggantinya dengan yang lebih cepat.

Akibatnya jika Anda memilih hosting yang lambat adalah apapun cara optimasi yang Anda lakukan tidak akan berpengaruh banyak, karena penyedia hosting Anda hanya dapat memberikan kecepatan pada batasan tertentu saja.

Oleh alasan itulah saya memasukkan hosting sebagai poin pertama dalam tips cara mempercepat loading website ini.

Nah, untuk mengatasi masalah ini, ada beberapa solusi yang bisa saya tawarkan.

Please Note:

Anda harus memilih lokasi server yang dekat dengan pengunjung website Anda.


Jika pengunjung website Anda mayoritas dari Indonesia, maka pilih hosting dengan lokasi server di Indonesia atau boleh juga memilih lokasi server di Singapore karena letaknya yang tidak terlalu jauh dengan Indonesia.

1.1 Shared Hosting (Pilihan yang Paling Terjangkau)

Pilihan pertama dan merupakan pilihan yang paling populer adalah shared hosting. 

Populer karena selain menawarkan harga yang murah, juga pengelolaannya relatif mudah. 

Cocok untuk pemula atau untuk Anda yang baru memulai dan tidak ingin mengeluarkan biaya besar untuk hosting atau untuk website dengan traffic yang tidak besar (low to medium).

Rekomendasi saya adalah untuk website dengan traffic kurang dari 20.000/bulan.

Jetorbit

Jetorbit

Harga mulai dari Rp 15.150/bln.
​Tersedia pilihan lokasi server Indonesia dan Singapore.

review siteground

Siteground

Harga mulai dari $3,95/bulannya. Tersedia pilihan lokasi server yang dekat dengan Indonesia, yaitu di Singapore.

Berdasarkan penelitian Penasihat Hosting, Jetorbit adalah hosting lokal dengan rata-rata page load time tercepat saat ini (979ms). Jetorbit juga memiliki server yang stabil (99,92%).

Sedangkan jika Anda memilih hosting luar, rekomendasi saya adalah Siteground. Performance (uptime dan load time) dan support mereka sangat bagus.

1.2 Cloud Virtual Private Server (VPS)

Jika Anda menginginkan performa yang lebih tinggi, Anda harus mempertimbangkan untuk melakukan upgrade pada hosting Anda.

Dan Cloud VPS adalah jawabannya.

Cloud VPS ini tidak hanya cocok untuk website dengan traffic medium to high saja, tetapi juga merupakan pilihan yang bijak dan bagus untuk website baru.

Jenis Cloud VPS sendiri terbagi dua, ada yang Cloud Unamanaged VPS, ada pula yang Cloud Managed VPS.

Managed VPS artinya hosting akan dikelola oleh penyedia hosting. Jadi Anda bisa fokus hanya pada pengembangan dan content management website Anda saja.

Sedangkan unmanaged VPS adalah penyedia hosting tidak bertanggung jawab sama sekali dalam mengelola hosting Anda, dengan kata lain Anda perlu mengurus semuanya, mulai dari melakukan konfigurasi pada server, memasang firewall, dll.

Biaya unmanaged VPS jauh lebih murah dari managed VPS, yaitu mulai dari $5/bulannya. Sedangkan managed VPS bisa 2 - 4x lipat dari biaya unmanaged VPS.

Rekomendasi saya untuk Cloud Unmanaged VPS adalah..

Digital Ocean Logo

Digital Ocean

Harga mulai dari $5/bulannya. Tersedia pilihan lokasi server yang dekat dengan Indonesia, yaitu di Singapore.

Penasihat Hosting menggunakan Digital Ocean sebelum pindah ke KINSTA (Managed Cloud Hosting)

Nah, bagi Anda yang belum memiliki pengetahuan teknis tentang bagaimana cara mengatur server sendiri..

...atau tidak mau repot-repot dan ingin semuanya diatur oleh ahlinya namun tetap menginginkan biaya yang murah, saran saya Anda bisa memilih managed VPS dari Cloudways.

Cloudways bukanlah penyedia hosting, mereka bekerja sama dengan perusahaan hosting seperti Digital Ocean, Vultr, Linode, AWS dan Google Cloud Platform.

Peran Cloudways disini adalah menawarkan solusi pengelolaan hosting 100%, sepenuhnya. Anda tidak perlu mengerti coding ataupun Linux sama sekali. 

Cloudways-Logo-full

Cloudways

Gunakan kode promo: PHCW30
Untuk mendapatkan diskon 30% selama 2 bulan

1.3 High Performance Managed WordPress Hosting

  • Jika Anda adalah pengguna WordPress
  • Mempunyai budget lebih untuk hosting
  • Menginginkan hosting dengan performa (uptime dan speed) terbaik
  • Menginginkan dukungan support terbaik yang sangat mengerti WordPress

Maka saya sangat menyarankan Kinsta.

Kinsta adalah sebuah platform hosting WordPress terbaik di dunia saat ini.

Hosting mereka sudah dikonfigurasi seoptimal mungkin untuk menjalankan website WordPress. Dan seluruh infrastruktur dibangun menggunakan Google Cloud Platform dan berbeda dari infrastruktur tradisional pada umumnya.

kinsta-logo

KINSTA

Harga hosting KINSTA mulai dari $30/bulan untuk 1 website dan jika Anda ingin tahu dimana hosting penasihathosting.com saat ini, jawabannya adalah KINSTA. Saya bahkan telah memindahkan semua website saya ke Kinsta.

Kinsta adalah provider terbaik yang pernah saya gunakan.


Kekurangan KINSTA adalah biayanya yang jauh lebih mahal.

Kekurangan lainnya untuk pengguna di Indonesia mungkin adalah metode pembayarannya yang hanya menerima kartu kredit saja. 

Solusinya Anda bisa menggunakan Prepaid Master Card dari Payooner atau bisa juga menggunakan Virtual Credit Number (VCN) berlogo Master Card dari BNI Syariah.

Bagi Anda nasabah BNI Syariah, bisa request VCN melalui aplikasi mobile banking BNI. Bagi yang bingung bagaimana caranya, bisa mengunjungi artikel dari Mas Lukman berikut ini: https://www.lukmanulhakim.id/bni-syariah-sudah-bisa-vcn/

Jika saat ini Anda menggunakan shared hosting dan telah mencoba banyak hal untuk meningkatkan kecepatan website Anda tapi tetapi masih gagal, maka cara terbaik yang bisa saya sarankan adalah melakukan upgrade hosting Anda ke Cloud VPS.

Trust me, Anda akan merasakan perbedaan yang sangat signifikan pada kecepatan loading website Anda.


2. Gunakan Tema Website yang Ringan dan Cepat

Tahukah Anda dalam hal performa, setiap elemen yang ada dalam suatu tema memiliki dampak pada kecepatan keseluruhan website.

Sekarang ini banyak developer memasukkan banyak fitur dalam tema, tetapi faktanya tidak semua fitur Anda butuhkan, ya kan?

Fitur-fitur seperti Google font, slider, script parallax, gallery, dll...

Tema dengan  kaya fitur memang bagus, tetapi hanya jika Anda benar-benar membutuhkannya. Kalau tidak, fitur-fitur tersebut hanya akan menambah beban load halaman website Anda saja.

Jadi, alangkah baiknya Anda beralih ke tema WordPress yang ringan dan memiliki kemampuan untuk menonaktifkan fitur-fitur yang tidak Anda butuhkan.

Dan sama seperti hosting, agar Anda tidak salah dalam memilih, rekomendasi saya adalah GeneratePress, tema yang juga saya gunakan di penasihathosting.com dan di semua website yang saya miliki.

GeneratePress

Jika Anda menginginkan tema yang ringan (kurang dari 1MB), responsive dan berfokus pada kecepatan, dan SEO friendly tentunya, maka GeneratePress adalah jawaban yang mungkin Anda cari-cari selama ini.

GeneratePress adalah tema yang populer. Sudah di download lebih dari 1,8 juta kali dan mendapatkan 700+ 5/5 rating dari pengguna.

Yang bagus dari GeneratePres, seperti yang saya singgung pada penjelasan sebelumnya, adalah Anda bisa menonaktifkan fitur-fitur yang tidak Anda butuhkan dengan sangat mudah hanya dengan 1x klik.

Ini akan menghemat sumber daya dan mengoptimalkan kecepatan website pada saat yang bersamaan.

Hal menarik lainnya adalah sebenarnya GeneratePress adalah multi-purpose theme, yang artinya Anda dapat menggunakannya untuk apapun kebutuhan Anda, baik untuk membuat website portofolio, company profile, toko online, personal blog, money blog, dll.

Tetapi, untuk mendapatkan semua fiturnya, Anda perlu membeli versi premiumnya seharga $49,95. Jika Anda tidak ingin membeli versi premiumnya, saya rasa versi gratisnya sudah cukup powerfull.


3. Optimasi dan Sesuaikan Ukuran Seluruh Gambar

Masih ingat dengan GTMetrix.com yang saya sebutkan di awal panduan ini?

Sekarang saya ajak Anda untuk mengunjungi GTMetrix.com dan test kecepatan website Anda.

Masukkan link halaman website yang ingin Anda optimasi. Dalam contoh kali ini, saya memasukkan link halaman: https://penasihathosting.com/cara-membuat-website/

test kecepatan halaman di GTMetrix

Pertama-tama, mari kita lihat rekomendasi dengan prioritas paling tinggi:

Mengoptimasi gambar

Prioritas paling tinggi pada website Anda mungkin saja berbeda, tapi dari kasus yang sering saya jumpai selama ini, gambar menjadi faktor terbesar yang membuat beban halaman menjadi berat. 

Yaitu:

  • Serve scaled images, dan
  • Optimize images

(jika Anda tidak menjumpai kedua poin diatas, maka Anda bisa melewati cara ke #3 ini dan lanjut membaca cara selanjutnya).

​​Ada beberapa solusi yang bisa saya tawarkan​​​, baik untuk pengguna WordPress maupun untuk pengguna non WordPress.


3.1 Untuk Pengguna WordPress

Sebenarnya, pada WordPress versi 4.4+ semua gambar yang dimasukkan ke dalam postingan memiliki atribut scrset.

Apa itu atribut scrset? (buat pengguna WordPress yang belum tahu)

Atribut ini berisi informasi untuk membantu browser untuk menentukan ukuran gambar mana yang terbaik.

Agar lebih mudah dipahami, berikut saya berikan contoh sebuah gambar laporan monitoring page load time.

srcset

Ukuran asli gambar diatas adalah 901x502px.

Kemudian perhatikan yang saya kotaki warna merah diatas, gambar ditampilkan dalam ukuran 725x403.94 px.

Dan jika Anda buka code HTML pada gambar diatas, Anda akan melihat atribut scrset:

<img src="https://mk0kelaswp7b9o0s5l2m.kinstacdn.com/wp-content/uploads/2019/11/Page-Load-Time-Niagahoster.jpg" alt="" class="wp-image-13" srcset="https://mk0kelaswp7b9o0s5l2m.kinstacdn.com/wp-content/uploads/2019/11/Page-Load-Time-Niagahoster.jpg 901w, https://mk0kelaswp7b9o0s5l2m.kinstacdn.com/wp-content/uploads/2019/11/Page-Load-Time-Niagahoster-300x167.jpg 300w, https://mk0kelaswp7b9o0s5l2m.kinstacdn.com/wp-content/uploads/2019/11/Page-Load-Time-Niagahoster-768x428.jpg 768w" sizes="(max-width: 901px) 100vw, 901px">

Atribut scrset memiliki 3 dimensi ukuran gambar:

  • Ukuran 901w (lebar maksimal: 901px) = untuk tampilan desktop
  • Ukuran 300x167 = untuk tampilan mobile
  • Ukuran 768x428 = untuk tampilan tablet

Tergantung dari apa device yang Anda pakai, browser akan menampilkan gambar dengan ukuran yang lebih tepat.

Namun, kekurangan atribut scrset ini adalah tidak memiliki spesifikasi ukuran yang jelas, sehingga GTMetrix pun akan memberikan Anda saran untuk memberikan spesifikasi yang jelas pada gambar.

Ketika Anda melakukan optimasi speed website, tentu Anda ingin hasil yang maksimal bukan?

Hal-hal kecil pun seharusnya tidak luput dari optimasi Anda, termasuk memperhatikan kekurangan atribut scrset ini.

Lagipula gambar yang di upload di WordPress tidak dioptimalkan secara otomatis.

Ada dua cara yang bisa Anda lakukan guna mengoptimalkan gambar-gambar pada website WordPress Anda.

Ada cara yang otomatis dan ada cara yang manual.

Kita akan mulai belajar dari cara yang otomatis terlebih dahulu (khusus pengguna WordPress). Jika website Anda tidak menggunakan WordPress, silahkan menggunakan cara manual.


3.1.1 Cara Otomatis: Memanfaatkan plugin Jetpack (Gratis)

Di WordPress, ada berbagai plugin yang bisa Anda manfaatkan untuk mengoptimalkan gambar website Anda secara otomatis.

Dari bebeberapa plugin yang sudah saya test, tidak ada plugin yang benar-benar gratis dan mudah digunakan kecuali plugin Jetpack.

Di Jetpack, ada fitur yang namanya photon.

Nah, dengan mengaktifkan Photon ini akan membuat semua gambar di website Anda teroptimasi (optimize images) dan ukuran gambar juga akan di sesuaikan berdasarkan ukuran yang sebenarnya tampil di halaman website (serve scaled images) secara OTOMATIS.

Artinya, Anda hanya cukup mengaktifkan fitur Photon saja tanpa perlu melakukan hal lainnya.

Caranya:

1. Install dan aktifkan plugin JetPack (note: Anda perlu registrasi terlebih dahulu)

2. Klik bagian Settings > Performance. Dan aktifkan semua fungsi di Performance & Speed

pastikan semua fungsi sudah diaktifkan

Setelah diaktifkan, cek atau analisis kembali kecepatan website Anda di GTMetrix.

gambar telah dioptimasi

Seperti yang Anda lihat, keduanya telah berhasil dioptimasi. Mudah bukan? 🙂

Kelebihan Jetpack:

  • Gratis dan mudah digunakan
  • Gambar sudah di optimize dan di serve scaled imges secara otomatis
  • Tidak ada batasan limit jumlah gambar yang di optimasi
  • Gambar di serve menggunakan CDN Jetpack (gratis)

Kekurangan Jetpack:

  • Tidak hanya Photon, Jetpack juga memiliki banyak fitur seperti statistik, backup, contact form, security, dll yang mungkin tidak semuanya Anda butuhkan.

    Dan jika tidak Anda butuhkan, maka hanya meningkatkan beban website atau beban server hositng Anda saja. Jadi, Anda perlu mendisable beberapa fungsi atau fitur yang tidak Anda butuhkan.

    Ikuti tutorial ini untuk menonaktifkan fungsi-fungsi yang tidak dibutuhkan pada plugin Jetpack.

3.2 Mengoptimasi Gambar secara Manual

Jika Anda pengguna selain WordPress atau untuk pengguna WordPress yang tidak ingin menggunakan plugin Jetpack atau plugin apapun karena ditakutkan akan meningkatkan beban halaman dan resources hosting, maka Anda bisa mengoptimasi seluruh gambar Anda dengan bantuan OptimiZilla.

Caranya mudah, Anda hanya perlu mengupload semua gambar pada halaman website yang ingin Anda optimasi.

OptimiZilla

Dan Anda bisa menggunakan tools seperti Photoshop, PhotoScape, Preview, dll untuk menyesuaikan ukuran gambar ke ukuran yang sebenarnya secara manual / serve scaled images.

memperkecil ukuran gambar

Caranya adalah dengan memperhatikan rekomendasi dari GTMetrix. Seperti contoh yang saya kotaki warna merah adalah ukuran gambar yang perlu di perkecil, misalnya dari 1893x3798 diperkecil menjadi 654x1312.


3.3 Lazy Load Images

Masih berkaitan dengan gambar, sebenarnya ada satu trik lagi yang dapat meningkatkan kecepatan website Anda, yaitu dengan lazy load images.

Apa itu lazy load images?

Biasanya, ketika seseorang mengunjungi halaman website, browser akan mendownload semua gambar sekaligus. Ini hambatan yang besar terutama buat halaman website yang memiliki banyak gambar. 


Nah, dengan lazy load images, browser akan memuat gambar satu per satu, hanya pada dimana layar Anda berada saja dan akan memuat gambar lagi jika Anda men-scroll ke bawah halaman/layar dan ada gambar lain yang mulai terlihat.


Atau secara singkat, gambar tidak akan di download sampai ketika benar-benar diperlukan saja.

Pertanyaannya: Apakah lazy load images benar-benar dapat meningkatkan kecepatan website?

Jawabannya IYA.

Perhatikan laporan performance before dan after dibawah ini:

Before lazy load

Before

after lazy load images

After

Berdasarkan laporan performance GTMetrix:

  • Fully load time meningkat dari 5.7s ke 4.6s
  • Total page size berkurang secara signifikan dari 2.80MB menjadi hanya 697KB
  • Dan request juga berkurang secara signifikan dari 91 menjadi 26

Bagaimana cara mengaktifkan lazy load images di website Anda?

Untuk pengguna WordPress, jika Anda menggunakan plugin Jetpack, Anda dapat menemui fitur ini pada bagian performance.

lazy load images di Jetpack

Dan jika Anda tidak menggunakan Jetpack, rekomendasi saya adalah Lazy Load by WP Rocket (setelah melakukan test beberapa plugin lazy load, saya menemukan bahwa Lazy Load by WP Rocket ini adalah yang terbaik).

lazy load by wp rocket

Plugin ini tidak hanya berfungsi pada semua gambar dalam konten artikel saja, tetapi juga pada thumbnail, avatar, dan iframe. Selain itu, berat script nya kurang dari 10kb, dan bagusnya lagi Anda juga dapat mengganti iframe Youtube dengan thumbnail untuk lebih mempercepat waktu loading website Anda.


3.3.1 Apakah Lazy Load Berdampak Pada SEO?

Sangat penting untuk memastikan bahwa apapun plugin yang Anda install tidak akan membahayakan SEO website Anda. 

Dan untuk plugin Lazy Load ini, ada dua hal yang perlu Anda periksa:

  1. Pastikan Google masih tetap dapat men-crawl gambar lazy load Anda. Anda bisa menggunakan fitur “Fetch as Google” di bagian Crawl pada Google Search Console. Jika Anda masih dapat melihat gambar Anda ada di source code maka kemungkinan besar SEO website Anda akan aman.
  2. Pastikan juga Anda menggunakan 'Alt Text' di semua gambar yang Anda upload, karena ini penting untuk peringkat pencarian gambar di Google.
dampak lazy load pada SEO

4. Install Plugin Caching

Caching adalah istilah yang umum.

Saya yakin sebagian besar dari Anda sudah tahu apa itu caching dan sudah mencoba trik ini untuk meningkatkan kecepatan website Anda.

Apa itu caching?

Caching itu seperti di restoran cepat saji ketika Anda memesan kentang goreng.


Akan jauh lebih lambat jika staf restoran menunggu setiap pelanggan memesan kentang goreng, lalu pergi ke dapur kemudian mengiris kentang dan menggorengnya. Kentang goreng cukup sering di pesan bukan? Staf restoran tahu akan hal itu, maka mereka menyiapkan cache (kentang yang sudah digoreng) agar bisa langsung diambil dan diberikan kepada pelanggan yang memesan.

Ada berbagai cara untuk mengaktifkan fitur caching tergantung pada platform apa yang Anda gunakan. Apabila Anda pengguna WordPress, Anda dapat menginstal plugin berikut:

  • W3 Total Cache (Plugin cache gratis terbaik, namun pengaturannya lebih rumit)
  • WP Super Cache (Gratis dengan pengaturan yang mudah)
  • WP Rocket (Berbayar - performance nya lebih baik dan fiturnya lebih banyak)


Note: Jika Anda menggunakan hosting di KINSTA dan Cloudways, Anda tidak perlu menginstal plugin caching tambahan, karena mereka sudah membangun plugin caching sendiri yang lebih cocok dengan lingkungan hosting mereka.

Faktanya, mengaktifkan caching pada website dapat meningkatkan kecepatan website secara signifikan. Penelitian (W3 Total Cache pada shared hosting) menunjukan bahwa mengaktifkan cache dapat mengurangi loading website sebesar 33,3%.


5. Minify file HTML, CSS dan JavaScript (JS)

Minify adalah salah satu metode yang biasa digunakan untuk mengurangi load time dan penggunaan bandwidth di situs website dengan cara meminimalkan kode-kode di halaman website (HTML, CSS dan JavaScript).

Ketika menulis kode-kode HTML, CSS dan JavaScript, developer website biasanya menggunakan spasi, komentar dan variabel yang diberi nama untuk memudahkan ketika membaca atau mencarinya.

Sebagai contoh kode css:

body {
           background-color: #fff;
}

h1 {
           color: #000;
           font-family: 'proximanova', 'sans-serif';
           font-size: 40px;
           text-decoration: underline;
}

h2 {
           color: #000;
           font-size: 30px;
           font-family: 'proximanova', 'sans-serif';
}

h3 {
           background–color: #000;
           font-size: 24px;
           font-family: 'proximanova',  'sans-serif';
}

Seperti yang Anda lihat pada contoh kode css sederhana diatas, ada banyak spasi yang saya gunakan. 

Kode-kode nya memang terlihat rapih dan lebih enak di pandang, tapi jika Anda ingin mengurangi load time website Anda, kode-kode CSS diatas harus di minify.

Jika kita minify, maka kode CSS diatas akan menjadi seperti dibawah ini:

body{background-color:#fff}h1{color:#000;font-family:'proximanova','sans-serif';font-size:40px;text-decoration:underline}h2{color:#000;font-size:30px;font-family:'proximanova','sans-serif'}h3{background–color:#000;font-size:24px;font-family:'proximanova','sans-serif'}

Kode yang sudah di minify diatas ukurannya adalah 270 bytes, sedangkan ukuran sebelum di minify adalah 456 bytes (ada penurunan sebesar 40%).

Itu baru kode CSS yang sederhana.

Bagaimana performance halaman cara membuat website setelah di optimasi dengan me-minify kode CSS, HTML dan JavaScript?

tanpa minify js dan css

Before

setelah di minify js dan css

After

Berdasarkan laporan performance GTMetrix:

  • Fully load time meningkat dari 5.7s ke 4.6s
  • Total page size berkurang secara signifikan dari 2.80MB menjadi hanya 697KB
  • Dan request juga berkurang secara signifikan dari 91 menjadi 26

Semuanya mengalami penurunan, baik load time, page size dan yang paling signifikan adalah berkurangnya request dari 116 menjadi 88.

Pertanyaannya: Bagaimana cara me-minify file HTML, CSS dan JavaScript pada website?


5.1 Minify file HTML, CSS dan JavaScript (JS) Menggunakan Plugin Autoptimize

Saran saya, pertama Anda perlu membackup website Anda sebelum

Pertama, instal plugin Autoptimize.

Autoptimize plugin

Dan untuk pengaturannya, saya sarankan untuk memilih opsi berikut:

Untuk opsi JavaScript:

setting javascript

Untuk step no 3 itu sifatnya opsional. Aktifkan hanya jika script website Anda rusak yang menyebabkan tampilan website Anda menjadi rusak juga.

Biasanya plugin-plugin yang memiliki kode yang sudah di minify akan bentrok dengan plugin Autoptimize dan Anda perlu mengaktifkan step ke 3 ini untuk memperbaikinya.

Untuk opsi CSS

setting css

Dan untuk opsi HTML, CDN dan Misc

setting html, csn dan misc

Step no 8 dan 9 itu sifatnya juga opsional.

Jika Anda menggunakan CDN, Anda bisa memasukkan alamat CDN Anda di kolom no 8.

Dan apabila Anda menggunakan page builder, seperti Elementor, Thrive Architect, dll Anda perlu mengaktifkan step no 9 agar Autoptimize tidak ikut aktif ketika Anda log in sebagai pengguna.

Terakhir, untuk pengaturan extra:

Klik tab 'Extra'.

pengaturan extra

Untuk step no 10, jika Anda menggunakan Google Fonts, Anda bisa pilih "Leave as is", jika tidak Anda bisa pilih "Remove Google Fonts".

Begitu juga dengan step no 11, jika Anda tidak menggunakan Emoji, Anda bisa ceklis no 10.

Dan untuk opsi "remove query strings from statis resources", sebenarnya ini sama sekali tidak akan menurunkan load time website Anda, tapi HANYA akan meningkatkan rangking di test speed GTMetrix.com saja.


5.1.1 Defer Parsing of JavaScript

Ini sifatnya opsional hanya jika Anda menemukan rekomendasi untuk melalukan defer parsing JS dari GTMetrix seperti contoh dibawah ini:

defer parsing of JS

Untuk mengoptimasinya, Anda perlu menginstal plugin Async JavaScript, yang dibuat oleh orang yang sama dengan plugin Autoptimize.

async js plugin

Dan untuk pengaturannya, saya menyarankan untuk memilih opsi berikut:

pengaturan Async JS plugin 1

Catatan untuk opsi jQuery. Jika ada salah satu fungsi pada website Anda yang menjadi tidak berfungsi setelah mengaktifkan metode 'Defer' atau 'Async', maka Anda perlu memilih opsi 'Exclude'.

pengaturan Async JS 2

Untuk opsi Script Exlusion, saya menyarankan Anda untuk memasukkan script berikut:

wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js


Opsi pengecualian plugin dan tema tertentu

Anda bisa memasukkan plugin atau tema tertentu apabila setelah 'Async' atau 'Defer' diaktifkan, ada plugin atau tema tertentu yang menjadi tidak berfungsi.

pengaturan Async JS 3


5.2 Minify Dengan Cara Manual

Jika Anda pengguna non WordPress, Anda bisa mengikuti tutorial dari ElegantTheme ini.


Bagaimana Dengan CDN? Apakah Diperlukan?

Saya hanya menyarankan Anda menggunakan CDN untuk meng-hostkan file yang bersifat statis saja, seperti gambar dan file CSS & JavaScript.

Karena provider CDN, seperti Cloudflare tidak memiliki server yang berlokasi di Indonesia. 

Ketika Anda menggunakan CDN seperti Cloudflare, maka IP Address website Anda akan berpindah ke IP Address US dan menurut saya ini tidak bagus untuk SEO website Anda.

Jadi, saya hanya menyarankan untuk menggunakan CDN untuk file statis saja, seperti yang juga saya lakukan di penasihathosting.com.

Rekomendasi saya untuk CDN file statis adalah KeyCDN.

Jika Anda menggunakan hosting Cloudways, maka gunakanlah Cloudways CDN. Dan jika Anda sudah menggunakan Kinsta, maka gunakanlah Kinsta CDN. Bagusnya, kedua CDN yang dipakai oleh provider ini bertujuan hanya untuk meng-hostkan file-file yang bersifat statis saja.

Rangkuman - 5 Cara Mempercepat Loading Website WordPress

Dengan hanya menerapkan 5 perubahan ini saja, saya yakin dampaknya akan sangat terasa pada kecepatan website Anda dan mudah-mudahan dengan meningkatnya kecepatan website Anda, meningkat pula lah tingkat konversi website Anda.

Jadi, untuk merangkum semua yang sudah kita pelajari...

1. Menggunakan hosting dengan performance yang handal. Rekomendasi saya:

  • Shared hosting: Jetorbit (hosting lokal) atau Siteground (hosting luar)
  • Cloud VPS (untuk performance yang lebih baik): Digital Ocean (cloud unmanaged vps) dan Cloudways (cloud managed VPS)
  • High Performance Managed WordPress hosting: KINSTA (Tempat saya meng-hostingkan penasihathosting.com)

2. Menggunakan tema WordPress yang ringan: Rekomendasi saya adalah GeneratePress (tema yang juga saya pakai di Penasihat Hosting dan semua website yang saya miliki).

3. Optimasi gambar dan serve scaled images: Cara otomatis menggunakan plugin Jetpack atau bisa juga menggunakan cara manual dengan Optimizilla.

4. Meng-install plugin caching. Rekomendasi saya:

5. Minify file HTML, CSS dan JavaScript (JS): Gunakan plugin Autoptimize dan Async JavaScript.

  • Dagiingg mas ^,^
    Ngomong2 nih, kenapa banyak blogger yg menyarakankan untuk caching make wp rocket, total cache, super cache dan autoptimize dan async untuk minify?
    Sedangkan di provider hosting di indo mayoritas nge-up litespeed buat ngehandle semuanya ya mas?
    Mungkin Jenengan ada sepatah dua kata..
    Kalo saya pribadi masih litespeed.

  • Hallo Mas Willya, kalau boleh tau tema apa yang dipake Penasihathosting? soalnya ringan bener, tulisannya juga jelas dan gampang dibaca.

    Terimakasih sebelumnya,

  • Malam mas Randi, saya udah coba apply semua cara ini ke web saya. Hasilnya memang meningkat.. Web saya yang tadinya cm dapet skor 30-an sekarang meningkat ke 54 di Pagespeed insight.. Hanya saja Pagespeed melaporkan kalo web saya masih bermasalah di Reduce server response times (TTFB) dan Eliminate render-blocking resources. Selain itu jumlah request web saya tetap 41 menurut Pingdom.. Sepertinya ada yang kurang saya lakukan ya mas?

  • gan. kalo saya hotlink gambar dari server facebook atau instagram boleh ngk ya? dari akun sosmed kita sendiri. menurutmu gimna ya gan?

  • gan, kalau wp-optimeze dan autoptimize gak masalah jika diinstal bersamaan? mohon bantuannya karena web saya cinemxxxx* jelek sekali pagespeednya

  • Artikelnya sangat lengkap dan bermanfaat mas.

    Saya sudah menggunakan A2 Hosting mas,,
    kira-kira perlu ndak saya menggunakan DNS dari CloudFlare lagi..

    berdasarkan ulasan dari mas, bahwa hosting A2 sudah sangat cepat

  • Mas saya menggunakan Plugin WP Rocket Cache dan juga menginstall Plugin GZip Compression, tapi kok ada keluar notif dari WP Rocket Cache bahwa GZipnya nggak kompatiel.?

    isi pesannya seperti ini,
    “WP Rocket: The following plugins are not compatible with this plugin and may cause unexpected results:”

    saya sudah beberapa kali klik tombol enable plugin Gzip tapi tetap ndak mau. kira-kira solusinya apa ya ?

    • Kalau mas sudah menggunakan plugin WP Rocket, tidak perlu lagi instal plugin Gzip Compression, karena Gzip sudah secara otomatis aktif di WP Rocket, makanya bentrok dengan plugin Gzip yang mas install. Solusinya, hapus plugin Gzip.

  • Terima kasih untuk tipsnya, sudah dicoba dan hasilnya memang ada perubahan. Meski begitu skornya tetap sama 🙁
    Kalau boleh masukannya kak di web kukangku.id

    • Ini bukan waktu serve scaled images kayaknya ya, tapi recommendation buat optimize images. Cara termudah di WordPress adalah dengan menggunakan plugin yang secara otomatis akan mengoptimasi semua image di web. Rekomendasi saya plugin WP Smush.

  • PErmisi Mas Randika,, mau tanya saya,,pada case Serve Scaled Images dalam web saya,,itu berbeda tampilan reportnya,,solusinya gmn ya mas,,,

  • Alhamdulillah, terima kasih, sungguh sangat berguna, saya puas membacanya enak, tidak membingungkan, simple dan padat ilmunya, terus sehat, penasehathosting.com

  • Selamat malam mas. Makasih untuk tutorialnya. Lagi saya coba satu-satu nih dan memang langsung ngefek. Ditunggu tulisan-tulisan berikutnya yang ‘daging’ banget 🙂

  • Siang mas Dika, saya pengguna hosting Niagahoster paket bisnis untuk merintis portal berita m.lenews.id. Nah, sudah dua hampir tinggal Minggu belakangan loading page sangat lambat di angka 30 detik, dan sudah dua kali berganti server dari ID ke SG dan ke ID lagi sesuai arahan CS Niagahoster. Namun, kondisi tidak membaik.. Menjadi pertanyaan apakah usai perpindahan server butuh waktu cukup lama untuk web kembali normal?

    • Siang Mas Rifki. Coba cek statistik penggunaan resourcesnya (CPU, I/O, physical memory), bisa di cek di log nya dari 3 minggu terakhir, kalau penggunaan resourcesnya suka full/mentok artinya mungkin ada yang salah, bisa jadi dari pengkodean di website mas (mungkin ada script yang salah, error, dsb) atau boleh jadi karena traffic yang semakin tinggi sehingga membutuhkan resources yang lebih besar lagi dan dalam hal ini harus upgrade ke VPS. Oia, menurut saya mengganti lokasi server tidak terlalu ngaruh mas apalagi SG dan ID deket-deketan.

  • Halo mas, mau nanya soal CDN saya cek situs ini pake CDN CloudFlare.

    Kalau untuk pengunjung Indonesia perlu pake CDN ngga ya mas, saya pengen coba CDN gratis dari CloudFlare tapi belum berani karena banyak yg bilang nggak perlu.

    Kalau boleh tau situs ini pake CDN cloudflare berbayar apa yang gratis?

    Makasih sblmnya,

    • Halo. Engga kok, website ini tidak menggunakan CDN. Cloudflarenya saya pakai hanya untuk DNS (domain name server) nya saja, sebab dia punya DNS cepat dan gratis 🙂
      Saran saya sebaiknya jangan, karena IP adress website nanti otomatis terganti ke IP adress US dan jelas engga bagus buat SEO websitenya.

  • Salam Mas Bro Willya Randika
    Wow, lengkap banget.
    Lagi coba 1 per 1.
    Sayangnya ga semua tahap2nya cepet prosesnya.
    Jadi ga bisa langsung kasih tau “sebelum” dan “sesudah”nya.
    Jadi daripada lupa ucapin terimakasih dulu untuk sarannya yang lengkap dan jelas.
    Belum pernah baca panduan selengkap ini.
    Izin untuk berbagi dan tulis ulang versi kita ya.
    Mauliate
    Terimakasih

  • masbro, saya bingung nih.

    padahal saya belum masukin kode keep-alive. tapi di gt etrix udh 100% nilainya. hanya bingung saja mengapa itu terjadi.

    dan kemudian,
    baik ngga kalo kita menaruh gambar atau apappun itu di google drive dan me linknya dari sana?

    1 lagi ya hehe. btw saya suka sama style comment form nya. pake apa ya plugin atau tema bawaan?

    • Bagus juga kok kalau asal gambarnya di Google Drive, tapi kenapa tidak diupload di web sendiri saja? Nanti tidak keindeks lo di Google Image. BTW, kolom komentar di blog ini menggunakan plugin Thrive Comments.

  • Terima kasih banyak mas Randika untuk tipsnya, setelah menerapkan beberapa poin di atas (digabung dengan tips lain), PageSpeed Score GTmetrix dan YSlow Score dari sebelumnya E dan D bisa naik ke B dan C… Akses website pun meningkat lebih dari 50% 😀

    Saat menerapkan poin-poin di atas memang harus trial dan error, karena ada beberapa poin yang bisa meningkatkan skor, tetapi tampilan website bermasalah. Jadi ada suatu waktu bisa dapat skor PageSpeed A namun tampilan website kacau, hehe… Alhasil memang ada beberapa plugin yang harus dinonaktifkan (dalam kasus saya Async Javascript). Saya juga pinginnya coba poin CDN, tapi melihat efek untung ruginya.

    Untuk sementara ini saya puas dengan hasilnya, walau secara pribadi pinginnya bisa dapet skor A untuk PageSpeed dan YSlow Score (tapi sepertinya harus diulik lagi, hehe…) Tapi yang penting sekarang ini user experience lebih nyaman karena web lebih gegas.

    • Sama-sama Mas Alif.

      Dalam kasus saya di blog ini juga sama kok. Ketika menggunakan plugin Async Javascript, tema blog jadi kacau, makanya saya nonaktifkan juga. Tapi ini tidak selalu terjadi, saya punya blog lainnya pakai plugin Async aman2 saja.

      Kalau CDN, menurut saya ruginya adalah IP Adress web nanti berubah jadi di US, yang mana tidak bagus buat SEO jika target pengunjung website di Indonesia.

      Saran saya, jangan terlalu pusing mikirin speed website supaya hasilnya maksimal betul, karena sepengalaman saya si nanti tidak akan ada habisnya 🙂

      • Betul mas, kalau pinginnya dapat skor tertinggi malah engga selesai-selesai 😀

        Yang pasti optimasi yang sudah dilakukan ini pastinya akan berbeda untuk tiap web, jadi poin-poin pengoptimasian untuk satu web (misalnya plugin) bisa jadi akan berbeda hasilnya untuk tiap web.

        Intinya dicoba satu-satu aja dan pastikan backup web dulu sebelum coba-coba 😀

  • makasih mas sudah berbagi. saya sangat tertarik untuk mencoba membuat gzip. tapi sayangnya, selallu gagal setelah di cek lagi di chekgzip. itu kira kira kenapa ya mas? btw web saya lambat banget mas

  • ada panduan tersendiri untuk memasukkan kode diatas ke htaccess mas? atau tinggal copas di bagian paling bawah aja?

  • Mantap artikelnya saya suka, dan penjelasannya sangat memuaskan, sampai di kasih tahu di site mana saja kita mengeceknya… yang masih saya ragu-ragu adalah mengetahu htaccess itu ada banyak sekali yang dimasukan apakah tidak akan bertabrakan

    • Tidak kok Mas Asep, saya sudah coba duluan, tapi demi keamanan file .htaccess nya boleh di backup terlebih dahulu sebelum memasukkan kode-kode baru.

  • Artikel sangat bermanfaat utk newbie seperti saya, karena kebetulan sering mengalami hal serupa yaitu web kurang cepat saat loading.

  • Salam mas Randika, ini kali pertama saya mampir di blog anda, dan saya merasa beruntung telah mampir, saya mendapatkan beberapa trik yang sangat bermanfaat. TERIMAKSIIH MAS, sudah berbagi ilmu.

  • Saya keliling cari panduan atasi website saya yang mulai lambat, ditambah dapat petunjuk dari Pagespeed yang membingungkan buat pemula seperti saya. Akhirnya ketemu panduan panjang lebar ini. Luar biasa, semoga bisa saya terapkan, terima kasih sumbangsihnya.

  • Alhamdulilah… ketemu juga panduan teknikal wordpress yg lengkap ini… saya pemula di dunia bloging… sering bingung dengan istilah2 ”css, jquery, dll”

    Lagi kebingungan dengan web saya yg loading lama, meski udah pake wp super cache.

    Tapi mas Randika bersedia membagikan ilmunya secara mendetil bahkan mudah dipahami…

  • Inilah yang Saya cari,
    Artikel yang luar biasa lengkap.

    Kebetulan Saya lagi belajar tentang SEO. Mempercepat loading website merupakan hal yang erat kaitannya dengan SEO.

    Terima kasih, sangat bermanfaat ..

    • Sama-sama mbak Dwi.
      Kalau mbak melihat adanya perbedaan yang signifikan setelah menerapkan tips dan trik dari panduan ini, sekiranya mungkin bisa kontak saya, nanti bisa saya ‘featured’ kan diartikel ini 🙂

  • >