Ads by Yasya El Hakim
Panduan untuk Meningkatkan Performa CSS

Pada artikel kali ini, kita akan membahas secara lengkap dan singkat tentang cara meningkatkan performa CSS. Langsung saja, mari kita ketahui hal-hal yang mempengaruhi performa CSS serta Cara untuk mengatasinya.



Hal yang Membuat CSS Menjadi Lambat


Ukuran File CSS

Simpelnya, semakin besar file CSS nya, maka semakin lama waktu untuk mendownloadnya.

Render File CSS

Untuk mengetahui dimana dan mengapa render yang lama pada file CSS, kita dapat melihat beberapa prinsip berikut:
  • Style - Menentukan property CSS mana yang digunakan untuk suatu elemen pada dokumen HTML.
  • Layout - Menentukan dimana letak elemen pada layar dan berapa banyak ruang yang dibutuhkannya. Property CSS nya seperti: postion, top, left, right, bottom, dll.
  • Paint - Menentukan elemen visual. Property CSS nya seperti: color, border, background-color, dll.
  • Composite - Menampilkan layer pada layar. Property CSS nya seperti: opacity dan transform.

CSS menawarkan banyak pilihan untuk mengatur animasi dan transisi. Kita juga dapat membuat sebuah transisi untuk beberapa property CSS. Terdapat transisi dan animasi pada CSS yang menggunakan GPU untuk dapat menampilkannya dengan frame rate 60 FPS (Frame per Second). Dibalik itu semua, terdapat juga property CSS yang ketika, memiliki animasi, hasil frame rate nya sangatlah kecil dan buruk.

Mengurangi Ukuran File CSS

Dengan mengurangi ukuran file CSS, kita dapat membuat waktu download dan loading menjadi agak cepat. Agar semakin efisien, lakukanlah cara berikut.

CSS Minification

CSS Minification adalah salah satu solusi yang harus diterapkan pertama kali guna meningkatkan performa CSS agar menjadi semakin baik. Minification dapat memformat karakter yang ada pada file CSS seperti baris kosong, spasi, dll. Berikut adalah contoh Minification pada file CSS:

/* Sebelum di Minified */

.contoh {
  padding: 1rem;
  background-color: #aaa;
}

/* Sesudah di Minified */

.contoh{padding:1rem;background-color:#aaa}


Terdapat banyak sekali Tool Online yang dapat kita gunakan untuk me-minify file CSS. Berikut adalah beberapa tool online yang sering saya gunakan:

Optimalisasi CSS

Pada tahap sebelumnya, kita sudah me-minify file CSS. Apakah hal tersebut sudah di optimalisasi?

Ketika membicarakan tentang optimalisasi CSS, tidak jarang yang menganggap bahwa kita harus menghapus baris CSS yang tidak berguna atau memformat ulang property CSS dengan mengurangi jumlah karakter. Tidak seperti CSS Minification, Optimalisasi CSS tidak (jarang) bisa dilakukan dengan menggunakan tool online.

Mari kita lihat contohnya:

/* Sebelum di Optimalisasi */

.kartu {
  background-color: #aaaaaa;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.konten-kartu {
    padding: 0.5rem 1rem 0.5rem 1rem;
}


Jika dilihat secara sekilas, kode CSS diatas sangatlah biasa dan umum untuk digunakan. Tetapi tahukan kalian bahwa terdapat beberapa optimalisasi yang dapat mengurangi jumlah karakter? Berikut adalah contohnya:

/* Sesudah di Optimalisasi */

.card {
  background-color:#aaa;
}

.kartu,
.konten-kartu {
  padding:.5rem 1rem;
}


Pada kode CSS diatas, kita sudah mengurangi jumlah karakter dari 132 menjadi 83 karakter. Setelah di optimalisasi, sekarang mari kita lakukan Minification dan hasilnya akan seperti berikut:

/* Sudah di Optimalisasi dan di Minify */

.kartu{background-color:#aaa}.kartu,.konten-kartu{padding:.5rem 1rem}


Pada kode CSS diatas, kita sudah jumlah karakter dari 132, kemudian menjadi 83 karakter dan di minify menjadi 69 karakter.

Sekarang kalian sudah mengetahui bagaimana cara Me-minify dan mengoptimalisasi file CSS. Pada step sebelumnya, saya sudah menunjukkan beberapa tool online untuk meminify file CSS. Untungnya, kalian juga dapat menggunakan tool online berikut untuk meminify dan mengoptimalisasi CSS:

Kompresi File CSS

Kompresi untuk file CSS dapat dikerjakan dari sisi server (server-side). Server-Side menggunakan gzip atau Brotli untuk mengkompress dan mengurangi ukuran file CSS agar waktu downloadnya menjadi berkurang.

Topik tentang hal tersebut dapat dibahas secara luas dan dapat mencakup banyak sekali jenis file selain CSS.

Hal lain yang harus di catat bahwa biasanya, layanan CDN juga menyediakan pilihan untuk kompresi.

0Komentar

Sebelumnya Selanjutnya