16 Cara Untuk Mempercepat Loading Website

Sebuah studi kasus meningkatkan kecepatan website hingga 60% dalam 45 menit


Last Updated: Mei, 2017 by Willya Randika

Pada tahun 2006, Amazon melaporkan bahwa peningkatan site speed sebesar 100 milidetik atau 0,1 detik akan meningkatkan pendapatan mereka sebesar 1%.

Amazon juga melaporkan bahwa mereka dapat kehilangan $1,6 Milyar setiap tahunnya jika website mereka melambat satu detik.

Slow loading website

Sumber: Lazy View – A jQuery Plugin

Kemudian, tahun 2010, Google mengumumkan bahwa kecepatan website merupakan salah satu signal yang digunakan dalam algoritmanya untuk merangking halaman website.

... Sejak saat itu, banyak penelitian dan studi kasus dilakukan oleh para ahli menunjukan dampak yang negatif dari website yang lambat.

Salah satunya adalah penelitian oleh Gomez, yang berjudul "Why Web Performance Matters: Is Your Site Driving Customers Away?". Gomez mewawancarai 1.500 pelanggan tentang bagaimana dampak kecepatan website bagi pengalaman berbelanja mereka.

Hasilnya?

  • Peningkatan loading website dari 2 ke 10 detik akan meningkatkan rasio pengabaian halaman sebesar 38%.
  • Lebih dari 75% pelanggan lebih memilih untuk meninggalkan website yang lambat, alih-alih menunggu sampai website termuat.

Hasil penelitian lainnya menunjukan bahwa penundaan 1 detik dapat menurunkan tingkat konversi sebesar 7%, berkurangnya pageviews sebesar 11% dan mengurangi tingkat kepuasan pelanggan sebanyak 16%.

Secara singkat, website yang lambat dapat memberikan dampak negatif seperti:

  • Mengurangi traffik pengunjung
  • Mengurangi pendapatan dan tingkat konversi
  • Dan berdampak buruk bagi SEO

Jadi, sebagai pemilik website, Anda tidak seharusnya meremehkan persoalan kecepatan loading website Anda, karena website yang lambat justru dapat melukai bisnis Anda.

Silahkan dibaca: 8 alasan mengapa website yang lambat dapat melukai bisnis Anda

Sejak salah satu tujuan saya membangun blog PenasihatHosting.com adalah sebagai resources utama untuk membangun website yang sukses, maka saya membuat panduan ini.

Didalam panduan ini saya menyiapkan dan mencoba segala sesuatu yang dibutuhkan untuk memungkinkan mempercepat loading website Anda.

Dan agar panduan ini terlihat lebih PRO, maka saya telah melakukan sebuah studi kasus yang akan menunjukan kepada Anda seberapa besar peningkatakan kecepatan website PenasihatHosting.com setelah melakukan 22 cara yang ada dalam panduan ini.

(Psst... sedikit bocoran, PenasihatHosting.com mengalami peningkatan sebesar 60% setelah mencoba strategi ini).

Apa yang akan Anda pelajari:

Okay, pertama-tama, seberapa cepat sebuah website dapat dikategorikan sebagai website yang cepat?

Ada dua cara untuk mengetahuinya...

Yang pertama, saya mengajak Anda untuk mengunjungi WhichLoadFaster untuk membandingkan kecepatan website Anda dengan website competitor utama Anda - tujuan Anda adalah salah satunya untuk menjadi yang tercepat dari competitor Anda.

Pikirkan tentang hal ini:

​​64% pelanggan yang tidak happy dengan website Anda yang lambat akan pergi ke website pesaing Anda sebagai alternatif pembelian.

Yang kedua, ikuti pedoman berikut:

  • Dibawah 1 detik = perfect
  • 1 -3 detik = above average
  • 3 - 7 detik = average
  • 7+ = very poor

Benchmark diatas adalah berdasarkan penelitian Akamai yang menunjukan bahwa 47% orang mengharapkan website termuat kurang dari 2 detik dan 57% orang akan meninggalkan website yang membutuhkan waktu lebih dari 3 detik untuk termuat.

