Potong saiz fail dengan ketiga -tiga alat minifikasi HTML ini

mata utama

pemampatan HTML, proses mengeluarkan unsur -unsur yang berlebihan dari dokumen, dapat mengurangkan saiz fail dan meningkatkan pemeliharaan kod. Walaupun terdapat beberapa kontroversi terhadap keberkesanannya, pandangan PageSpeed ​​Google mencadangkan kaedah ini.
Tiga alat yang secara automatik boleh melaksanakan pemampatan HTML adalah meminimumkan, Will Peavy's HTML miniifier dan Kangax HTML miniifier. Setiap alat mempunyai ciri dan ciri yang unik, seperti mengeluarkan komen HTML, atribut yang tidak perlu, dan ruang.
Menggunakan pemampatan HTML dengan gzipping, teknik untuk menggantikan rentetan pendua dengan petunjuk, dapat mengurangkan saiz fail. Walaupun keputusan kedua -dua teknik ini berbeza, dengan menggunakan kedua -dua secara serentak dapat menjimatkan sedikit bait.

Artikel ini adalah sebahagian daripada siri artikel yang dibuat dengan kerjasama SiteGround. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin. Walaupun tidak ada konsensus yang jelas mengenai manfaat pemampatan HTML, jika anda menguji laman web anda pada pandangan halaman Google, sebahagian daripada hasil yang mungkin anda dapatkan ialah anda harus memampatkan HTML, CSS, dan JavaScript.

Sumber yang memampatkan bermaksud mengeluarkan unsur -unsur yang berlebihan, iaitu pelayar dengan betul memproses elemen yang tidak diperlukan oleh dokumen.

Gunakan konsep ini untuk dokumen HTML, pemampatan mungkin termasuk:

Keluarkan komen HTML, serta komen dalam kod CSS dan JavaScript dalam talian

• Keluarkan kod dan ruang HTML dalam CSS dan JavaScript dalam talian
Padam sebut harga yang tidak perlu, atribut kosong, dan lain -lain
Padam bahagian cdata
• Operasi ini membantu mengurangkan saiz fail sementara juga menjadikannya lebih mudah untuk memastikan kod mudah dan dapat dipelihara.

Perbandingan antara sumber gzipping dan mampatan

Jika anda menggunakan GZIP, adakah ia masih bernilai memampatkan HTML?

Satu hujah terhadap pemampatan HTML ialah memampatkan halaman HTML telah mengeluarkan ruang dan mengurangkan saiz fail. Ini menjadikan mampatan tidak berguna.

Pertama sekali, mesti diperhatikan bahawa kedua -dua operasi ini tidak sama dan tidak mendapat hasil yang sama.

Hasil yang dimampatkan mencipta fail yang terdiri daripada kod yang benar -benar sah yang boleh dikurangkan oleh penyemak imbas dan melaksanakan seperti versi yang tidak dikompresi dari fail yang sama. Sebaliknya,

Gzipping mencari semua rentetan pendua dan menggantikannya dengan penunjuk ke contoh pertama rentetan. ... Pada rangkaian, gzipping dilakukan secara langsung oleh pelayan anda. ... Pelayan memampatkan fail dan menghantarnya ke rangkaian seperti itu. Penyemak imbas menerima fail dan menguraikannya sebelum digunakan.

Chris Coyer pada Trik CSS

iaitu, menggunakan kedua -dua teknik ini dapat menjimatkan sedikit bait. Sebagai contoh, dalam Gzipping dan kesan memampatkan fail HTML, Mads Kristensen membincangkan percubaan kecil yang merangkumi memampatkan dan memampatkan empat laman web popular (iaitu, Amazon.com, CNN.com, Twitter.com, dan Xbox.com) fail HTML. Keputusan menunjukkan bahawa dengan melakukan mampatan dan mampatan, saiz fail dikurangkan sebanyak 9-16%.

Alat berikut secara automatik akan melaksanakan proses mampatan untuk anda.

Minimize

Minimize adalah pemampat HTML5 Sumber Open Source Source berdasarkan nod-htmlparser2.

Alat ini:

• boleh memampatkan kod html5 (bukan draf html lama, tidak ada kod php atau fail templat)
• ia sangat boleh dikonfigurasikan
• boleh membezakan antara keadaan iaitu komen

... dan sebagainya. Anda boleh melawat halaman projek di GitHub untuk maklumat lanjut.

Will Peavy's Html Miniifier

html miniifier adalah alat pemampatan HTML dalam talian yang dibina menggunakan PHP.

Untuk menggunakannya, tampal HTML anda ke dalam kotak teks, termasuk mana -mana CSS dan JavaScript yang anda boleh tambahkan pada tag, dan klik butang Compress.

Untuk memastikan skrip masih sah selepas pemampatan, Peavy mengesyorkan agar anda menamatkan pernyataan JavaScript dengan titik koma (;) dan menggunakan komen berbilang baris (/ * */)

Kangax html miniifier

Kangax HTML Miniifier adalah pemampat HTML berasaskan JavaScript dengan ciri-ciri yang kuat.

Ini hanya beberapa ciri alat ini:

• Padam komen HTML
• Padam komen dalam Styles and Scripts
• Padam bahagian cdata
• Padamkan tanda petikan atribut
• Padam atribut yang tidak perlu
• Padam atribut kosong
• Sahkan input melalui htmllint

anda boleh mengkonfigurasi setiap pilihan mengikut keperluan anda.

Untuk mengetahui lebih lanjut mengenai minifier HTML, anda boleh menemui semua maklumat dalam eksperimen mini HTML Kangax dan menderita sempurna.

