Cara Mengoptimalkan Pengiriman CSS – 7 Langkah Sederhana

gambar vektor optimasi cssLewatlah sudah hari-hari ketika para ahli desain dan blogger terkemuka industri merekomendasikan membangun halaman web tidak lebih dari 30 kilobyte…


Saat itu, “topi” ini diharapkan untuk menangani HTML, JavaScript, gambar, CSS, dan Flash. Jujur saja, tidak perlu banyak melebihi 30 kb.

Ketika JavaScript dan CSS mendapatkan popularitas, CSS umum saja melebihi batas 30KB. Ini terutama berlaku untuk situs web yang lebih besar.

Namun, Anda tidak boleh terlalu fokus pada “hitungan kilobyte” Anda saat membuat dan mendesain halaman untuk situs web Anda. Penting untuk menjaga halaman Anda dioptimalkan dan ketat saat menulis CSS Anda.

Optimalisasi bukan hanya tentang meminimalkan ukuran file Anda. Ini tentang menjaga halaman Anda bebas dari kekacauan dan gembung, menjadikannya seorganisasi dan seefisien mungkin. Ketika Anda mempelajari lebih lanjut tentang praktik terbaik pengoptimalan CSS, Anda akan menemukan bahwa Anda secara otomatis membuat ukuran file yang lebih kecil.

Berikut adalah 5 hal sederhana yang dapat Anda lakukan untuk mengoptimalkan CSS Anda sekarang.

Cara Mengoptimalkan Sepenuhnya Pengiriman CSS

1. Gunakan Singkatan

Menulis dalam steno telah menjadi praktik yang sangat umum. Sejauh ini, ini adalah cara paling sederhana untuk mengurangi kode Anda dan berapa lama waktu yang Anda butuhkan untuk kode. Jika Anda belum melakukan ini, tidak ada waktu seperti sekarang.

properti font css

Ada banyak elemen yang bisa Anda gunakan untuk menggunakan steno, tetapi yang paling umum meliputi:

  • Batas
  • Lapisan
  • Font
  • Garis besar
  • Berbatasan
  • Latar Belakang
  • Daftar-gaya

nilai konfigurasi singkatanAnda juga dapat menggabungkan nilai menggunakan steno. Dengan menentukan nilai yang berbeda, browser pada dasarnya akan menggunakan cara yang ditentukan untuk menafsirkan aturan.

Menggunakan steno akan buat kode keseluruhan Anda jauh lebih ringkas. Anda menyimpan karakter dan garis.

Jika Anda menggunakan steno di setiap area yang memungkinkan, ini dapat secara dramatis mengurangi ukuran file secara keseluruhan.

2. Singkirkan Hacks

yaitu aturan cssUntuk melayani aturan CSS khusus IE, menggunakan peretasan CSS bersyarat memberi Anda manfaat melayani file CSS default yang lebih kecil dan lebih bersih.

Ini membantu dengan browser yang lebih sesuai standar. Namun, tambahan berat halaman hanya akan diunduh oleh browser yang membutuhkannya.

Jika Anda harus menggunakan peretasan, sangat penting bahwa kode yang Anda gunakan khusus untuk versi Internet Explorer yang Anda fokuskan.

Ada banyak kode pra-tertulis yang berfungsi sebagai peretasan jika Anda tidak ingin menulis sendiri. Luangkan waktu untuk benar-benar melihat kode pra-tertulis dan memastikan bahwa itu akurat Jika tidak, ini dapat menyebabkan lebih banyak masalah.

Sekarang, jika Anda dapat menggunakan CSS untuk mendapatkan hasil yang Anda inginkan, lakukan ini tanpa ada peretasan. Tentu saja, ini tergantung pada semua hal lain yang sama. Kode keseluruhan Anda akan jauh lebih ringan dan sederhana ketika Anda menggunakan lebih sedikit peretasan di situs Anda.

3. Jadilah Cerdas Menggunakan Whitespace

Untuk kode CSS Anda, spasi putih sangat penting untuk keterbacaan.

Spasi mencakup elemen, seperti tab, spasi, dan jeda baris tambahan. Setiap bit spasi putih yang dapat Anda hapus sama dengan menghilangkan karakter.

hapus garis kosongNamun, seringkali tidak disarankan untuk berhemat pada ruang putih demi file yang lebih kecil. Anda masih perlu mempertahankan keterbacaan optimal pada halaman web Anda.

