kabayankababayan

Membuang Bagian CSS yang Tidak Diperlukan Menggunakan PurifyCSS

Situs web modern tidak hanya berupa tampilan teks, namun juga gambar, suara, berkas multimedia lain dan pernik-pernik untuk memperkaya penampilan situs web. Bisa dimaklumi bila sebuah web yang cantik dan dinamis memerlukan banyak resources (sumber daya), baik bagi si empunya web atau pun bagi para pengunjung.

Bagi pemilik situs web bermodal besar, semua sumber daya yang diperlukan bagi penampilan situsnya, misal berkas gambar, audio, multimedia, CSS dan javascript, akan dikelola sendiri di server web-nya. Ini menjadikan biaya mengelola situs web menjadi mahal namun web-nya akan tetap gegas.
Sementara bagi pemilik situs lainnya akan menyimpan berkas-berkas resource tersebut di luar situs web-nya, misal berkas gambar disimpan di Imgur, video di YouTube, script di GitHub gist, javascript dan CSS di CDN tertentu. Biaya pengelolaan situs seperti ini relatif murah namun ia akan relatif lambat karena untuk menampilkan lamannya ia mesti meminta (request) ke tempat di mana berkas-berkas yang dibutuhkan disimpan.

Less is more and simpler is better...

Menurut kaidah blogging yang baik, semakin sedikit request sebuah laman blog adalah semakin baik. Semakin banyak request sebuah laman akan menjadikan laman ini semakin lambat ditampilkan secara penuh (render blocking). Pengunjung mana yang akan menunggu situs yang lamban, kecuali situs itu memang sangat dibutuhkannya.
Jadi, sayapun tertarik untuk menjadikan blog ini lebih baik dengan cara mengurangi request-nya.

Menurut beberapa situs penelaah situs, misalnya GTMetrix dan varvy, saat artikel ini ditulis blog melakukan sekitar 14 request untuk menampilkan lamannya secara penuh. Dari 14 request tersebut, beberapa memang tidak bisa dihindari oleh blog ini yang menggunakan platform Blogger karena berupa request ke produk Google. Sepertinya saya terbatas hanya bisa menyunting request CSS dan javascript yang berkaitan dengan tema. So, that's what I'll do...

CSS delivery www.rizaumami.com menurut varvy.com

Ada tiga cara untuk menghilangkan CSS yang render blocking:

  1. Memanggil CSS secara benar
    Misalnya dengan tidak menggunakan @import dan membeli label yang sesuai pada CSS.
  2. Mengurangi jumlah berkas CSS dalam jalur kritis
    CSS sibutuhkan untuk memberi gaya pada tampilan web. Jika salah menempatkan CSS maka tampilan web tidak akan segera muncul karena peramban akan mengambil CSS dulu sebelum rendering laman web.
  3. Menggunakan sesedikit mungkin CSS
    Tidak semua pengelola blog menulis CSS-nya sendiri. Seperti halnya saya yang menggunakan tema buatan orang yang juga menggunakan CSS dari bootstrap. CSS dari bootstrap ini adalah semacam framework, memuat semua gaya (style) yang sekiranya akan dipakai dalam laman web. Sering kali banyak gaya dari bootstrap yang tidak pernah terpakai dalam laman blog kita, padahal berkas CSS dan javascript bootstrap ini akan selalu dimuat setiap pengunjung membuka laman blog kita.

Lalu, bagaimana cara kita memecahkan permasalahan render blocking ini?
Saya akan mencoba dua cara:

  1. membuang komponen-komponen CSS bootstrap yang tidak terpakai, dan
  2. menjadikan inline CSS bootstrap