Kesimpulan

Walaupun ia tidak biasa seperti memampatkan CSS dan JavaScript, pemampatan HTML adalah sebahagian daripada cadangan PageSpeed ​​Insights Google. Sama ada ia berbaloi tetap menjadi soalan terbuka.

Dalam artikel ini, saya telah menyenaraikan tiga alat yang dapat membantu anda mengurangkan bilangan bait di laman web dengan mengautomasikan banyak tugas pemampatan HTML.

bagaimana dengan anda, adakah anda fikir memampatkan HTML adalah idea yang baik? Apakah alat pemampatan HTML kegemaran anda?

Soalan Lazim Mengenai Alat Mampatan HTML

Apakah pemampatan HTML dan mengapa ia penting?

Mampatan HTML adalah proses memadam data yang tidak perlu atau berlebihan dari dokumen HTML tanpa menjejaskan fungsinya. Ini termasuk mengeluarkan ruang, rehat garis, komen, dan pemisah blok. Kepentingan pemampatan HTML adalah bahawa ia dapat mengurangkan saiz fail HTML, dengan itu mempercepat pemuatan laman web. Kelajuan pemuatan lebih cepat dapat meningkatkan pengalaman pengguna dan dapat meningkatkan ranking SEO laman web anda.

Bagaimana alat pemampatan html berfungsi?

Alat pemampatan HTML mengurangkan saiz fail keseluruhannya dengan menganalisis dan menulis semula bahagian teks laman web. Mereka membuang watak -watak yang tidak perlu seperti ruang, rehat garis, dan komen tanpa mengubah fungsi laman web. Sesetengah alat juga menawarkan ciri -ciri tambahan seperti CSS dan Mampatan JavaScript, serta HTML Tidy automatik, yang dapat mengoptimumkan lagi laman web anda.

Apakah beberapa alat pemampatan HTML yang terbaik?

Terdapat beberapa alat mampatan HTML yang tersedia, masing -masing dengan ciri -ciri uniknya. Antara alat yang paling popular termasuk HTMLMinifier, Minify, dan CleanCSS. HTMLMinifier adalah pemampat HTML berasaskan JavaScript yang sangat boleh dikonfigurasikan, yang baik, JavaScript. MiniFy adalah aplikasi PHP5 yang membantu anda mengikuti beberapa peraturan prestasi pelanggan. Ia menggabungkan pelbagai fail CSS atau JavaScript, menghilangkan ruang dan komen yang tidak perlu, dan menyediakan mereka dengan pengekodan GZIP dan pengepala cache pelanggan terbaik. CleanCSS adalah pengoptimuman CSS yang kuat dan formatter.

Adakah pemampatan HTML mempengaruhi fungsi laman web saya?

Jika ia dilakukan dengan betul, pemampatan HTML tidak boleh menjejaskan fungsi laman web anda. Ia hanya menghilangkan aksara yang tidak perlu tanpa mengubah fungsi kod. Walau bagaimanapun, adalah lebih baik untuk menguji laman web anda selepas mampatan untuk memastikan semuanya berfungsi dengan baik. Sesetengah alat juga menyediakan ciri "mod selamat" untuk memastikan hanya pengoptimuman yang selamat.

Adakah pemampatan HTML satu proses sekali?

Tidak, pemampatan HTML bukan proses satu kali. Setiap kali anda mengemas kini atau menukar fail HTML, anda harus memampatkannya sekali lagi untuk memastikan ia dioptimumkan yang mungkin. Sesetengah alat menawarkan mampatan automatik, yang dapat menjimatkan masa dan usaha anda.

Adakah pemampatan HTML meningkatkan SEO?

Ya, pemampatan HTML dapat meningkatkan SEO laman web anda. Dengan mengurangkan saiz fail HTML, pemampatan dapat mempercepat pemuatan laman web. Kelajuan pemuatan lebih cepat dapat meningkatkan pengalaman pengguna dan meningkatkan kedudukan SEO laman web anda.

Bolehkah saya memampatkan CSS dan JavaScript dan HTML pada masa yang sama?

Ya, banyak alat pemampatan HTML juga menyediakan pemampatan CSS dan JavaScript. Ini membolehkan anda mengoptimumkan semua aspek kod laman web anda, meningkatkan lagi masa beban dan prestasi keseluruhan.

Berapa banyak saya boleh mengurangkan saiz fail menggunakan mampatan html?

Jumlah pengurangan saiz fail bergantung kepada saiz fail HTML asal dan berapa banyak data yang tidak perlu yang mereka ada. Walau bagaimanapun, anda biasanya boleh mengharapkan untuk mengurangkan saiz fail sebanyak 10-20%.

Apakah risiko yang berkaitan dengan pemampatan HTML?

Risiko terbesar yang berkaitan dengan pemampatan HTML ialah jika proses tidak dikendalikan dengan betul, ralat mungkin berlaku. Inilah sebabnya mengapa lebih baik untuk menguji laman web anda selepas mampatan. Sesetengah alat juga menyediakan ciri "mod selamat" untuk memastikan hanya pengoptimuman yang selamat.

Adakah semua laman web memerlukan pemampatan HTML?

Walaupun tidak semua laman web dengan ketat memerlukan pemampatan HTML, ia adalah amalan terbaik untuk meningkatkan masa dan prestasi pemuatan laman web. Ia amat bermanfaat untuk laman web dengan fail HTML yang besar atau ingin mengoptimumkan SEO mereka.

Atas ialah kandungan terperinci Potong saiz fail dengan ketiga -tiga alat minifikasi HTML ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!