Ruang kosong penting untuk pemformatan, jadi Anda ingin menemukan keseimbangan. Jika Anda menulis dalam blok besar ke teks untuk menghilangkan spasi, rentang perhatian pendek pembaca di internet akan membuat mereka mengklik.

Salah satu cara untuk menyediakan ukuran file yang lebih kecil dan mudah dibaca adalah dengan membuang tab dan hanya meletakkan satu baris di antara paragraf. Ini memberikan ruang kosong yang cukup dari sudut pandang keterbacaan, tetapi juga menghilangkan beberapa ruang putih yang tidak diperlukan.

Sekarang, untuk versi produksi file CSS Anda, Anda dapat menghapus spasi putih. Itu masih akan ada di file kerja Anda.

Ini adalah cara lain untuk berkompromi sehingga Anda memiliki file yang lebih kecil dan format yang dapat dibaca.

4. Atur Ulang Pemangkas dan Kerangka Kerja

Ketika Anda menggunakan kerangka kerja CSS, Anda harus meninjau dokumentasinya.

Sama pentingnya untuk melihat setiap baris yang ada di dalam file CSS Anda. Ada kalanya Anda akan menemukan bahwa ada beberapa aturan dalam kerangka kerja yang tidak Anda inginkan untuk proyek Anda saat ini. Ini bisa dihapus.

menghapus aturan css yang tidak digunakan

Anda mungkin menemukan bahwa Anda dapat mencapai detail presentasi dengan cara yang lebih ringkas dan elegan …

Ini mungkin bukan yang biasa Anda gunakan, tetapi jika berhasil, ini dapat memungkinkan kerangka kerja yang lebih bersih. Ketika Anda tahu tentang mereka, ini juga membantu Anda untuk menghindari duplikasi set aturan yang tidak disengaja.

Informasi yang sama juga berlaku untuk mengatur ulang. Ketika Anda menggunakan pengaturan ulang, mereka membantu menetralkan gaya default browser. Sekarang, jika Anda terbiasa dengan situs web yang Anda buat, itu tidak biasa untuk menemukan deklarasi tertentu yang Anda tahu bahwa Anda tidak akan membutuhkan.

Misalnya, di blog umum, Anda kemungkinan tidak akan menggunakannya. Cukup singkirkan apa pun yang tidak Anda perlukan untuk situs spesifik yang sedang Anda bangun. Kamu bisa memastikan pekerjaan yang dioptimalkan dengan lebih baik ketika Anda menggunakan seperangkat aturan tentang reset atau kerangka kerja.

Namun, dalam keadaan default mereka, mereka tidak boleh diterima. Agar file CSS Anda mudah dibaca dan bersandar, lihat setiap deklarasi secara terpisah dan kurangi yang tidak perlu.

5. Future-Proof CSS Anda

Sintaks css

Opsi pengoptimalan CSS lain yang bermanfaat: pisahkan sebagian besar aturan Anda dari deklarasi khusus tata letak Anda.

Tetapkan tata letak ke file individualnya sendiri jika ini memungkinkan. Jika tidak, setidaknya memberikannya bagiannya sendiri bisa bermanfaat.

Pada akhirnya, penentuan posisi dan mengapung – yang merupakan metode saat ini menggunakan CSS – tidak dimaksudkan untuk berfungsi sebagai alat tata letak.

Beberapa orang mengatakan bahwa ini sebenarnya mirip dengan retas tata letak. Tidak ada alternatif yang layak saat ini dan harapannya adalah bahwa setelah standar tata letak yang disepakati terjadi, mereka mulai mendapatkan dukungan dari browser..

Setelah dukungan ini terjadi, seharusnya tidak terlalu sulit untuk menukar properti model kotak yang diretas untuk yang dimaksudkan untuk tata letak.

Sekarang, itu Pilihan terbaik adalah menangani tata letak Anda menggunakan properti yang tepat. Ini biasanya akan menyingkat berat halaman lebih efektif daripada menggunakan set properti terbatas yang saat ini tersedia untuk mengkompensasi quirks.

6. Selalu Simpan Dokumentasi yang Diperbarui Mengenai Pekerjaan Anda

Apakah Anda bekerja di situs web sebagai tim atau sendirian, sangat penting untuk melacak semua yang telah Anda lakukan.

