Trik Penulisan CSS agar Loading Lebih Cepat

Share:
Hello World! Sudah saya jelaskan pada pos terdahulu, CSS (Cascading Style Sheet) merupakan bahasa pemrograman yang digunakan untuk mempercantik tampilan suatu halaman website. Secara umum, penulisan CSS ada 3 cara, yaitu in-line, internal, dan eksternal. Nah, gimana sih penulisan inline, internal, dan eksternal itu? Mari kita simak berikut.

 
In-line

<div style="STYLESHEET CODE DISINI">Ini Elemen <div></div>

Cara pertama yaitu in-line. Maksudnya, penulisan kode-kode css itu ditulis di dalam atribut style pada suatu elemen. Cara ini sangat tidak efektif dan tidak enak dipandang. Iya kalau style-nya cuma font-size aja, kalau banyak? Kan jadi nggak enak di pandang. Makanya, cara ini sangat sedikit penggunannya (kecuali script style-nya cuma sedikit).

 
Internal

<style type="text/css">
        /* KODE CSS DISINI */
</style>

Hampir sama dengan in-line, penulisan css secara internal ini masih menjadi satu file. Hanya saja, penulisan internal ini kode css-nya diletakkan di bagian <head> menggunakan elemen <style type="text/css"></style>. Cara ini banyak digunakan oleh web designer dan developer karena script-nya enak dipandang dan ringan di-load. Akan tetapi, kita akan direpotkan membuka file yang akan diedit style-nya satu-satu (pada setiap file), karena kode-nya tidak sentral dan juga nantinya akan terdapat banyak baris kode.

 
Eksternal

Cara penulisan yang satu ini juga banyak digunakan oleh para web developer dan designer karena kode yang terpusat / tersentralisasi pada sebuah script css dan menjadikan script-nya enak dipandang. Akan tetapi penulisan eksternal ini memiliki kekurangan yang fatal, yakni jika kita membuka sebuah halaman web yang css-nya tersentral, maka css yang kita load bukan hanya untuk laman yang kita buka saja, tetapi css untuk semua laman akan ikut di-load, sehingga dapat menyebabkan kelemotan.

Penggunaan CSS Eksternal ini agar dapat diterapkan pada suatu laman web harus dipanggil dulu menggunakan elemen di bawah ini dan diletakkan di bagian <head>

<link href="FILE.css" rel="stylesheet">

Tapi, gimana sih caranya menulis kode CSS biar nggak lemot dan nggak ribet?

Caranya simpel, padukan antara cara internal dan eksternal. Maksudnya, pisahkan file script css (eksternal), buat 2 tipe file, yang pertama adalah style yang hampir semua (banyak) laman membutuhkan, seperti style body, atau #header / #container, dan sebagainya. Sedangkan, tipe file yang kedua adalah script yang memuat style yang spesifik, seperti style pada tombol (button) dengan class="tombol" saja. Dengan begitu, pengunjung / klien tidak akan me-load semua style yang tidak diperlukan sehingga loading menjadi lebih cepat. Semoga bermanfaat.... Salam Koding!

Tidak ada komentar