Meminimalkan file Javascript dan CSS akan memperkecil ukuran halaman, sehingga membuat halaman lebih cepat dimuat.
Cara melakukannya adalah dengan menggunakan salah satu dari dua plugin yang disebutkan di atas.
Ada plugin WordPress Autoptimize dari wordpress, tetapi plugin ini tidak ada hubungannya dengan cache, tetapi lebih ke optimasi gambar dan file.
Saat Anda mengecilkan file CSS, HTML, dan Javascript situs web, Anda dapat menghemat waktu yang berharga dari kecepatan muat laman situs Anda. Sekarang kami tidak berbicara tentang memotong setengah kecepatan pemuatan halaman atau apa pun, tetapi jika menyangkut kecepatan situs web Anda, sedikit pun membantu. Seberapa cepat situs Anda memuat tidak hanya penting untuk pengunjung pertama kali, tetapi juga penting untuk memindahkan peringkat mesin pencari.
Istilah “minify” adalah istilah pemrograman yang menjelaskan 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
| 01020304050607080910111213141516 | /* 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
| 01 | .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 hanyalah contoh kecil menggunakan cuplikan kode CSS, tetapi Anda dapat membayangkan jumlah ruang yang akan dihemat saat meminimalkan 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 tidak perlu mencukur waktu istirahat atau hidup Anda yang berharga!
Ikuti saran saya dan gunakan alat yang Anda inginkan.
Alat Online untuk Meminimalkan 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 Anda tidak perlu heran mengetahui bahwa ada banyak alat yang 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 (hanya JS) – 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 dari lokasi file js dan kemudian memilih bagaimana Anda ingin kode tersebut 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 apa pun.
- cssminifier.com dan javascript-minifier.com (CSS dan JS) – Kedua minifier oleh Andrew Chilton ini mudah digunakan. Cukup tempelkan kode Anda dan kemudian klik tombol Minify untuk mengeluarkan kode yang diperkecil. Anda bahkan dapat mengunduh kode keluaran sebagai file untuk kenyamanan.
- csscompressor.net (hanya untuk CSS) – Kompresor CSS online ini cepat, mudah, dan gratis untuk digunakan.
- jscompress.com (hanya JS) – Alat kompresi JavaScript ini memungkinkan Anda 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 pemuatan halaman yang lebih baik.
- refresh-sf.com (HTML, CSS, dan JS) – Kompresor ini akan meminimalkan 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. Ia bahkan mendukung berbagai kombinasi jenis kode seperti CSS + PHP dan JavaScript + PHP. Dan Anda bahkan dapat memeriksa kode yang dikompresi untuk kesalahan juga.
- minifycode.com (HTML, CSS dan JS) – Situs ini menawarkan minifier untuk JavaScript , CSS , dan HTML dengan UI yang sederhana dan bersih yang meminimalkan kode Anda dengan satu klik tombol. Ini juga mencakup alat “beautifier” 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 memiliki UI yang sangat bersih dan mudah digunakan. Mereka tidak menawarkan opsi lanjutan apa pun tetapi sempurna untuk tujuan minifikasi umum.
Jika Anda mencari beberapa alat offline untuk mengecilkan HTML CSS atau JavaScript Anda secara lokal, berikut beberapa opsinya:
- Lebih kecil (HTML, CSS dan JS)
- phpied.com/cssmin-js/ (khusus CSS)
- yui.github.io/yuicompressor (JS dan CSS)
Cara Meminimalkan CSS, HTML & Javascript Situs Web Anda
Banyak dari alat online ini memiliki proses serupa yang melibatkan langkah-langkah berikut:
Tempelkan kode sumber Anda atau unggah file kode sumber.
Mengoptimalkan pengaturan untuk keluaran tertentu (jika opsi tersedia)
Klik tombol untuk memperkecil atau memampatkan 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 menggunakan editor halaman. Kemudian salin seluruh kode css ke clipboard Anda.
Buka minifycode.com dan klik tab minifier CSS. Kemudian tempel kode CSS ke dalam kotak input dan klik tombol Minify CSS.
Setelah kode minified baru dibuat, salin kode tersebut.
Kemudian kembali ke file css situs web Anda dan ganti kodenya dengan versi baru yang diperkecil.
Itu dia!
Ulangi proses yang sama untuk memperkecil file JavaScript dan Html situs Anda juga.
Cara Meminimalkan HTML, CSS dan JavaScript di WordPress Menggunakan Plugin
Cara termudah untuk mengecilkan HTML, CSS, dan JavaScript 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.
Pengoptimalan otomatis (GRATIS)
Autoptimize mungkin adalah plugin minify yang paling populer di luar sana. Ini populer karena mudah digunakan dan penuh dengan fitur kinerja yang kuat. Itu dapat menggabungkan (menggabungkan skrip), mengecilkan, dan menyimpan kode Anda ke cache. Sebagai bonus, Anda memiliki opsi tambahan untuk mengoptimalkan Google Fonts, gambar, dan lainnya.
Untuk menggunakan Autoptimize, Anda dapat mengunduh, menginstal, dan mengaktifkan plugin dari Dasbor WordPress di bawah Plugin> Tambah Baru.
Setelah plugin diaktifkan, buka Pengaturan> Pengoptimalan Otomatis. Kemudian di bawah tab pengaturan utama, periksa kode yang ingin Anda optimalkan (HTML, CSS, dan / atau JavaScript) dan klik Simpan Perubahan.
Anda juga dapat mengklik tombol Show Advanced Settings di bagian atas halaman untuk menyesuaikan lebih lanjut bagaimana Anda ingin kode Anda dioptimalkan.
Itu saja! Cukup sederhana dan kuat.
Masih butuh bantuan?
| Tools yang digunakan | Pendalaman Materi |
|---|---|
| – WordPress | – Cukup jelas |