Advertentie

Als u een website heeft, moet u al weten hoe u dat moet doen gebruik de juiste beeldformaten en optimaliseer uw afbeeldingen voor het web 10 gratis online batch-afbeeldingshulpmiddelen om het formaat te wijzigen, te converteren en te optimaliserenU hebt gereedschappen voor batchbewerking nodig als u veel foto's moet verwerken en heel weinig tijd. We laten u kennismaken met de beste batch-resizers, optimizers of converters die online beschikbaar zijn. Lees verder . Maar hoewel beeldcompressie een bekende praktijk is, wordt HTML-compressie vaak over het hoofd gezien, wat jammer is omdat de voordelen de moeite waard zijn.

In dit artikel bespreken we de twee belangrijkste methoden voor het verkleinen van HTML-bestanden, waarom HTML-bestanden moeten worden verkleind en hoe u dit kunt doen.

Compressie vs. Minificatie

Voor het optimaliseren van HTML-bestanden zijn er twee hoofdmethoden voor: compressie en minificatie. Ze klinken vergelijkbaar aan de oppervlakte, maar zijn eigenlijk twee verschillende technieken, dus verwar ze niet.

Minificatie

U kunt minificatie zien als het verwijderen van onnodige tekens en regels in de broncode. Denk aan inspringen, opmerkingen, lege regels, etc. Geen van deze zijn vereist in HTML - ze bestaan ​​om het bestand gemakkelijker leesbaar te maken. Het bijsnijden van deze details kan de bestandsgrootte verkleinen zonder iets te beïnvloeden.

Voorbeeld HTML-pagina:

Dit is een koptekst
Stuur me mail op [email protected].
Dit is een nieuwe paragraaf!
Dit is een nieuwe vetgedrukte alinea.

Voorbeeld HTML-pagina, verkleind:

Dit is een koptekst
Stuur me mail op [email protected].
Dit is een nieuwe paragraaf!
Dit is een nieuwe vetgedrukte alinea.

Oorspronkelijke maat: 354. Verkleinde maat: 272. Besparing: 82 (23,16%).

Veel webontwikkelaars en site-eigenaren reserveren minificatie alleen voor JS- en CSS-bestanden, maar deze verouderde praktijk is een vergissing. HTML-minificatie is ook belangrijk.

In de jaren 2000 waren minificatie-instrumenten zeldzaam. Elke keer dat er iets veranderde, moest je de bestanden handmatig verkleinen. Omdat HTML-bestanden vaker veranderen dan JS- en CSS-bestanden, was het gewoon te vervelend om in die tijd elke keer te verkleinen. Tegenwoordig is het een betwistbaar punt.

Compressie

Wanneer gebruikers uw website bezoeken, doen ze dit met behulp van het HTTP-protocol. De browser stuurt een verzoek naar uw webserver voor een specifieke pagina, uw webserver vindt de pagina en stuurt vervolgens de inhoud van die pagina terug naar de browser van de bezoeker.

Maar omdat het HTTP-protocol compressie ondersteunt, kan uw webserver de pagina comprimeren voordat deze naar de bezoeker wordt gestuurd (ervan uitgaande dat compressie is ingeschakeld in de instellingen van uw server), en dan kan de browser van de bezoeker de pagina decomprimeren naar de oorspronkelijke staat.

Het meest gebruikelijke compressieschema is GZIP, wat een bestandsindeling is die een lossless compressie-algoritme Hoe werkt bestandscompressie?Hoe werkt bestandscompressie? Leer de basis van bestandscompressie en het verschil tussen lossy versus lossless compressie. Lees verder genaamd DEFLATE.

Het algoritme zoekt naar tekstherhalingen in het HTML-bestand en vervangt die herhalingen door verwijzingen naar een eerdere instantie. Elke referentie is eenvoudigweg twee cijfers: hoe ver terug is de referentie en hoeveel tekens verwijzen we.

Overweeg een reeks tekst zoals deze (voorbeeld afkomstig van de GZIP-website):

Bla bla bla bla bla bla.

Het algoritme herkent de volgende herhaling:

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

Het eerste voorval is onze referentie, dus laat het zo:

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

Het tweede exemplaar verwijst naar het eerste exemplaar, dat vijf tekens achter en vijf tekens lang is:

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

Maar in dit geval herkent het algoritme dat het volgende exemplaar dezelfde reeks tekens is, dus verlengt het de referentielengte met nog eens vijf:

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

En opnieuw:

Blah b [5,15] lah.

En het algoritme is slim genoeg om te beseffen dat de volgende drie tekens de eerste drie tekens in de referentie zijn, dus het wordt met drie uitgebreid:

Blah b [5,18].

Denk nu eens na over een typisch HTML-bestand en hoeveel herhaling erin bestaat. Bijna elke tag, zoals, heeft een bijbehorende sluitingstag, zoals. Bovendien worden veel tags overal herhaald, zoals, , ,, enz. Attributen worden ook vaak herhaald, waaronder klasse, href, en src. Het is gemakkelijk te begrijpen waarom GZIP-compressie zo effectief is met HTML.

Het enige nadeel is dat de webserver iets meer CPU nodig heeft om de compressie uit te voeren elke keer dat een pagina wordt opgevraagd. Maar aangezien CPU tegenwoordig niet echt een probleem is, is het bijna altijd beter om GZIP in te schakelen dan zonder te gaan, zelfs als u webhosting op instapniveau heeft De beste webhostingservices: gedeeld, VPS en toegewijdOp zoek naar de beste webhostingservice voor uw behoeften? Dit zijn onze beste aanbevelingen voor uw blog of website. Lees verder .

