Bagaimana HTML Mampat Berfungsi dan Mengapa Anda Mungkin Memerlukannya

Bagaimana HTML Mampat Berfungsi dan Mengapa Anda Mungkin Memerlukannya

Sekiranya anda menjalankan laman web, anda semestinya sudah tahu caranya gunakan format gambar yang betul dan mengoptimumkan gambar anda untuk web. Walaupun pemampatan gambar adalah amalan yang terkenal, pemampatan HTML cenderung diabaikan, yang memalukan kerana faedahnya bernilai.





Dalam artikel ini, kita akan membahas dua kaedah utama untuk mengecilkan fail HTML, mengapa fail HTML harus dikecilkan, dan bagaimana cara mengatasinya.



Pemampatan vs Pengurangan

Sejauh mengoptimumkan fail HTML, ada dua kaedah utama untuknya: pemampatan dan pengurangan . Kedengarannya serupa di permukaan, tetapi sebenarnya dua teknik yang berbeza, jadi jangan bingung.





Pengurangan

Anda boleh menganggap pengurangan sebagai penghapusan watak dan baris yang tidak diperlukan dalam kod sumber. Fikirkan lekukan, komen, baris kosong, dan lain-lain. Tidak ada yang diperlukan dalam HTML - ia ada untuk menjadikan fail lebih mudah dibaca. Memotong butiran ini dapat mengurangkan ukuran fail tanpa mempengaruhi apa-apa.

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.

Saiz asal: 354. Saiz minimum: 272. Penjimatan: 82 (23.16%).

Banyak pembangun laman web dan pemilik laman web menyimpan minifikasi untuk fail JS dan CSS sahaja, tetapi praktik ketinggalan zaman ini adalah satu kesalahan. Pengurangan HTML juga penting.



Kembali pada tahun 2000-an, alat pengurangan jarang berlaku. Anda harus mengecilkan fail secara manual setiap kali sesuatu berubah. Oleh kerana fail HTML berubah lebih kerap daripada fail JS dan CSS, terlalu membosankan untuk dikurangkan setiap masa ketika itu. Pada masa kini, ia adalah titik pertimbangan.

Pemampatan

Apabila pengguna mengunjungi laman web anda, mereka melakukannya menggunakan protokol HTTP. Penyemak imbas menghantar permintaan ke pelayan web anda untuk halaman tertentu, pelayan web anda mencari halaman, kemudian mengirim kembali isi halaman tersebut ke pelayar pengunjung.



Tetapi kerana protokol HTTP menyokong pemampatan, pelayan web anda dapat memampatkan halaman sebelum menghantarnya ke pelawat (dengan anggapan pemampatan diaktifkan dalam tetapan pelayan anda), dan kemudian pelayar pelawat dapat menyahmampatkan halaman kembali ke keadaan semula.

Skema pemampatan yang paling biasa adalah GZIP , yang merupakan format fail yang menggunakan algoritma pemampatan tanpa kerugian dipanggil DEFLATE.

Algoritma mencari kejadian berulang teks dalam fail HTML, kemudian menggantikan kejadian berulang tersebut dengan merujuk kepada kejadian sebelumnya. Setiap rujukan hanya dua nombor: sejauh mana rujukan dan berapa banyak watak yang kita rujuk.

Pertimbangkan rentetan teks seperti ini (contoh diambil dari laman web GZIP):

Blah blah blah blah blah.

Algoritma mengenali pengulangan berikut:

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

Kejadian pertama adalah rujukan kami, jadi biarkan:

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

Kejadian kedua merujuk kepada kejadian pertama, iaitu lima watak di belakang dan panjang lima watak:

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

Tetapi dalam kes ini, algoritma menyedari bahawa kejadian seterusnya adalah urutan aksara yang sama, sehingga memperpanjang panjang rujukan dengan lima lagi:

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

Dan lagi:

Blah b[5,15]lah.

Dan algoritma ini cukup pintar untuk menyedari bahawa tiga watak seterusnya adalah tiga watak pertama dalam rujukan, jadi ia merangkumi tiga:

Blah b[5,18].

Sekarang fikirkan tentang fail HTML biasa dan berapa banyak pengulangan yang ada di dalamnya. Hampir setiap tag, seperti

, mempunyai tanda penutup yang sesuai, seperti

. Selanjutnya, banyak tag diulang sepanjang masa, seperti

,

,

