L

Cara Terbaik Optimasi JS, CSS, dan HTML dengan Fast Velocity Minify


Bismillahirrohmanirrohim


Ilustrasi Fast Velocity Minify

Bicara mengenai OnPage Optimization, maka mengoptimasi Scripts seperti JavaScript dan CSS, bahkan HTML termasuk salah satu opsi Tweaking yang perlu kita lakukan, karena saya menggunakan WordPress Self Hosted dan sepertinya Anda juga demikian, maka tentu saja kita akan lebih mudah melakukannya dengan bantuan plugins.

Ada banyak plugins yang bisa kita gunakan, dan saya sudah mencobanya satu persatu dan semua memiliki kelebihan dan kekurangan masing-masing.

Ada satu plugin yang membuat saya puas, yakni Fast Velocity Minify (FVM).

Ketika membaca istilah “Velocity”, saya teringat TV Serial The Flash, karena arti dari istilah tersebut sendiri adalah “Kecepatan” 😀

Plugin FVM  ini adalah favorite saya, karena jangan terkecoh dengan namanya, plugin ini tidak hanya berfungsi sebagai Script Minify saja.

 

Fitur Utama

FVM mampu meminify script HTML, JavaScript, dan CSS, tidak hanya itu saja, FVM juga bisa mengurangi jumlah file *.css dan *.js dengan cara mengkombinasinya.

Anda yang terbiasa dengan Benchmarking Tool seperti GTMetrix dan Pingdom Tools pasti familiar dengan istilah “Combine” yang mana itu adalah salah satu parameter penilaian (Google) PageSpeed Score.

Kita juga bisa mengecualikan file *.js dan *.css yang tidak ingin kita optimasi dengan FVM.

 

Kompatibilitas dengan Plugins Lain

Saya sudah melakukan banyak uji coba pada plugin sejenis di Directory Plugins WordPress.org dan FVM adalah yang terbaik di semua aspek, dan gratis 😀

Biasanya, problem yang ditimbulkan dari plugin sejenis ini adalah rusaknya tampilan dan tidak berfungsinya plugin-plugin tertentu yang menggunakan JavaScript.

Nah FVM lulus uji coba terkait kompatibilitas terhadap plugins lainnya yang menggunakan JavaScript.

 

Integrasi dengan Caching Plugins

FVM juga sudah terintegrasi dengan plugins lain yang berfungsi sebagai Page Caching seperti LiteSpeed Cache, W3 Total Cache, dsb

Integrasi disini maksudnya adalah secara otomatis melakukan Purge Cache pada plugin bersangkutan ketika kita meregenerate file *.js dan *.css dari plugin FVM (Purge processed files).

 

Preload (Auto Processing/Optimizing)

FVM bekerja secara otomatis melakukan optimasi pada seluruh file *.js dan *.css yang ada di di website kita, termasuk file milik plugins pihak ketiga yang terinstall di website berbasis WordPress kita.

File yang diproses tidak hanya script yang ada di header saja, namun juga yang ada di footer.

 

Build In CDN Re-write

FVM memiliki URL sendiri untuk semua files yang sudah dioptimasi-nya, namun kita bisa mengubah URL tersebut ke CDN Hostname yang kita miliki.

Misalnya saya menggunakan https://cdn.scripts.lukman.al-hakim.id

Ini penting, karena sangat berkaitan dengan YSlow (Yahoo Slow) Score di Benchmarking Tools.

Tips: Ketika mengisikan CDN Hostname di plugin FVM ini, lengkapi URL-nya beserta Protocol HTTP(S) seperti contoh CDN URL saya di atas.

Lalu pada URL Options pilihlah opsi “Use the dynamic “//” protocol”.

 

Kompatibel dengan Pull CDN (Content Delivery Network)

Selain mendukung Custom URL Re-write yang sudah saya jelaskan di atas, FVM juga kompatibel dengan Pull CDN.

Tau apa itu Pull CDN ?

Jadi, Pull CDN adalah mekanisme Auto Upload dari CDN Provider, setiap file baru yang direquest oleh Client akan secara otomatis terupload ke PoP Server milik CDN (Deployed).

