Cara Meraih Skor Kecepatan > 90 dan Melejitkan Waktu Muat Website < 2 Detik

Berikan Batas Waktu pada Elemen-Elemen Website

Jika Anda menguji kecepatan website dengan menggunakan tool Google PageSpeed Insight, kemungkinan Google akan meminta Anda untuk melakukan “Leverage Browser Caching” pada website Anda. Apa artinya ini dan bagaimana cara melakukannya ?

Dengan mengontrol browser caching, browser akan mengetahui apakah elemen yang ada di cache browser bisa langsung dipergunakan atau perlu diunduh dulu. Saat berkunjung kembali, pengunjung akan mendapatkan tampilan yang lebih cepat karena elemen website yang diperlukan sudah tersimpan di browser cache.

Untuk mengaktifkan browser caching bisa dilakukan dengan cara mengatur Expire Header HTTP, yaitu dengan memberikan batas tanggal atau umur maksimum dalam header HTTP untuk elemen-elemen statis website. Ini biasanya dilakukan dengan mengubah file .htaccess di website Anda. File ini tersembunyi tetapi akan terlihat melalui program FTP seperti FileZilla ataupun File Manager di Control Panel Web. Anda bisa mengubah isi file .htaccess dengan menggunakan program Notepad atau editor teks lainnya.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##

Aturan ini memberikan batas waktu 1 tahun untuk konten statis seperti gambar (jpg, jpeg, gif, png), dan 1 bulan untuk file Javascript dan CSS.

Tentukan batas waktu ini berdasarkan pada kebutuhan website Anda. Jika beberapa jenis file sering diperbarui, Anda perlu memberikan batas waktu yang lebih pendek. Dan sebaliknya, untuk file-file yang jarang diperbarui berikan batas waktu yang cukup panjang.

Plugin WordPress untuk mengatur Expire Header dan Browser Caching

Dengan menggunakan salah satu plugin diatas, Anda tidak perlu memasukkan kode dan menyentuh file .htaccess sama sekali.

Mengatasi Leverage Browser Caching yang “Bandel”

Terkadang, sekalipun Anda sudah mengaktifkan browser caching, namun sewaktu menguji kecepatannya (misal dengan Google PageSpeed Insight), Anda masih melihat masalah Leverage Browser Caching. Apakah ini berarti browser caching yang Anda buat tidak berjalan dengan baik ???

Tidak juga. Sebagai contoh di gambar berikut ini, masalah browser caching ternyata disebabkan oleh aplikasi yang ada di luar website, dalam hal ini kode yang menjadi penyebab berasal dari website Sumome, Twitter dan juga Google.

mengatasi-leverage-browser-caching

Apa yang bisa Anda lakukan untuk mengatasi kode program yang ada di luar website Anda ? Tidak ada !
Satu-satunya hal yang bisa Anda lakukan adalah menon-aktifkan program yang yang berasal dari website tersebut.

Namun jika Anda memang sangat memerlukannya … just Let It Go, Let It Go 🙂

{ 4 comments… add one }
  • Jhon September 10, 2016, 2:49 pm

    Terima kasih banyak atas informasinya. Sangat informatif bagi saya yang sedang membangun website.

    Reply
  • Azhar MZ March 17, 2016, 9:09 pm

    Maksudnya gimana gan Google menyarankan agar website Anda memiliki waktu respon kurang dari 2 detik (2 ms), padahal di https://developers.google.com/speed/docs/insights/Server rekomendasinya di bawah 200 milisekon/milidetik, jika dikonversi ke detik maka 200 ms = 0,2 s (detik)

    Reply
  • kayzip October 8, 2015, 11:05 am

    apa metode keep alive bisa juga diterapkan untuk joomla? mohon pencerahannya?

    Reply
    • PLACESIANA October 9, 2015, 9:57 am

      Metode Keep-Alive bisa dipergunakan dengan CMS apa saja, termasuk Joomla.
      Bahkan website yang dibuat dengan HTML editor biasa juga bisa memanfaatkan metode ini … asalkan mempunyai akses ke konfigurasi web server.

      Reply

Leave a Comment

{ 4 comments }