Cara Mengoptimumkan Penyampaian CSS – 7 Langkah Mudah

gambar vektor pengoptimuman cssSudah berlalu ketika pakar reka bentuk dan blogger terkemuka industri mengesyorkan membina laman web tidak lebih dari 30 kilobyte…


Pada masa itu, “cap” ini diharapkan dapat menangani HTML, JavaScript, gambar, CSS dan Flash. Sejujurnya, tidak melebihi 30 kb.

Oleh kerana JavaScript dan CSS mendapat populariti, menjadi biasa bagi CSS sahaja melebihi had 30KB. Ini benar terutamanya untuk laman web yang lebih besar.

Namun, anda tidak harus terlalu fokus pada “jumlah kilobyte” anda ketika membuat dan merancang halaman untuk laman web anda. Penting untuk menjaga halaman anda dioptimumkan dan ketat semasa menulis CSS anda.

Pengoptimuman bukan sekadar meminimumkan saiz fail anda. Ini mengenai menjaga halaman anda bebas dari kekacauan dan kekacauan, menjadikannya teratur dan seefisien mungkin. Semasa anda mengetahui lebih lanjut mengenai amalan terbaik pengoptimuman CSS, anda akan mendapati bahawa anda membuat saiz fail yang lebih kecil secara automatik.

Berikut adalah 5 perkara mudah yang boleh anda lakukan untuk mengoptimumkan CSS anda sekarang.

Cara Mengoptimumkan Penyampaian CSS sepenuhnya

1. Gunakan Shorthand

Menulis secara ringkas telah menjadi amalan yang sangat biasa. Ini adalah kaedah termudah untuk mengurangkan kod anda dan berapa lama anda memerlukan kod. Sekiranya anda belum melakukan ini, tidak ada masa seperti sekarang.

harta fon css

Terdapat banyak elemen yang boleh anda gunakan secara ringkas, tetapi yang paling umum termasuk:

  • Margin
  • Melapisi
  • Fon
  • Garis besar
  • Sempadan
  • Latar belakang
  • Gaya senarai

nilai konfigurasi singkatanAnda juga boleh menggabungkan nilai menggunakan singkatan. Dengan menentukan nilai yang berbeza, penyemak imbas pada dasarnya akan menggunakan cara yang ditentukan untuk menafsirkan peraturan.

Menggunakan kehendak pendek menjadikan kod keseluruhan anda jauh lebih ringkas. Anda menyimpan watak dan baris.

Sekiranya anda menggunakan jalan pintas di setiap kawasan yang mungkin, ini secara dramatik dapat mengurangkan keseluruhan ukuran fail.

2. Singkirkan Hacks

iaitu peraturan cssUntuk melayani peraturan CSS khusus IE, menggunakan penggodaman CSS bersyarat memberi anda kelebihan melayani fail CSS lalai yang lebih kecil dan bersih.

Ia membantu penyemak imbas yang lebih mematuhi standard. Walau bagaimanapun, berat halaman tambahan hanya akan dimuat turun oleh penyemak imbas yang memerlukannya.

Sekiranya anda mesti menggunakan peretasan, adalah mustahak bahawa kod yang anda gunakan khusus untuk versi Internet Explorer yang anda fokuskan.

Terdapat banyak kod pra-tulisan yang berfungsi sebagai penggodam jika anda tidak mahu menulisnya sendiri. Luangkan masa untuk benar-benar melihat kod yang telah ditulis sebelumnya dan pastikan ia tepat jika tidak, ini boleh mengakibatkan lebih banyak masalah.

Sekarang, jika anda dapat menggunakan CSS untuk mendapatkan hasil yang anda inginkan, lakukan ini tanpa ada hacks. Sudah tentu, ini bergantung kepada semua perkara yang sama. Keseluruhan kod anda akan jauh lebih ringan dan lebih mudah apabila anda menggunakan lebih sedikit peretasan di laman web anda.

3. Bijak Mengenai Menggunakan Ruang Kosong

Untuk kod CSS anda, ruang kosong sangat mustahak untuk kesediaan membaca.

Ruang kosong merangkumi elemen, seperti tab, ruang dan jeda baris tambahan. Setiap ruang kosong yang dapat anda hilangkan sama dengan menghilangkan watak.

tanggalkan garisan kosongWalau bagaimanapun, selalunya tidak dianjurkan untuk mengabaikan ruang kosong demi fail yang lebih kecil. Anda masih perlu mengekalkan kebolehbacaan yang optimum di laman web anda.

Ruang kosong penting untuk pemformatan, jadi anda ingin mencari keseimbangan. Sekiranya anda menulis dalam blok besar ke teks untuk menghilangkan beberapa ruang kosong, jangka masa pendek pembaca di internet akan menjadikan mereka klik.

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

Sekarang, untuk versi pengeluaran fail CSS anda, anda boleh membuang ruang kosong. Ia masih akan ada dalam fail kerja anda.

Ini adalah cara lain untuk berkompromi sehingga anda mempunyai fail yang lebih kecil dan format yang dapat dibaca.

4. Pret Tetapkan Semula dan Kerangka Kerja

Semasa anda menggunakan kerangka kerja CSS, adalah mustahak anda menyemak dokumentasi.

Sama pentingnya untuk melihat setiap baris yang terdapat dalam fail CSS anda. Ada kalanya anda akan mengetahui bahawa ada beberapa peraturan dalam kerangka yang anda tidak mahukan untuk projek anda sekarang. Ini boleh dikeluarkan.

membuang peraturan css yang tidak digunakan

Anda mungkin dapat mengetahui bahawa anda dapat mencapai perincian persembahan dengan cara yang lebih ringkas dan elegan …

Ini mungkin bukan yang biasa anda gunakan, tetapi jika ia berfungsi, ini memungkinkan rangka kerja lebih bersih. Apabila anda mengetahui tentangnya, ini juga akan membantu anda untuk mengelakkan penduaan set peraturan yang tidak disengajakan.

Maklumat yang sama juga berlaku untuk set semula. Apabila anda menggunakan set semula, ini membantu meneutralkan gaya lalai penyemak imbas. Sekarang, jika anda sudah biasa dengan laman web yang anda buat, tidak jarang mencari pernyataan tertentu yang anda tahu bahawa anda tidak akan memerlukan.

Contohnya, di blog umum, kemungkinan anda tidak akan menggunakannya. Singkirkan apa sahaja yang anda tidak perlukan untuk laman web yang anda bina. Awak boleh memastikan kerja yang dioptimumkan dengan lebih baik apabila anda menggunakan sekumpulan peraturan mengenai tetapan semula atau rangka kerja.

Walau bagaimanapun, dalam keadaan lalai, mereka tidak boleh diterima. Untuk memastikan fail CSS anda dapat dibaca dan ramping, perhatikan setiap deklarasi secara berasingan dan potong yang tidak perlu.

5. Bukti Masa Depan CSS Anda

Sintaks css

Pilihan pengoptimuman CSS lain yang berguna: asingkan sebahagian besar peraturan anda dari perisytiharan khusus susun atur anda.

Tetapkan susun atur ke fail peribadinya sendiri jika ini mungkin. Sekiranya tidak, sekurang-kurangnya memberikan bahagiannya sendiri boleh bermanfaat.

Akhirnya, kedudukan dan terapung – yang merupakan kaedah semasa menggunakan CSS – tidak dimaksudkan untuk berfungsi sebagai alat susun atur.

Sebilangan orang mengatakan bahawa ini sebenarnya serupa dengan peretasan susun atur. Tidak ada alternatif yang dapat dilaksanakan pada masa ini dan harapannya adalah apabila standard tata letak yang disepakati berlaku, mereka mula mendapat sokongan penyemak imbas.

Setelah sokongan ini berlaku, tidak semestinya sangat sukar untuk menukar sifat model kotak yang diretas untuk yang dimaksudkan untuk susun atur.

Sekarang ini, pilihan terbaik adalah mengendalikan susun atur anda menggunakan sifat yang betul. Ini biasanya akan mengurangkan berat halaman dengan lebih berkesan daripada menggunakan set sifat terhad yang ada pada masa ini untuk mengimbangi kebiasaan.

6. Sentiasa Sentiasa Mengemas kini Dokumentasi Mengenai Hasil Kerja Anda

Sama ada anda bekerja di laman web sebagai satu pasukan atau bersendirian, sangat penting untuk mengawasi semua yang telah anda lakukan.

Contohnya, seorang diri, anda mungkin melupakan sesuatu yang telah anda lakukan. Sebagai satu pasukan, seseorang mungkin melakukan sesuatu, dan anda mungkin tidak menyedari sehingga anda membuat perubahan yang boleh menyebabkan masalah dengan pelbagai elemen kod.

