Cara Kerja HTML Terkompresi dan Mengapa Anda Mungkin Membutuhkannya

Cara Kerja HTML Terkompresi dan Mengapa Anda Mungkin Membutuhkannya

Jika Anda menjalankan situs web, Anda seharusnya sudah tahu caranya gunakan format gambar yang tepat dan optimalkan gambar Anda untuk web . Namun sementara kompresi gambar adalah praktik yang terkenal, kompresi HTML cenderung diabaikan, yang memalukan karena manfaatnya bermanfaat.





Pada artikel ini, kita akan membahas dua metode utama untuk mengecilkan file HTML, mengapa file HTML harus diciutkan, dan bagaimana cara melakukannya.



Kompresi vs. Minifikasi

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





Minifikasi

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

Contoh halaman HTML:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

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

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



Kembali di tahun 2000-an, alat minifikasi jarang ditemukan. Anda harus mengecilkan file secara manual setiap kali ada perubahan. Karena file HTML berubah lebih sering daripada file JS dan CSS, itu terlalu membosankan untuk diperkecil setiap kali saat itu. Saat ini, itu adalah titik diperdebatkan.

Kompresi

Saat 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, lalu mengirimkan konten halaman itu kembali ke browser pengunjung.



Tetapi karena protokol HTTP mendukung kompresi, server web Anda dapat mengompresi halaman sebelum mengirimkannya ke 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 disebut DEFLASI.

Algoritme mencari kemunculan berulang teks dalam file HTML, lalu mengganti kemunculan berulang tersebut dengan referensi ke kemunculan sebelumnya. Setiap referensi hanyalah dua angka: seberapa jauh ke belakang adalah referensi dan berapa banyak karakter yang kami referensikan.

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

Blah blah blah blah blah.

Algoritma mengenali pengulangan berikut:

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

Kemunculan pertama adalah referensi kami, jadi biarkan saja:

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

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

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

Tetapi dalam kasus ini, algoritme mengenali 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 bertambah 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 yang diulang, seperti

,

,

,

  • , dll. Atribut juga sering diulang, termasuk

    class

    ,

    href

    , dan

    src

    . Sangat mudah untuk melihat mengapa kompresi GZIP sangat efektif dengan HTML.

    Satu-satunya downside adalah bahwa server web membutuhkan sedikit lebih banyak CPU untuk mengeksekusi kompresi setiap kali halaman diminta. Tetapi karena CPU tidak terlalu menjadi perhatian saat ini, hampir selalu lebih baik untuk mengaktifkan GZIP daripada tidak menggunakannya, bahkan jika Anda memiliki web hosting tingkat pemula .

    Mengapa Anda Harus Mengompresi dan Memperkecil

    Ada dua manfaat utama, keduanya sangat penting dalam lanskap web mobile-heavy saat ini.

    Pemuatan Halaman Lebih Cepat

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

    Lebih Sedikit Bandwidth Digunakan

    Katakanlah Anda memiliki 10 file, masing-masing diperkecil dari 50 KB menjadi 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 sebesar 50 MB per hari (1,5 GB per bulan).

    Kompresi + Minifikasi

    Seperti yang Anda lihat, minifikasi HTML berguna dengan sendirinya, terutama saat situs Anda tumbuh lebih besar, file menjadi lebih besar, dan lalu lintas meningkat. Perhatikan bahwa Pedoman PageSpeed ​​Google merekomendasikan untuk mengecilkan HTML, jadi jika Anda ragu, biarkan hal itu meyakinkan Anda sebaliknya.

    cara menemukan nama video youtube yang dihapus

    Tapi yang hebat dari pengoptimalan HTML adalah Anda tidak harus memilih minifikasi atau kompresi. Anda bisa melakukan keduanya! Sebenarnya, kamu Sebaiknya lakukan keduanya.

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

    Dan selain penghematan bandwidth, setiap halaman dimuat lebih cepat karena browser pengguna akhir hanya perlu mengunduh 13,5 KB versus 50 KB per halaman.

    Cara Mengompresi dan Memperkecil HTML

    Untungnya, keduanya tidak terlalu sulit akhir-akhir ini, dan Anda tidak memerlukan banyak pengetahuan teknis untuk menyiapkannya.

    Plugin WordPress

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

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

    Jika kamu hanya ingin minifikasi, kami merekomendasikan Perkecil HTML pengaya. Sederhana, mendukung HTML/CSS/JS, dan memungkinkan Anda sedikit mengubah metode minifikasi (mis.

    http:

    dan

    https:

    dari URL).

    Pengecil HTML Statis

    Jika file HTML Anda statis, (yaitu tidak dihasilkan secara dinamis oleh CMS atau kerangka kerja web), maka Anda dapat mempertahankan dua set file HTML: satu set 'sumber', yang tidak diperkecil agar mudah diedit, dan satu set 'diperkecil', yang Anda buat setiap kali Anda membuat perubahan ke file sumber.

    Untuk mengecilkan, gunakan salah satu alat ini:

    Ini adalah teknik yang layak jika Anda telah beralih dari CMS seperti WordPress dan sekarang menggunakan generator situs statis .

    Aktifkan Kompresi GZIP

    Langkah-langkah untuk mengaktifkan kompresi GZIP mungkin berbeda tergantung pada perangkat lunak server web 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 agar memiliki pengaturan berikut:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    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 ^Content-Encoding:.*gzip.*


    SetOutputFilter DEFLATE

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

    Untuk efisiensi tertinggi, Anda juga harus pelajari tentang cara memeriksa, membersihkan, dan mengoptimalkan CSS Anda .

    Membagikan Membagikan Menciak Surel Haruskah Anda Segera Upgrade ke Windows 11?

    Windows 11 akan segera hadir, tetapi haruskah Anda memperbarui sesegera mungkin atau menunggu beberapa minggu? Mari kita cari tahu.

    Baca Selanjutnya     Topik-topik yang berkaitan
    • Pemrograman
    • HTML
    • Pengembangan web
    Tentang Penulis Joel lee(1524 Artikel Diterbitkan)

    Joel Lee adalah Pemimpin Redaksi MakeUseOf sejak 2018. Dia memiliki gelar B.S. dalam Ilmu Komputer dan lebih dari sembilan tahun pengalaman menulis dan mengedit profesional.

    More From Joel Lee

    Berlangganan newsletter kami

    Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

    Klik di sini untuk berlangganan