Minificazione HTML? [chiuso]

99

Esiste uno strumento online in cui possiamo inserire il sorgente HTML di una pagina e minimizzare il codice?

Lo farei per i file aspx in quanto non è una buona idea fare in modo che il webserver li gzip ...

html minify

— Paulo
fonte

19

Quando è una cattiva idea avere il server gzip?

— Chuck

5

L'ho letto perché le pagine aspx non sono file statici, non verranno memorizzate nella cache da IIS e quindi gziperà la pagina a ogni richiesta ...

— Paulo

23

... ed è un problema? A meno che il tuo server non abbia già il 99,9% di CPU, probabilmente no. gzipping è la solita cosa da fare e molto più efficace di qualsiasi "minificazione".

— bobince

2

Questo sembra essere piuttosto interessante: perfectionkills.com/experimenting-with-html-minifier kangax.github.com/html-minifier

— StefanS

2

Le risposte qui sono obsolete, per non parlare del fatto che alcune di esse sono sbagliate. Si prega di controllare la mia spiegazione sul problema e lo strumento appropriato .

— Salvador Dali

63

Forse prova HTML Compressor , ecco una tabella prima e dopo che mostra cosa può fare (incluso lo stesso Stack Overflow):

Spiacenti, markdown non ha il concetto di tabelle

Presenta molte selezioni per ottimizzare le tue pagine fino a includere la minimizzazione degli script (ompressor, Google Closure Compiler, il tuo compressore) dove sarebbe sicuro. Il set di opzioni predefinito è piuttosto conservativo, quindi puoi iniziare con quello e sperimentare con l'abilitazione di opzioni più aggressive.

Il progetto è estremamente ben documentato e supportato.

— Tim Post
fonte

58

Non farlo . O meglio, se insisti, fallo dopo che le ottimizzazioni più significative del sito sono state completate. È molto probabile che il rapporto costi / benefici per questo sforzo sia trascurabile, soprattutto se si prevede di utilizzare manualmente strumenti online per gestire ogni pagina.

Usa YSlow o Page Speed per determinare cosa devi veramente fare per ottimizzare le tue pagine. La mia ipotesi è che la riduzione dei byte di HTML non sarà il problema più grande del tuo sito. È molto più probabile che la compressione, la gestione della cache, l'ottimizzazione delle immagini, ecc.Faranno una differenza maggiore per le prestazioni del tuo sito in generale. Questi strumenti ti mostreranno quali sono i problemi più grandi: se li hai affrontati tutti e continui a scoprire che la minificazione HTML fa una differenza significativa, provaci.

