Iklan

Jika Anda menjalankan situs web, Anda seharusnya sudah tahu caranya gunakan format gambar yang tepat dan optimalkan gambar Anda untuk web 10 Alat Batch Gambar Online Gratis untuk Mengubah Ukuran, Mengubah & MengoptimalkanAnda memerlukan alat pengeditan batch ketika Anda memiliki banyak foto untuk diproses dan sangat sedikit waktu. Kami memperkenalkan Anda pada resizer batch, optimizer, atau konverter terbaik yang tersedia online. Baca lebih banyak . Namun sementara kompresi gambar adalah praktik yang terkenal, kompresi HTML cenderung diabaikan, yang memalukan karena manfaatnya berharga.

Di artikel ini, kita akan membahas dua metode utama untuk menyusutkan file HTML, mengapa file HTML harus menyusut, dan bagaimana cara mengatasinya.

Kompresi vs. Minifikasi

Sejauh mengoptimalkan file HTML, ada dua metode utama untuk itu: kompresi dan minifikasi. Mereka terdengar serupa di permukaan, tetapi sebenarnya dua teknik yang berbeda, jadi jangan sampai mereka bingung.

Minifikasi

Anda dapat menganggap minifikasi sebagai penghapusan karakter dan baris yang tidak perlu dalam kode sumber. Pikirkan indentasi, komentar, baris kosong, dll. Tidak satu pun dari ini diperlukan dalam HTML - mereka ada untuk membuat file lebih mudah dibaca. Memangkas detail ini dapat memperkecil ukuran file tanpa memengaruhi apa pun.

Contoh halaman HTML:

Ini Header
Kirimi saya surat di [email protected].
Ini adalah paragraf baru!
Ini adalah paragraf baru yang dicetak tebal dan miring.

Contoh halaman HTML, diperkecil:

Ini Header
Kirimi saya surat di [email protected].
Ini adalah paragraf baru!
Ini adalah paragraf baru yang dicetak tebal dan miring.

Ukuran asli: 354. Ukuran diperkecil: 272. Tabungan: 82 (23,16%).

Banyak pengembang web dan pemilik situs mencadangkan minifikasi hanya untuk file JS dan CSS, tetapi praktik usang ini merupakan kesalahan. Minifikasi HTML juga penting.

Kembali di tahun 2000-an, alat minifikasi jarang terjadi. Anda harus meminimalkan file secara manual setiap kali ada perubahan. Karena file HTML berubah lebih sering daripada file JS dan CSS, itu terlalu membosankan untuk dikurangi setiap saat itu. Saat ini, ini adalah poin yang bisa diperdebatkan.

Kompresi

Ketika pengguna mengunjungi situs web Anda, mereka melakukannya menggunakan protokol HTTP. Browser mengirimkan permintaan ke server web Anda untuk halaman tertentu, server web Anda menemukan halaman tersebut, kemudian mengirimkan konten halaman itu kembali ke browser pengunjung.

Tetapi karena protokol HTTP mendukung kompresi, server web Anda dapat mengkompres halaman sebelum mengirimkannya kepada pengunjung (dengan asumsi kompresi diaktifkan di pengaturan server Anda), dan kemudian browser pengunjung dapat mendekompres halaman kembali ke keadaan semula.

Skema kompresi yang paling umum adalah GZIP, yang merupakan format file yang menggunakan a algoritma kompresi lossless Bagaimana cara kerja kompresi file?Bagaimana cara kerja kompresi file? Pelajari dasar-dasar kompresi file dan perbedaan antara kompresi lossy versus lossless. Baca lebih banyak disebut DEFLATE.

Algoritma mencari kejadian berulang teks dalam file HTML, lalu mengganti kejadian berulang tersebut dengan referensi ke kejadian sebelumnya. Setiap referensi hanyalah dua angka: seberapa jauh referensi dan berapa banyak karakter yang kita rujuk.

Pertimbangkan serangkaian teks seperti ini (contoh diambil dari situs web GZIP):

