Kurangi ukuran file CSS dengan membuang karakter format

Sebagian besar ukuran sebuah file CSS yang ditulis dengan rapi sebenarnya berasal dari karakter yang tidak dilihat pengguna. Setiap indentasi, spasi di sekitar tanda kurung, baris baru antar-aturan, dan blok komentar menambah byte pada berkas meski tidak memengaruhi tampilan sedikit pun. Pada stylesheet besar dengan ratusan aturan, karakter format ini bisa menyumbang porsi yang mengejutkan dari total ukuran. Mengurangi ukuran file CSS pada dasarnya berarti membuang semua karakter tersebut sambil mempertahankan setiap aturan gaya secara utuh. Ketika spasi dan komentar dihapus, yang tersisa hanyalah selektor, properti, dan nilai yang benar-benar dibaca browser. Berkas menyusut, tetapi instruksi gaya di dalamnya tetap sama persis, sehingga halaman terlihat identik meski bobotnya jauh lebih ringan dari sebelumnya.

Selain membuang karakter format, ukuran dapat dikurangi lebih jauh dengan mempersingkat nilai yang setara. Warna heksadesimal #ffffff dapat ditulis menjadi #fff dan #000000 menjadi #000 tanpa mengubah warna, karena notasi tiga digit menggandakan setiap digitnya. Panjang bernilai nol seperti 0px, 0em, atau 0% cukup ditulis 0 sebab satuan tidak bermakna pada nilai nol. Nol pemimpin pada 0.5 juga bisa dihilangkan menjadi .5. Setiap penghematan kecil ini terakumulasi di seluruh stylesheet. Yang terpenting, semua transformasi ini bersifat lossless dan setara, artinya browser memperlakukan bentuk pendek persis sama dengan bentuk panjangnya. Anda memperoleh berkas yang lebih kecil tanpa risiko sedikit pun terhadap tampilan. Tidak ada aturan yang hilang, tidak ada warna yang bergeser, dan tidak ada tata letak yang berubah karena pemangkasan ini.

Mengurangi ukuran file CSS memberi keuntungan langsung pada kecepatan situs. Setiap kilobita yang tidak perlu tetap harus diunduh oleh setiap pengunjung, dan pada koneksi seluler yang lambat, byte tambahan itu menunda saat halaman pertama kali tampil. Berkas yang lebih ringan berpindah lebih cepat melalui jaringan sehingga konten mulai muncul lebih awal. Setelah tiba di browser, CSS juga harus di-parse sebelum halaman dapat dilukis, dan semakin sedikit karakter yang dibaca, semakin cepat proses itu selesai. Karena CSS memblokir render, memangkas ukurannya secara langsung memperpendek jalur kritis menuju tampilan pertama. Pada situs dengan banyak kunjungan, penghematan per permintaan ini berlipat menjadi bandwidth yang jauh lebih hemat dan skor kinerja yang lebih baik, semuanya tanpa mengubah desain visual situs Anda sama sekali.

Untuk menekan ukuran seminimal mungkin, gabungkan pemangkasan karakter ini dengan kompresi transport seperti gzip atau Brotli. Keduanya bekerja pada tahap yang berbeda dan saling melengkapi. Alat di sini mengurangi jumlah karakter di dalam berkas sebelum Anda mengunggahnya, sedangkan gzip mengompres byte yang tersisa tepat saat server mengirim berkas ke browser. Karena berkas yang sudah dipangkas menjadi masukan yang lebih ramping bagi gzip, hasil akhirnya lebih kecil dibanding mengandalkan salah satu saja. Banyak orang mengira mengaktifkan gzip sudah cukup, padahal stylesheet yang masih penuh komentar dan indentasi tetap membebani parsing setelah didekompres di browser. Praktik terbaik adalah mengurangi ukuran berkas di sini terlebih dahulu, lalu memastikan gzip atau Brotli aktif di server, sehingga pengunjung menerima unduhan sekecil mungkin.

Karena berkas yang sudah dipangkas sulit dibaca manusia, selalu simpan salinan sumber yang belum dikurangi sebagai versi kerja Anda. Lakukan semua penyuntingan dan pemberian komentar pada berkas rapi tersebut, lalu pangkas ulang hanya saat hendak merilis ke produksi. Dengan pola ini Anda tetap dapat memelihara kode dengan nyaman sekaligus menyajikan berkas yang ringan kepada pengguna. Sama pentingnya, seluruh proses berlangsung secara lokal di browser Anda. Saat menempel atau memuat file .css, kode diproses langsung oleh perangkat memakai JavaScript, dan tidak ada byte yang dikirim ke server FixTools. Stylesheet Anda, termasuk nama kelas internal atau catatan sensitif, tidak pernah meninggalkan komputer. Alat terasa seketika, sepenuhnya gratis, tanpa pendaftaran maupun kuota, dan aman untuk kode milik klien maupun proyek tertutup.