Performa situs web sangat penting dalam kecepatan skenario digital ringan. Alasan utamanya adalah karena halaman web dimuat lebih cepat, dan mesin pencari memperhatikan situs web yang memiliki struktur yang baik. Kecepatan dan keefektifan situs web sangat ditentukan oleh Cascading Style Sheets (CSS). Sebagai pengembang, Anda dapat mengurangi masalah waktu pemuatan yang lambat dari sisi proyek Anda juga dengan mengoptimalkan css yang pada akhirnya akan meningkatkan pengalaman pengguna. Berikut ini adalah beberapa praktik terbaik untuk mengoptimalkan kumpulan dan kinerja CSS Anda.
1. Minifikasi File CSS
Minifikasi - seperti namanya, ini berarti menghapus semua kelebihan yang tidak diperlukan saat ini dari file CSS seperti karakter spasi, komentar, jeda baris, dan sebagainya tanpa merusak apa pun. CSS (diperkecil) = Ukuran file yang lebih kecil, pengunduhan lebih cepat Alat-alat tersebut (misalnya CSSNano dan UglifyCSS) dapat mengotomatiskan proses minifikasi sehingga memudahkan pengembang untuk mengikuti praktik terbaik ini dalam style sheet juga.
2. Menggabungkan File CSS
Jika beberapa file CSS digunakan pada sebuah halaman web, maka setiap file akan membutuhkan permintaan HTTP-nya sendiri-sendiri. Aspek yang terakhir ini dapat menyebabkan penundaan dalam pemuatan, terutama bagi pengguna (seperti mereka yang menggunakan ponsel dan koneksi yang lebih lambat). Keuntungan utama dari menggabungkan beberapa file CSS ke dalam satu stylesheet adalah mengurangi permintaan HTTP dan membantu pemuatan yang cepat. Otomatiskan proses ini dengan alat bantu seperti Gulp atau Webpack selama pengembangan.
3. Gunakan Prapemroses CSS
Pra-pemroses CSS seperti SASS atau LESS yang membantu pengembang untuk menulis kode CSS yang dapat diskalakan, dapat dipelihara, dan modular. Hal ini memungkinkan penggunaan variabel, nesting, dan fungsi yang dapat membantu Anda menulis kode yang lebih terorganisir dengan cara yang lebih mudah. Preprocessor tidak terkait dengan kinerja style sheet (CSS) yang secara langsung berpengaruh pada kinerja, tetapi ini akan membantu css Anda diproses dengan cara yang cerdas dan membuatnya jelas, bersih, dan lebih mudah untuk dioptimalkan.
Sumber: rpl.upi.edu
4. Menerapkan CSS yang Penting
Bagi yang belum tahu, above-the-fold hanyalah sebuah istilah yang mengacu pada semua yang “di atas” yang dapat dilihat pada satu waktu di browser internet. Dengan hanya memuat CSS yang diperlukan ini terlebih dahulu, pengembang dapat mempercepat proses agar konten yang muncul di layar. Sisa css dapat dimuat secara asinkron atau ditangguhkan, sehingga browser dapat melihat konten yang terlihat terlebih dahulu dan menatanya dengan tepat. Critical adalah alat yang dapat membantu mengekstrak CSS penting untuk Anda.
5. Gunakan Singkatan CSS
Properti singkatan dalam CSS membantu pengembang menulis gaya yang lebih ringkas dan mudah dipelihara. Sebagai contoh, alih-alih melakukan padding-top: 0 dan padding-right: 20px, pengembang dapat menggunakan seluruh singkatan untuk keempat properti cellpadding. Hal ini menghasilkan file CSS yang lebih kecil dan kode yang lebih bersih dan mudah dipelihara.
6. Batasi Penggunaan Selektor
Overhead dan dampak dari selektor CSS menjadi curam karena ini adalah satu dimensi di mana Anda benar-benar tidak ingin mengirimkan apa pun kecuali apa yang telah ditentukan di depan. Refaktor selektor yang terlalu banyak ditentukan yang memaksa browser untuk melakukan lebih banyak pekerjaan daripada yang seharusnya. Sebaliknya, jika Anda dapat membantunya, cobalah selektor yang lebih sederhana (lebih umum). Hal ini tidak hanya lebih baik untuk waktu pemuatan tetapi juga membuatnya lebih mudah untuk dipelihara.
7. Memanfaatkan Cache Peramban
Ketika browser dapat menyimpan salinan file lokal seperti CSS dalam cache, maka tidak perlu mengunduh sumber daya ini pada kunjungan berikutnya. Pengembang dapat menyimpan file CSS di dalam cache ke browser untuk jangka waktu tertentu dengan menempatkan header kontrol cache yang benar. Ini berarti bahwa jika pengguna telah mengunduh CSS sebelumnya, mereka tidak perlu mengunduhnya lagi sehingga waktu muat yang lebih cepat untuk pengguna yang kembali.
8. Jaringan Pengiriman Konten (CDN)
Menggunakan CDN atau Content Delivery Network akan dapat meningkatkan kecepatan muat dengan cara menyebarkan dokumen CSS di beberapa server di lokasi yang berbeda. Ketika pengguna meminta CSS di situs web, ia menentukan server mana yang terdekat dengan lokasi mereka dan menyajikan salinan tersebut. Cara ini mengurangi waktu pemuatan karena server terdekat mungkin memerlukan latensi yang sangat rendah untuk mengirimkan file ke dalam aliran browser. Sering kali, CDN menawarkan caching dan minifikasi sebagai fitur bawaan yang pada gilirannya meningkatkan kinerja.
9. Optimalkan untuk Seluler
Karena semakin banyak orang yang menggunakan perangkat seluler untuk menjelajahi web, maka penting bagi kinerja CSS untuk dioptimalkan bagi para pengguna ini. Dengan cara ini, Anda menambahkan file CSS hanya untuk pengguna seluler dan memuat gaya yang diperlukan menggunakan kueri media. Selain itu, jika memungkinkan, buatlah perangkat lunak yang responsif sehingga dapat berjalan lancar di berbagai perangkat.
Kesimpulan
Mengoptimalkan CSS seharusnya menjadi salah satu hal terpenting yang Anda lakukan untuk meningkatkan performa situs web Anda. Pelajari cara menggunakan minify, menggabungkan file css, preprocessing, dan aset cache menggunakan praktik terbaik di luar sana. Karena rentang perhatian terus berkurang di era konsumsi, investasi konkret seperti pengoptimalan CSS dapat membedakan situs Anda dari para pesaing dan mendorong keterlibatan yang lebih besar dengan pembaca sehingga meningkatkan peringkat SEO yang berujung pada kesuksesan.
Kembali ke>> Menguasai CSS: Menata Situs Web Anda Seperti Seorang Profesional