Cara Mengecilkan CSS, HTML & Javascript Situs Web Anda

Saat Anda mengecilkan file CSS, HTML, dan Javascript situs web Anda, Anda dapat mengurangi waktu yang berharga dari kecepatan pemuatan halaman situs Anda. Sekarang kita tidak berbicara tentang memotong kecepatan memuat halaman Anda menjadi setengah atau apa pun, tetapi ketika datang ke kecepatan situs web Anda, sedikit membantu. Seberapa cepat situs Anda memuat tidak hanya penting bagi pengunjung pertama kali, tetapi juga penting untuk memindahkan peringkat mesin pencari.

Istilah "minify" adalah istilah pemrograman yang menggambarkan proses menghilangkan karakter yang tidak perlu dalam kode sumber. Karakter ini termasuk spasi putih, jeda baris, komentar, dan pembatas blok yang berguna bagi kita manusia tetapi tidak diperlukan untuk mesin. Kami mengecilkan file situs web yang berisi kode CSS, HTML, dan Javascript sehingga browser web Anda dapat membacanya lebih cepat.

Berikut adalah contoh tampilan minifikasi CSS.

CSS Sebelum Minifikasi

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

CSS Setelah Minifikasi

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

Jelas, ini hanya contoh kecil menggunakan potongan kode CSS, tetapi Anda dapat membayangkan jumlah ruang yang akan dihemat saat memperkecil ribuan baris kode. Jadi, jika Anda ingin melakukan ini secara manual dengan tangan, secara teknis Anda bisa. Tetapi Anda akan menghadapi risiko kesalahan yang tinggi dan secara tidak perlu mencukur waktu luang atau hidup Anda yang berharga!

Ikuti saran saya dan gunakan alat yang Anda inginkan.

Alat Online untuk Memperkecil File Anda Secara Manual

Untungnya, Anda tidak perlu menjadi pengembang atau mengetahui bahasa pemrograman apa pun untuk mengecilkan file situs Anda. Minifikasi telah menjadi praktik standar dalam dunia desain web sehingga seharusnya tidak mengejutkan Anda mengetahui bahwa ada banyak alat luar biasa (dan gratis) di luar sana untuk melakukan pekerjaan itu untuk Anda.

Berikut adalah daftar beberapa alat yang berguna untuk memulai. Karena banyak dari ini dapat mengecilkan lebih dari satu jenis kode, saya telah menyertakan opsi jenis kode dalam tanda kurung.

• Closure Compiler (JS only) – Closure Compiler adalah bagian dari Closure Tools, seperangkat alat dari Google Developers. Ini memungkinkan Anda untuk mengecilkan Javascript Anda bersama dengan pengoptimalan bermanfaat lainnya. Anda dapat menarik Javascript Anda menggunakan dengan memasukkan URL lokasi file js dan kemudian memilih bagaimana Anda ingin kode dioptimalkan dan diformat. Misalnya, Anda memilih untuk mengoptimalkan kode Anda untuk Whitespace hanya jika Anda mau. Setelah Anda menekan tombol kompilasi, itu akan mengecilkan (atau mengkompilasi) kode untuk Anda serta memeriksa kode Anda untuk kesalahan.
• cssminifier.com dan javascript-minifier.com (CSS dan JS) – Kedua minifiers oleh Andrew Chilton ini mudah digunakan. Cukup rekatkan kode Anda dan kemudian klik tombol Minify untuk menampilkan kode yang diperkecil. Anda bahkan dapat mengunduh kode keluaran sebagai file untuk kenyamanan.
• csscompressor.net (CSS only) – Kompresor CSS online ini cepat, mudah, dan gratis untuk digunakan.
• jscompress.com (JS only)- Alat kompresi JavaScript ini memungkinkan Anda untuk mengompresi kode JavaScript melalui Salin dan Tempel tetapi Anda juga dapat mengunggah beberapa file JavaScript sekaligus. Ini bagus untuk menggabungkan file JavaScript menjadi satu file untuk kecepatan memuat halaman yang lebih baik.
• refresh-sf.com (HTML, CSS dan JS) – Kompresor ini akan mengecilkan jenis kode JavaScript, CSS, dan HTML. Ini juga mencakup semua opsi kompresor untuk setiap jenis kode jika Anda membutuhkannya.
• htmlcompressor.com (HTML, CSS dan JS) – Alat kompresor/minifier online ini mendukung jenis kode HTML, CSS, dan JS. Bahkan mendukung kombinasi yang berbeda dari jenis kode seperti CSS + PHP dan JavaScript + PHP. Dan Anda bahkan dapat memeriksa kode terkompresi untuk kesalahan juga.
• minifycode.com (HTML, CSS dan JS) – Situs ini menawarkan minifier untuk JavaScript, CSS, dan HTML dengan UI sederhana dan bersih yang mengecilkan kode Anda dengan satu klik tombol. Ini juga termasuk alat "percantik" untuk membuka kompresi kode yang diperkecil agar mudah dibaca (pada dasarnya kebalikan dari minifikasi).
• Dan's Tools – Dan's Tools menawarkan CSS Minifier dan JavaScript Minifier. Kedua alat tersebut memiliki UI yang sangat bersih dan mudah digunakan. Mereka tidak menawarkan opsi lanjutan tetapi sangat cocok untuk tujuan minifikasi umum.

