Tutorial Blog

Cara Minify JavaScript dan CSS

Cara Minify JavaScript dan CSS – Blog dengan waktu loading yang lama akan mempunyai banyak dampak negatif seperti bounce rate yang tinggi, sedikit pengunjung yang kembali, dan juga akan mempengaruhi ranking blog anda di SERP (Search Engine Results Page). Maka dari itu, melakukan minify terhadap JavaScript dan CSS sangat direkomendasikan. Kenapa hanya JavaScript dan CSS yang diminify? Jika anda melakukan observasi terhadap komponen blog anda, JS (JavaScript) dan CSS masuk dalam kategori heavy files.

Iklan

Jika anda melakukan analisis terhadap blog menggunakan  Google PageSpeed Insight, anda akan melihat bagaimana render blocking JS dan CSS membuat blog anda lemot. JS dan CSS itu adalah bagian dari Tema dan Plugin yang blog anda gunakan.

Ketika seseorang mengunjungi blog anda, browser yang digunakan akan mendownload file-file tersebut serta file HTML blog anda satu persatu. Seperti mendownload CSS tema, kemudian CSS plugin, kemudian JS plugin dan seterusnya sampai semuanya selesai. Nah, proses ini membutuhkan waktu dan sumberdaya (server anda). Yang paling parah, kadang-kadang blog tidak akan terbuka secara sempurna sampai semua JS dan CSS didownload oleh browser. Hal inilah yang menyebabkan loading blog menjadi lama.

Cara Minify JavaScript dan CSS

 

Apa itu Minify?

Sederhananya minify merupakan suatu cara untuk mengumpulkan semua elemen yang ada di blog (JS & CSS) dan kemudian menggabungkannya menjadi satu file. Selanjutnya file yang digabungkan tersebut akan dikompres dan menjadikannya lebih ringan. Hal ini akan meningkatkan kecepatan loading dari sebuah website.

Bagaimana Cara Minify JavaScript dan CSS Pada WordPress?

Pertama kali yang perlu dilakukan adalah melakukan pengecekan terhadap blog anda, apakah JS dan CSS menyebabkan blog anda lemot. Silahkan masuk ke Google PageSpeed untuk mengetesnya.

Cara Minify JavaScript dan CSS

Jika anda rasa perlu untuk melakukan minify terhadap JS dan CSS blog anda, gunakan tips cara minify JavaScript dan CSS di bawah ini:

1. W3 Total Cache

Banyak orang mengatakan bahwa ini adalah plugin untuk optimalisasi WordPress terbaik. Basis dari plugin ini adalah untuk keperluan caching. Tapi plugin ini juga mendukung untuk keperluan minify JS dan CSS.

Dengan mengaktifkan fungsi minify di plugin ini, anda akan bisa menghemat bandwidth dengan meminify file JS, CSS, dan juga HTML. Dengan plugin ini, anda bisa melakukan dua hal sekaligus, yaitu caching dan minifying.

Baca: Tutorial W3 Total Cache untuk WordPress

2. CloudFlare CDN

CDN (Content Delivery Network) akan menampung file dan juga komponen blog anda di server mereka. Hal ini akan mengurangi beban daripada server hosting yang anda gunakan. Nah, sebagai salah satu penyedia layanan CDN, CloudFlare berbeda dengan yang lainnya.

Ketika pengunjung mengakses blog anda yang sudah menggunakan CDN dari CloudFlare, server dari CloudFlare akan melakukan ping terhadap server blog anda. Kemudian menunggu server blog anda untuk mengirimkan file dan komponen blog anda ke server CloudFlare. File dan komponen tersebut dioptimalisasi dan kemudian diberikan kepada pengunjung yang mengakses blog anda.

Optimalisasi yang dimaksud adalah minify JS, CSS, dan HTML oleh CloudFlare. Anda bahkan bisa memilih untuk membuat file-file tersebut akan diload secara asynchronously atau tidak dengan menggunakan fitur “Rocket Loader”.

Menggunakan CloudFlare untuk blog anda sangat mudah. Cukup mendaftar di situs CloudFlare, masukkan domain blog anda, ganti nameserver domain, install plugin CloudFlare di blog anda, masukkan API key dan email dan selesai.

Baca juga: CDN Gratis CloudFlare

 

Itulah beberapa cara minify JavaScript dan CSS yang bisa anda praktekkan. Apakan anda ingin menggunakan W3 Total Cache plugin atau CDN CloudFlare. Anda bahkan juga bisa mengkombinasikan keduanya. Silahkan tinggalkan komentar jika anda mempunyai pertanyaan.

 

 

Iklan

4 thoughts on “Cara Minify JavaScript dan CSS”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Adblock Terdeteksi

Harap matikan Adblock