5 Cara Mempercepat Loading Website WordPress Hingga 50%


Ini adalah panduan terlengkap tentang cara mempercepat loading website.

Saya sudah mempraktekan sendiri semua cara yang ada dalam panduan ini dan berhasil meningkatkan kecepatan website saya hingga 50%.

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.

So, lets get started.

Ditulis oleh Willya Randika (Updated: 1 Juli 2020)

Cara mempercepat loading website

Disclaimer: 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.

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

1. Tes Kecepatan 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 selain 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
  • Mengurangi atau bahkan menghilangkan tingkat loyalitas pelanggan

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

5 Cara Mempercepat Loading Website

1. Pilih Hosting yang Cepat dan Handal

Hosting adalah 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.

Karena 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.

Biasanya cocok untuk website dengan traffic kurang dari 30.000/bulan.

Niagahoster

Niagahoster

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

SiteGround logo

Siteground

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

Berdasarkan penelitian Penasihat Hosting, Niagahoster adalah shared hosting lokal dengan rata-rata page load time tercepat saat ini (770ms).

Sedangkan jika Anda memilih hosting luar, rekomendasi saya adalah Siteground. Performance (uptime dan load time) dan support mereka sangat bagus. Mereka bahkan sudah menggunakan infrastuktur dari Google Cloud sejak bulan Februari 2020 lalu.

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, jika Anda benar-benar menginginkan hosting dengan performa tertinggi.

Jenis Cloud VPS sendiri terbagi dua, ada yang Unamanaged VPS, ada pula yang 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 3 - 5x lipat dari biaya unmanaged VPS.

Rekomendasi saya untuk Unmanaged VPS adalah..

Digital Ocean Logo

Digital Ocean

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

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 salah satu platform hosting WordPress terbaik di dunia saat ini.

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

Faktanya, Penasihat Hosting menggunakan Kinsta saat ini dan sangat puas dengan performa dan support nya yang sangat mengesankan. Kinsta adalah provider terbaik yang pernah saya gunakan selama ini.

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, baik itu yang unmanaged atau yang managed.

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, bukan?

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 yang memiliki kemampuan untuk menonaktifkan fitur-fitur yang tidak Anda butuhkan.

Dan sama seperti hosting, agar Anda tidak salah dalam memilih, rekomendasi saya adalah GeneratePress.

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 GeneratePress itu 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

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://kelaswp.com/wp-content/uploads/2019/11/Page-Load-Time-Niagahoster.jpg" alt="" class="wp-image-13" srcset="https://kelaswp.com/wp-content/uploads/2019/11/Page-Load-Time-Niagahoster.jpg 901w, https://kelaswp.com/wp-content/uploads/2019/11/Page-Load-Time-Niagahoster-300x167.jpg 300w, https://kelaswp.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.

Khusus pengguna WordPress, ada dua plugin yang bisa Anda gunakan untuk mengoptimalkan semua gambar website Anda secara otomatis. Adapun selain pengguna WordPress, Anda bisa menggunakan cara manual.

Note: Anda juga bisa menggunakan cara manual jika Anda tidak ingin menggunakan plugin di WordPress. Plugin digunakan untuk mempermudah pekerjaan Anda.

3.1.1 Cara Otomatis dengan Memanfaatkan plugin Jetpack dan ShortPixel Adaptive Images

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

Dari berbagai plugin yang sudah saya test, ada dua yang paling menarik perhatian, yaitu JetPack dan ShortPixel Adaptive Images.

Dua-dua nya memiliki kelebihan dan kekurangan masing-masing dan saya menyarankan Anda untuk menggunakan salah satunya saja.

1. Menggunakan Plugin ShortPixel Adaptive Images

ShortPixel Adaptive Images adalah salah satu plugin favorit saya dan yang paling mudah penggunaan nya (set and forget).

Kelebihan ShortPixel AI:

  • Gratis dan mudah digunakan (set and forget)
  • Gambar sudah di optimize dan di serve scaled images secara otomatis
  • Gambar di serve menggunakan CDN (gratis)
  • Memiliki fitur lazy load yang aktif secara otomatis begitu plugin diaktifkan
  • Sangat cocok untuk website dengan target pengunjung internasional

