Mengoptimalkan CSS untuk Meningkatkan Kecepatan Situs Web

CSS adalah faktor yang sangat penting untuk memperindah tampilan situs web. Tetapi, jika kita salah dalam menerapkannya, maka akan terjadi render blocking yang dapat menghambat kecepatan situs web. Salah satu upaya untuk meningkatkan performa dan meningkatkan kecepatan situs web adalah dengan cara mengoptimalkan CSS. Banyak sekali hal yang harus dilakukan agar CSS termuat dengan cepat dan sempurna oleh web browser. Berikut ini beberapa cara agar CSS dapat dimuat sangat cepat oleh web browser.

Hapus Kode CSS yang Tidak Digunakan

Ketika web browser membuka sebuah halaman situs web, maka web browser akan menguraikan seluruh kode yang terdapat pada halaman web, salah satunya adalah kode CSS. Selain memperkecil ukuran file situs web, dengan menghapus kode CSS yang tidak digunakan juga dapat mempercepat waktu pemuatan halaman web. Bayangkan jika sebuah situs web memiliki banyak kode CSS yang tidak digunakan, maka akan memperlambat web browser untuk menguraikan kode CSS tersebut.

Minifikasi Kode CSS (CSS Minify)

Upaya lain yang dapat dilakukan untuk meningkatkan kecepatan situs web adalah dengan cara meminifikasi CSS. Untuk meminifikasi CSS yaitu dengan cara menghilangkan spasi, titik koma, dan garis baru yang tidak diperlukan. Selain dapat meningkatkan kecepatan situs web, meminifikasi CSS juga dapat memperkecil ukuran CSS. Banyak situs web yang menyediakan layanan untuk meminifikasi CSS secara otomatis, seperti CSS Compressor, Clean CSS, Minify CSS Tool, dan lain-lain.

Mengombinasikan File CSS

Jika memiliki banyak file CSS, alangkah baiknya digabungkannya menjadi satu file. Dengan mengombinasikan file CSS maka akan mengurangi permintaan HTTP ke server sehingga akan membuat halaman web dimuat lebih cepat oleh web browser. Untuk mengombinasikan atau menggabungkan file CSS yaitu dengan cara menyalin seluruh kode CSS dari tiap-tiap file CSS dan menggabungkannya dalam satu file CSS. Namun semenjak ada HTTP2, banyak para pengembang situs web yang tidak mengombinasikan file CSS. Karena dengan HTTP2, seluruh permintaan file CSS dilakukan secara pararel. Jika server situs web sudah mendukung HTTP2 maka mengombinasikan file CSS tidak terlalu penting. Tapi ingat, belum semua web browser mendukung HTTP2 terutama browser lawas, jadi saya menyarankan untuk tetap mengombinasikan file CSS.

CSS HTTP/2 Push

CSS HTTP/2 Push yaitu mengirimkan file CSS tanpa harus menunggu web browser untuk melakukan permintaan file CSS terlebih dahulu. Ketika web browser melakukan permintaan halaman HTML ke server, maka server akan mengirimkan file CSS dan HTML secara bersamaan meskipun web browser belum meminta file CSS. Tentu saja ini akan meningkatkan kecepatan situs web, karena web browser tidak harus melakukan permintaan file CSS. Untuk menggunakan CSS HTTP/2 Push, server Anda harus mendukung HTTP2.

Gunakan Bagian Critical CSS (CCSS)

Critical CSS adalah kode CSS yang diperlukan oleh web browser ketika memuat bagian halaman paling atas (above the fold) atau bagian halaman yang hanya ditampilkan oleh layar saja. Sisanya akan dimuat secara tidak sinkron dengan menggunakan JavaScript. Misalnya, jika halaman web memiliki 200 kode CSS, dan bagian halaman yang ditampilkan oleh layar hanya membutuhkan 50 CSS. Maka kita hanya perlu memuat 50 kode CSS saja, sisanya akan dimuat belakangan. Dengan mengutamakan Critical CSS, maka render blocking yang disebabkan oleh CSS dapat dihindari.
Untuk mengekstrak Critical CSS, Anda bisa menggunakan tool online seperti Critical Path CSS Generator. Anda akan mendapatkan Critical CSS dan kode JavaScript yang berfungsi untuk memuat sisa CSS setelah halaman HTML dimuat.

Jangan Menangguhkan (Defer) atau Memuat CSS Secara Tidak Sinkron (Asynchronies)

Jika JavaScript harus diletakan di bagian footer atau dimuat secara tidak sinkron atau ditangguhkan, maka file CSS sebaliknya. Mengakhirkan pemuatan CSS mungkin akan meningkatkan kecepatan situs web, tetapi hal ini akan menyebabkan FOIT (Flash of Invisible Text) atau terjadinya halaman kosong atau blank ketika situs web sedang dalam proses pemuatan (loading). Mengapa FOIT harus dihindari? Jika web browser gagal memuat CSS secara sempurna, maka pengunjung hanya akan melihat halaman kosong atau halaman web yang berantakan. Tentu saja hal ini akan menjengkelkan para pengunjung. CSS harus diletakan di bagian head dan jika menggunakan file CSS eksternal dianjurkan menggunakan atribut rel=”preload”.

Gunakan Cache Browser

Ketika web browser membuka sebuah halaman web, kita dapat menginstruksikan web browser untuk menyimpan file CSS di memori lokal. Sehingga ketika web browser membuka kembali halaman web tersebut, maka browser tidak akan meminta file CSS dari server, tetapi mengambilnya dari memori lokal. Selain meningkatkan kecepatan situs web, menggunakan cache browser juga dapat mengurangi beban kinerja server.

Kesimpulan

CSS adalah salah satu faktor yang dapat menghambat kinerja situs web jika tidak memahami cara mengoptimalkan CSS. Oleh karena itu, memahami cara untuk mengoptimalkan CSS sangat penting bagi kecepatan situs web, apa lagi jika memiliki situs web yang kompleks.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *