Pembesar CSS

Apakah CSS minifier?

Pemkecil CSS bertujuan untuk mengecilkan fail CSS di tapak web. Konsep ini, yang digunakan sebagai bahasa Inggeris yang setara (CSS Minifier), termasuk susunan dalam fail CSS. Apabila CSS disediakan, matlamat utama adalah untuk pentadbir laman web atau pengekod menganalisis baris dengan betul. Oleh itu, ia terdiri daripada banyak baris. Terdapat baris komen dan ruang yang tidak perlu di antara baris ini. Inilah sebabnya mengapa fail CSS menjadi sangat panjang. Semua masalah ini dihapuskan dengan pemendek CSS.

Apakah yang dilakukan oleh CSS minifier?

Bersama-sama dengan perubahan yang dibuat dalam fail CSS; dimensi dikurangkan, baris yang tidak perlu dikeluarkan, baris ulasan dan ruang yang tidak perlu dipadamkan. Selain itu, jika lebih daripada satu kod disertakan dalam CSS, kod ini juga dipadamkan.

Terdapat pelbagai pemalam dan aplikasi untuk operasi ini yang kebanyakan pengguna boleh lakukan secara manual. Terutama untuk orang yang menggunakan sistem WordPress, proses ini boleh diautomasikan dengan pemalam. Oleh itu, kemungkinan melakukan kesilapan dihapuskan dan hasil yang lebih berkesan diperolehi.

Orang yang tidak menggunakan WordPress untuk CSS atau tidak mahu memilih pemalam sedia ada juga boleh menggunakan alat dalam talian. Dengan memuat turun CSS ke alatan dalam talian melalui internet, fail sedia ada dalam CSS dikurangkan dengan membuat perubahan. Selepas semua proses selesai, ia akan mencukupi untuk memuat turun fail CSS sedia ada dan memuat naiknya ke tapak web. Oleh itu, operasi seperti CSS Minify atau mengecut akan berjaya diselesaikan, dan semua kemungkinan masalah yang mungkin dialami melalui CSS untuk tapak akan dihapuskan.

Mengapa anda perlu mengecilkan fail CSS anda?

Mempunyai tapak web yang pantas bukan sahaja menggembirakan Google, ia membantu tapak web anda mendapat kedudukan yang lebih tinggi dalam carian dan juga memberikan pengalaman pengguna yang lebih baik untuk pelawat tapak anda.

Ingat, 40% orang tidak menunggu 3 saat untuk halaman utama anda dimuatkan dan Google mengesyorkan tapak dimuatkan dalam masa 2-3 saat paling banyak.

Memampatkan dengan alat pemendek CSS mempunyai banyak faedah;

• Fail yang lebih kecil bermakna saiz muat turun keseluruhan tapak anda dikurangkan.
• Pelawat tapak boleh memuatkan dan mengakses halaman anda dengan lebih pantas.
• Pelawat tapak mendapat pengalaman pengguna yang sama tanpa perlu memuat turun fail yang lebih besar.
• Pemilik tapak mengalami kos lebar jalur yang lebih rendah kerana kurang data dihantar melalui rangkaian.

Bagaimanakah pemendek CSS berfungsi?

Adalah idea yang baik untuk menyandarkan fail tapak anda sebelum mengecilkannya. Anda juga boleh melangkah lebih jauh dan mengecilkan fail anda pada tapak percubaan. Dengan cara ini, anda memastikan semuanya berfungsi dan berjalan sebelum membuat perubahan pada tapak langsung anda.

Ia juga penting untuk membandingkan kelajuan halaman anda sebelum dan selepas mengecilkan fail anda supaya anda boleh membandingkan keputusan dan melihat sama ada pengecutan mempunyai sebarang kesan.

Anda boleh menganalisis prestasi kelajuan halaman anda menggunakan GTmetrix, Google PageSpeed ​​​​Insights dan YSlow, alat ujian prestasi sumber terbuka.

Sekarang mari kita lihat bagaimana untuk melakukan proses pengurangan;

1. Pemkecil CSS manual

Mengecilkan fail secara manual memerlukan banyak masa dan usaha. Jadi adakah anda mempunyai masa untuk mengalih keluar ruang individu, baris dan kod yang tidak diperlukan daripada fail? Mungkin tidak. Selain daripada masa, proses pengurangan ini juga menyediakan lebih banyak ruang untuk kesilapan manusia. Oleh itu, kaedah ini tidak disyorkan untuk mengecilkan fail. Nasib baik, terdapat banyak alat minifikasi dalam talian percuma yang membolehkan anda menyalin dan menampal kod dari tapak anda.

CSS minifier ialah alat dalam talian percuma untuk mengecilkan CSS. Apabila anda menyalin dan menampal kod ke dalam medan teks "Input CSS", alat ini mengecilkan CSS. Terdapat pilihan untuk memuat turun output yang dikecilkan sebagai fail. Untuk pembangun, alat ini juga menyediakan API.

JSCompress , JSCompress ialah pemampat JavaScript dalam talian yang membolehkan anda memampatkan dan mengurangkan fail JS anda sehingga 80% daripada saiz asalnya. Salin dan tampal kod anda atau muat naik dan gabungkan berbilang fail untuk digunakan. Kemudian klik "Compress JavaScript - Compress JavaScript".

2. Pemkecil CSS dengan pemalam PHP

Terdapat beberapa pemalam yang hebat, percuma dan premium, yang boleh mengecilkan fail anda tanpa perlu melakukan langkah manual.

• Gabung,
• kecilkan,
• segarkan semula,
• Plugin WordPress.

Pemalam ini melakukan lebih daripada mengecilkan kod anda. Ia menggabungkan fail CSS dan JavaScript anda dan kemudian mengecilkan fail yang dibuat menggunakan Minify (untuk CSS) dan Google Closure (untuk JavaScript). Pengurangan dilakukan melalui WP-Cron supaya ia tidak menjejaskan kelajuan tapak anda. Apabila kandungan fail CSS atau JS anda berubah, ia dipaparkan semula supaya anda tidak perlu mengosongkan cache anda.

JCH Optimize mempunyai beberapa ciri yang cukup bagus untuk pemalam percuma: ia menggabungkan dan mengecilkan CSS dan JavaScript, meminimumkan HTML, menyediakan pemampatan GZip untuk menggabungkan fail dan pemaparan sprite untuk imej latar belakang.

CSS Minify , Anda hanya perlu memasang dan mengaktifkan untuk mengecilkan CSS anda dengan CSS Minify. Pergi ke Tetapan > CSS Kecilkan dan dayakan hanya satu pilihan: Optimumkan dan kecilkan kod CSS.

Fast Velocity Minify Dengan lebih 20,000 pemasangan aktif dan penarafan lima bintang, Fast Velocity Minify ialah salah satu pilihan paling popular yang tersedia untuk mengecilkan fail. Untuk menggunakannya, anda hanya perlu memasang dan mengaktifkan.

Pergi ke Tetapan > Kecilkan Halaju Pantas. Di sini anda akan menemui beberapa pilihan untuk mengkonfigurasi pemalam, termasuk pengecualian JavaScript dan CSS lanjutan untuk pembangun, pilihan CDN dan maklumat pelayan. Tetapan lalai berfungsi dengan baik untuk kebanyakan tapak.

Pemalam melakukan pengecutan pada bahagian hadapan dalam masa nyata dan hanya semasa permintaan pertama yang tidak dicache. Selepas permintaan pertama diproses, fail cache statik yang sama disampaikan ke halaman lain yang memerlukan set CSS dan JavaScript yang sama.

3. Pemkecil CSS dengan pemalam WordPress

Pemkecil CSS ialah ciri standard yang biasanya anda temui dalam pemalam caching.

• Roket WP,
• W3 Jumlah Cache,
• WP SuperCache,
• Cache Terpantas WP.

Kami berharap penyelesaian yang telah kami bentangkan di atas telah memberi pencerahan kepada anda tentang cara melakukan pemendek CSS dan anda boleh memahami cara anda boleh menggunakannya pada tapak web anda. Jika anda pernah melakukan ini sebelum ini, apakah kaedah lain yang telah anda gunakan untuk menjadikan laman web anda lebih pantas? Tulis kepada kami di bahagian komen mengenai Softmedal, jangan lupa untuk berkongsi pengalaman dan cadangan anda untuk menambah baik kandungan kami.