Meminimalkan CSS, JS, dan HTML - Google sangat ketat dalam menentukan peringkat situs web. Tidak hanya mengoptimalkan SEO pada situs, tetapi juga harus mematuhi aturan waktu memuat yang ketat agar pengalaman pengguna lebih optimal.
Semuanya dimulai ketika pengunjung mengunjungi situs web mu untuk pertama kalinya. Jika situs atau blogmu lambat, pengunjung akan langsung pergi dan mencari situs web yang lebih baik, yang memuat dengan cepat dan menawarkan konten yang sama atau bahkan lebih baik.
Google tahu semua itu. Dan, itulah sebabnya mereka juga memberi peringkat situs web lebih tinggi pada blog/website yang memuat lebih cepat. Sebagai blogger atau pemilik bisnis, tugas kita adalah membuat loading situs secepat mungkin. Ada banyak cara untuk melakukannya, tetapi dalam artikel ini, saya hanya akan berfokus pada cara meminimalkan CSS, JS, dan HTML.
Situs web atau blog dibangun menggunakan banyak file di mana sebagian besar adalah HTML, CSS, dan JS. File-file ini mengandung banyak kode yang dibuat secara otomatis atau ditulis oleh pengembang. Kode yang ditulis dalam file-file ini dapat dibaca secara manusiawi karena mereka perlu dikembangkan.
Namun, hal tadi tidak berlaku untuk mesin karena mereka dapat dengan cepat membaca kode. Singkatnya, ini berarti bahwa komputer tidak memerlukan kode yang diformat yang dapat kita gunakan untuk menghemat ruang dan membantu meningkatkan ukuran file situs web.
Sebelum memulai prosesnya, pertama-tama kita akan mempelajari apa arti sebenarnya minify dan bagaimana hal itu dapat menguntungkan waktu pemuatan situs web / blog.
Apa itu Minify?
Minify adalah proses dimana ruang atau karakter yang tidak perlu dihapus dari kode. Spasi dan karakter ini tidak diperlukan untuk menjalankan kode dan karenanya hanya menambah ukuran pada file. Ketika dihapus, file menjadi lebih ringan yang pada gilirannya meningkatkan waktu pemuatan halaman. Minify adalah strategi yang bagus untuk blog memuat lebih cepat dan mendapat peringkat yang lebih baik.
Ketika proses minifikasi selesai, tool minify akan menghapus hal-hal berikut dari kode blog:
- Baris kosong (enter)
- Spasi
- Pembatas blok
- Komentar atau kata-kata yang dimasukkan pembuat template
Semua karakter dan komentar ini menambah lama untuk kode dibaca, karen karakter dan komentar itu hanya dimaksudkan untuk pembaca manusia. Minifikasi membantu keseluruhan data yang ditransfer, ketika situs web diminta dari server.
Bagi pengembang, akan sangat mudah untuk membedakan antara file yang diperkecil dan file yang tidak diperkecil. File yang diperkecil memiliki ekstensi .min di dalamnya. Misalnya, header.min.css
Perbedaan perbedaan dan kompresi
Kompresi tidak mirip dengan minifikasi. Kompresi adalah teknik di mana ukuran file dikurangi dengan menggunakan algoritma kompresi atau skema ushc sebagai brotli atau gzip. Keduanya memiliki tujuan mengurangi ukuran file tetapi dengan pendekatan yang berbeda.
Jadi, pada dasarnya, kamu dapat mengecilkan file dan kemudian mengompresnya sebelum mengirimkannya ke pengguna website atau blog. File yang pernah diterima dari sisi klien kemudian akan dikompresi dan kemudian digunakan untuk tujuan rendering.
Baca juga:
Minify secara manual
Sekarang kita telah memahami apa itu minification dan perbedaannya dengan kompresi, sekarang saatnya bagi kita untuk belajar bagaimana mengecilkan CSS, JS, dan HTML.
Proses pertama sangat mudah. Yang perlu kamu lakukan adalah menghapus hal-hal yang tidak perlu dari kode website mu. Coba lihat contoh di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta charset=”utf-8">
<meta name=”viewpoint” content=”width=device-width”, initial-scale=”1">
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
</body>
</html>
Setelah minifikasi akan terlihat seperti di bawah ini:
<!DOCTYPE html><html><head><title>Portfolio</title><meta charset=”utf-8"><meta name=”viewpoint” content=”width=device-width”, initial-scale=”1"><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><nav><ul><li>Home</li></ul></nav></body></html>
Sulit dibaca kan? Bagi manusia memang sulit dibaca, tapi tidak untuk komputer. Format di atas menghapus spasi kosong yang tidak perlu, ini menjadikannya lebih kecil dan karenanya mengurangi waktu pemuatan file.
Menggunakan Alat Online
Proses manual dapat dilakukan tanpa harus mengunduh aplikasi, karena kamu bisa menggunakan tools online untuk minify CSS websitemu. Berikut ini daftar situs penyedia minfy CSS online gratis:
CSS
CSSminifier.com: Alat mudah yang digunakan untuk memperkecil CSS. Yang perlu kamu lakukan adalah meng-copy kode CSS pada template blog dan mem-paste kode tadi dan mencopy hasil minify ke template blog.
phpied.com: Ini adalah alat pengembangan yang menggunakan minifikasi CSS Kompresor YUI.
JS
Jscompress.com: Ini adalah alat minifikasi berbasis JavaScript. Alat ini memungkinkan kamu menyalin dan menempelkan kode dan mengunduh kode yang diperkecil.
yui.github.io: Alat pengembangan yang dapat digunakan selama pengembangan.
HTML
htmlcompress.com: Alat minifikasi online yang memungkinkan kamu memperkecil HTML, CSS, dan JavaScript.
HTMLMinifier: Adalah alat Pengubah / Kompresor HTML Online. Menyediakan API. Sederhana, mudah dan Cepat.
Saat ini, mayoritas orang membeli ponsel, karena mereka ingin menggunakan internet. Sudah, sebagian besar pengguna telah ditransfer dari desktop ke seluler, untuk penggunaan sehari-hari. Itulah sebabnya Google memberikan lebih penting untuk antarmuka yang ramah-seluler dan pencarian suara seluler. Salah satu faktor, yang semakin penting adalah kecepatan halaman yang dioptimalkan. Itu bisa dicapai dengan membuat laman web Anda lebih kecil. Proses minifikasi dapat mengurangi 10% - 95% ukuran kode! Ini akan membantu situs web berjalan lebih cepat dan kemudian mendapatkan skor Search Engine Optimization (SEO) yang tinggi. Untuk itu, Anda juga bisa merujuk ke alat berikut
BalasHapushttps://url-decode.com/tool/minifyhtml
https://url-decode.com/tool/css-minifier