Minification Mengecilkan Ukuran File HTML CSS JS - CRUDPRO
Home  ›  Others

Minification Mengecilkan Ukuran File HTML CSS JS

Written By Agus Handi Prayitna Thursday, July 14, 2022

Apa itu Minification?

Dalam konteks pengembangan situs web, Minification berarti mengurangi panjang/ukuran kode Anda sambil mempertahankan fungsionalitas kode Anda. Ini membantu mengurangi waktu pemuatan halaman dan data overhead, serta meningkatkan pengalaman pengguna dan SEO. Sebagian besar elemen pada halaman dapat diciutkan dan atau dikompresi dengan cara tertentu.

Poin Kuat:

  • Data yang tidak perlu diblokir, jadi lebih sedikit yang tersisa untuk dibawa ke klien.
  • Lebih sedikit data berarti lebih sedikit metadata dan lebih sedikit perjalanan pulang pergi client-server.
  • Di atas berarti bahwa waktu bukanya singkat.
  • Semua hal di atas berkontribusi pada pengalaman yang lebih baik dan dampak positif pada peringkat.

Kekurangan:

  • Minification file HTML, CSS, dan JS jauh lebih tidak berdampak dibandingkan pengoptimalan lainnya (seperti pengoptimalan gambar).
  • Minification kode membuatnya tidak dapat dipahami oleh manusia dan membuat penyesuaian lebih lanjut hampir tidak mungkin. Oleh karena itu, ia mempertahankan sumber aslinya berukuran penuh dan rapi.

Haruskah saya melanjutkan dengan minifiksi?

Jika Anda setuju, setiap peningkatan dalam SEO itu penting, dan jika Anda setuju bahwa banyak peningkatan kecil dapat menentukan peringkat Anda dan memberi Anda keunggulan atas pesaing Anda, jawabannya adalah ya. Memotong beberapa byte tidak membuat perbedaan besar, tetapi kuncinya di sini adalah usaha.

Google akan memeriksa apakah CSS dan JS telah diperkecil. Jika sudah dikurangi, disarankan untuk dikurangi. Dan Anda ingin membuat Google senang dengan situs Anda. Jadi pertanyaannya bukan kapan harus Minification, tetapi kapan.

Jika Anda menjalankan situs Anda di Nginx, kami sarankan Anda segera menggunakan modul PageSpeed Google.

Jika otomatisasi ini atau lainnya tidak tersedia, Anda mungkin tidak perlu membuat file yang diperkecil setiap kali. Tweak situs langsung. Tetapi ketika Anda tahu, Anda akan tetap menggunakan versi terbaru untuk sementara waktu, Minificationkannya. Misalnya, CSS sebaris yang penting dapat tetap tidak berubah lebih lama dari gaya lainnya.

Bagaimana cara minify?

Alat dan modul sisi server

Perangkat lunak sisi server. Dapatkan kode ukuran penuh asli dan buat versi yang diperkecil.>

Solusi Off-site

Secara umum, kami merekomendasikan menggunakan CDN (Content Delivery Network). Google menyetujuinya karena kemungkinan besar situs Anda akan lebih cepat karena beberapa alasan. Salah satunya adalah penyusutan sumber daya dan/atau kompresi karena CDN tidak hanya menyimpan dan mendistribusikan sumber daya statis (gaya, skrip, gambar, dll.), tetapi juga mengoptimalkannya. CloudFront Amazon menggunakan kompresi G-Zip, dan Cloudflare bertindak sejauh meminimalkan sumber daya (menggunakanAuto Minify, Mirage dan Polish optimization fitur untuk gambar).

  • Detail manfaat menggunakan CDN
  • Detail fitur Cloudflare di atas

Alat Minification online

Ada beberapa alat pengoptimalan untuk gaya dan skrip yang tersedia secara online. Tempelkan kode ke formulir web Anda dan klik tombol untuk menerima versi yang diperkecil. Ini bekerja cukup baik dalam keadaan default, tetapi beberapa menawarkan opsi lanjutan seperti menghilangkan gaya yang tidak digunakan lagi, membuang properti yang tidak valid, mengompresi warna, memperpendek atau cap waktu.

SERP CSS minifiers:

Saat Anda mencari "CSS minifiers", Anda mungkin melihat yang berikut di halaman hasil mesin pencari pertama (juga dikenal sebagai SERP):

Daftar minifire CSS

Minifier Dapat di minify JS Fitur Lanjutan
CSS Minifier no Menyediakan API untuk 8 bahasa pemrograman..
Minify yes Tersedia sebagai dependency.
CSS Compressor no Tingkat minifikasi, pengaturan kompatibilitas, timestamping.
Dans’ Tools CSS Minify no Tidak ada fitur yang spesial.
CSS Minifier no bisa clone dari CSS Compressor.
Gift of Speed CSS compressor no.. .. tetapi merupakan bagian dari rangkaian alat hebat yang mencakup minifier JS.
CSS Minifer no.. .. tetapi merupakan bagian dari seperangkat alat yang dapat.

Berikut adalah penjelasan tentang minification, semoga bermanfaat :)