Apa Itu CSS? Fungsinya, Cara Kerjanya, dan Pengaruhnya pada Kecepatan

Apa Itu CSS

CSS adalah bahasa yang mengatur tampilan halaman web — warna, ukuran huruf, jarak, tata letak, dan bagaimana semuanya menyesuaikan diri di layar berbeda.

Kepanjangannya Cascading Style Sheets. Kalau HTML menyusun isi, CSS menentukan bagaimana isi itu terlihat.

Pemisahan ini disengaja: satu berkas CSS bisa mengatur tampilan ribuan halaman sekaligus, dan mengganti tampilan situs tidak menuntut menulis ulang isinya.

Cara Kerjanya

CSS bekerja dengan memilih elemen lalu memberinya aturan:

h1 {
  font-size: 2rem;
  color: #1a1a1a;
}

.tombol-utama {
  background-color: #0b5cff;
  padding: 12px 24px;
}

Kata “cascading” merujuk pada cara aturan bertumpuk: kalau ada dua aturan yang bertabrakan, ada urutan yang menentukan mana yang menang — biasanya yang lebih spesifik dan yang ditulis belakangan.

Ini juga sebab paling umum masalah “sudah saya ubah tapi tidak berubah” — ada aturan lain yang lebih kuat menimpanya.

Yang Dikerjakan CSS

• Warna, huruf, dan jarak.
• Tata letak — kolom, grid, dan susunan elemen.
• Perilaku di berbagai ukuran layar lewat aturan yang berlaku pada lebar tertentu. Ini yang membuat desain responsif mungkin.
• Keadaan elemen — tampilan tombol saat disentuh atau ditekan.
• Animasi sederhana tanpa perlu JavaScript.
• Tampilan cetak, kalau memang disiapkan.

Pengaruhnya pada Kecepatan

Bagian yang paling relevan untuk pemilik situs, dan paling jarang dibahas:

• CSS memblokir tampilan. Peramban tidak menampilkan halaman sebelum CSS yang dibutuhkan selesai dimuat. Berkas CSS yang besar menunda kapan pengunjung bisa mulai membaca.
• Tema dan pembangun halaman sering memuat CSS untuk fitur yang tidak Anda pakai. Ini penyumbang berat yang umum di situs berbasis tema.
• Terlalu banyak berkas CSS terpisah menambah antrean permintaan.
• CSS yang mengubah ukuran elemen setelah halaman tampil membuat isi melompat — dan itu diukur sebagai pergeseran tata letak, dengan ambang maksimal 0,1.

Perbaikan yang biasanya paling menghasilkan: buang tema dan plugin yang tidak dipakai, dan pastikan CSS yang dimuat memang yang dibutuhkan halaman itu.

Yang Perlu Diketahui soal SEO

• CSS tidak diindeks sebagai isi. Teks yang hanya muncul lewat CSS bukan isi yang bisa dibaca mesin pencari.
• Gambar latar lewat CSS tidak terbaca sebagai gambar konten. Kalau gambar itu penting sebagai isi, pakai elemen gambar dengan keterangan.
• Jangan blokir berkas CSS di robots.txt. Mesin pencari perlu memuatnya untuk melihat halaman seperti yang dilihat pengunjung.
• Menyembunyikan teks lewat CSS untuk menampilkan sesuatu yang berbeda dari yang terlihat pembaca melanggar kebijakan spam.

Yang Perlu Anda Lakukan Sendiri

Untuk pemilik situs, hampir tidak ada. Yang berguna dipahami:

1. Bedanya masalah CSS dan masalah HTML. Salah warna atau salah posisi biasanya CSS; isi yang salah atau hilang biasanya HTML.
2. Perubahan kecil bisa dilakukan lewat pengaturan tema, tanpa menyentuh berkasnya.
3. Hindari menempelkan CSS tambahan sembarangan dari internet — itu sering jadi sebab tampilan rusak setelah tema diperbarui.

FAQ

Apakah perlu belajar CSS untuk mengelola website?

Tidak untuk situs bisnis biasa. Pengaturan tema sudah menutupi kebutuhan yang umum. Memahami dasarnya membantu saat berkomunikasi dengan vendor.

Kenapa tampilan berubah setelah plugin diperbarui?

Biasanya karena aturan CSS baru menimpa yang lama. Ini sebab paling umum, dan menandakan ada penyesuaian yang dipasang di tempat yang mudah tertimpa.

Apakah CSS memengaruhi peringkat?

Tidak langsung. Yang berpengaruh adalah akibatnya — kecepatan muat dan stabilitas tata letak saat halaman dimuat.

CSS mengatur tampilannya; yang merakit isi halaman di sisi server sebelum dikirim ke peramban adalah bahasa seperti PHP.