,

  • , dll. Atribut juga sering diulang, termasuk

    class

    ,

    href

    , dan

    src

    . Sangat mudah untuk melihat mengapa pemampatan GZIP begitu berkesan dengan HTML.

    Satu-satunya kelemahan adalah bahawa pelayan web memerlukan CPU lebih sedikit untuk melakukan pemampatan setiap kali halaman diminta. Tetapi memandangkan CPU tidak begitu membimbangkan sekarang ini, hampir selalu lebih baik untuk mengaktifkan GZIP daripada tidak memerlukannya, walaupun anda mempunyai hosting web peringkat permulaan.

    Mengapa Anda Perlu Memampatkan dan Mengurangkan

    Terdapat dua faedah utama, yang mana kedua-duanya sangat penting dalam landskap web yang mudah alih sekarang.

    Muatan Halaman Lebih Cepat

    Rata-rata, pengurang HTML dapat mengurangkan ukuran fail sekitar 3 persen dengan pengaturan asas. Dengan tetapan lanjutan pilihan, fail HTML dapat dikurangkan 3 hingga 7 persen lagi, untuk pengurangan potensial hingga 10 persen. Ini secara langsung diterjemahkan menjadi masa muat halaman yang lebih pantas.

    Lebar Jalur Lebar Digunakan

    Katakan anda mempunyai 10 fail, masing-masing dikurangkan dari 50 KB hingga 45 KB dengan jumlah pengecutan 50 KB. Dan katakan laman web anda melayani purata 1,000 pelawat setiap hari, di mana setiap lawatan rata-rata sepuluh halaman. Pengurangan HTML sahaja mengurangkan penggunaan lebar jalur anda sebanyak 50 MB sehari (1.5 GB sebulan).

    Pemampatan + Pengurangan

    Seperti yang anda lihat, pengurangan HTML berguna dengan sendirinya, terutamanya apabila laman web anda semakin besar, fail semakin besar, dan lalu lintas meningkat. Perhatikan bahawa Garis panduan PageSpeed ​​Google cadangkan pengurangan HTML, jadi jika anda ragu-ragu, biarkan itu meyakinkan anda sebaliknya.

    sambungkan telefon bimbit ke penghala tanpa wayar

    Tetapi apa yang hebat mengenai pengoptimuman HTML ialah anda tidak perlu memilih pengurangan atau pemampatan. Anda boleh melakukan kedua-duanya! Sebenarnya, anda semestinya lakukan kedua-duanya.

    Rata-rata, anda dapat menjangkakan pemampatan GZIP akan mengecilkan fail HTML sebanyak 70 hingga 90 peratus. Dengan menggunakan contoh di atas dengan anggaran pemampatan konservatif, fail HTML yang dikurangkan akan masing-masing dari 45 KB hingga 13.5 KB, dengan penyusutan total 365 KB. Berbanding dengan tidak diperkecil / tidak dimampatkan, lebar jalur laman web anda kini dikurangkan sebanyak 365 MB sehari (11 GB sebulan).

    Selain penjimatan lebar jalur, setiap halaman dimuat dengan lebih pantas kerana penyemak imbas pengguna akhir hanya perlu memuat turun 13.5 KB berbanding 50 KB setiap halaman.

    Cara Memampatkan dan Meminimumkan HTML

    Nasib baik, tidak ada yang sukar hari ini, dan anda tidak memerlukan banyak pengetahuan teknikal untuk menyiapkannya.

    Pemalam WordPress

    Sekiranya anda menjalankan laman web WordPress, yang perlu anda lakukan ialah memasang satu pemalam dan anda boleh meraih faedah pemampatan dan pengurangan.

    Sebilangan besar plugin caching melakukan lebih daripada sekadar halaman cache. Sebagai contoh, Cache Terpantas WP dan Jumlah Cache W3 kedua-duanya mempunyai tetapan satu klik yang membolehkan anda mengaktifkan pengurangan HTML dan pemampatan GZIP, antara ciri lain yang mempercepat lagi pemuatan halaman dan mengurangkan penggunaan lebar jalur.

    Jika awak hanya mahukan pengurangan, kami mengesyorkan Minimumkan HTML pasangkan. Ia mudah, menyokong HTML / CSS / JS, dan membolehkan anda sedikit sebanyak mengubah kaedah pengurangan (mis.

    http:

    dan

    https:

    dari URL).

    Pengurang HTML Statik

    Sekiranya fail HTML anda statik, (misalnya tidak dihasilkan secara dinamis oleh CMS atau kerangka web), maka anda dapat mengekalkan dua set fail HTML: satu set 'sumber', yang tidak dapat disatukan untuk diedit dengan mudah, dan satu set 'dikurangkan', yang anda buat bila-bila masa anda membuat perubahan pada fail sumber.

    Untuk mengurangkan, gunakan salah satu alat ini:

    Ini adalah teknik yang sesuai jika anda telah menjauhkan diri dari CMS seperti WordPress dan sekarang menggunakan penjana laman web statik.

    Dayakan Pemampatan GZIP

    Langkah-langkah untuk mengaktifkan pemampatan GZIP mungkin berbeza bergantung pada perisian pelayan web yang anda gunakan. Oleh kerana Apache adalah pilihan yang paling popular, kami akan membahas cara mengaktifkannya menggunakan .htaccess.

    Sambungkan ke pelayan web anda menggunakan FTP, kemudian buat fail yang dipanggil

    .htaccess

    dalam direktori root. Edit fail .htaccess untuk mempunyai tetapan 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 pasti sama ada pemampatan berfungsi di laman web anda? Uji dengan alat ini .

    Untuk kecekapan terbaik, anda juga harus pelajari tentang cara memeriksa, membersihkan, dan mengoptimumkan CSS anda .

    Berkongsi Berkongsi Tweet E-mel Sekiranya Anda Meningkatkan Ke Windows 11 Segera?

    Windows 11 akan hadir tidak lama lagi, tetapi adakah anda perlu mengemas kini secepat mungkin atau menunggu beberapa minggu? Mari kita ketahui.

    Baca Seterusnya     Topik-topik yang berkaitan
    • Pengaturcaraan
    • HTML
    • Pembangunan Web
    Mengenai Pengarang Joel lee(1524 Artikel Diterbitkan)

    Joel Lee adalah Ketua Editor MakeUseOf sejak tahun 2018. Dia mempunyai B.S. dalam Sains Komputer dan lebih dari sembilan tahun pengalaman menulis dan menyunting profesional.

    Lagi Dari Joel Lee

    Langgan buletin kami

    Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

    Klik di sini untuk melanggan