Jika Anda mencari beberapa alat offline untuk mengecilkan CSS HTML atau JavaScript secara lokal, berikut adalah beberapa opsi:

• Lebih kecil (HTML, CSS dan JS)
• phpied.com/cssmin-js/ (CSS saja)
• yui.github.io/yuicompressor (JS dan CSS)

Cara Mengecilkan CSS, HTML & Javascript Situs Web Anda

Berlangganan Saluran Youtube Kami

Cara Memperkecil Perkecil HTML, CSS, dan JavaScript Anda Menggunakan Alat Online

Banyak dari alat online ini memiliki proses serupa yang melibatkan langkah-langkah berikut:

Tempelkan kode sumber Anda atau unggah file kode sumber.
Optimalkan pengaturan untuk output tertentu (jika opsi tersedia)
Klik tombol untuk memperkecil atau mengompres kode.
Salin keluaran kode yang diperkecil atau unduh file kode yang diperkecil.

Untuk contoh ini, saya akan menggunakan alat minify dari minifycode.com.

Pertama, cari file css (biasanya bernama style.css) di file situs Anda dan buka file tersebut menggunakan editor halaman. Kemudian salin seluruh kode css ke clipboard Anda.

Buka minifycode.com dan klik tab CSS minifier. Kemudian paste kode CSS ke dalam kotak input dan klik tombol Minify CSS.

Setelah kode yang diperkecil baru dibuat, salin kodenya.

Kemudian kembali ke file css situs web Anda dan ganti kode dengan versi baru yang diperkecil.

Itu dia!

Ulangi proses yang sama untuk mengecilkan file JavaScript dan Html situs Anda juga.

Cara Mengecilkan HTML, CSS, dan JavaScript di WordPress Menggunakan Plugin

Cara termudah untuk mengecilkan HTML, CSS, dan JavaScript Anda di WordPress adalah dengan menggunakan plugin. Ini memungkinkan Anda untuk mengoptimalkan file situs WordPress Anda untuk mengurangi waktu pemuatan halaman secara otomatis dengan beberapa klik tombol.

Ada banyak plugin di luar sana yang akan melakukan pekerjaan itu tetapi saya akan menyebutkan secara singkat beberapa yang menonjol.

Optimalisasi otomatis (GRATIS)

Autoptimize mungkin adalah plugin minify paling populer di luar sana. Ini populer karena mudah digunakan dan penuh dengan fitur kinerja yang kuat. Itu dapat menggabungkan (menggabungkan skrip), mengecilkan, dan men-cache kode Anda. Sebagai bonus, Anda memiliki opsi tambahan untuk mengoptimalkan Google Font, gambar, dan lainnya.

Untuk menggunakan Autoptimize, Anda dapat mengunduh, menginstal, dan mengaktifkan plugin dari Dasbor WordPress di bawah Plugin > Add New.