Jadi, bagaimana performance PenasihatHosting.com sebelum saya melakukan optimasi yang disarankan dalam panduan ini?

(Saya menggunakan Pingdom, Google PageSpeed InsightsGTMetrix  dan WebPageTest untuk mengecek performance website) 

Dibawah ini hasil tes berdasarkan Pingdom.

Sebelum melakukan optimasi

​Hasil tes berdasarkan Pingdom sebelum dioptimasi

Uh, sebenernya Penasihat Hosting tidaklah terlalu buruk dengan kecepatan loading halaman 2,23 detik, membuat 44 HTTP requests dan berat halaman 506kB, tapi jelas masih ada ruang yang bisa diperbaiki, seperti mengurangi javascript dan plugin yang bahkan tidak sering digunakan.

Setelah menghabiskan sekitar 40-50 menit melakukan banyak hal yang direkomendasikan dalam panduan ini, saya berhasil mengurangi waktu loading halaman menjadi hanya 891ms (meningkat 60%), dan mengurangi HTTP request menjadi 31.

Catatan penting:

PenasihatHosting menggunakan CloudFlare, jadi jangan heran kalau waktu aksesnya bisa dibawah 1 detik ketika diakses dari Dallas, US setelah dioptimasi.

(Ngomong-ngomong, Tool Pingdom ini tidak menyediakan pilihan tes server dari Jakarta/Singapore).

Mungkin waktu akses website Anda yang letak servernya di Jakarta/Singapore akan lebih dari 2 atau 3 detik, tapi tenang saja itu tidak jadi persoalan, yang terpenting adalah waktu aksesnya setelah menggunakan 16 cara dipanduan ini menjadi turun (hingga 60%).

hasil pingdom setelah dioptimasi

hasil tes berdasarkan Pingdom setelah dioptimasi

Well, sekarang waktu loading halaman ada dibawah 1 detik, yang mana hasil ini masuk dalam kategori perfect!

Jadi, bagaimana Anda dapat mempercepat website Anda seperti ini?

Mari kita mulai dari langkah pertama.

1. Hapus Plugin Yang Tidak Perlu

Pertama, Anda perlu menonaktifkan plugins/extensions/modules yang tidak diperlukan karena dapat mengurangi kecepatan loading website, khususnya bagi yang menggunakan CMS seperti WordPress, Drupal atau Joomla.

Sebuah studi kasus yang menarik tentang dampak plugin terhadap kecepatan website oleh Mike, mengungkapkan bahwa dia dapat mengurangi waktu loading websitenya dari 4,23 detik menjadi hanya 1,23 detik.

Apa yang Mike temukan?

Ketika menganalisis websitenya untuk melihat apa yang memperlambat kecepatan websitenya, Mike menyadari bahwa plugins memberikan dampak yang sangat besar bagi kecepatan website, yaitu sebesar 86,7%.

Catatan Penting:

Ini bukan tentang seberapa banyak jumlah plugins yang Anda install pada website Anda, tetapi tentang kualitas dari seluruh plugins yang Anda install.


Website dengan 50 plugins dapat memuat halaman website lebih cepat dari website dengan 10 plugins jika website dengan jumlah plugins yang lebih sedikit itu mempunyai plugins yang jelek.

Umumnya, Anda perlu menghindari penggunaan plugin yang terlalu banyak memuat script, banyak melakukan permintaan/request, dan plugin yang diam-diam menambahkan ekstra query database pada setiap halaman website.

Memang, pada dasarnya plugins sangat membantu untuk meningkatkan fungsi website, tetapi pastikan Anda hanya menginstall plugins yang benar-benar diperlukan saja.

Apabila Anda adalah pengguna WordPress, Anda dapat menginstall plugin P3 (Plugin Performance Profiler);

dampak plugin P3 PenasihatHosting

Plugin ini akan me-scan seluruh plugins yang Anda gunakan dan akan memberikan laporan sehingga Anda akan dengan mudah mengetahui bagaimana setiap plugins yang Anda install mempengaruhi performance website Anda.

2. Optimasi Seluruh Gambar

