Cara Meningkatkan Kecepatan Loading Situs kita (Google Page Speed)

Cara Meningkatkan Kecepatan Loading Situs kita (Google Page Speed)

Beberapa waktu belakangan ini, Saya mendapatkan laporan dari murid RWP bahwa situsnya mengalami masalah karena loadingnya yg lambat. Setelah dicek pada alat Google Page Speed, ternyata banyak situs murid RWP yg nilai kecepatan loadingnya dianggap Google masih di bawah 70%, baik pada pembacaan perangkat mobile maupun perangkat desktop.

Nah, salah satu penyebab loading situs kita yg lama adalah masalah gambar (image) yg dianggap Google memberatkan loading situs. Selain itu ada masalah JavasSript, html, atau CSS yg sebagian besar dari kita tidak tahu solusinya..he…he….he….Juga ada masalah plugin yg memberatkan, header website yg berat karena banyak flashnya, faktor kompresi file (gzip) yg belum berjalan, dan masih banyak lagi.

*Gunakan alat Google Page Speed untuk Menguji Kecepatan Situs Kita.

Salah satu alat penguji kecepatan situs kita adalah Google Page Speed Insight (recommended). Ada juga alat lain yang bisa digunakan sebagai pembanding, yaitu : GTmetrix, ada juga WebPageTest, dll.

Coba Sobat login ke alat Google Webmaster Toolsnya (Google Console), lalu pilih menu Other Resources – Sumber Daya Lainnya, lalu klik Page Speed Insights. Tunggu sebentar beberapa menit sampai alat Page Speed Insight tsb selesai memproses situs kita.

Lihat hasilnya akan tampak sbb :

Page Speed Insight pada Mobile
Laporan Page Speed Insight Blog RWP pada Perangkat Mobile sangat memuaskan, yaitu di angka 90/100. Sebelum Saya optimasi, nilai laporannya hanya 67/100.

 

Laporan Page Speed Insight pada Desktop
Hasil Laporan Page Speed Insight Blog RWP pada Desktop juga sangat memuaskan : di angkat 87/100. Sebelum Saya optimasi, nilainya hanya 74/100.



Situs Blog RWP tsb sudah Saya perbaiki sehingga Kecepatan Loadingnya menurut Om Google menjadi  :

>Dari Perangkat Mobil : 90/100
>Dari Perangkat Desktop : 87/100

Sebelum diperbaiki, Situs Blog RWP ini memiliki Kecepatan Loading yg cukup rendah, yaitu :

>Dari Perangkat Mobil : 67/100
>Dari Perangkat Desktop : 74/100

———-

Nah gimana dengan situs Sobat semua?? Apakah ada masalah dari laporan alat Google Page Speed tsb? Ayoo, coba tes masing-masing yah…!

Kalo hasilnya sudah di atas 85/100, biasanya Google memberikan tanda centang pada gambar perangkat mobile & desktop di atas. Plus ada warna hijaunya. Bila hasilnya masih di bawah 85/100 atau di bawah 80/100, maka ada warna kuning & merah yang dilengkapi tanda seru sebagai peringatan perlu perbaikan segera…!

Oh ya, gambar di dalam situs kita ternyata bisa mengganggu kecepatan loading loh, juga masalah JavasSript, html, atau CSS, dan faktor kompresi file (gzip) yg belum berjalan.  Sedangkan faktor loading sangat mempengaruhi hasil perayapan google di situs kita. Jika loading situs kita lama, maka akan mengganggu hasil kerja perayapan dari robot google. Akibatnya, banyak bagian dari halaman kita tidak terindeks dengan sempurna. Ketika ada orang mencari kata kunci (queries) terkait produk yg kita jual, maka situs kita sulit sekali terpancing muncul di halaman pertama Google.

Jangankan terpancing muncul di halaman pertama (peringkat 10 besar), untuk muncul di halaman 10 saja situs kita tidak mampu (peringkat 100 besar) . Hal ini banyak penyebabnya, beberapa di antaranya sudah Saya sebutkan di atas sehingga bisa memperlambat loading situs kita & dianggap tidak bersahabat dg robot google.

———–

Kadang jika terlalu banyak plugin di dalam situs wordpress kita, atau ada yg kurang cocok dalam settingannya, maka kemungkinan bisa saja menjadi penyebab lambatnya loading atau speed situs kita.

Untuk memperbaiki page speed Blog RWP Grup ini, Saya sudah menghapus beberapa plugin dan melakukan setting ulang. Salah satu plugin yg Saya hapus adalah SEO ALRP dan diganti fungsi Related Content-nya dengan Plugin Shareaholic. Sobat juga bisa mempertahankan Plugin SEO ALRP dg catatan fungsi SlideBox-nya dimatikan (offkan). Karena ternyata dari laporan Google Page Speed, plugin SEO ALRP mengurangi kecepatan loading dari fungsi SlideBoxnya.

Selain itu, Saya juga melakukan setting ulang besar-besaran terhadap penggunaan Plugin W3 Total Cache. Plugin ini bisa memperbaiki masalah JavasSript, html, atau CSS, dan faktor kompresi file (gzip). Cuma faktor Image Optimizer belum Saya temukan di sini. Perlu install plugin image optimizer khusus, seperti WP Smush by WPMU DEV. Plugin ini bisa membantu mengecilkan ukuran file gambar secara otomatis ketika kita memasukkan gambar ke postingan. Untuk file gambar lama yg sudah ada sebelum kita menginstal plugin WP Smush, maka ada fasilitas mengecilkan gambar lama di menu Media – WP Smush.

