HTML minificering

HTML minificering er et gratis værktøj, der fjerner unødvendige tegn fra HTML og returnerer en mere kompakt version med antal tegn før og efter.

Hvad gør HTML-minificering?

HTML-minificering reducerer størrelsen på et HTML-dokument ved at fjerne formatering, som browseren ikke behøver. Det gælder typisk indrykning, linjeskift og overflødige mellemrum mellem elementer. Resultatet er den samme markup med færre tegn.

Minificering bruges ofte som en del af et produktionsbuild eller umiddelbart før udgivelse af statisk HTML. Det kan reducere den overførte datamængde, men HTTP-komprimering som Brotli eller gzip giver normalt en yderligere og ofte større reduktion. De to metoder supplerer hinanden, fordi minificering ændrer kilden, mens komprimering ændrer den måde, kilden overføres på.

Gem den læsbare, ikke-minificerede HTML-kilde i versionsstyringen. Minificeret HTML er sværere at gennemgå, sammenligne og fejlfinde, især når en fejl henviser til en linje og kolonne i et dokument, der er blevet til én lang linje.

Hvordan bruger jeg HTML minificering?

Indsæt kildedokumentet i feltet HTML, og kør værktøjet. Den kompakte kilde vises under Minificeret HTML sammen med HTML-tegn og Tegn i minificeret HTML.

1. Brug hele HTML-dokumentet eller et selvstændigt fragment.
2. Kør minificeringen, og gennemgå den returnerede markup.
3. Sammenlign de to antal tegn for at kontrollere, at minificeringen gav en nyttig reduktion.
4. Test det minificerede HTML-dokument og den gengivne side i en browser, før du erstatter en produktionsfil.

Behandlingen foregår på serveren. Dit input sendes til serveren via HTTPS og gemmes ikke. Undlad at indsende fortrolig kildekode, hvis din organisation kræver, at kode udelukkende behandles på en lokal computer.

Sådan læser du det minificerede resultat

Resultatet viser den minificerede markup og antallet af tegn før og efter behandlingen. En lavere værdi under Tegn i minificeret HTML betyder, at der er fjernet tegn, men tallet er ikke det samme som størrelsen på den downloadede fil.

Optællingen bruger en metode til strenglængde, der tager højde for multibyte-tegn. Bogstaver med accent og ikke-latinske skriftsystemer behandles derfor som tegn i stedet for blot at blive talt som enkelte bytes. Et synligt symbol, der består af flere Unicode-kodepunkter, kan stadig tælle som mere end ét tegn.

De returnerede felter indeholder ingen valideringsrapport, så værktøjet bør ikke betragtes som en HTML-validator. Det kan returnere kompakt output uden at gøre opmærksom på forkert indlejring, dublerede ID'er, manglende påkrævede slut-tags eller en attributværdi med mellemrum, som ikke står i anførselstegn. Et afsluttende komma er ikke en syntaksfejl i HTML, men et sådant komma i indlejret JSON eller JavaScript kan stadig få det indlejrede indhold til at fejle.

Eksempler og vanskelige input

Et oplagt mål for minificering er indrykning omkring almindelige blokelementer.

Input, hvor \n angiver et linjeskift <main>\n <p>Ready</p>\n</main>

Kompakt form <main><p>Ready</p></main>

Mellemrum i tekst kræver større forsigtighed. Mellemrummet mellem to inlineelementer kan for eksempel være synligt på den gengivne side.

Input <span>Account</span> <span>settings</span>

Usikker kompakt form <span>Account</span><span>settings</span>

Den anden form kan blive vist som "Accountsettings". Kontrollér altid inlineindhold i stedet for at gå ud fra, at alle mellemrum mellem tags kan fjernes.