(Se sei sicuro di volerlo fare e usi Apache httpd, potresti prendere in considerazione l'utilizzo di mod_pagespeed e attivare alcune delle opzioni per ridurre gli spazi bianchi, ecc., Ma sii consapevole dei rischi .)

— Zac Thompson
fonte

25

Cosa c'è di sbagliato nell'ottimizzazione se il codice minimizzato è facile da leggere utilizzando l'abbellimento automatico?

12

Probabilmente non è il problema più grande, ma se è un processo banale eseguire markup attraverso un set di minimizzazione di espressioni regolari durante la compilazione da dev a qa o prod, allora perché non dovresti inviare documenti di markup più piccoli?

— Will Peavy

26

In realtà non una risposta alla domanda originale :(

— Chuck Le Butt,

7

@ Will, quasi certamente non è un processo banale eseguire HTML attraverso la minimizzazione di regex, e anche usare un parser appropriato probabilmente non è banale o veloce. Inoltre, a differenza della minificazione JS / CSS, la minificazione HTML non sarà senza perdite: qualsiasi tag può essere stilizzato come white-space: pree la minificazione distruggerebbe il testo preformattato.

— mancanza di palpebre

3

@eyelidlessness - Al momento ho migliaia di pagine che vengono minimizzate dalle regex prima che vengano servite. Questa funzione non è una parte complessa o costosa del sistema. ... D'altra parte, se si desidera analizzare lo stile calcolato per evitare di minimizzare gli elementi con stile white-space:pre, allora sì, minimizzare l'HTML sarebbe più complesso. Tuttavia, non sono chiaro sul motivo per cui qualcuno vorrebbe utilizzare lo spazio bianco: pre piuttosto che utilizzare un elemento preo code.

— Will Peavy

34

Ecco una breve risposta alla tua domanda: dovresti minimizzare il tuo HTML, CSS, JS . C'è uno strumento facile da usare che si chiama grugnito . Ti consente di automatizzare molte attività. Tra questi JS , CSS , minificazione HTML , concatenazione di file e molti altri .

Le risposte scritte qui sono estremamente obsolete o addirittura a volte non hanno senso. Molte cose sono cambiate dal vecchio 2009, quindi cercherò di rispondere correttamente.

Risposta breve: dovresti assolutamente minimizzare l'HTML . Oggi è banale e dà circa il 5% di velocità . Per una risposta più lunga leggi l'intera risposta

Ai vecchi tempi le persone minimizzavano manualmente css / js (eseguendolo attraverso uno strumento specifico per minimizzarlo). Era un po 'difficile automatizzare il processo e sicuramente richiedeva alcune abilità. Sapendo che molti siti di alto livello anche in questo momento non utilizzano gzip (il che è banale), è comprensibile che le persone fossero riluttanti a minimizzare l'html.

Allora perché le persone minimizzavano js, ma non html ? Quando minifichi JS, fai le seguenti cose:

rimuovere i commenti
rimuovere gli spazi (tabulazioni, spazi, nuove righe)
cambia i nomi lunghi in brevi ( var isUserLoggedInin var a)

Il che ha dato molti miglioramenti anche ai vecchi tempi. Ma in html non eri in grado di cambiare nomi lunghi in breve, inoltre non c'era quasi nulla da commentare in quel periodo. Quindi l'unica cosa che è rimasta è rimuovere spazi e nuove righe. Che dà solo una piccola quantità di miglioramento.

Un argomento sbagliato scritto qui è che poiché il contenuto è servito con gzip, la minificazione non ha senso. Questo è totalmente sbagliato. Sì, ha senso che gzip diminuisca il miglioramento della minificazione, ma perché dovresti gzip commenti, spazi bianchi se puoi tagliarli correttamente e gzip solo una parte importante. È come se avessi una cartella da archiviare che contiene delle schifezze che non utilizzerai mai e decidi di comprimerla invece di pulirla e comprimerla.

Un altro argomento per cui è inutile fare la minificazione è che è noioso. Forse questo era vero nel 2009, ma dopo questo periodo sono apparsi nuovi strumenti. Al momento non è necessario minimizzare manualmente il markup. Con cose come Grunt è banale installare grunt-contrib-htmlmin (si basa su HTMLMinifier di @kangax) e configurarlo per minimizzare il tuo html. Tutto ciò di cui hai bisogno sono circa 2 ore per imparare a grugnire e configurare tutto e poi tutto viene fatto automaticamente in meno di un secondo. Sembra che 1 secondo (che puoi anche automatizzare per non fare nulla con grunt-contrib-watch ) non è poi così male per circa il 5% di miglioramento (anche con gzip).

Un altro argomento è che CSS e JS sono statici e l'HTML è generato dal server quindi non è possibile pre-minimizzarlo. Questo era vero anche nel 2009, ma attualmente più e più siti sono alla ricerca come una pagina singola applicazione, in cui il server è sottile e il client sta facendo tutto il percorso, templating e altra logica. Quindi il server ti fornisce solo JSON e il client lo visualizza. Qui hai molto HTML per la pagina e diversi modelli.

Quindi per finire i miei pensieri:

google sta minimizzando html.
pageSpeed ti sta chiedendo di minimizzare html
è banale da fare
dà ~ 5% di miglioramento
non è lo stesso di gzip

— Salvador Dalì
fonte

3

Minfying HTML è assolutamente non banale, come gli spazi bianchi è significativo in HTML e se un dato spazio bianco può essere rimosso dipende dalla CSS. Inoltre, i thin client sono terribili e, a mio parere, non possono essere considerati un buon argomento contro i problemi di minimizzazione dell'HTML dinamico. (Un buon modo per farlo è scegliere un template engine [Haml, Jade, ecc.] Che non includa spazi bianchi non necessari nell'output renderizzato in primo luogo.)

— Ry-

@minitech minimizzare l'HTML è banale e ci sono pochi possibili problemi con gli spazi bianchi (come <span>). Prima di tutto puoi sempre trovare un modo per scrivere un HTML valido rendendolo indipendente dagli spazi. Inoltre potresti essere sorpreso di sentire, ma il minificatore JS / CSS può anche introdurre un bug, il che non significa che non dovresti usarlo. Quindi due modi per risolvere il tuo problema: imparare a scrivere markup indipendente dagli spazi, testare il tuo prodotto prima / dopo la minimizzazione (CSS / HTML / JS). Inoltre in Minifier puoi specificare quali spazi vuoti vuoi conservare.

— Salvador Dali

I minificatori JavaScript corretti su codice non folle (cioè codice che non si legge da solo o che tradisce in base al tempo) non possono introdurre un bug. E no, non c'è sempre un modo per scrivere HTML indipendente dagli spazi, in particolare perché l'HTML, di nuovo, non è indipendente dagli spazi. Affatto. Assicurati di provare a copiare e incollare su questo se pensi che i margini lo taglieranno. Specificare quale spazio bianco voglio preservare sembra una perdita di tempo (tranne che per Google) ...

— Ry-

@minitech puoi mostrarmi CSS che è impossibile scrivere in modo indipendente dagli spazi bianchi? Sto minimizzando html da molto tempo e finora non ho riscontrato problemi.

— Salvador Dali

* { white-space: pre; } è ovvio, ma se stai rimuovendo tutti gli spazi bianchi e non solo comprimendolo (sostituendolo invece con i margini), il testo può copiare in modo errato e causare il caos su browser di testo e lettori di schermo.

— Ry-

23

Ho scritto uno strumento web per minimizzare l'HTML. http://prettydiff.com/?m=minify&html

Questo strumento funziona utilizzando queste regole:

Tutti i commenti HTML vengono rimossi

Le sequenze di caratteri di spazio vuoto vengono convertite in caratteri di spazio singolo

I caratteri di spazio vuoto non necessari all'interno dei tag vengono rimossi

I caratteri di spazio vuoto tra due tag in cui uno di questi due tag non è un singleton vengono rimossi

styleSi presume che tutto il contenuto all'interno di un tag sia CSS e viene minimizzato come tale

scriptSi presume che tutto il contenuto all'interno di un tag sia JavaScript, a meno che non venga fornito un tipo di media diverso e quindi minimizzato come tale

La minificazione CSS e JavaScript utilizza una forma fortemente biforcuta di JSMin. Questo fork è esteso per supportare nativamente CSS e supporta anche la sintassi SCSS. L'inserimento automatico del punto e virgola è supportato per la minimizzazione JavaScript, tuttavia l'inserimento automatico delle parentesi graffe non è ancora supportato.

— austincheney
fonte

7

Ciao, rimuovi questa riga! 

— UnLoCo

1

sì, questo sarebbe un disastro se stai usando ko!

— Ray Suelzer

8

Questo ha funzionato per me:

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

Non è uno strumento online già disponibile, ma essendo un semplice PHP incluso è abbastanza facile che puoi semplicemente eseguirlo da solo.

Tuttavia, non salverei i file compressi, fallo dinamicamente se proprio devi, ed è sempre un'idea migliore abilitare la compressione del server Gzip. Non so quanto sia coinvolto in IIS / .Net, ma in PHP è banale come aggiungere una riga al file di inclusione globale

— adamJLev
fonte

6

CodeProject ha un progetto di esempio pubblicato ( http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900 ) per gestire alcune delle seguenti situazioni .. .

Combinazione di chiamate ScriptResource.axd in una singola chiamata
Comprimi tutti gli script lato client in base alla capacità del browser, incluso gzip / deflate
Uno ScriptMinifier per rimuovere commenti, rientri e interruzioni di riga.
Un compressore HTML per comprimere tutto il markup HTML in base alla capacità del browser, incluso gzip / deflate.
E - cosa più importante - un HTML Minifier per scrivere l'html completo in una singola riga e minimizzarlo al livello possibile (in costruzione).

— Il pigro DBA
fonte

3

Per la piattaforma Microsoft .NET esiste una libreria chiamata WebMarkupMin , che produce la minimizzazione del codice HTML.

Inoltre, c'è un modulo per l'integrazione di questa libreria in ASP.NET MVC - WebMarkupMin.Mvc .

— Andrey Taritsyn
fonte

1

prova http://code.mini-tips.com/html-minifier.html , questa è .NET Libary per Html Minifier

HtmlCompressor è una libreria .NET piccola, veloce e molto facile da usare che minimizza data sorgente HTML o XML rimuovendo spazi bianchi, commenti e altri caratteri non necessari senza rompere la struttura del contenuto. Di conseguenza, le pagine diventano più piccole e si caricano più velocemente. È disponibile anche una versione a riga di comando del compressore.