Tapi itu sering menyebabkan hancurnya tampilan website kita karena file *.css dan *.js yang Not Found di Server CDN sedangkan URL-nya mengarah ke CDN Hostname di website kita.

Nah, FVM memiliki cara sendiri untuk mencegah hal itu terjadi 😀

Sehingga ketika kita melakukan Purge processed files pada plugin FVM, tampilan website kita tidak akan hancur, kecuali kita melakukan Pure All Cache di CDN Provider yang kita gunakan, karena CDN akan me-refresh semua file secara keseluruhan, yakni dengan cara menghapus semuanya lalu mendeploy ulang semuanya kembali. Prosesnya tidak akan lama.

Tips: Sebaiknya gunakan CDN Zone terpisah, yakni CDN Zone khusus untuk Scripts dan khusus untuk Gambar agar ketika melakukan Purge All Cache pada CDN Zone khusus files Gambar, maka tampilan website kita tidak akan rusak karena CDN Zone yang khusus untuk Scripts tidak dilakukan Purge All Cache.

Itulah alasannya kenapa FVM menyediakan opsi CDN Re-write khusus files *.js dan *.css yang dioptimasi olehnya.

 

Build In Preconnect Header dan Preload Images

Kedua fitur ini termasuk penting untuk optimasi website, Preconnect biasa juga disebut DNS Prefetch.

Jadi, ketika kita menggunakan fitur Preconnect Header, plugin ini akan menambahkan tag <link rel=”dns-refetch” href=”example.com”> di sebelum tag </header>.

Contoh: <link rel="dns-prefetch" href="//fonts.googleapis.com"> 

Gunanya ya sesuai namanya, browser tidak perlu menunggu respon dari DNS Server pada Domain/Sub-domain bersangkutan, sehingga akses website kita menjadi lebih cepat karena proses Waiting saat mengakses website kita bisa diskip.

Lalu mengenai fitur Preload Images, itu berfungsi menambahkan tag <link rel=”preload” href=”example.png”> yang penempatannya sama dengan DNS Prefetch diatas yakni sebelum tag </head>.

Contoh: <link rel=”preload” href=”https://cdn.lukman.al-hakim.id/wp-content/uploads/2017/07/logo-lukmanul-hakim-v2.png”>

Gunanya ya sesuai namanya juga, browser akan meload dulu gambar-gambar yang kita inginkan sebelum meload tampilan website kita secara keseluruhan.

Biasanya ini digunakan pada gambar-gambar besar beresolusi tinggi agar proses loading website tidak menampilkan proses loading gambar besar tersebut.

Tapi kita bisa juga memanfaatkan fitur ini untuk mempreload gambar statis di website kita seperti gambar logo baik di header maupun di footer.

 

Fitur Defer Parsing JavaScript

Ini juga pasti familiar sekali bagi para Benchmark Mania 😀

Karena ini terkait pada Google PageSpeed Score.

Deferring Parsing of JavaScript ini bukan problemnya, melainkan solusinya, problemnya adalah Render Blocking of JS, yakni proses rendering yang bermasalah karena ulah banyaknya file JS yang diload di awal mengakses sebuah website. Menurut kita sebagai pengakses menggunakan brwoser, hal itu tidak terlalu signifikan dampaknya, tapi pada Benchmarking Tools itu masalah, khususnya jika kita menggunakan Google PageSpeed Insight, masalahnya karena mempengaruhi score 😀

Dengan FVM, kita bisa menentukan apakah Defer Parsing of JS ini dilakukan hanya pada Google PageSpeed Insight yakni hanya ketika kita melakukan proses Benchmarking atau diterapkan secara Global yakni pada semua browser yang digunakan pengunjung website kita.

 

Fitur Server Info

Menariknya FVM memberikan fitur Server Info yang sangat berfuna sekali untuk mengetahui informasi server yang digunakan oleh website kita seperti OS Family, Webserver yang digunakan, Versi PHP, Database Server yang digunakan beserta versinya, Jumlah CPU Core yang dialokasikan untuk website kita, bahkan Server Loads pun juga diinformasikan, dan beberapa variabel lainnya yang ditampilkan di Server Info dari FVM ini cukup lengkap.

