Artikel ini akan memperkenalkan Anda pada topik yang dikenal sebagai Minify In dan dalam prosesnya juga memberi Anda demonstrasi praktis yang terperinci. Petunjuk berikut akan dibahas dalam artikel ini,
- Apa itu minifikasi?
- Mengapa minifikasi dibutuhkan?
- Bagaimana Anda mengecilkan kode CSS, JS, HTML?
- Kapan sebaiknya Anda melakukannya?
- Manfaat minifikasi?
Seperti namanya, minifikasi adalah tentang meminimalkan ukuran file. Dalam basis kode, kami memiliki kebebasan untuk mengecilkan file HTML, CSS, atau Javascript. Di sini, kita akan membahas tentang mengecilkan file CSS.
Saat pengembang membuat kode, dia memastikan bahwa kode tersebut dalam format terbaik yang dapat dibaca untuk menyederhanakan proses perubahan lebih lanjut. Jadi, nama variabel memiliki format yang mudah dimengerti dan menggunakan banyak karakter. Kemudian, mereka juga menambahkan jarak kosong yang cukup agar cukup mudah dibaca.
Tetapi dalam keseluruhan proses, kami cenderung mengendurkan string yang ukuran file kami meningkat yang pada gilirannya meningkatkan waktu pemuatan situs web. Terutama dengan situs web yang memiliki sebagian besar fungsi dan add-on, basis kode yang lebih panjang hanya membuat situs web menjadi lebih buruk.
Google tetap memiliki format terbatas untuk menentukan peringkat situs web pada halaman pencariannya berdasarkan pengalaman pengguna optimal yang disediakan situs web. Semakin baik pemuatan situs Anda, semakin baik peringkat situs web Anda di halaman pencarian.
Dengan begitu banyak yang dipertaruhkan, Anda tidak ingin pengguna Anda menderita karena waktu pemuatan situs yang buruk dan beralih ke yang berikutnya. Oleh karena itu, minifikasi kode sangatlah penting.
Faktanya, saat membangun situs web, kita tahu apa yang terdiri dari basis kode maksimum?
Ini semua tentang CSS, HTML, dan Javascript. Persaingan hari ini untuk membuat situs web Anda terlihat menarik secara visual sangat menekankan file CSS dan tanpa menyadari kami memanfaatkan situs web kami dengan kode yang berat.
Masuk, minifikasi ..
Pindah dengan artikel ini di Minify CSS
apa yang minifikasi ?
Minifikasi memungkinkan Anda untuk menghapus kode Anda ke ukuran file minimal yang tidak mempengaruhi kode namun mengurangi ukuran file. Dalam prosesnya, Anda dapat menghapus spasi dan karakter yang tidak perlu yang tidak memengaruhi keaslian situs web Anda. Beberapa hal yang harus dihindari dari kode adalah:
- Karakter spasi
- Karakter baris baru
- Blokir pembatas
- Komentar
- Mempersingkat nama variabel
Faktor-faktor ini tidak terlibat untuk membuat situs web Anda berjalan, tetapi hanya membuat file lebih berat dan meningkatkan waktu pemuatan situs web.
Keterbacaan kode sepenuhnya eksklusif dari apa yang dipahami mesin. Browser web tidak membutuhkan spasi ekstra di antara karakter untuk memahami dan menjalankannya. Jadi, coba kurangi dan minimalkan kode CSS dan HTML.
Mari kita ambil contoh:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minimalkan CSS saya
Hampir selisih 48% pada file asli dan file yang diperkecil. Dikurangi 178 byte. Setelah Minifikasi
#myContent {font-family: Arialfont-size: 90%}Halo Dunia!
Pindah dengan artikel ini di Minify CSS
Kenapa minifikasi dibutuhkan?
Untuk meningkatkan waktu pemuatan situs web. Tidak ada yang suka menunggu situs web dimuat sesuai kenyamanan. Dengan banyaknya pilihan yang tersedia, orang cenderung beralih ke yang lain. Jadi, lebih baik kurangi ukuran file.
Pindah dengan artikel ini di Minify CSS
Apa kabar mengecilkan CSS, JS, kode HTML?
Untuk memperkecil, ada beberapa alat yang tersedia online yang dapat membantu Anda mengurangi basis kode. Anda juga dapat memilih untuk melakukannya secara manual tetapi untuk basis kode yang lebih besar, disarankan untuk menggunakan salah satu alat berikut untuk mengecilkan file CSS Anda:
alat yang digunakan dalam analitik data besar
CSSminifier.com: Alat yang sangat sederhana untuk digunakan. Cukup salin kode di sisi kiri, buat file yang diperkecil, dan unduh. File yang diperkecil akan memiliki ekstensi .min.
File CSS Anda yang diperkecil akan memiliki ekstensi demo.min.css.
Smallseotools.com: Salin kode Anda atau unggah file kode Anda. Ini akan meminimalkan kode Anda dan memungkinkan Anda menyalin atau mengunduhnya.
Autoptimize: Ini adalah plugin yang dapat Anda tambahkan ke alat WordPress Anda. Sebagai plugin, Anda dapat memilih untuk mengecilkan kode CSS Anda saat itu juga.
Lebih mudah bagi pengembang untuk memahami kapan file diperkecil dan kapan tidak. File yang diperkecil akan memiliki ekstensi .min.
Pindah dengan artikel ini di Minify CSS
Kapan sebaiknya Anda melakukannya?
Minifikasi harus dilakukan terutama, ketika Anda telah menulis kode dan harus mengirimkannya ke server untuk mendapat tanggapan. Setelah file diperkecil, versi yang diperkecil digunakan untuk didistribusikan ke pengguna.
Manfaat minifikasi ?
Pengurangan ukuran file: Dengan menghapus spasi ekstra, mengurangi nama variabel, dan menghapus komentar, ukuran file hampir berkurang 30-60%. Pemuatan lebih cepat: Dengan lebih sedikit data untuk dikirim melalui jaringan, situs web memuat lebih cepat dari sebelumnya. Biaya bandwidth yang lebih rendah: Ketika data yang tidak perlu dihapus, bandwidth yang dibutuhkan jauh lebih sedikit dan begitu juga biayanya.
Hal-hal untuk diingat:
Bahkan sebelum mencoba minifikasi, pastikan kode Anda tidak melebihi batas. Aliran tidak boleh terganggu dan fungsinya harus tetap tidak terlihat. Anda perlu memeriksa bahwa bahkan setelah minifikasi kode Anda berjalan dengan cara yang sama.
Faktanya, sebagai praktik terbaik Anda selalu dapat menyiapkan template. Buat perubahan Anda di templat bawaan yang akan menghemat banyak waktu.
Apakah itu mirip dengan kompresi?
Yah, sangat TIDAK. minifikasi berbeda dengan kompresi. Kompresi membuat file yang diperkecil berkurang lebih banyak tetapi tidak memengaruhi gaya dan struktur kode.
File tersebut dikecilkan dan kemudian dikompresi sebagai zip dan dikirim melalui jaringan ketika klien meminta untuk mengakses situs web. File tersebut kemudian tidak dikompresi dan digunakan.
Contoh:
Sebelum Minifikasi:
Portofolio
- Rumah
Setelah Minifikasi:
Portofolio
- Rumah
Kode tersebut jelas lebih sulit dibaca dan dipahami oleh manusia, tetapi sama masuk akal untuk dirender oleh mesin. Mesin tidak terlalu peduli dengan keindahan kode dan spasi, ia memahami intinya dan bekerja sesuai dengan itu.
Cukup terkesan dengan teknik minifikasi?
Lalu coba sendiri. Kurangi beban file Anda dan biarkan situs web Anda mengalir dengan bebas untuk semua pengguna!
Ini membawa kita ke akhir artikel ini tentang Minify In CSS.
Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan web, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda Mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).
Jika Anda masih tertarik Jika Anda memiliki pertanyaan, Anda dapat mempostingnya di bagian komentar di blog 'Minify In CSS' ini, dan kami akan menghubungi Anda sesegera mungkin.