• Mellemrum og linjeskift i <pre>, <textarea> og lignende indhold, hvor blanktegn har betydning, kan være nødvendige.
• Tal og tegnsætning i tekst eller attributværdier er dokumentindhold, ikke formatering, der skal fjernes.
• Tegn med accent og ikke-latinske tegn er gyldig HTML-tekst, når dokumentet bruger den korrekte tegnkodning.
• Skabelonudtryk, serversidedirektiver og betingede kommentarer kan følge regler, som en generel HTML-minificering ikke forstår.
• Et tomt HTML-input indeholder ikke noget, der med fordel kan reduceres. Brug en reproducerbar HTML-buildproces til meget lange HTML-dokumenter i stedet for at kopiere manuelt.

Hvornår kan det betale sig at minificere HTML?

Det kan betale sig at minificere HTML, når en læsbar kildefil skal klargøres til produktion, og resultatet skal leveres gentagne gange. Statiske landingssider, dokumentationsbuilds og serverrenderede skabeloner kan alle bruge minificering som et trin før udgivelse.

Det kan normalt ikke betale sig at minificere HTML, der allerede er minificeret, fordi endnu en behandling muligvis kun giver en lille reduktion eller slet ingen. Det er også unødvendigt at formatere JSON eller HTML pænt, hvis kun en maskine skal læse indholdet, medmindre en person skal fejlfinde det. Til HTML fra tredjeparter er browserens udviklerværktøjer eller et formateringsværktøj som regel mere nyttige, fordi minificering gør ukendt markup sværere at gennemgå.

Brug ikke HTML-minificering til at reparere ugyldig eller forkert udformet markup. Hvis markup opfører sig forskelligt i forskellige browsere, skal du først validere og teste den læsbare kilde. Når en side genereres fra Markdown, kan Markdown til HTML oprette markup før det sidste minificeringstrin til produktion.

Ofte stillede spørgsmål

Kan jeg minificere HTML med inline-CSS eller JavaScript?

Inline-CSS og JavaScript følger deres egne grammatikker, så du bør ikke gå ud fra, at en HTML-behandling optimerer indholdet. Brug CSS minificering eller JS minificering til de relevante dele, og test derefter det samlede dokument, fordi indlejrede sekvenser med slut-tags kan påvirke HTML-fortolkningen.

Forbedrer minificeret HTML min placering i søgeresultater?

Minificering gør ikke i sig selv indholdet mere relevant for en søgemaskine. Det kan reducere overførselsstørrelsen, men cachelagring, komprimering, billeder, scripts og serverens svartid påvirker også leveringen af siden. Bevar overskrifter, metadata, strukturerede data og synligt indhold, når du klargør produktionsfilen.

Kan jeg minificere Twig-, Blade- eller andre HTML-skabeloner?

Skabelonsyntaks er ikke almindelig HTML og kan være afhængig af mellemrum eller afgrænsningstegn, som et generelt minificeringsværktøj ikke genkender. Det er sikrere at minificere det renderede output eller bruge en skabelonbevidst integration i buildprocessen og teste repræsentative sider.

Hvorfor er antallet af tegn forskelligt fra filstørrelsen?

Tegn og bytes er forskellige måleenheder i Unicode-kodninger som UTF-8. Mange ASCII-tegn fylder én byte, mens andre tegn kan fylde flere. Filer kan også indeholde et byteordensmærke eller bruge linjeafslutninger, der påvirker størrelsen i bytes.

Kan minificering fjerne HTML-kommentarer uden problemer?

Kommentarer kan ofte fjernes, men nogle indeholder builddirektiver, instruktioner til serversideinkludering eller kompatibilitetsmarkup. Gå ikke ud fra, at alle kommentarer kan undværes. Kontrollér den returnerede kilde og den gengivne side, hvis kommentarerne har en praktisk funktion i dit projekt.

Afsluttende kontrol

Sammenlign den gengivne side før og efter minificeringen. Vær især opmærksom på mellemrum i inlineindhold, præformateret tekst, formularer og indlejrede scripts. Behold den læsbare original, validér din markup separat, og udgiv først den minificerede kopi, når siden fungerer som forventet.