*Berikut Cara Settingan Dasar Plugin W3 Total Cache :

1. Untuk Setting Pluging W3 Total Cache, silahkan tekan Menu Performance, lalu klik General Settings :

General Setting W3 Total Cache
Silahkan Sobat tekan Menu Performance, lalu klik General Settings.

2. Setelah halaman General Setting terbuka, silahkan Sobat scroll mausenya ke bawah utk melakukan setting pada Page Cache :

Setting Page Cache W3 Total Cache
Silahkan Sobat Setting Page Cache dengan cara klik centang “Enable”, lalu tekan “Save all Settings”…!

3. Lanjutkan scrol mause Sobat ke bawah utk melihat setting pada Minify :

Setting Minify W3 Total Cache
Silahkan Sobat centang “Enable”, lalu pilih “Manual”, selanjutnya tekan Save all Settings..!

4. Sobat Lanjutkan scrol mausenya ke bawah utk melihat setting Database Cache :

Setting Database Cache W3 Total Cache
Silahkan Sobat centang “Enable” pd Database Cache di atas. Lalu tekan Save all Settings.

5. Terakhir, Silahkan Sobat setting Object Cache dan Browser Cache berikut :

Setting Object Cache dan Browser Cache
Silahkan Sobat centang “Enable” untuk settingan pada Object Cache dan Browser Cache di atas…! Lalu tekan Save all Settings.

——————

*Settingan Plugin W3 Total Cache utk Meningkatkan Kecepatan Loading dari Browser (Leverage Browser Caching).

Pengertian Leverage Browser Cache secara sederhana adalah optimasi kecepatan loading website dengan menginstruksikan browser untuk mengambil (mengorek) kembali data yang sudah ditransfer sebelumnya dari dalam cache browser (sumber : D-Artchitext’s Weblog).

Setiap kali kita membuka sebuah halaman website, pada saat itu terjadilah serangkaian proses download file html, JavaScript, CSS, gambar dan lainnya. Semua file yang terdownload tadi tersimpan sementara pada cache browser, sehingga ketika kita membuka halaman lain, browser akan mencari kembali file yang sudah terdownload tadi dari dalam cache.

Secara default, fungsi caching ini sudah dilakukan otomatis oleh browser. Namun prosesnya belum optimal dan masih bisa diinterupsi oleh beberapa faktor seperti perubahan proxy, lama sessi dan lain-lain. Maka dengan adanya tambahan instruksi dari Leverage Browser Cache ini, akan membantu optimasi caching pada browser sehingga proses loading website atau blog kita bisa menjadi lebih cepat.

Jika Server Situs Sobat tidak bersahabat dg Plugin W3 Total Cache, maka silahkan ikuti cara Manual Leverage Browser Cache seperti yg ditulis oleh Sahabat kita : D-Artchitext’s Weblog.

*Jika Sobat masih mengandalkan Plugin W3 Total Cache, maka ikuti Petunjuk Setting Leverage Browser Cache sebagai berikut :

1. Pada bagian General Setting, aktifkan Preview Mode (Enable), jangan dicentang  tulisan Toggle all caching types on or off (at once) :

Enable Preview Mode W3 Total Cache
Enable Preview Mode pada Settingan General W3 Total Cache.

Sobat boleh Klik “Enable” button di atas nanti untuk melakukan deploy preview mode agar hasil settingannya diterapkan ke situs kita secara live.

2. Aktifkan Browser Cache (Enable) seperti pada poin 5 settingan dasar Plugin W3TC di atas.

3. Lakukan Setting Specify Cache Headers pada menu kiri Browser Cache :

Browser Cache Setting
Silahkan Sobat cek setting Browser Cache seperti contoh di atas.

4. Lanjutkan Setting CSS & JS sebagai berikut :

Setting CSS dan Javascript
Cara setting CSS dan Javascript pada menu Browser Cache. Masukkan angka 604800 pada Expires header lifetime. Untuk settingan centang, sama dg poin 3 di atas…! Lalu tekan Save all Setting

5. Setting HTML dan XML :

Cara setting HTML dan XML
Cara setting HTML dan XML pada menu Browser Cache. Masukkan angka 3600 pada Expires header lifetime. Untuk settingan centang, sama dg poin 3 di atas…! Lalu tekan Save all Setting

6. Setting Media & Other Files :

Cara setting Media & Other Files pada menu Browser Cache. Masukkan angka 604800 pada Expires header lifetime. Untuk settingan centang, sama dg poin 3 di atas...! Lalu tekan Save all Setting
Cara setting Media & Other Files pada menu Browser Cache. Masukkan angka 604800 pada Expires header lifetime. Untuk settingan centang, sama dg poin 3 di atas…! Lalu tekan Save all Setting

 

Masih ada lagi settingan W3 Total Cache yg berkaitan dg script-script, baik Javascript, maupun CSS. Tapi Saya sudah capek & kurang tidur nih…! Karena sudah 2 hari ngutak-atik Web sampai tengah malam…he…he…Sampai di sini dulu yah Sobat artikel Cara Meningkatkan Kecepatan Loading Situs kita.

Semoga bermanfaat buat Sobat yg lagi membutuhkannya…!

—————————

Sukses utk Sobat yg mau meningkatkan Kecepatan Loading situsnya…!

 

Davit Putra, RWP
======================
Jadwal Bimbel Semi Privat Murah – Desember 2015>klik