Bla bla bla bla bla.

Algoritma mengenali pengulangan berikut:

B {lah b} {lah b} {lah b} {lah b} lah.

Kejadian pertama adalah referensi kami, jadi biarkan:

Blah b {lah b} {lah b} {lah b} lah.

Kejadian kedua merujuk kembali ke kejadian pertama, yaitu lima karakter di belakang dan lima karakter:

Blah b [5,5] {lah b} {lah b} lah.

Tetapi dalam kasus ini, algoritma mengakui bahwa kemunculan berikutnya adalah urutan karakter yang sama, sehingga memperpanjang panjang referensi dengan lima lainnya:

Blah b [5,10] {lah b} lah.

Dan lagi:

Blah b [5,15] lah.

Dan algoritme cukup cerdas untuk menyadari bahwa tiga karakter berikutnya adalah tiga karakter pertama dalam referensi, sehingga diperluas hingga tiga:

Blah b [5,18].

Sekarang pikirkan tentang file HTML biasa dan berapa banyak pengulangan yang ada di dalamnya. Hampir setiap tag, seperti, memiliki tag penutup yang sesuai, seperti. Selain itu, banyak tag diulangi, seperti, , ,, dll. Atribut juga sering diulang, termasuk kelas, href, dan src. Sangat mudah untuk melihat mengapa kompresi GZIP sangat efektif dengan HTML.

Satu-satunya downside adalah bahwa server web membutuhkan CPU lebih banyak untuk melakukan kompresi setiap kali halaman diminta. Tetapi karena CPU tidak terlalu memprihatinkan saat ini, hampir selalu lebih baik untuk mengaktifkan GZIP daripada pergi tanpa, bahkan jika Anda memiliki web hosting entry-level Layanan Hosting Web Terbaik: Dibagi-pakai, VPS, dan BerdedikasiMencari layanan web hosting terbaik untuk kebutuhan Anda? Berikut adalah rekomendasi terbaik kami untuk blog atau situs web Anda. Baca lebih banyak .

Mengapa Anda Harus Mengompres dan Mengecilkan

Ada dua manfaat utama, yang keduanya sangat penting dalam lanskap web seluler saat ini.

Memuat Halaman Lebih Cepat

Rata-rata, sebuah minifier HTML dapat mengurangi ukuran file sekitar 3 persen dengan pengaturan dasar. Dengan pengaturan lanjutan opsional, file HTML dapat dikurangi hingga 3 hingga 7 persen, untuk potensi pengurangan hingga 10 persen. Ini secara langsung diterjemahkan menjadi waktu pemuatan halaman yang lebih cepat.

Kurang Bandwidth yang Digunakan

Katakanlah Anda memiliki 10 file, masing-masing diperkecil dari 50 KB hingga 45 KB dengan total penyusutan 50 KB. Dan katakanlah situs web Anda melayani rata-rata 1.000 pengunjung setiap hari, di mana setiap kunjungan rata-rata sepuluh halaman. Minifikasi HTML saja mengurangi penggunaan bandwidth Anda hingga 50 MB per hari (1,5 GB per bulan).

Kompresi + Minifikasi

Seperti yang Anda lihat, minifikasi HTML berguna sendiri, terutama ketika situs Anda tumbuh lebih besar, file menjadi lebih besar, dan lalu lintas meningkat. Catat itu Pedoman PageSpeed ​​Google merekomendasikan minifying HTML, jadi jika Anda ragu, biarkan itu meyakinkan Anda sebaliknya.

Tetapi yang hebat tentang pengoptimalan HTML adalah Anda tidak perlu memilih minifikasi atau kompresi. Anda bisa melakukan keduanya! Bahkan kamu Sebaiknya lakukan keduanya.