menambah komen cssPenduaan kod adalah bidang yang sangat membimbangkan untuk kedua-dua pasukan dan pereka individu, terutamanya ketika menggunakan pembangun laman web yang popular. Wix, Squarespace, dan perisian pembinaan laman web lain adalah terkenal dengan pendua kod, atau hilang sepenuhnya dari pangkalan data mereka.

Menggunakan panduan helaian gaya dan panduan penanda adalah pilihan dokumentasi yang sesuai. Anda juga boleh menggunakan komen CSS adalah pilihan lain dan ini boleh bermanfaat untuk membelah elemen-elemen fail CSS yang panjang. Menempatkan ini dalam gaya atau panduan markup, menghalangnya daripada menambahkan ukuran fail.

Salah satu kaedah terpantas untuk kod bloat adalah dengan melakukan kerja yang sama dua kali. Pengekodan adalah rumit, jadi sangat penting untuk menyimpan dokumentasi yang tepat mengenai semua yang telah anda lakukan.

Sekiranya anda bekerja sendiri, adalah ideal untuk menyemak dokumentasi ini setiap kali anda duduk untuk mula bekerja. Semasa bekerja sebagai sebahagian daripada pasukan, pastikan semua orang membuat pengekodan dalam dokumen yang sama mematuhi panduan gaya komuniti atau markup supaya perubahan pengekodan mudah difahami oleh semua orang dalam kumpulan.

7. Kompres Fail Anda (Pengoptimuman CSS 101)

pemampatan dan pengoptimuman css gif

Mampatan: ada sedikit lebih banyak daripada ini …

Salah satu kaedah yang berkesan untuk mengoptimumkan CSS adalah dengan menggunakan pemampatan. Ini adalah cara untuk memastikan bahawa fail anda mesra penyemak imbas walaupun tidak dapat dibaca oleh manusia.

Berbanding dengan salinan yang dihasilkan, ini akan menjadi sebahagian kecil daripada ukurannya. Terdapat pelbagai aplikasi yang boleh anda manfaatkan untuk memudahkan proses pemampatan.

Ini akan melaksanakan tugas, seperti mencari dan memperbaiki sifat CSS yang saling menimpa, memampatkan ruang kosong dan mencari peluang untuk menggunakan singkatan CSS.

Sebagai tambahan kepada kemudahan aplikasi ini, mereka juga dapat membantu anda mengetahui lebih lanjut mengenai tugas yang boleh anda lakukan dengan tangan jika anda mahu. Anda juga boleh menggunakan pelbagai penyunting teks untuk membantu memformat fail CSS anda.

Mereka boleh memberikan versi zip dari pelbagai fail CSS yang anda ada. Ini biasanya dilakukan dengan menggunakan PHP. Sekiranya anda ingin menggunakan alat pengoptimuman dan pemampatan, pastikan anda menyemak pelbagai pilihan sebelum memilih yang tepat untuk anda.

Sekarang, aplikasi ini pada umumnya pandai meminimumkan ralat, tetapi tidak sempurna. Oleh kerana itu, anda harus selalu mengkaji CSS anda setelah menggunakan aplikasi untuk memastikan ketepatan. Kod yang dioptimumkan dan bersih sangat penting untuk ukuran fail, tetapi juga untuk pembacaan dan penyelenggaraan.

Giliran awak

Prinsip-prinsip yang dibincangkan di sini adalah pertimbangan kukuh untuk CSS, tetapi juga untuk JavaScript, HTML dan bahasa pengaturcaraan lain. Berbanding dengan rendering laman web anda, fail CSS tidak begitu menonjol bagi pengguna akhir.

Walau bagaimanapun, prinsip yang dibincangkan di sini dapat membantu pengalaman pengembangan dan pengalaman pengguna.

Sebilangan besar syarikat hosting web yang baik akan membantu anda dengan pengoptimuman CSS. Laman web yang lebih pantas menjadikan anda pelanggan yang senang, tetapi fail yang lebih kecil juga tidak banyak dibebani pelayan mereka.

Kami telah menguji setiap host web Kanada, dan mengesyorkan SiteGround. Mereka bukan sahaja membantu anda mengoptimumkan penyampaian CSS, tetapi sokongan teknikal mereka tiada tandingannya.

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