Programming

Hoe gecomprimeerde HTML werkt en waarom je het misschien nodig hebt

Hoe gecomprimeerde HTML werkt en waarom je het misschien nodig hebt / Programming

Als u een website draait, moet u al weten hoe u de juiste afbeeldingsindelingen gebruikt en uw afbeeldingen voor het web optimaliseert 10 Gratis online gereedschappen voor batchafbeeldingen voor het wijzigen, converteren en optimaliseren van 10 gratis online gereedschappen voor batchafbeeldingen om te vergroten / verkleinen, converteren en optimaliseren Batchbewerkingstools wanneer u veel foto's moet verwerken en zeer weinig tijd. We introduceren u 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 gaan we dieper in op de twee belangrijkste methoden voor het verkleinen van HTML-bestanden, waarom HTML-bestanden moeten worden gekrompen en hoe u dit moet aanpakken.

Compressie versus verkleining

Voor het optimaliseren van HTML-bestanden zijn er twee hoofdmethoden: samendrukking en minification. Ze klinken vergelijkbaar aan de oppervlakte, maar zijn eigenlijk twee verschillende technieken, dus zorg dat ze niet in de war raken.

minification

Je kunt minificatie beschouwen als het verwijderen van onnodige tekens en regels in de broncode. Denk aan inspringen, opmerkingen, lege regels, etc. Geen van deze is vereist in HTML - ze bestaan ​​om het bestand leesbaarder te maken. Als u deze details bijsnijdt, kunt u de bestandsgrootte verkleinen zonder iets aan te tasten.

Voorbeeld HTML-pagina:

  Je titel hier   
 
Dit is een koptekst
 
Stuur me e-mail op [email protected].
 
Dit is een nieuwe paragraaf!
 
Dit is een nieuwe vetgedrukte en cursieve paragraaf.

Voorbeeld HTML-pagina, verkleind:

Je titel hier
Dit is een koptekst
Stuur me e-mail op [email protected].
Dit is een nieuwe paragraaf!
Dit is een nieuwe vetgedrukte en cursieve paragraaf.

Oorspronkelijke grootte: 354. Geringe grootte: 272. Besparingen: 82 (23,16%).

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

In de jaren 2000 waren miniatuurinstrumenten zeldzaam. Je moest bestanden handmatig verkleinen telkens als er iets veranderde. Omdat HTML-bestanden vaker veranderen dan JS- en CSS-bestanden, was het gewoon te vervelend om elke keer weer te verkleinen. Tegenwoordig is het een betwistbaar punt.

samendrukking

Wanneer gebruikers uw website bezoeken, doen ze dit met behulp van het HTTP-protocol. De browser verzendt een verzoek naar uw webserver voor een specifieke pagina, uw webserver vindt de pagina en verzendt vervolgens de inhoud van die pagina 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 verzonden (ervan uitgaande dat compressie is ingeschakeld in de instellingen van uw server) en vervolgens kan de browser van de bezoeker de pagina terug decomprimeren naar de oorspronkelijke staat.

Het meest voorkomende compressieschema is GZIP, welke is een bestandsindeling die een verliesloos compressie-algoritme gebruikt Hoe werkt bestandscompressie? Hoe werkt bestandscompressie? Bestandscompressie is de kern van hoe het moderne web werkt, zou je kunnen betogen, omdat het ons toestaat om bestanden te delen die anders te lang zouden duren om over te zetten. Maar hoe werkt het? Lees meer genaamd DEFLATE.

Het algoritme zoekt naar herhaalde occurrences van tekst in het HTML-bestand en vervangt vervolgens die herhalende occurrences met verwijzingen naar een eerdere occurrence. Elke verwijzing is eenvoudigweg twee cijfers: hoe ver terug is de referentie en hoeveel tekens verwijzen we naar.

Beschouw een reeks tekst als deze (voorbeeld genomen van de GZIP-website):

Blah blah blah blah blah.

Het algoritme herkent de volgende herhaling:

B lah b lah b lah b lah b lah.

Het eerste exemplaar is onze referentie, dus laat het:

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 breidt het de referentielengte met nog eens vijf uit:

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 karakters de eerste drie karakters in de referentie zijn, dus het breidt zich uit met drie:

Blah b [5,18].

Denk nu aan een typisch HTML-bestand en hoeveel herhaling er in zit. Bijna elke tag, zoals , heeft een overeenkomende sluitingstag, zoals . Verder worden veel tags overal herhaald, zoals

,