Misalnya, sendirian, Anda mungkin melupakan sesuatu yang telah Anda lakukan. Sebagai sebuah tim, seseorang mungkin melakukan sesuatu, dan Anda mungkin tidak sadar sampai Anda membuat perubahan yang dapat menyebabkan masalah dengan berbagai elemen kode.

menambahkan komentar cssDuplikasi kode merupakan masalah besar bagi tim dan perancang individu, terutama ketika menggunakan pembuat situs web populer. Wix, Squarespace, dan perangkat lunak pembangun situs web lainnya dikenal karena kode duplikat, atau hilang seluruhnya dari database mereka.

Menggunakan panduan style sheet dan panduan markup adalah pilihan dokumentasi yang layak. Anda juga dapat menggunakan komentar CSS adalah pilihan lain dan ini dapat bermanfaat untuk memisahkan elemen-elemen file CSS yang panjang. Menempatkan ini dalam gaya atau panduan markup, mencegah mereka menambahkan ukuran file.

Salah satu cara tercepat untuk mengasapi kode adalah dengan melakukan pekerjaan yang sama dua kali. Pengkodean itu rumit, jadi sangat penting untuk menjaga dokumentasi yang akurat dari semua yang telah Anda lakukan.

Jika Anda bekerja sendirian, sebaiknya tinjau dokumentasi ini setiap kali Anda duduk untuk mulai bekerja. Saat bekerja sebagai bagian dari tim, pastikan semua orang mengkode dalam dokumen yang sama mematuhi gaya komunitas atau panduan markup sehingga perubahan pengkodean mudah dipahami oleh semua orang di grup.

7. Kompres File Anda (Optimasi CSS 101)

kompresi css dan optimasi gif

Kompresi: ada sedikit lebih dari ini …

Salah satu cara efektif untuk mengoptimalkan CSS adalah dengan menggunakan kompresi. Ini adalah cara untuk memastikan bahwa file Anda ramah browser walaupun tidak dapat dibaca oleh manusia.

Dibandingkan dengan copy pekerjaan, ini akan menjadi sebagian kecil dari ukuran. Ada berbagai aplikasi yang dapat Anda manfaatkan untuk membuat proses kompresi lebih mudah.

Ini akan melakukan tugas-tugas, seperti menemukan dan memperbaiki semua properti CSS yang saling menimpa satu sama lain, mengompresi ruang putih dan mencari peluang untuk menggunakan singkatan CSS..

Selain kenyamanan aplikasi ini, mereka juga dapat membantu Anda mempelajari lebih lanjut tentang tugas yang dapat Anda lakukan dengan tangan jika Anda mau. Anda juga dapat menggunakan berbagai editor teks untuk membantu memformat file CSS Anda.

Mereka dapat menyajikan versi zip dari berbagai file CSS yang Anda miliki. Ini biasanya dilakukan menggunakan PHP. Jika Anda ingin menggunakan alat pengoptimal dan pengompresan, pastikan untuk meninjau beberapa opsi sebelum memilih yang tepat untuk Anda.

Sekarang, aplikasi ini umumnya bagus dalam meminimalkan kesalahan, tetapi mereka tidak sempurna. Karena itu, Anda harus selalu meninjau CSS Anda setelah menggunakan aplikasi untuk memastikan keakuratan. Kode yang dioptimalkan dan bersih sangat penting untuk ukuran file, tetapi juga untuk keterbacaan dan pemeliharaan.

Giliranmu

Prinsip-prinsip yang dibahas di sini adalah pertimbangan yang kuat untuk CSS, tetapi juga untuk JavaScript, HTML, dan bahasa pemrograman lainnya. Dibandingkan dengan rendering situs web Anda, file CSS tidak terlalu menonjol bagi pengguna akhir.

Namun, prinsip-prinsip yang dibahas di sini membantu mengembangkan pengalaman dan pengalaman pengguna.

Sebagian besar perusahaan hosting web yang baik akan membantu Anda dengan optimasi CSS. Situs web yang lebih cepat membuat Anda pelanggan yang senang, tetapi file yang lebih kecil juga lebih sedikit memuat di server mereka.

Kami telah menguji setiap host web Kanada, dan merekomendasikan SiteGround. Mereka tidak hanya membantu Anda mengoptimalkan pengiriman CSS, tetapi dukungan teknis mereka tidak tertandingi.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map