Minifikasi HTML? [Tutup]

99

Apakah ada alat online yang dapat digunakan untuk memasukkan sumber HTML halaman dan akan mengecilkan kode?

Saya akan melakukannya untuk file aspx karena bukanlah ide yang baik untuk membuat server web melakukan gzip ...

html minify

— Paulo
sumber

19

Kapan sebaiknya memiliki server gzip?

— Chuck

5

Saya membacanya karena halaman aspx bukan file statis, itu tidak akan di-cache oleh IIS dan karenanya akan meng-gzip halaman pada setiap permintaan ...

— Paulo

23

... dan apakah itu masalah? Kecuali jika server Anda sudah menggunakan 99,9% CPU, mungkin belum. gzipping adalah hal yang biasa dilakukan dan jauh lebih efektif daripada 'minifikasi' apa pun.

— bobince

2

Ini sepertinya cukup menarik: perfectionkills.com/experimenting-with-html-minifier kangax.github.com/html-minifier

— StefanS

2

Jawabannya di sini sudah ketinggalan zaman, belum lagi beberapa di antaranya salah. Silakan periksa penjelasan saya tentang masalah dan alat yang tepat .

— Salvador Dali

63

Mungkin mencoba HTML Compressor , berikut adalah tabel sebelum dan sesudah yang menunjukkan apa yang dapat dilakukannya (termasuk untuk Stack Overflow itu sendiri):

Maaf, penurunan harga tidak memiliki konsep tabel

Ini menampilkan banyak pilihan untuk mengoptimalkan halaman Anda hingga dan termasuk meminimalkan skrip (ompressor, Google Closure Compiler, kompresor Anda sendiri) di tempat yang aman. Set opsi default cukup konservatif, jadi Anda dapat memulai dengan itu dan bereksperimen dengan mengaktifkan opsi yang lebih agresif.

Proyek ini didokumentasikan dan didukung dengan sangat baik.

— Tim Post
sumber

58

Jangan lakukan ini . Atau lebih tepatnya, jika Anda bersikeras, lakukan setelah pengoptimalan situs yang lebih signifikan selesai. Kemungkinannya sangat tinggi sehingga biaya / manfaat untuk upaya ini dapat diabaikan, terutama jika Anda berencana menggunakan alat online secara manual untuk menangani setiap halaman.

Gunakan YSlow atau Kecepatan Halaman untuk menentukan apa yang benar - benar perlu Anda lakukan untuk mengoptimalkan halaman Anda. Dugaan saya adalah bahwa mengurangi byte HTML tidak akan menjadi masalah terbesar situs Anda. Kemungkinan besar kompresi, manajemen cache, pengoptimalan gambar, dll. Akan membuat perbedaan yang lebih besar pada kinerja situs Anda secara keseluruhan. Alat-alat tersebut akan menunjukkan kepada Anda apa masalah terbesarnya - jika Anda telah menangani semuanya dan masih menemukan bahwa minifikasi HTML membuat perbedaan yang signifikan, lakukanlah.

(Jika Anda yakin ingin melakukannya, dan Anda menggunakan Apache httpd, Anda dapat mempertimbangkan untuk menggunakan mod_pagespeed dan mengaktifkan beberapa opsi untuk mengurangi whitespace, dll., Tetapi waspadai risikonya .)

— Zac Thompson
sumber

25

Apa salahnya pengoptimalan jika kode yang diperkecil mudah dibaca menggunakan kecantikan otomatis?

12

Ini mungkin bukan masalah terbesar - tetapi jika ini adalah proses yang sepele untuk menjalankan markup melalui sekumpulan regex yang diperkecil saat mengompilasi dari dev ke qa atau prod, lalu mengapa Anda tidak ingin mengirimkan dokumen markup yang lebih kecil?

— Akan Peavy

26

