Seorang teman bertanya, mas gimana cara mempercepat loading website ya? punyaku kucek pake Google Pagespeed sama GTMetrix kok lambat banget. Sebenernya cara mempercepat loading website itu banyak banget caranya. Kalian bisa menggunakan beberapa cara untuk mempercepat loading blog kalian dengan mudah, tinggal pilih apa yang mau kalian optimasi untuk membuat blog kalian lebih cepat diakses oleh pengunjung.
Google sendiri sangat menyukai blog/website yang cepat diload, oleh karenanya jangan heran jika sekarang ini mayoritas web menggunakan mode tampilan yang responsif, agar lebih cepat diakses dari browser smartphone. Atau ada juga yang menggunakan format AMP, cuma aku sendiri membatalkan dukungan AMP di blog anotherorion karena beberapa issue yang muncul di Google Search Console.
Penyebab Loading Website Lama
Pada saat pengunjung mengakses website kita, sebenarnya, browser miliknya sedang mengajukan permintaan terhadap file-file yang membangun tampilan website kita. Dahulu, sebuah website cukup menggunakan sebuah file html saja, namun di jaman sekarang hal tersebut bisa dibilang tidak mungkin. Di masa kini, sebuah halaman website umumnya memiliki element semacam ini
Apa saja file element website
Ada banyak file yang menjadi pendukung tampilan sebuah website agar telihat cantik dan manis saat dibuka oleh pengunjung, dari sisi klien, secara garis besar file tersebut dibagi menjadi beberapa tipe
- HTML – Hypertext Markup Language, berfungsi sebagai kode struktur yang mengatur isi website, baik berupa judul blog, judul artikel, dan isi artikel.
- CSS – Cascading style sheet, adalah file yang berfungsi mengatur tampilan layout halaman website, pemilihan type font, warna background dan pengaturan elemen visual lainnya
- Images – file gambar yang muncul di halaman website kita, mulai dari file icon web, button, gambar artikel
- JS – javascript, script dinamis yang umumnya mengatur tampilan fitur website, seperti ads, pop up, analytics dll
- Jquery – Java Query merupakan library berbasis javascript yang memiliki tugas khusus, misalnya untuk animasi. Penggunaan Jquery agar site tidak perlu menuliskan perintah javascript berulang kali
Semakin banyak penggunaan elemen website, baik berupa gambar, video, widget, css, script, semakin banyak juga waktu yang dibutuhkan server untuk meladeni permintaan user saat membuka halaman, apalagi jika file tersebut diload dari situs lain (misal script analytics dari google analaytics, script adsense, dll)
Related Posts:
Oleh karenanya selalu perhatikan saat kita memasang sebuah fitur di website kita, apakah fungsinya sebanding dengan penurunan kecepatan yang dialami website kita? Klo soal ini terserah kepada masing-masing blogger, lebih memilih mempercepat loading website atau lebih ingin punya kekayaan fitur yang mempermudah pemilik blog/pengunjung.
Pada intinya, mempercepat loading website dilakukan dengan mengurangi waktu eksekusi yang dibutuhkan server untuk menampilkan sebuah halaman website ke hadapan layar pengunjung. Semakin cepat tampilan layar muncul, semakin baik. Namun seringkali, kita tidak tahu bagaimana cara membuat website kita tampil lebih cepat saat diakses pengunjung.
Kita bisa melakukan banyak cara untuk mempercepat loading, misalnya mengurangi penggunaan widget dan plugin, melakukan optimasi gambar, melakukan minifying asset, melakukan kompresi dan masih banyak lainnya. Tapi fokus kita kali ini adalah dengan menggunakan expired cache headers. Duh mas, makanan apa lagi itu, aku mumet
Apa itu Cache?
Oke, apa sebenernya yang dimaksud cache? Cache adalah teknologi yang memungkinkan sistem mempersiapkan file/data yang kira-kira diperlukan oleh pengunjung. Dalam dunia nyata kita ibaratkan website kita adalah sebuah restoran, ada banyak menu yang kita miliki, mulai dari ayam goreng, ayam bakar, lele goreng dll. Kita tentu paham karakter pengunjung kita, menu apa yang paling laku, jam berapa pengunjung banyak datang untuk menikmati makan siang di warung kita.
Alih-alih kita mengambil bahan makanan dari freezer untuk digoreng, kita bisa mempersiapkan sebuah meja yang berisi piring-piring kosong, disana sudah tersedia ubo rampe seperti sambel dan lalapan, jadi saat pengunjung datang, sambil menggoreng ayam kita bisa menaruh nasi, lalap dan sambel di piring sambil menunggu ayamnya matang. Waktu tunggu pengunjung tentunya lebih cepat, dibanding kita belum mengupas mentimun, belum menyiapkan sambal dan piring.
Cache, berfungsi sama seperti itu, cache mempersiapkan file-file static yang pasti diakses lagi oleh pengunjung saat datang ke website kita, misalnya gambar, css, javascript, dll. Cache umumnya disimpan di dalam browser milik pengunjung. Maka jangan heran, saat kita pertama kali membuka sebuah website, akan terasa lama, sedangkan saat kita membuka website untuk kali berikutnya, loadingnya agak lebih cepat. Kenapa bisa terjadi demikian?
Karena pada dasarnya, browser pengunjung akan mengecek dulu, adakah file cache website kita yang sudah terdownload di browser saat pertama kali membuka website kita? Jika ada, maka browser akan mengambil file cache tersebut dari komputer klien sendiri. Dengan demikian, browser tidak perlu melakukan request ulang file static tersebut dari website kita. Dari sisi klien, element tampilan lebih cepat tampil, dari sisi server, mengurangi jumlah request klien yang mengakses website kita. Teknik ini disebut Leverage browser caching
Cara Mempercepat Loading Website Menggunakan Expired Cache Headers
Secara default, tidak ada aturan untuk menggunakan cache saat kita membuka halaman website, oleh karenanya, browser bisa saja menyimpan file cache dari server kita, bisa saja tidak, sesuka-suka browsernya saja. Jikapun disimpan, bebas aja mau disimpan berapa lama, bisa aja besok pengunjung buka web kita lagi dan harus melakukan request file langsung dari server.
Oleh karenanya disarankan kita menggunakan expired cache headers untuk mempercepat loading blog. Expired cache headers adalah metode untuk menyarankan browser pengunjung menyimpan file static yang berasal dari server website kita dalam kurun waktu tertentu.
1 Mempercepat Loading Dengan Menambahkan expired headers di file .htaccess
Ada baiknya sebelum kalian melakukan experience ini, cek dulu skor kecepatan website kalian menggunakan Google Pagespeed, GTMetrix atau WebpageTest sebagai data pembanding before action yang nantinya dibandingkan dengan skor kecepatan sesudah melakukan cek kecepatan. Sangat disarankan kalian menggunakan mode incognito di chrome (mode penyamaran/masquerade jika menggunakan firefox) agar tidak ada file preferensi yang membuat skor kecepatan tidak obyektif.
Jika kalian menggunakan wordpress self hosting, kalian bisa mengakses file .htaccess yang berada di root folder pada cpanel. Oh ya mungkin beberapa blogger cukup awam dengan cpanel, namun sebenarnya cara ini paling disarankan untuk mengurangi penggunaan plugin. Cara melakukannya adalah sebagai berikut
- Masuk ke alamat cpanel kalian, bisa kalian dapatkan alamatnya dari email pertama/kedua dari penyedia hosting kalian. Umumnya berformat namawebsite.com:2082 atau namawebsite.com/cpanel
- Setelah login di cpanel, buka file manager
- File .htaccess umumnya berada di root folder/ folder tertinggi dari struktur file di file manager, atau berada di dalam folder public_html
- Jika kalian tidak menemukan file .htaccess di kedua folder tersebut, pilih tombol setting di bagian kanan atas file manager.
- Centang opsi show system file (dot file) dan save
- Jika file .htaccess sudah muncul, pilih file tersebut dan pilih tombol edit (bisa juga dengan klik kanan file kemudian edit)
- Tambahkan baris berikut
##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 #
Dalam baris diatas kita bisa lihat, server meminta browser pengunjung untuk menyimpan cache file gambar seperti jpg, jpeg, gif dan png selama satu tahun sejak pertama kali mengakses website kita. Sementara file css dan html disimpan browser selama 1 bulan.
Kita juga bisa mempercepat loading website dengan meringkas beberapa jenis file yang memiliki durasi expired yang sama menggunakan kode cache control berikut agar tidak terlalu panjang.
# 1 Month for most static assets #<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>Header set Cache-Control “max-age=2592000, public”</filesMatch>
Sama seperti perintah expiresbytype, max-age=2592000 adalah jumlah detik dalam 1 bulan, artinya 60x60x24x30. Perintah tersebut dimasukkan ke dalam file .htacess. Perbedaan expired headers dengan cache control hanya pada penggunaan istilah dan penyebutan waktu saja, cache control umumnya menggunakan satuan detik, sedangkan expired header menggunakan satuan yang lebih fleksibel seperti day, week, month hingga year.
- Save file .htaccess tersebut
- Lakukan test page speed dan bandingkan hasilnya
2 Manfaatkan Plugin Untuk Melakukan Leverage Browser Caching
Menggunakan plugin adalah jalan ninjaku, ya bisa dibilang ini cara mempercepat loading website paling gampang, karena dengan menggunakan plugin, blogger yang masih awam dan takut mengutak atik server web mereka bisa lebih leluasa dan merasa aman saat melakukan konfigurasi blog. Dengan menggunakan plugin Leverage Browser Caching, blogger bisa lebih mudah menentukan file jenis apa saja yang harus dicache oleh browser pengunjung dan berapa lama waktu yang harus dicache oleh setiap browser.
Apa saja opsi plugin untuk melakukan cache ini
- Wp fastest cache
- W3 Total cache
- Leverage Browser Caching
- Pagespeed ninja
- WP Performance Booster
- and many more
Sebaiknya kalian memilih salah satu plugin di atas, cukup satu aja, karena plugin yang memiliki kesamaan fungsi bisa mengakibatkan crash sistem jika diinstal bersamaan. Ya bayangkan kita punya dua pelayan yang rebutan satu pesanan pelanggan. Pilih yang paling sesuai fiturnya, klo ak lebih menyarankan salah satu antara WP fastest cache atau W3 total cache, meski yang lain juga sama bagusnya.
3 Menggunakan expired header di blogspot
Pertanyaannya bisa gak memasang expired header di blogspot. Pada dasarnya bisa aja, cuma aku sendiri belum tahu apakah ada dampaknya jika dipasang di blogspot, mengingat, kita tidak memiliki akses ke dalam servernya blogspot. Tapi balik lagi silahkan lakukan pretest kecepatan pagespeed sebelum menambahkan expired header, dan jangan lupa. Selalu backup tema kalian terlebih dahulu sebelum melakukan editing tema
- Login ke akun blogger kalian
- Buka menu tema, pilih edit html
- Cari kode </head>
- Letakkan script berikut di atas kode </head> without simbol bulat di baris pertama ya
- <include expiration=’7d’ path=’*.css’/>
<include expiration=’7d’ path=’*.js’/>
<include expiration=’3d’ path=’*.gif’/>
<include expiration=’3d’ path=’*.jpeg’/>
<include expiration=’3d’ path=’*.jpg’/>
<include expiration=’3d’ path=’*.png’/>
<include expiration=’1d’ path=’*.ico’/>
- <include expiration=’7d’ path=’*.css’/>
- Save tema kalian
- Gunakan mode incognito
- Bandingkan kecepatan sesudah melakukan editing,
Jika terjadi perubahan berarti kita bisa mempercepat loading website kita di blogspot, jika enggak berarti emang tidak disarankan menggunakan expired headers di blogspot. Lha piye meneh, wong servere aja udah punya Google, hehe