Caranya lumayan merepotkan.
Baiklah saya beberkan langkah demi langkah yang saya lakukan, sekiranya Anda memiliki cara yang lebih sederhana bolehlah menunjukkannya dalam kolom komentar.

  • Pasang PurifyCSS, sebuah perkakas untuk membuang komponen-komponen CSS yang tidak diperlukan.
    PurifyCSS bisa dipasang dari repo GitHub-nya atau melalui npm (javascript package manager). Saya sendiri memasangnya melalui npm:
    sudo npm i -g purifycss
  • Buat sebuah map tempat penampungan sementara agar tidak acak-acakan.
    mkdir blog

    Pindahlah ke dalam map yang baru dibuat tersebut.

    cd blog
  • Unduh berkas CSS yang hendak dijadikan inline. Misal bootstrap.
    wget https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  • Unduh laman-laman blog yang telah naik tayang.
    Pengunduhan diperlukan dengan dua alasan; (1) karena (AFAIK) perkakas yang saya gunakan, PurifyCSS, hanya bisa mengolah berkas lokal, dan (2) setiap artikel menggunakan komponen CSS yang berbeda.
    Kita tidak perlu mirroring blog-nya, cukup dengan mengambil tautan dari berkas RSS dan mengunduh tautan tersebut menggunakan wget.
    • Unduh berkas RSS blog.
      wget 'https://www.rizaumami.com/feeds/posts/default?max-results=500&alt=json-in-script'
    • Ambil tautan artikel dari berkas RSS tersebut dan simpan ke berkas baru bernama artikel.
      grep -o "http[^ ]*html'" 'default?max-results=500&alt=json-in-script' > artikel
    • Buang karakter kutip satu (') yang tidak diperlukan.
      sed -i "s/'/g" artikel
    • Unduh artikel-artikel blog yang tertera dalam berkas artikel.
      wget -ci artikel
  • Nah, berkas CSS dan semua artikel telah diunduh. Kini saatnya menggunakan PurifyCSS untuk hanya mengambil komponen CSS yang dipakai dan membuang komponen-komponen yang tidak dipakai.
    Kita akan gunakan sebuah looping command sederhana untuk mengotomasi tugas ini:
    while read html; do echo "Processing $html" ; purifycss bootstrap.css "$html" --out ${html%.*}.css; done < <(find . -maxdepth 1 -type f -iname "*.html")

    Perintah di atas akan menghasilkan berkas CSS dengan nama sesuai nama berkas HTML artikelnya.

  • Tiba pada langkah yang paling membosankan; membandingkan tiap berkas CSS yang dihasilkan perintah pada langkah sebelumnya.
    Here's what I did.
    • Jadikan sebuah berkas css sebagai acuan, misal berkas A.css.
    • Gunakan diff untuk membandingkan berkas ini dengan berkas lain semisal B.css dan simpan perbedaannya ke dalam berkas beda.diff.
      diff -u A.css B.css > beda.diff
    • Buka berkas beda.diff ini menggunakan PatchViewer.
    • Salin komponen yang hanya ada di B.diff ke dalam berkas A.diff.
      Setelah semua komponen yang hanya ada di B.diff telah disalin ke A.diff, hapus berkas B.diff. Mulai kembali dari awal dengan membandingkan berkas A.diff dan C.diff. Demikian seterusnya sampai hanya tersisa berkas A.diff.
  • Sekarang kita telah memiliki berkas A.diff "murni", yang isinya tidak memiliki komponen yang tidak terpakai. Saatnya untuk menerapkan CSS ini ke dalam template Blogger.
    • Login ke dalam Blogger ➜ Theme ➜ Edit HTML.
    • Hapus baris tautan yang meminta CSS bootstrap. Misal seperti ini:
      <link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css' rel='stylesheet'/>
    • Hapus <b:skin> sampai dengan </b:skin> dan gantikan dengan:
      <style type="text/css"><!-- /*&lt;b:skin&gt;&lt;![CDATA[*/]]></b:skin>
    • Salin seluruh isi berkas A.css dan tempelkan dalam <head> tepat di atas baris </script>
      <style type='text/css'>
  ... PASTE CSS DI SINI ...
</style>
    • Simpan tema.
  • Selesai.

Wuih. Panjang pisan. Kalau dipikir-pikir, untuk apa semua kerepotan tadi 😂
Namun tak apa, akan selalu ada manfaat yang dapat dipetik dari semua peristiwa. Mungkin tujuan awal membuat inline CSS tidak sebanding dengan kerepotan yang dialami untuk meraihnya, namun tidak dapat disangkal bahwa saya mendapat banyak pengetahuan karena mencobanya.
I hope you find it usefull as I do...