Khusus untuk Jumlah CPU Core, ini penting sekali khususnya untuk pengguna CludLinux Shared Hosting yang mana kita bisa memastikan berapa alokasi CPU Core yang dilimit oleh LVE Manager untuk website kita dari paket hosting yang kita pilih, karena kita tidak bisa melihat alokasi CPU Core di cPanel, kita hanya bisa melihat statistik CPU Usage dari 0% sampai 100% saja di cPanel.

Kita tidak perlu minta bukti berupa Screenshoot dari LVE Manager di WHM untuk memastikan alokasi CPU Core pada paket hosting yang kita pilih sesuai dengan spesifikasi yang tertera saat kita order.

 

Options yang Banyak di Tab Settings

Beberapa fitur di atas letaknya ada di Tab Settings juga, namun tidak hanya untuk mengkonfigurasi fitur di atas, Tab Settings tentu saja berisi banyak options terkait fungsi utamanya yakni Minify dan Combine pada files HTML, JavaScript, dan CSS.

Saking banyaknya opsi yang ada, saya saja sampai tidak tertarik membahasnya satu per satu di artikel ini, sebaiknya dicoba sendiri dan selamat bereksperimen mencoba opsi-opsi yang ada 😀

Tenang saja, pihak developer FVM memberikan komentar pada setiap opsi yang ada terkait dampaknya dan kondisi dimana sebaiknya mengaktifkan opsi bersangkutan.

Jadi menurut saya sangat kecil kemungkinan terjadinya kesalahan konfigurasi.

 

Kesimpulan

FVM adalah plugin gratisan terbaik menurut saya terkait optimasi JavaScript, CSS, dan juga HTML, tidak hanya berfungsi sebagai “Minify” yang memperkecil ukuran file dengan menghilangkan elemen yang tidak penting seperti spasi, break line, dan komentar, tapi juga bisa sebagai “Combine” yang menggabungkan beberapa file menjadi satu file saja sehingga mengurangi request pada file *.js dan *.css yang dilakukan browser kepada webserver.

FVM juga memiliki fitur-fitur bermanfaat lainnya terkait optimasi halaman website kita.

 

Predikat terbaik saya berikan setelah saya mencoba banyak sekali plugins dengan fungsi yang sama dan juga sama-sama gratisan.

Masalah umum dari plugin sejenis ini adalah kompatibilitas dengan plugin lain yang menggunakan JavaScript, misalnya Disqus Comment System, dan fitur-fitur terkait Theme yang saya gunakan seperti Fixed Floating Sidebar, dsb

Nah FVM tidak menyebabkan masalah-masalah seperti itu, pokoknya sekali install, konfigurasi sedemikian rupa sesuai kebutuhan dan keinginan kita, maka sisanya serahkan pada FVM, otomatis !


Protected by DMCA ! Protected by Premium Copyscape !

Hi, Bagaimana Menurut Anda ?


Jadilah Pembaca yang Baik dengan cara meninggalkan Komentar pada setiap Artikel Bermanfaat yang sudah dibaca (•‿•)


Komentar adalah salah satu Faktor Penyemangat bagi seorang Blogger, termasuk juga saya. Sebagai bukti bahwa saya tidak sendirian disini, mengingat ada banyak sekali Viewer (Pembaca) Artikel di Blog saya ini. Tolong, jangan pergi begitu saja.


Tinggalkan Komentar Anda disini meskipun hanya sekedar menyapa saya, mari kita bangun Forum Diskusi di Kolom Komentar pada setiap Artikel di Blog ini.


Oleh karena itu, saya sudah menyediakan Fasilitas Comment System terbaik saat ini yakni Disqus Comments System untuk membangun Komunitas Komentator yang lebih Advanced lagi, tidak diperlukan Account Disqus untuk bisa berkomentar disini, Anda cukup memasukkan Nama dan Email saja, tapi saya sarankan untuk memiliki Account Disqus jika Anda sering berkomentar di banyak Blog yang menggunakan Disqus Comment System.

Mungkin Anda juga menyukai



Facebook Comments



Disqus Comments



×
SSL Verified