Waarom u moet comprimeren en verkleinen

Er zijn twee belangrijke voordelen, die beide van cruciaal belang zijn in het moderne mobiele internetlandschap.

Sneller laden van pagina's

Gemiddeld kan een HTML-minifier met basisinstellingen de grootte van een bestand met ongeveer 3 procent verkleinen. Met optionele geavanceerde instellingen kan een HTML-bestand met nog eens 3 tot 7 procent worden verkleind, voor een mogelijke vermindering tot 10 procent. Dit vertaalt zich direct in snellere laadtijden van pagina's.

Minder gebruikte bandbreedte

Stel dat u tien bestanden heeft, elk verkleind van 50 KB naar 45 KB voor een totale krimp van 50 KB. En stel dat uw website elke dag gemiddeld 1.000 bezoekers ontvangt, waarbij elk bezoek gemiddeld tien pagina's omvat. Alleen al de HTML-minificatie vermindert uw bandbreedtegebruik met 50 MB per dag (1,5 GB per maand).

Compressie + verkleining

Zoals u kunt zien, is HTML-minificatie op zichzelf handig, vooral omdat uw site groter wordt, bestanden groter worden en het verkeer toeneemt. Let daar op Google's PageSpeed-richtlijnen raad aan om HTML te verkleinen, dus als je sceptisch bent, laat dat je dan anders overtuigen.

Maar het mooie van HTML-optimalisatie is dat u niet hoeft te kiezen voor verkleining of compressie. U kunt beide doen! In feite jij zou moeten doe beide.

Gemiddeld kunt u verwachten dat GZIP-compressie een HTML-bestand met 70 tot 90 procent verkleint. Gebruikmakend van het bovenstaande voorbeeld met een conservatieve compressieschatting, zouden de verkleinde HTML-bestanden elk van 45 KB naar 13,5 KB gaan, voor een totale krimp van 365 KB. In vergelijking met niet-verkleind / ongecomprimeerd, wordt de bandbreedte van uw site nu verminderd met 365 MB per dag (11 GB per maand).

En bovenop de besparing op bandbreedte, laadt elke pagina aanzienlijk sneller omdat de browser van de eindgebruiker slechts 13,5 KB hoeft te downloaden versus 50 KB per pagina.

HTML comprimeren en verkleinen

Gelukkig zijn geen van beide tegenwoordig erg moeilijk en heb je niet veel technische knowhow nodig om ze in te stellen.

WordPress-plug-ins

Als u een WordPress-site gebruikt, hoeft u alleen maar een plug-in te installeren en kunt u profiteren van zowel compressie als minificatie.

De meeste caching-plug-ins doen meer dan alleen cachepagina's. Bijvoorbeeld, WP snelste cache en W3 Totale cache beide hebben instellingen met één klik waarmee u HTML-minificatie en GZIP-compressie kunt inschakelen, naast andere functies die het laden van pagina's verder versnellen en het bandbreedtegebruik verminderen.

als jij enkel en alleen willen minificatie, raden we de Verklein HTML inpluggen. Het is eenvoudig, ondersteunt HTML / CSS / JS en stelt u in staat de minificatiemethode een beetje aan te passen (bijv. Of http: en https: van URL's).

Statische HTML-minifiers

Als uw HTML-bestanden statisch zijn (d.w.z. niet dynamisch gegenereerd door een CMS of webframework), kunt u twee sets HTML-bestanden onderhouden: een "bron" -set, die niet is verkleind voor eenvoudige bewerking, en een "verkleinde" set, die u maakt telkens wanneer u een wijziging aanbrengt in een bronbestand.

Gebruik een van deze tools om te verkleinen:

• HTMLCompressor
• HTML-minifier
• HTML-minifier (anders dan hierboven)

Dit is een haalbare techniek als u bent verwijderd van CMS-en zoals WordPress en nu gebruikt statische sitegeneratoren 7 redenen om uw CMS te dumpen en een statische sitegenerator te overwegenJarenlang was het publiceren van een website voor veel gebruikers moeilijk. CMS's zoals WordPress hebben dat veranderd, maar ze kunnen nog steeds verwarrend zijn. Een ander alternatief is een Static Site Generator. Lees verder .

Schakel GZIP-compressie in

De stappen om GZIP-compressie in te schakelen, kunnen verschillen afhankelijk van de webserversoftware die u gebruikt. Aangezien Apache de meest populaire optie is, zullen we bespreken hoe je het kunt inschakelen met .htaccess.

Maak verbinding met uw webserver via FTP en maak vervolgens een bestand met de naam .htaccess in de hoofdmap. Bewerk het .htaccess-bestand met de volgende instellingen:

 mod_gzip_on Ja mod_gzip_dechunk Ja mod_gzip_item_include bestand. (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-codering:. * Gzip. *
 SetOutputFilter DEFLATE. 

Weet u niet zeker of compressie werkt op uw website? Test het met deze tool.

Voor de ultieme efficiëntie moet u dat ook doen leer hoe u uw CSS kunt controleren, opschonen en optimaliseren 11 Handige tools voor het controleren, opschonen en optimaliseren van CSS-bestandenWilt u uw CSS-code verbeteren? Deze CSS-controleurs en -optimalisatoren helpen de CSS-code en syntaxis te verbeteren en uw webpagina's te verkleinen. Lees verder .