Setelah plugin diaktifkan, navigasikan ke Settings > Autoptimize. Kemudian di bawah tab pengaturan utama, centang kode yang ingin Anda optimalkan (HTML, CSS, dan/atau JavaScript) dan klik Simpan Perubahan.

Anda juga dapat mengklik tombol Tampilkan Pengaturan Lanjutan di bagian atas halaman untuk menyesuaikan lebih lanjut bagaimana Anda ingin kode Anda dioptimalkan.

Itu saja! Cukup sederhana dan kuat.

Perkecil Kecepatan Cepat (GRATIS)

Fast Velocity Minify adalah plugin WordPress populer, gratis, dan kuat lainnya yang melakukan lebih dari sekadar mengecilkan. Ini meminimalkan dan menggabungkan CSS dan Javascript Anda untuk mengurangi permintaan HTTP ke server Anda, sehingga sesuai dengan namanya untuk memberi Anda waktu pemuatan halaman kecepatan cepat. Ada opsi pengoptimalan tambahan yang tersedia tetapi pengaturan default berfungsi dengan baik untuk sebagian besar situs.

Untuk menggunakan plugin, pertama instal dan aktifkan if dari Dasbor WordPress Anda dengan menavigasi ke Plugins > Add New. Kemudian cari "perkecil kecepatan cepat" dan setelah muncul di hasil pencarian, klik untuk menginstal dan mengaktifkannya.

Setelah plugin diaktifkan, file Anda akan secara otomatis diperkecil dan dioptimalkan untuk kinerja terbaik. Itu mudah!

Lompat ke halaman pengaturan plugin (Pengaturan > Perkecil Kecepatan Cepat) untuk melihat semua opsi yang tersedia. Di bawah tab Status, Anda dapat melihat daftar file JavaScript dan CSS yang berguna yang telah diproses.

Di bawah tab Pengaturan, Anda dapat menyesuaikan cara file Anda dioptimalkan. Karena minifikasi HTML, CSS, dan JavaScript sudah aktif, Anda dapat menggunakan pengaturan ini untuk menyesuaikan opsi default atau menonaktifkan minifikasi untuk jenis kode tertentu. Bahkan ada opsi untuk mengoptimalkan Google Font dan Font Awesome.

Itu dia!

Cache Total W3 (GRATIS)

W3 Total Cache adalah plugin caching hebat yang menyertakan opsi untuk mengecilkan HTML, JS, dan CSS Anda.

WP Cache Tercepat (GRATIS)

WP Fastest Cache – Plugin caching WordPress GRATIS ini sangat populer dengan ulasan tinggi. Plugin ini melakukan berbagai pengoptimalan kinerja termasuk menggabungkan dan mengecilkan CSS HTML dan JavaScript Anda untuk kinerja yang lebih baik.

Setelah plugin terinstal, cukup klik tab WP Fastest Cache di sidebar Dashboard WordPress (yang memiliki ikon cheetah yang menakjubkan). Di bawah tab pengaturan, Anda akan menemukan opsi untuk menggabungkan dan memperkecil file HTML dan CSS. Meskipun meminimalkan JavaScript hanya tersedia dalam versi pro.

Pikiran Akhir

Jika Anda menginginkan waktu pemuatan halaman yang lebih cepat dan skor kinerja yang lebih baik, Anda perlu mengecilkan file HTML, CSS, dan Javascript. Dengan semua alat online yang tersedia, Anda dapat dengan mudah memperkecil kode Anda untuk situs web apa pun. Dan untuk Anda pengguna WordPress, ada beberapa plugin hebat yang tersedia untuk mengecilkan file tersebut secara otomatis dengan beberapa klik. Plugin di atas hanyalah beberapa dari plugin hebat di luar sana yang menangani minifikasi di antara pengoptimalan kinerja lainnya. Bahkan Anda mungkin sudah memiliki plugin tipe kinerja yang memiliki minifikasi yang sudah tersedia. Misalnya, banyak plugin caching menyertakan opsi minifikasi. Saya harap posting ini membantu Anda memutuskan mana yang merupakan pilihan terbaik untuk Anda.

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!