Kekurangan ShortPixel AI:

  • Plugin ini tidak benar-benar gratis. Ketika Anda menginstallnya, Anda akan mendapatkan gratis 500 image optimization credits. Setelah itu Anda bisa memilih untuk berlangganan secara bulanan atau one-time plans.

    Berita baiknya mereka memiliki paket 'FREE' yang menawarkan gratis 100 image optimization credits/bulan.
  • CDN tidak bisa di nonaktifkan, tapi Anda bisa menggunakan CDN Anda sendiri dengan melakukan pengaturan tambahan
  • Lazy load tidak bisa dinonaktifkan
  • Plugin ini sensitif (karena menggunakan JS untuk memodifikasi URL gambar) dan mungkin akan konflik dengan tema atau plugin lainnya yang Anda gunakan. Jadi, test website Anda setelah mengkatifkan nya

Cara menggunakan plugin ShortPixel AI?

Anda hanya perlu menginstall dan mengaktifkan plugin ShortPixel AI. Plugin ini akan bekerja secara otomatis tanpa perlu di setting terlebih dahulu.


2. Menggunakan 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.

Kelebihan Jetpack:

  • Bisa digunakan secara gratis
  • Gambar sudah di optimize dan di serve scaled images 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.

Jetpack cocok digunakan:

  • Jika Anda menginginkan plugin yang benar-benar gratis dan tidak memiliki batasan.
  • Tetapi, JetPack adalah plugin yang berat. Tidak cocok bagi hosting dengan jumlah resources hosting yang rendah, meskipun Anda bisa menonaktifkan fungsi-fungsi yang tidak dibutuhkan.

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

Caranya sangat mudah:

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? 🙂

3.2 Mengoptimasi Gambar secara Manual

Jika Anda pengguna selain WordPress atau untuk pengguna WordPress yang tidak ingin menggunakan plugin 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

Adapun jika Anda menggunakan plugin ShortPixel AI, maka fitur lazy load akan aktif dengan sendirinya tanpa perlu di setting terlebih dahulu.

Dan jika Anda tidak menggunakan Jetpack atau ShortPixel AI, 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 paling bagus).

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)
  • LiteSpeed Cache (jika web hosting Anda menggunakan LiteSpeed)
  • 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 di 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 melalukan minify file-file statis Anda.

Jika sudah 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.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:

Dengan hanya menerapkan 5 perubahan ini saja, saya yakin dampaknya akan sangat terasa pada kecepatan website Anda.

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

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

  • Shared hosting: Niagahoster (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.

3. Optimasi gambar dan serve scaled images: Cara otomatis menggunakan plugin ShortPixel AI atau Jetpack atau bisa juga menggunakan cara manual dengan bantuan tool Optimizilla (untuk mengoptimalkan gambar) dan Photoshop, Photoscape, GIMP, dsb untuk serve scaled images.

4. Meng-install plugin caching. Rekomendasi saya:

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

  • Kalau Generate Press, harga $49,95 itu sekali seumur hidup apa setiap tahun bayar? Kalo setiap tahun bayar tapi saya ga bayar konsekuensinya apa?

    Reply

  • Bang dika, saya udah kehasut buat pake generatepress nih wkwkwk, Awalnya pake JNews emang berat loadingnya. Trus saya pengen template kayak penasihathosting model apa ya generatepress nya apakah tipe premium ?

    Sebelumnya saya sudah pake CDN Cloudflare ya awalnya sih buat keamanan, dan kecepatan website.. Tetapi bang dika bilang, gak bagus buat SEO saya langsung degdegan disana apa betul ?

    Reply

    • Iya betul, saya pakai GeneratePress Premium di Penasihat Hosting, kemudian saya customize lagi agar sesuai dengan keinginan.

      Soal CDN Cloudflare, Karena IP website akan ikutan berubah ke IP US jadi saya engga rekomen, tapi beda cerita kalau memang awalnya target visitornya US.
      Saran saya menggunakan CDN nya hanya untuk file-file statis saja, seperti KeyCDN.

      Reply

  • Apakah install WP Rocket dan Autoptimize secara bersama ? secara fungsi juga WP rocket bisa untuk Minify file HTML, CSS dan JavaScript (JS) mas

    Reply

    • Sebenarnya tidak perlu, tapi jika mas install keduanya, WP Rocket dan Autoptimize udah kompatibilitas kok. Artinya, kalau diinstall keduanya, WP Rocket nanti akan bisa mendeteksi dan mencegah dari mengaktifkan fungsi yang sama.

      Reply

  • 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.

    Reply

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

    Terimakasih sebelumnya,

    Reply

  • 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?

    Reply

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

    Reply

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

    Reply

  • 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

    Reply

  • 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 ?

    Reply

    • 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.

      Reply

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

    Reply

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >