Pengecil CSS

Apa itu minifier CSS?

CSS minifier bertujuan untuk mengecilkan file CSS di situs web. Konsep ini, yang digunakan sebagai padanan bahasa Inggris (CSS Minifier), termasuk pengaturan dalam file CSS. Ketika CSS disiapkan, tujuan utamanya adalah agar administrator situs web atau pembuat kode dapat menganalisis baris dengan benar. Oleh karena itu, terdiri dari begitu banyak baris. Ada baris dan spasi komentar yang tidak perlu di antara baris-baris ini. Inilah sebabnya mengapa file CSS menjadi sangat panjang. Semua masalah ini dihilangkan dengan CSS minifier.

Apa yang dilakukan CSS minifier?

Seiring dengan perubahan yang dilakukan pada file CSS; dimensi dikurangi, baris yang tidak perlu dihapus, baris dan spasi komentar yang tidak perlu dihapus. Selain itu, jika lebih dari satu kode dimasukkan ke dalam CSS, kode-kode ini juga akan dihapus.

Ada berbagai plug-in dan aplikasi untuk operasi ini yang sebagian besar pengguna dapat melakukannya secara manual. Khusus untuk orang yang menggunakan sistem WordPress, proses ini dapat diotomatisasi dengan plugin. Dengan demikian, kemungkinan melakukan kesalahan dihilangkan dan diperoleh hasil yang lebih efektif.

Orang yang tidak menggunakan WordPress untuk CSS atau tidak ingin memilih plugin yang ada juga dapat menggunakan alat online. Dengan mengunduh CSS ke alat online melalui internet, file yang ada di CSS dikurangi dengan membuat perubahan. Setelah semua proses selesai, cukup dengan mengunduh file CSS yang ada dan mengunggahnya ke situs web. Dengan demikian, operasi seperti CSS Minify atau shrinking akan berhasil diselesaikan, dan semua kemungkinan masalah yang mungkin dialami melalui CSS untuk situs akan dihilangkan.

Mengapa Anda harus mengecilkan file CSS Anda?

Memiliki situs web yang cepat tidak hanya membuat Google senang, tetapi juga membantu peringkat situs web Anda lebih tinggi dalam pencarian dan juga memberikan pengalaman pengguna yang lebih baik bagi pengunjung situs Anda.

Ingat, 40% orang bahkan tidak menunggu 3 detik untuk memuat beranda Anda, dan Google merekomendasikan situs dimuat paling lama dalam 2-3 detik.

Mengompresi dengan alat minifier CSS memiliki banyak manfaat;

• File yang lebih kecil berarti ukuran unduhan keseluruhan situs Anda berkurang.
• Pengunjung situs dapat memuat dan mengakses halaman Anda lebih cepat.
• Pengunjung situs mendapatkan pengalaman pengguna yang sama tanpa harus mengunduh file yang lebih besar.
• Pemilik situs mengalami biaya bandwidth yang lebih rendah karena lebih sedikit data yang ditransmisikan melalui jaringan.

Bagaimana cara kerja minifier CSS?

Sebaiknya cadangkan file situs Anda sebelum mengecilkannya. Anda bahkan dapat melangkah lebih jauh dan mengecilkan file Anda di situs percobaan. Dengan cara ini Anda memastikan semuanya aktif dan berjalan sebelum membuat perubahan pada situs langsung Anda.

Penting juga untuk membandingkan kecepatan halaman Anda sebelum dan sesudah mengecilkan file sehingga Anda dapat membandingkan hasilnya dan melihat apakah penyusutan memiliki efek.

Anda dapat menganalisis kinerja kecepatan halaman Anda menggunakan GTmetrix, Google PageSpeed ​​​​Insights, dan YSlow, alat pengujian kinerja sumber terbuka.

Sekarang mari kita lihat bagaimana melakukan proses reduksi;

1. Pengecil CSS manual