Sebenarnya bukan jawaban untuk pertanyaan awal :(

— Chuck Le Butt

7

@Apakah, hampir pasti bukan proses yang sepele untuk menjalankan HTML melalui minifikasi ekspresi reguler, dan bahkan menggunakan parser yang tepat itu mungkin tidak sepele atau cepat. Terlebih lagi, tidak seperti minifikasi JS / CSS, minifikasi HTML tidak akan lossless: tag apa pun dapat diberi gaya white-space: pre, dan minifikasi akan menghancurkan teks yang telah diformat sebelumnya.

— Kelopak mata

3

@eyelidlessness - Saat ini saya memiliki ribuan halaman yang diperkecil oleh regex sebelum ditayangkan. Fungsi ini bukanlah bagian sistem yang kompleks atau mahal. ... Di sisi lain, jika Anda ingin mengurai gaya komputasi untuk menghindari meminimalkan elemen yang diberi gaya white-space:pre, ya, meminimalkan HTML akan lebih rumit. Namun, saya tidak mengerti mengapa seseorang ingin menggunakan spasi: pre daripada menggunakan preatau codeelemen.

— Akankah Peavy

34

Berikut adalah jawaban singkat untuk pertanyaan Anda : Anda harus mengecilkan HTML, CSS, JS Anda . Ada alat yang mudah digunakan yang disebut grunt . Ini memungkinkan Anda untuk mengotomatiskan banyak tugas. Diantaranya JS , CSS , minification HTML , file concatenation dan banyak lagi lainnya .

Jawaban yang tertulis di sini sangat ketinggalan zaman atau bahkan terkadang tidak masuk akal. Banyak hal yang berubah dari tahun 2009 yang lalu, jadi saya akan mencoba menjawabnya dengan benar.

Jawaban singkat - Anda harus mengecilkan HTML . Ini sepele hari ini dan memberikan kecepatan sekitar 5% . Untuk jawaban yang lebih panjang baca keseluruhan jawaban

Dulu, orang-orang mengecilkan css / js secara manual (dengan menjalankannya melalui beberapa alat khusus untuk mengecilkannya). Agak sulit untuk mengotomatiskan prosesnya dan pastinya membutuhkan beberapa keterampilan. Mengetahui bahwa banyak situs tingkat tinggi bahkan saat ini tidak menggunakan gzip (yang sepele), dapat dimaklumi bahwa orang enggan mengecilkan html.

Jadi mengapa orang-orang meminimalkan js, tetapi tidak html ? Saat Anda mengecilkan JS, Anda melakukan hal-hal berikut:

hapus komentar
hapus kosong (tab, spasi, baris baru)
ubah nama panjang menjadi pendek ( var isUserLoggedInmenjadi var a)

Yang memberi banyak perbaikan bahkan di masa lalu. Tetapi di html Anda tidak dapat mengubah nama panjang, juga hampir tidak ada komentar selama waktu itu. Jadi satu-satunya yang tersisa adalah menghapus spasi dan baris baru. Yang hanya memberikan sedikit perbaikan.

Satu argumen yang salah ditulis di sini adalah karena konten disajikan dengan gzip, minifikasi tidak masuk akal. Ini sangat salah. Ya, masuk akal bahwa gzip mengurangi peningkatan minifikasi, tetapi mengapa Anda harus meng-gzip komentar, spasi jika Anda dapat memangkasnya dengan benar dan gzip hanya bagian yang penting. Ini sama seperti jika Anda memiliki folder untuk diarsipkan yang memiliki beberapa omong kosong yang tidak akan pernah Anda gunakan dan Anda memutuskan untuk hanya meng-zip-nya daripada membersihkan dan meng-zip-nya.

Argumen lain mengapa tidak ada gunanya melakukan minifikasi adalah itu membosankan. Mungkin ini benar pada tahun 2009, tetapi alat baru muncul setelah ini. Saat ini Anda tidak perlu mengecilkan markup Anda secara manual. Dengan hal-hal seperti Grunt , mudah untuk menginstal grunt-contrib-htmlmin (bergantung pada HTMLMinifier oleh @kangax) dan mengkonfigurasinya untuk mengecilkan html Anda. Yang Anda butuhkan hanyalah 2 jam untuk belajar mendengus dan mengkonfigurasi semuanya dan kemudian semuanya dilakukan secara otomatis dalam waktu kurang dari satu detik. Kedengarannya bahwa 1 detik (yang bahkan dapat Anda otomatisasi untuk tidak melakukan apa pun dengan grunt-contrib-watch ) tidak terlalu buruk untuk peningkatan sekitar 5% (bahkan dengan gzip).

Satu argumen lagi adalah bahwa CSS dan JS bersifat statis , dan HTML dibuat oleh server sehingga Anda tidak dapat mengecilkannya terlebih dahulu. Hal ini juga berlaku pada tahun 2009, namun saat ini lebih banyak dan lebih situs yang tampak seperti aplikasi halaman, di mana server tipis dan klien melakukan semua routing, template dan logika lainnya. Jadi server hanya memberi Anda JSON dan klien membuatnya. Di sini Anda memiliki banyak html untuk halaman dan template yang berbeda.

Jadi untuk menyelesaikan pikiranku:

google sedang memperkecil html.
pageSpeed meminta Anda untuk mengecilkan html
itu sepele untuk dilakukan
itu memberi ~ 5% peningkatan
itu tidak sama dengan gzip

— Salvador Dali
sumber

3

Meminimalkan HTML sama sekali tidak sepele, karena spasi sangat penting dalam HTML dan apakah spasi kosong dapat dihapus tergantung pada CSS. Selain itu, thin client sangat buruk dan tidak dapat, menurut pendapat saya, diberikan sebagai argumen yang baik terhadap masalah meminimalkan HTML dinamis. (Salah satu cara yang baik untuk melakukannya adalah memilih mesin template [Haml, Jade, dll.] Yang tidak menyertakan spasi kosong yang tidak perlu dalam keluaran yang diberikan sejak awal.)

— Ry-

@minitech mengecilkan HTML itu sepele juga ada beberapa kemungkinan masalah dengan spasi putih (seperti <span>). Pertama-tama Anda selalu dapat menemukan cara untuk menulis html yang valid membuatnya menjadi spasi kosong. Anda juga mungkin terkejut mendengarnya, tetapi JS / CSS minifier juga dapat menyebabkan bug - yang tidak berarti Anda tidak boleh menggunakannya. Jadi dua cara untuk memecahkan masalah Anda: belajar menulis markup agnostik spasi putih, menguji produk Anda sebelum / sesudah minifikasi (CSS / HTML / JS). Juga di Minifier Anda dapat menentukan spasi putih apa yang ingin Anda pertahankan.

— Salvador Dali

Minifier JavaScript yang benar pada kode non-gila (mis. Kode yang tidak membaca dirinya sendiri atau menipu waktu) tidak dapat menyebabkan bug. Dan tidak, tidak selalu ada cara untuk menulis HTML whitespace-agnostic, khususnya karena HTML, sekali lagi, bukan whitespace-agnostic. Sama sekali. Pastikan untuk menguji menyalin dan menempel ini jika menurut Anda margin akan memotongnya. Menentukan whitespace yang ingin saya pertahankan terdengar seperti membuang-buang waktu (kecuali untuk Google)…

— Ry-

@minitech dapatkah Anda menunjukkan kepada saya CSS yang tidak mungkin ditulis dengan cara agnostik ruang putih? Saya mengecilkan html untuk waktu yang lama, dan sejauh ini tidak melihat masalah.

— Salvador Dali

* { white-space: pre; }jelas, tetapi jika Anda menghapus semua spasi dan tidak hanya menciutkannya (menggantinya dengan margin), teks dapat disalin dengan tidak benar dan merusak browser teks dan pembaca layar.

— Ry-

23

Saya menulis alat web untuk mengecilkan HTML. http://prettydiff.com/?m=minify&html

Alat ini beroperasi menggunakan aturan berikut:

Semua komentar HTML dihapus

Karakter spasi kosong diubah menjadi karakter spasi tunggal

Karakter spasi kosong yang tidak perlu di dalam tag dihapus

Karakter spasi putih di antara dua tag di mana salah satu dari dua tag ini bukan tunggal akan dihapus

Semua konten di dalam styletag dianggap sebagai CSS dan diminimalkan seperti itu

Semua konten di dalam scripttag dianggap sebagai JavaScript, kecuali jika disediakan jenis media yang berbeda, lalu diminimalkan seperti itu

Minifikasi CSS dan JavaScript menggunakan bentuk JSMin yang sangat bercabang. Fork ini diperluas untuk mendukung CSS secara native dan juga mendukung sintaks SCSS. Penyisipan titik koma otomatis didukung untuk minifikasi JavaScript, namun penyisipan kurung kurawal kurawal belum didukung.

— austincheney
sumber

7

Hai, ini hapus baris ini! 

— UnLoCo

1

ya ini akan menjadi bencana jika Anda menggunakan ko!

— Ray Suelzer

8

Ini berhasil untuk saya:

http://minify.googlecode.com/git/min/lib/Minify/HTML.php

Ini bukan alat online yang sudah tersedia, tetapi menjadi PHP sederhana termasuk cukup mudah Anda bisa menjalankannya sendiri.

Saya tidak akan menyimpan file yang dikompresi, lakukan ini secara dinamis jika Anda benar-benar harus, dan selalu merupakan ide yang lebih baik untuk mengaktifkan kompresi server Gzip. Saya tidak tahu seberapa terlibat itu di IIS / .Net, tetapi di PHP itu sepele seperti menambahkan satu baris ke file include global

— adamJLev
sumber

6

CodeProject memiliki proyek contoh yang diterbitkan ( http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900 ) untuk menangani beberapa situasi berikut .. .

Menggabungkan panggilan ScriptResource.axd menjadi satu panggilan
Kompres semua skrip sisi klien berdasarkan kemampuan browser termasuk gzip / deflate
Sebuah ScriptMinifier untuk menghapus komentar, indentasi, dan jeda baris.
Kompresor HTML untuk mengompresi semua markup html berdasarkan kemampuan browser termasuk gzip / deflate.
Dan - yang paling penting - HTML Minifier untuk menulis html lengkap menjadi satu baris dan mengecilkannya pada tingkat yang memungkinkan (sedang dibuat).

— The Lazy DBA
sumber

3

Untuk platform Microsoft .NET ada pustaka yang disebut WebMarkupMin , yang menghasilkan minifikasi kode HTML.

Selain itu, ada modul untuk mengintegrasikan pustaka ini ke ASP.NET MVC - WebMarkupMin.Mvc .

— Andrey Taritsyn
sumber

1

coba http://code.mini-tips.com/html-minifier.html , ini adalah .NET Libary untuk Html Minifier

HtmlCompressor adalah pustaka .NET kecil, cepat, dan sangat mudah digunakan yang meminimalkan sumber HTML atau XML yang diberikan dengan menghapus spasi ekstra, komentar, dan karakter lain yang tidak diperlukan tanpa merusak struktur konten. Akibatnya, halaman menjadi lebih kecil dan memuat lebih cepat. Versi baris perintah dari kompresor juga tersedia.