Apabila Anda menggunakan gambar dengan berat 1MB, 2MB atau lebih, saya yakin itu adalah salah satu penyebab loading website menjadi lambat.

Untungnya, ada beberapa tools yang dapat Anda gunakan untuk mengoptimasi seluruh gambar yang Anda gunakan sambil memastikan kualitas gambar tidak menjadi jelek setelah dioptimasi.

  • WP Smush (untuk pengguna WordPress - hanya dengan 1x klik)
  • Kraken (untuk pengguna Drupal and Joomla)
  • OptimiZilla (untuk semua pengguna) 

3. Perkecil Ukuran Gambar (Serve Scaled Images)

Setelah mengoptimasi seluruh gambar, selanjutnya Anda perlu untuk mengecilkan ukuran gambar menjadi ukuran yang sebenarnya.

Sebagai contoh, gambar dibawah ini ukuran aslinya adalah 400x400px, namun saya tampilkan dengan ukuran 250x250px, yang artinya ada pemborosan sebesar 150x150px dari ukuran yang asli.

menunggu website termuat

sumber: meme generator

Masalahnya adalah dibutuhkan waktu yang lama apabila kita mengecek keseluruhan gambar secara manual satu per satu, tapi untungnya ada cara termudah untuk melihat seluruh gambar yang perlu dikecilkan.

Pertama-tama, kunjungi GTMetrix.com, kemudian masukkan URL website Anda untuk dianalisa.

Tunggu beberapa saat, hingga muncul performance report disertai dengan recommendation dibawahnya, dan klik "toggle" dari serve scaled images.