Menyusut file secara manual membutuhkan banyak waktu dan tenaga. Jadi, apakah Anda punya waktu untuk menghapus spasi individual, baris, dan kode yang tidak perlu dari file? Mungkin tidak. Selain waktu, proses reduksi ini juga memberikan lebih banyak ruang bagi kesalahan manusia. Oleh karena itu, metode ini tidak disarankan untuk mengecilkan file. Untungnya, ada banyak alat minifikasi online gratis yang memungkinkan Anda menyalin dan menempelkan kode dari situs Anda.

CSS minifier adalah alat online gratis untuk mengecilkan CSS. Saat Anda menyalin dan menempelkan kode ke dalam kolom teks “Input CSS”, alat ini akan mengecilkan CSS. Ada opsi untuk mengunduh output yang diperkecil sebagai file. Untuk pengembang, alat ini juga menyediakan API.

JSCompress , JSCompress adalah kompresor JavaScript online yang memungkinkan Anda untuk mengompresi dan mengurangi file JS Anda hingga 80% dari ukuran aslinya. Salin dan tempel kode Anda atau unggah dan gabungkan beberapa file untuk digunakan. Kemudian klik “Kompres JavaScript – Kompres JavaScript”.

2. CSS minifier dengan plugin PHP

Ada beberapa plugin hebat, baik gratis maupun premium, yang dapat mengecilkan file Anda tanpa harus melakukan langkah manual.

• Menggabungkan,
• mengecilkan,
• menyegarkan,
• Plugin WordPress.

Plugin ini tidak hanya mengecilkan kode Anda. Ini menggabungkan file CSS dan JavaScript Anda dan kemudian mengecilkan file yang dibuat menggunakan Minify (untuk CSS) dan Google Closure (untuk JavaScript). Minifikasi dilakukan melalui WP-Cron agar tidak mempengaruhi kecepatan situs Anda. Saat konten file CSS atau JS Anda berubah, file tersebut dirender ulang sehingga Anda tidak perlu mengosongkan cache.

JCH Optimize memiliki beberapa fitur yang cukup bagus untuk plugin gratis: ia menggabungkan dan mengecilkan CSS dan JavaScript, mengecilkan HTML, menyediakan kompresi GZip untuk menggabungkan file, dan merender sprite untuk gambar latar belakang.

CSS Minify , Anda hanya perlu menginstal dan mengaktifkan untuk mengecilkan CSS Anda dengan CSS Minify. Buka Pengaturan > CSS Minify dan aktifkan hanya satu opsi: Optimalkan dan perkecil kode CSS.

Fast Velocity Minify Dengan lebih dari 20.000 pemasangan aktif dan peringkat bintang lima, Fast Velocity Minify adalah salah satu opsi paling populer yang tersedia untuk mengecilkan file. Untuk menggunakannya, Anda hanya perlu menginstal dan mengaktifkannya.

Buka Pengaturan > Perkecil Kecepatan Cepat. Di sini Anda akan menemukan sejumlah opsi untuk mengonfigurasi plugin, termasuk pengecualian JavaScript dan CSS lanjutan untuk pengembang, opsi CDN, dan informasi server. Pengaturan default berfungsi dengan baik untuk sebagian besar situs.

Plugin melakukan penyusutan di frontend secara real time dan hanya selama permintaan non-cache pertama. Setelah permintaan pertama diproses, file cache statis yang sama disajikan ke halaman lain yang memerlukan kumpulan CSS dan JavaScript yang sama.

3. CSS minifier dengan plugin WordPress

CSS minifier adalah fitur standar yang biasanya Anda temukan di plugin caching.

• Roket WP,
• Tembolok Total W3,
• WP SuperCache,
• WP Cache Tercepat.

Kami berharap solusi yang kami sajikan di atas telah mencerahkan Anda tentang cara melakukan minifier CSS dan Anda dapat memahami bagaimana Anda dapat menerapkannya ke situs web Anda. Jika Anda pernah melakukan ini sebelumnya, metode apa lagi yang Anda gunakan untuk membuat situs web Anda lebih cepat? Tulis kepada kami di bagian komentar di Softmedal, jangan lupa untuk membagikan pengalaman dan saran Anda untuk meningkatkan konten kami.