, ,
  • , enz. Attributen worden ook vaak herhaald, inclusief klasse, href, en src. Het is gemakkelijk te begrijpen waarom GZIP-compressie zo effectief is met HTML.

    Het enige nadeel is dat de webserver een beetje meer CPU nodig heeft om de compressie uit te voeren telkens wanneer om een ​​pagina wordt gevraagd. Maar omdat CPU tegenwoordig niet echt een probleem is, is het bijna altijd beter om GZIP in te schakelen dan om te missen, zelfs als je een webhosting op instapniveau hebt. De beste webhostingservices De beste webhostingservices Op zoek naar de beste webhostingservice voor jouw behoeften? Of het nu voor een kleine blog of een grote bedrijfswebsite is, hier zijn onze beste aanbevelingen. Lees verder .

    Waarom je moet comprimeren en verkleinen

    Er zijn twee belangrijke voordelen, die beide cruciaal zijn in het mobiel-zware weblandschap van vandaag.

    Snellere paginaladingen

    Gemiddeld kan een HTML-minivermerker de grootte van een bestand met ongeveer 3 procent verkleinen met basisinstellingen. Met optionele geavanceerde instellingen kan een HTML-bestand met nog eens 3 tot 7 procent worden verkleind, voor een potentiële korting van maximaal 10 procent. Dit vertaalt zich direct in snellere laadtijd van pagina's.

    Minder gebruikte bandbreedte

    Laten we zeggen dat je 10 bestanden hebt, elk verkleind van 50 KB tot 45 KB voor een totale krimp van 50 KB. En laten we zeggen dat uw website gemiddeld 1000 bezoekers per dag serveert, waarbij elk bezoek gemiddeld uit tien pagina's bestaat. De HTML-minificatie alleen al vermindert uw bandbreedtegebruik met 50 MB per dag (1,5 GB per maand).

    Compressie + verkleining

    Zoals u kunt zien, is HTML-verkleining op zichzelf nuttig, vooral omdat uw site groter wordt, bestanden groter worden en het verkeer toeneemt. Merk op dat de Paginaspeed-richtlijnen van Google aanbevelen om HTML te verkleinen, dus als je sceptisch bent, laat dat je anders overtuigen.

    Maar wat geweldig is aan HTML-optimalisatie, is dat u niet hoeft te kiezen voor minificatie of compressie. Je kunt beide doen! Sterker nog, jij moeten beide doen.

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

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

    Hoe HTML te comprimeren en te verkleinen

    Gelukkig zijn deze beide dagen niet erg moeilijk en heb je niet veel technische kennis nodig om ze op te zetten.

    WordPress Plug-ins

    Als u een WordPress-site uitvoert, hoeft u slechts één plug-in te installeren en kunt u profiteren van zowel compressie als verkorting.

    De meeste caching-plug-ins doen meer dan alleen cachepagina's. WP Fastest Cache en W3 Total Cache hebben bijvoorbeeld beide eenkliks-instellingen waarmee u HTML-minificatie en GZIP-compressie kunt inschakelen, naast andere functies die het laden van pagina's versnellen en het bandbreedtegebruik verminderen.

    als jij enkel en alleen wil minificatie, raden wij de HTML-plugin Minify aan. Het is eenvoudig, ondersteunt HTML / CSS / JS en biedt u de mogelijkheid om de minificatiemethode een beetje aan te passen (bijvoorbeeld om te verwijderen http: en https: van URL's).

    Statische HTML-minifiers

    Als uw HTML-bestanden statisch zijn (dat wil zeggen niet dynamisch gegenereerd door een CMS of webraamwerk), kunt u twee sets HTML-bestanden onderhouden: a “bron” set, wat niet is toegestaan ​​voor eenvoudige bewerking, en een “verkleinde” set, die u kunt maken wanneer u een wijziging aanbrengt in een bronbestand.

    Gebruik een van deze hulpmiddelen om te verkleinen:

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

    Dit is een haalbare techniek als u bent weggegaan van CMS's zoals WordPress en nu statische site-generatoren 7 Redenen om uw CMS te sloten en een statische site-generator te overwegen 7 Redenen om uw CMS te sloten en een statische site-generator te overwegen een website was moeilijk voor veel gebruikers. CMS's zoals WordPress veranderden dat, maar ze kunnen nog steeds verwarrend zijn. Een ander alternatief is een Static Site Generator. Lees verder .

    Schakel GZIP-compressie in

    De stappen voor het inschakelen van GZIP-compressie kunnen verschillen, afhankelijk van welke webserversoftware u gebruikt. Omdat Apache de meest populaire optie is, bespreken we hoe u deze kunt inschakelen met .htaccess.

    Maak verbinding met uw webserver met behulp van FTP en maak vervolgens een bestand met de naam .htaccess in de hoofdmap. Bewerk het. Htaccess-bestand om de volgende instellingen te hebben:

     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-Encoding:. * gzip. *   SetOutputFilter DEFLATE

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

    Was dit artikel behulpzaam? Nu u comprimeert en verkleint, moeten uw webpagina's sneller worden geladen en minder bandbreedte gebruiken. Als u vragen heeft, kunt u deze hieronder stellen!

    Ontdek meer over: HTML, Webontwikkeling.