(Apabila score serve scaled images Anda sudah 100%, maka Anda boleh melompati langkah ke #3 ini dan lanjut membaca langkah selanjutnya)

Seperti yang Anda lihat pada screenshoot diatas, ada banyak gambar yang dapat saya perkecil - misalnya url gambar paling atas dapat saya perkecil dari ukuran 1349x621px menjadi 200x92px.

Perkecil seluruh gambar menurut rekomendasi dari GTMetrix.

Anda dapat memperkecil gambar menggunakan tools seperti Photoshop, PhotoScape, Preview, dll, kemudian Anda upload ulang dan ganti gambar pada website dengan ukuran yang sudah diperkecil.

Setelah memastikan seluruh gambar telah terganti dengan ukuran yang sudah diperkecil, cek kembali atau analisa kembali website Anda di GTMetrix.

4. Gunakan Plugin Caching

Pernahkan Anda mengunjungi suatu website dimana pada saat pertama kalinya laoding website akan terasa berat dan lama, namun saat mengunjunginya lagi, loading website tersebut lebih ringan dan website termuat lebih cepat dari sebelumnya?

Pertanyaannya, mengapa pada saat mengujunginya lagi loading website lebih cepat?

Itu adalah efek dari caching browser yang menyimpan file website yang sudah Anda kunjungi sebelumnya dan menampilkannya kepada Anda secara langsung, alih-alih mendownload ulang file website yang baru. 

Nah, bagsunya saat ini efek caching tersebut tidak hanya dapat diaktifkan melalui browser, namun Anda dapat mengaktifkannya di website dengan menginstal plugin caching.

Tahukah Anda:

Mengaktifkan caching pada website dapat mempercepat loading website secara signifikan. Penelitian menunjukan bahwa mengaktifkan cache secara full dapat mengurangi loading website dari 2,4 detik menjadi 0,9 detik.

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 (Plugin cache terbaik, namun berbayar aka tidak gratis).

Bagi pengguna Drupal, Anda dapat mengikuti tutorial ini , dan untuk pengguna Joomla silahkan ikuti panduan ini.

Ngomong-ngomong, saya menggunakan plugin W3 Total Cache pada website Penasihat Hosting.

5. Menggunakan CDN (Content Delivery Network)

Website yang dihostkan pada server yang berlokasi di Indonesia, umumnya akan memiliki waktu akses yang lebih cepat apabila diakses dari Indonesia - karena jarak yang dekat.

Namun bagaimana kalau ada pengunjung Anda yang berlokasi diluar negeri, katakanlah di USA, UK atau bahkan di kutub utara mencoba mengakses website Anda?

Tentu saja website Anda akan membutuhkan waktu yang lebih lama untuk termuat karena jarak yang jauh.

Lalu, bagaimana caranya agar website kita dapat diakses dengan cepat dari seluruh dunia?

Solusinya adalah dengan menggunakan CDN.

Cara Kerja CDN:

CDN akan menyimpan file website Anda dan mendistribusikannya ke seluruh jaringan server dilokasi yang berbeda diseluruh dunia, sehingga ketika seseorang dari USA mengunjungi website Anda, maka akan dilayani dari server terdekat di USA, bukan dari server di Indonesia.

data center cloudflare CDN

Ssebagai contoh, ini adalah jaringan server dari Max CDN

Untuk melihat seberapa efektif penggunaan CDN, Matthew Woodward melakukan percobaan dan menemukan bahwa CDN dapat meningkatkan kecepatan website hingga 60%.

Saya merekomendasikan CDN berikut untuk Anda:

  • Max CDN (Pilihan terbaik, tapi ada biaya tambahan $15/domain jika Anda ingin menggunakan zona server di Singapore)
  • Stackpath (lebih murah dari Max CDN dan tersedia zona server di Singapore)
  • CloudFlare (Ada versi gratisnya - layak untu dicoba!)

6. Gunakan Hosting Yang Cepat

Maaf, tapi saya harus menyertakan poin ini disini.

Jika semua yang Anda lakukan untuk membuat website Anda menjadi cepat, namun Anda menemukan bahwa tidak ada perubahan yang signifikan, maka mungkin sudah saatnya Anda mengganti penyedia hosting.

Dalam sebuah artikel di Smashing Magazine, Marcus Taylor mengungkapkan bagaimana web hosting berdampak pada kecepatan loading website untuk kedua kliennya.

Kedua kliennya memiliki website yang mirip, namun berbeda penyedia hosting. Satu kliennya menggunakan dedicated server hosting, sedangkan yang satu lagi menggunakan server hosting yang murah.

Hasilnya, ada perbedaan yang besar dalam waktu respon website; respon DNS pada klien yang menggunakan dedicated hosting adalah 7ms (milidetik), sedangkan waktu respon pada klien dengan server yang murah adalah 250ms.

Masalahnya adalah tidak ada tweak atau plugin yang dapat memperbaiki perbedaan sebesar itu.

Jadi, jika Anda ingin mempercepat laoding website Anda, pastikan Anda memilih web hosting yang bagus - mungkin artikel review hosting terbaik Indonesia atau hosting luar negeri terbaik ini dapat membantu Anda.

Sebagai alternatif, Anda dapat membaca artikel ini untuk melakukan beberapa research tambahan.

Namun, menurut hasil tes dan analisis saya di PenasihatHosting.com, penyedia web hosting berikut adalah yang terbaik dalam hal kecepatan (dibawah 500ms):

7. Gunakan Theme Website Cepat, Bagus dan Original

Sebenernya, taktik ini tidak selalu dapat diterapkan ke semua website, khususnya apabila Anda menggunakan custom design.

Tapi, seberapa besar dampak pengaruh theme website terhadap kecepatan loading webstie?

Julian Fernandes mampu meningkatkan kecepatan loading websitenya dari 630ms menjadi 172ms hanya dengan mengganti theme. Dengan website yang sama, hosting yang sama, tidak ada perubahan lainnya selain mengubah theme dan ternyata ini sangat berdampak pada kecepatan website.

Jadi, setidaknya Anda perlu mempertimbangkan mengubah theme website Anda.

Catatan Penting:

Bahkan konfigurasi server hosting terbaik tidak akan menyimpan website Anda apabila Anda menggunakan theme yang buruk dengan kode yang kembung. Jadi, pastikan Anda juga mempertimbangkan kecepatan ketika mencari theme website, dan tidak hanya memperhatikan design/estetikanya saja.

8. Aktifkan Gzip Compression

Anda mungkin sudah pernah mencoba mengcompress sebuah file dikomputer, dan melihat bahwa ukuran filenya setelah dicompress menjadi lebih kecil; file yang berukuran 50MB dicompress menjadi 5MB.

Nah Gzip Compression mempunyai cara kerja yang sama - yaitu memperkecil file. Tetapi untuk website, Gzip secara otomatis akan mengcompress file website Anda ke file zip, dan secara drastis akan mengurangi ukuran file dan mempercepat loading website Anda.

Ada berbagai metode untuk mengkatifkan Gzip Compression bergantung pada web server Anda (Apache server atau IIS).

Tapi,pertama-tama, sebaiknya Anda mengecek terlebih dahulu apakah GZIP sudah aktif/belum pada website Anda. Anda dapat menggunakan GZIPTest.com.

Untuk web server IIS, silahkan ikuti tutorial berikut.

Dan untuk Apache server, Anda hanya perlu menambahkan kode dibawah ini kedalam file .httaccess Anda:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Atau bagi Anda pengguna WordPress yang tidak ingin mengotak-ngatik kode .httaccess, dapat menggunakan plugin berikut:

9. Optimasi Database Website

Jangan takut!

Untuk yang satu ini, Anda tidak perlu mengotak-ngatik kode-kode membosankan itu lagi.

Mengoptimasi database adalah sesuatu yang mudah dilakukan, sederhana namun sering diabaikan oleh para webmaster, padahal faktanya ini merupakan salah satu cara yang ampuh untuk mempercepat loading website Anda, apalagi bagi pengguna CMS seperti WordPress yang sangat bergantung pada penggunaan database.

Apabila Anda pengguna WordPress, Anda dapat menginstal plugin WP-Optimize.

Bagusnya lagi, plugin ini tidak hanya dapat mengoptimasi database website Anda saja, tetapi juga membersihkan post revisions, auto draft post, komentar spam dan komentar ditrash.

Sedangkan untuk platform lainnya, Anda dapat mengikuti tutorial ini.

10. Perbaiki Seluruh Link Yang Rusak

Sebenarnya, link yang rusak tidak mempengaruhi kecepatan website Anda, namun link yang rusak dapat memberikan pengalaman pengguna yang buruk, menguras bandwidth, meningkatkan bounce rate dan membuat pengunjung Anda pergi.

Untuk mengidentifikasi link yang rusak, saya merekomendasikan tools gratis berikut:

11. Minify File Javascript dan CSS Anda

Jika website Anda menggunakan banyak JavaScript dan CSS, kemungkinan besar website Anda akan memberitahu browser pengunjung Anda untuk memuat seluruh file JavaScript dan CSS secara individual atau satu per satu.

Apalagi bila Anda menggunakan CMS seperti WordPress, Drupal dan lainnya, file JavaScript dan CSS akan ditambahkan hampir setiap kali Anda menginstal plugin baru.

Dan itu akan membuat banyak permintaan, yang pada akhirnya akan membuat kinerja website menjadi lambat.

Solusinya adalah me-minify file JavaScript dan CSS Anda.

Catatan Penting:

Saya menyarankan Anda untuk membackup file website sebelum melakukan cara yang satu ini, karena salah-salah website Anda bisa rusak atau ada fungsi atau fitur dalam website menjadi tidak berfungsi.

Ada berbagai cara untuk me-minify file JavaScript dan CSS Anda dengan mengikuti tutorial berikut:

Atau khusus bagi pengguna WordPress, Anda dapat mengikuti dua metode saya berikut ini.

(Dengan melakukan metode ini, saya berhasil mengurai permintaan/request dari 44 menjadi 31 request).

Sebelumnya, Anda perlu mengunjungi Pingdom - untuk melihat seberapa banyak permintaan/request yang dibuat oleh website Anda.

pingdom website speed test

Dalam kasus saya, website Penasihat Hosting membuat 44 permintaan, seperti terlihat pada screenshoot dibawah ini.

request sebelum dioptimasi

Metode 1. Menggunakan Plugin Autoptimize dan Dikombinasikan Dengan Plugin Async JavaScript

Kelebihan metode ini adalah:

  • Sangat mudah dan sederhana.
  • Membutuhkan waktu yang singkat - estimasi saya kurang lebih 2-3 menit saja.

Kekurangannya adalah...

  • Kemungkinan tidak cocok untuk semua type website yang memiliki banyak sekali file JavaScript dan CSS, karena metode ini akan secara otomatis me-minify seluruh file JavaScript dan CSS Anda (dengan kata lain Anda tidak dapat memilih mana file yang perlu dan yang tidak untuk di minify).
  • Jika ternyata tidak cocok, akan ada fitur atau fungsi tertentu pada website Anda menjadi tidak berfungsi dengan semestinya, tapi jangan takut ketika hal itu terjadi Anda hanya perlu men-disable kedua plugin tersebut.
(Dalam kasus saya, metode ini tidak cocok untuk diterapkan pada webstie Penasihat Hosting, jadi saya menggunakan metode kedua)

Tapi, saya dapat mengtakan bahwa metode ini layak untuk dicoba! Maksud saya, metode kedua adalah pilihan terakhir apabila metode pertama ini tidak cocok untuk website Anda.

Sekali lagi, jangan takut! Namun apabila Anda ragu atau kurang yakin, Anda dapat meminta bantuan web developer untuk melakukannya.

Okay, jadi yang perlu Anda lakukan adalah ...

1. Instal dan aktifkan plugin Autoptimize dan Async JavaScript.

2. Pada pengaturan plugin Autoptimize, cek ketiga box seperti dibawah ini.

cek ketiga box pada autoptimize berikut ini

kemudian klik tombol "save changes and empty cache".

3. Pada pengaturan plugin Async Javascript, klik box "enable async javascript" dan pilih metode "defer" kemudian klik tombol "save changes".

4. Selesai.

Kemudian perhatikan website Anda, periksa secara detail apakah ada fungsi atau fitur yang tidak bekerja dengan semestinya.

Apabila ada, maka sebaiknya Anda disable kedua plugin ini dan apabila tidak ada, maka selamat Anda sudah berhasil meminify file Anda - silahkan cek kembali di Pingdom untuk melihat permintaan/request website Anda, umumnya akan berkurang dan mempercepat website Anda.

Metode 2 - Meminify File JavaScript dan CSS Secara Manual Menggunakan Plugin W3 Total Cache

Perbedaan yang mendasar antara metode pertama dengan metode kedua adalah bahwa pada metode kedua Anda dapat memilih file JavaScript dan CSS yang perlu Anda minify.

Dengan kata lain, Anda hanya perlu untuk meminify file yang memang benar-benar perlu diminify, dan tidak meminify file yang justru akan membuat fitur atau fungsi tertentu pada website Anda menjadi rusak.

Dan Anda perlu menggunakan plugin W3 Total Cache. Anda dapat mendownlaodnya disini.

Jika Anda sudah mencoba metode pertama namun tidak cocok, artinya Anda perlu mencoba metode ini.

1. Pertama-tama, identifikasi file JavaScript dan CSS yang perlu di minify.

Gunakan rekomendasi dari Google PageSpeed Insights - masukkan alamat website Anda untuk dianalisa.

Apabila terdapat "eliminate render-blocking JavaScript and CSS in above-the-fold content" yang perlu diperbiki seperti screen shoot dibawah ini, maka itulah file-file JavaScript dan CSS yang perlu Anda minify.

(Dalam kasus saya, terdapat 3 file JavaScript dan 2 file CSS)

2. Buka pengaturan plugin W3 Total Cache Anda (Performance -> General Settings).

Scrool kebawah hingga Anda menemukan "Minify", dan set seperti dibawah ini, kemudian klik tombol 'save settings and purge cache".

Minify di W3 Total Cache

Dengan mengaktifkan minify dan men-setnya menjadi manual akan membuka pengaturan tambahan pada halaman pengaturan Minify, dan untuk mengunjungi halaman Minify, pergi ke Performance -> Minify.

3. Pada pengaturan JavaScript (JS), set pilihan setting seperti gambar dibawah ini:

4. Ini bagian yang terpenting. Pilih theme website yang Anda gunakan, kemudian masukkan URL script yang direkomendasikan oleh Google PageSpeed sebelumnya dengan mengklik "Add a script".

menambahkan JS

Dengan asumsi bahwa tidak semua file JavaScript yang perlu Anda masukkan, maka Anda perlu memilih file JS mana yang perlu di minify; umunya Anda tidak perlu memasukkan file yang berkaitan dengan fungsi atau fitur tertentu pada WordPress Anda yang dapat mengakibatkan fungsi tersebut tidak dapat bekerja dengan semestinya (misalnya opt-in pop up, plugin fixed widget).

5. Setelah selesai memasukkan file JavaScript yang diperlukan, selanjutnya beralih ke pengaturan CSS minify. Anda perlu mengaktifkan pengaturan ini terlebih dahulu dengan menceklist box seperti dibawah ini:

pengaturan minify CSS pada plugin W3 Total Cache

Sekarang, masukkan file seluruh file CSS yang direkomendasikan oleh Google PageSpeed seperti yang Anda lakukan pada file JavaScript sebelumnya.

Umumnya, me-minify file CSS tidak akan merusak theme, fungsi atau fitur tertentu pada website Anda, jadi masukkan saja seluruhnya.

6. Periksa kembali pengaturan JS dan CSS Anda, lalu setelah selesai klik "Save Settings & Purge Cache", dan periksa kembali di Google PageSpeed dan Pingdom.

(Setelah melakukan metode kedua ini, saya berhasil mengurangi permintaan/request dari 44 menjadi hanya 31 request).

hasil pingdom setelah dioptimasi

hasil pingdom setelah dioptimasi

12. Aktifkan HTTP Keep-Alive

Biasanya ketika browser pengunjung Anda meminta file dari server website Anda, browser akan mendownload file website Anda satu-satu atau secara individual.

Dengan kata lain ketika satu file berhasil terdownload, maka koneksi akan tertutup sementara, dan dibuka kembali ketka browser meminta file baru.

Mengaktifkan HTTP Keep-Alive akan memastikan semua permintaan file dari server Anda dilakukan oleh satu kali koneksi (tidak berulang-ulang kali), dan akan mempercepat loading website Anda. 

Untuk mengaktifkannya, Anda hanya perlu menambahkan kode berikut ke file .httaccess Anda:

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

Sebagai alternatif, Anda dapat mengikuti tutorial ini, disini atau disini bergantung pada server Anda.

13. Matikan Fungsi Pingbacks dan Trackbacks (Pada WordPress)

Trackbacks dan pingbacks adalah fitur yang agak membingungkan di WordPress. Anda dapat membaca tentang fitur ini dihalaman resmi WordPress ini.

Pada dasarnya kedua fitur ini adalah "cara" WordPress untuk Anda berkomunikasi dengan website WordPress lainnya, tetapi masalahnya adalah sekarang ini, fitur tersebut sering digunakan untuk kegiatan spam.

Jadi, saya menyarankan Anda untuk menonaktifkan fitur pingbacks dan trackbacks dengan mengunjungi wp-admin (Settings-Discussion) dan nonaktifkan "Allow link notifications from other blogs (pingbacks and trackbacks) on new articles".

14. Nonaktifkan Hotlinking

Hotlinking adalah apa yang kita sebut sebagai situasi ketika website lain menampilkan gambar pada situs websitenya, tetapi menghubungkannya langsung dari website Anda, alih-alih menggunakan server sendiri.

Akibatnya, secara tidak langsung, website tersebut mencuri bandwidth Anda, dan tentu saja akan membuat beban website Anda menjadi lebih berat.

Tentu Anda tidak ingin seseorang melakukan hal tersebut, bukan?

Anda dapat menonaktifkan hotlinking dengan menambahkan kode berikut kedalam file .httaccess Anda:

(Ganti "domainanda.com" dengan nama domain Anda)

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?domainanda.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

Atau Anda dapat menggunakan tools ini untuk mengenerate kode hotlinking pada .httaccess Anda.

15. Hindari MeHotlinking Gambar Dari Server Orang Lain

Sama halnya dengan menonaktifkan hotlingking, Anda juga tidak seharusya mengambil gambar dari website lain, kemudian menampilkanya di website Anda, alih-alih menguploadnya diserver Anda sendiri.

Meskipun kegiatan ini dapat menghemat bandwidth Anda, apalagi untuk kasus website dengan kunjungan/traffic yang tinggi, namun ketika server website yang Anda hotlingking tersebut mengalami down, maka akan membuat website Anda menjadi lebih lambat.

Apakah itu gambar dalam konten Anda, banner iklan, dsb. 

Pastikan untuk selalu menguploadnya pada server hosting Anda sendiri sebelum menampilkannya diwebsite Anda.

16.Gunakan CMS Yang Terpecaya

Pada akhirnya, CMS Anda adalah kerangka/framework website Anda.

Jika Anda hanya menggunakan HTML sederhana atau CMS yang dapat diandalkan seperti WordPress atau Drupal, maka saya jamin Anda akan baik-baik saja.

Maksud saya, apabila Anda menggunakan CMS yang belum terbukti atau kurang populer atau Anda membangun framework sendiri, Anda berisko memiliki website yang lambat.

Pastikan Anda untuk mengecek terlebih dahulu dengan melakukan pengetesan, melakukan research dengan membaca banyak review yang terpecaya untuk memastikan bahwa CMS yang Anda gunakan sudah tepat dan dapat diandalkan.

Akhir Kata - Tes Kecepatan Wesbite Anda

Setelah mengimplementasikan saran-saran diatas, Anda harus mengetes website Anda untuk melihat apabila ada perbedaan (tinggalkan komentar dibawah apabila Anda melihat ada peningkatan :).

Berikut tools yang saya rekomendasikan untuk mengecek kecepatan website Anda:

Pingdom Website Speed Test: Tool ini adalah yang saya gunakan untuk membandingkan kecepatan website Penasihat Hosting sebelum dan sesudah mengimplementasikan saran-saran diatas. Anda dapat melihat jumlah permintaan/request, berat halaman, waktu akses halaman / load time.

Hasilnya adalah saya berhasil meningkatkan kecepatan website Penasihat Hosting sebesar 60%!

hasil pingdom setelah dioptimasi

hasil pingdom setelah dioptimasi


GTMetrix: Tool ini menganalisis website Anda menggunakan Google PageSpeed Insights dan YSlow, serta memberikan rekomendasi untuk mempercepat website.

Ngomong-ngomong, rekomendasi seperti memperkecil ukuran gambar website, HTTP Keep-Alive, leverage browser caching saya ambil dari rekomendasi GTMetrix.

setelah dioptimasi gtmetrix..

Google PageSpeed Insights: Tool buatan Google ini juga memungkinkan Anda untuk melihat perbedaan kecepatan website baik melalui desktop maupun versi mobile.


WebPage Test: Salah satu tool favorit saya untuk mengecek kecepatan website, karena Anda dapat melakukan tes kecepatan diberbagai server yang berbeda, bahkan terdapat server Singapura yang jaraknya dekat dari Indonesia.

tes kecepatan website dengan webpage test

Jadi, bagaimana hasil test kecepatan website Anda? Silahkan tinggalkan komentar Anda dibawah apabila Anda melihat adanya peningkatan 🙂

Catatan: Jika Anda pengguna WordPress, Anda dapat mengunjungi "The Ultimate Guide to Boost WordPress Speed & Performance" dari Wp Beginner sebagai referensi tambahan.

Leave a Comment:

Abdul Aziz says September 2, 2017

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.

Reply
Yusuf Fuadi says April 13, 2017

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…

Reply
Dwi Rahayu Octaria says January 31, 2017

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

Reply
    Randika PH says January 31, 2017

    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 🙂

    Reply
      Dwi Rahayu Octaria says February 1, 2017

      Baik mas Randika, Saya akan kembali hubungi mas nanti.

      Terima kasih

      Reply
Add Your Reply