Rata-rata, Anda dapat mengharapkan kompresi GZIP menyusut file HTML hingga 70 hingga 90 persen. Menggunakan contoh di atas dengan estimasi kompresi konservatif, file HTML yang diperkecil akan masing-masing dari 45 KB menjadi 13,5 KB, untuk penyusutan total 365 KB. Dibandingkan dengan tidak diperkecil / tidak dikompresi, bandwidth situs Anda sekarang dikurangi sebesar 365 MB per hari (11 GB per bulan).

Dan di atas penghematan bandwidth, setiap halaman memuat lebih cepat secara dramatis karena browser pengguna akhir hanya perlu mengunduh 13,5 KB dibandingkan 50 KB per halaman.

Cara Mengompresi dan Meminimalkan HTML

Untungnya, tidak ada yang sangat sulit akhir-akhir ini, dan Anda tidak perlu banyak pengetahuan teknis untuk mengaturnya.

Plugin WordPress

Jika Anda menjalankan situs WordPress, yang perlu Anda lakukan adalah menginstal satu plugin dan Anda dapat memperoleh manfaat dari kompresi dan minifikasi.

Kebanyakan plugin caching melakukan lebih dari sekadar cache halaman. Sebagai contoh, WP Cache Tercepat dan W3 Total Cache keduanya memiliki pengaturan satu-klik yang memungkinkan Anda untuk mengaktifkan minifikasi HTML dan kompresi GZIP, di antara fitur-fitur lain yang lebih mempercepat pemuatan halaman dan mengurangi penggunaan bandwidth.

Jika kamu hanya ingin minifikasi, kami sarankan Minify HTML plugin. Sederhana, mendukung HTML / CSS / JS, dan memungkinkan Anda untuk sedikit mengubah metode minifikasi (mis. Apakah akan menghapus http: dan https: dari URL).

Penanda HTML Statis

Jika file HTML Anda statis, (mis. Tidak dihasilkan secara dinamis oleh CMS atau kerangka kerja web), maka Anda dapat mengelola dua set file HTML: set "sumber", yang tidak ditambang untuk pengeditan yang mudah, dan set "yang diperkecil", yang Anda buat kapan pun Anda membuat perubahan ke file sumber.

Untuk memperkecil, gunakan salah satu alat ini:

• HTMLCompressor
• Pengubah HTML
• Pengubah HTML (berbeda dari yang di atas)

Ini adalah teknik yang layak jika Anda telah pindah dari CMS seperti WordPress dan sekarang gunakan generator situs statis 7 Alasan untuk Menyingkirkan CMS Anda dan Pertimbangkan Generator Situs StatisSelama bertahun-tahun, menerbitkan situs web sulit bagi banyak pengguna. CMS seperti WordPress mengubah itu, tetapi mereka masih bisa membingungkan. Alternatif lain adalah Generator Situs Statis. Baca lebih banyak .

Aktifkan Kompresi GZIP

Langkah-langkah untuk mengaktifkan kompresi GZIP mungkin berbeda tergantung pada perangkat lunak server web mana yang Anda gunakan. Karena Apache adalah opsi paling populer, kami akan membahas cara mengaktifkannya menggunakan .htaccess.

Sambungkan ke server web Anda menggunakan FTP, lalu buat file bernama .htaccess di direktori root. Edit file .htaccess untuk memiliki pengaturan berikut:

 mod_gzip_on Ya mod_gzip_dechunk Ya mod_gzip_item_include file. (html? | txt | css | js | php | pl) $ mod_gzip_item_include handler ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Pengodean Konten:. * Gzip. *
 SetOutputFilter DEFLATE. 

Tidak yakin apakah kompresi berfungsi di situs web Anda? Uji dengan alat ini.

Untuk efisiensi tertinggi, Anda juga harus melakukannya pelajari tentang cara memeriksa, membersihkan, dan mengoptimalkan CSS Anda 11 Alat yang Berguna untuk Memeriksa, Membersihkan, dan Mengoptimalkan File CSSIngin meningkatkan kode CSS Anda? Pemeriksa dan pengoptimal CSS ini akan membantu meningkatkan kode CSS, sintaksis, dan memperkecil halaman web Anda. Baca lebih banyak .