Cara Kompress atau Minify HTML, Javascript dan CSS Tanpa Plugin WordPress

478
Cara Kompress atau Minify HTML, Javascript dan CSS Tanpa Plugin WordPress
Cara Kompress atau Minify HTML, Javascript dan CSS Tanpa Plugin WordPress

Menggunakan terlalu banyak plugin untuk blog wordpress Anda tidak pernah menjadi ide yang baik ketika Anda tahu bahwa meretas mesin wordpress Anda tidak terlalu sulit. Mengapa tidak mencoba mengurangi penggunaan plugin? Karena beberapa plugin dapat ditambahkan dengan mudah dengan menambahkan kode plugin ke fungsi template Anda. Termasuk trik unik untuk mengecilkan HTML, javasript dan CSS ini, hanya dibutuhkan satu langkah untuk melakukannya.

Meminimalkan html, javascript dan CSS sebaris pada dasarnya mengurangi ukuran file-file tersebut sehingga akan lebih kecil dan lebih cepat untuk diunduh dan ditampilkan di browser Anda. Implementasi fungsi minify ini pada dasarnya sederhana, dengan menghilangkan spasi, argumen dan komentar pada file javascript, CSS dan HTML sebaris. Fungsi minify ini bisa ditemukan di plugin WP-Minify, atau jika Anda menggunakan plugin W3 Total Cache Anda bisa langsung mengaktifkan fitur ini. Tetapi karena kita sekarang mencoba untuk memotong penggunaan plugin, sebaiknya kita coba cara manual ini karena saya juga menemukan fungsi minify tidak benar-benar berfungsi dengan baik di W3 Total cache.

Apa itu Minify HTML?

Situs web terdiri dari banyak file berbeda. Jika Anda menguji kecepatan situs Anda dengan Google PageSpeed Insights, Anda mungkin mendapatkan rekomendasi untuk mengecilkan file HTML, CSS, dan JavaScript Anda.

Masalah? Sebagai manusia, kami menulis kode yang terdapat dalam file ini sehingga kami dapat membacanya, tetapi komputer tidak peduli dengan karakter seperti komentar, pemformatan, spasi, dan baris baru. Jadi ketika mereka menemukan karakter yang tidak perlu ini di file situs web, mereka mengabaikannya.

Di situlah minifikasi muncul. Minifikasi adalah istilah pemrograman yang pada dasarnya berarti menghapus semua karakter yang tidak perlu yang tidak diperlukan untuk menjalankan kode. Pengurangan bekerja dengan menganalisis dan menulis ulang kode untuk mengurangi ukuran file Anda secara keseluruhan, sehingga mengurangi ukuran total situs Anda sehingga memuat lebih cepat di browser pengguna.

Saat Anda mengecilkan HTML, ini menghapus karakter dan baris yang tidak perlu dalam kode sumber. Indentasi, komentar, baris kosong, dll. Tidak diperlukan dalam HTML. Mereka hanya membuat file lebih mudah dibaca. Memotong semua hal yang tidak perlu ini dapat sangat mengurangi ukuran file Anda. Saat Anda mengecilkan kode HTML di situs web Anda, server akan mengirimkan halaman yang jauh lebih kecil ke klien sehingga situs web Anda memuat lebih cepat.

WordPress membuat halaman sesuai permintaan dengan menjalankan kode PHP untuk menyatukan versi HTML situs Anda dan meminta database Anda untuk mendapatkan konten yang akan dimasukkan ke HTML tersebut. Tidak ada file fisik yang dapat kita unduh dan minimalkan sendiri, jadi kita perlu menggunakan sedikit kode PHP di dalam file functions.php dari tema Anda. Kode ini akan memampatkan output HTML sebelum dikirim ke pengunjung Anda.

Misalnya, berikut beberapa CSS yang mungkin Anda temukan di stylesheet:

Dan berikut adalah hasil minifi atau di kompress dari contoh CSS di atas:

Lihat seberapa banyak kode yang dikompresi?

Pengurangan dilakukan di server web sebelum tanggapan dikirim. Setelah minifikasi, server web menggunakan file yang lebih kecil – dan jauh lebih cepat – menggantikan file asli, menghasilkan bandwidth yang lebih rendah tanpa mengorbankan fungsionalitas.

Seperti yang dijelaskan oleh pakar SEO Yoast, mengecilkan file dapat menghemat hingga 30-40%, atau bahkan 50% dari ukuran file dalam beberapa kasus.

Mengapa Anda Harus Mengkompres atau Minify File HTML, CSS, dan JavaScript Anda

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

Ada banyak statistik yang menjelaskan mengapa kecepatan situs sangat penting: 40% orang tidak akan menunggu 3 detik untuk memuat beranda Anda dan Google menyarankan agar situs dimuat dalam 2-3 detik.

Minifikasi memiliki banyak manfaat:

  • File yang lebih kecil berarti total ukuran download situs Anda berkurang,
  • Pengunjung situs akan dapat memuat dan mengakses halaman Anda lebih cepat,
  • Pengunjung situs akan memiliki pengalaman pengguna yang identik tanpa harus mengunduh file yang lebih besar,
  • Pemilik situs akan mendapatkan biaya bandwidth yang lebih rendah karena lebih sedikit data yang dikirim melalui jaringan.

Bagaimana Cara Mengkompress atau Minify File HTML, CSS, dan JavaScript Anda

Sebelum mengecilkan file situs Anda, ada baiknya untuk menjalankan backup. Lebih baik lagi, minimalkan file Anda di situs pementasan sehingga Anda dapat memeriksa semuanya berfungsi dengan baik sebelum membuat perubahan pada situs langsung Anda.

Penting juga untuk mengukur kecepatan halaman Anda sebelum dan sesudah mengecilkan file sehingga Anda dapat membandingkan hasil dan melihat apakah minifikasi berdampak.

Situs uji kecepatan favorit saya adalah GTmetrix. Ini menganalisis kinerja kecepatan halaman Anda menggunakan Google PageSpeed Insights dan YSlow, alat pengujian kinerja sumber terbuka. Kemudian menghasilkan skor dan memberikan rekomendasi untuk peningkatan pengoptimalan situs.

Alat uji kecepatan hebat lainnya yang dapat saya rekomendasikan termasuk Pingdom Website Speed Test dan WebPageTest dan Uji kecepatan seluler Anda.

Tambahkan Kode Minify pada Themes functions.php Anda

Silahkan copy kode dibawah dan tambahkan paling bawah pada functions.php pada themes anda gunakan.

Setelah Anda menambahkan kode, Anda dapat memeriksa untuk melihat apakah HTML sedang diminimalkan di Google Chrome dengan mengklik kanan halaman dan memilih “Lihat sumber halaman.” Jika semuanya bekerja dengan benar, itu akan terlihat seperti gambar contoh yang saya berikan di bagian atas halaman ini.

Saya sangat menyarankan Anda memeriksa semua aspek situs web Anda setelah Anda menambahkan kode ini. Periksa dan pastikan semua fungsi plugin dan tema berfungsi dengan baik.

Sumber Tutorial Kompress atau Minify HTML, Javascript dan CSS Code Tanpa Plugin WordPress – seox.web.id

"Cara Kompress atau Minify HTML, Javascript dan CSS Tanpa Plugin WordPress"
478