Hoe gecomprimeerde HTML werkt en waarom u het misschien nodig heeft

Hoe gecomprimeerde HTML werkt en waarom u het misschien nodig heeft

Als u een website beheert, zou u al moeten weten hoe u dat moet doen gebruik de juiste afbeeldingsformaten en optimaliseer uw afbeeldingen voor het web. 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 versus verkleining

Wat het optimaliseren van HTML-bestanden betreft, zijn er twee hoofdmethoden: compressie en minificatie . Op het eerste gezicht klinken ze hetzelfde, maar het zijn eigenlijk twee verschillende technieken, dus verwar ze niet.





Verkleining

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

Voorbeeld HTML-pagina:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Oorspronkelijke grootte: 354. Verkleinde grootte: 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 minificatietools zeldzaam. Je moest bestanden handmatig verkleinen elke keer dat er iets veranderde. Omdat HTML-bestanden vaker veranderen dan JS- en CSS-bestanden, was het toen gewoon te vervelend om elke keer te verkleinen. Tegenwoordig is het een punt van aandacht.

Compressie

Wanneer gebruikers uw website bezoeken, doen ze dat 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 verzonden (ervan uitgaande dat compressie is ingeschakeld in de instellingen van uw server), waarna de browser van de bezoeker de pagina kan decomprimeren naar de oorspronkelijke staat.

Het meest voorkomende compressieschema is: GZIP , een bestandsindeling die gebruikmaakt van a lossless compressie-algoritme DEFLATE genoemd.

Het algoritme zoekt naar herhalingen van tekst in het HTML-bestand en vervangt die herhaalde keren door verwijzingen naar een eerdere gebeurtenis. Elke verwijzing is gewoon twee cijfers: hoe ver terug is de verwijzing en naar hoeveel tekens verwijzen we.

Overweeg een reeks tekst zoals deze (voorbeeld overgenomen 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 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 voorkomen 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 verlengd:

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 sluittag, zoals

. Bovendien worden veel tags overal herhaald, zoals:

,

,

,

  • , etc. Attributen worden ook vaak herhaald, waaronder

    class

    ,

    href

    , en

    src

    . Het is gemakkelijk in te zien 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 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, zelfs als je webhosting op instapniveau hebt.

    Waarom u moet comprimeren en verkleinen

    Er zijn twee belangrijke voordelen, die beide cruciaal zijn in het huidige mobiele internetlandschap.

    Sneller laden van pagina's

    Gemiddeld kan een HTML-minifier 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 reductie van maximaal 10 procent. Dit vertaalt zich direct in snellere laadtijden van pagina's.

    Minder bandbreedte gebruikt

    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 dagelijks gemiddeld 1.000 bezoekers bedient, 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 + Minificatie

    Zoals u kunt zien, is HTML-verkleining op zichzelf nuttig, vooral naarmate uw site groter wordt, bestanden groter worden en het verkeer toeneemt. Let daar op Richtlijnen voor PageSpeed ​​van Google raad aan om HTML te verkleinen, dus als je sceptisch bent, laat dat je anders overtuigen.

    vergelijk 2 bestanden in kladblok++

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

    Gemiddeld kun je verwachten dat GZIP-compressie een HTML-bestand met 70 tot 90 procent zal verkleinen. Gebruikmakend van het bovenstaande voorbeeld met een conservatieve schatting van de compressie, zouden de verkleinde HTML-bestanden gaan van 45 KB tot 13,5 KB elk, voor een totale krimp van 365 KB. Vergeleken met niet-gecomprimeerd/niet-gecomprimeerd, is 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 in plaats van 50 KB per pagina.

    Hoe HTML te comprimeren en te verkleinen

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

    WordPress-plug-ins

    Als u een WordPress-site heeft, hoeft u alleen maar één plug-in te installeren en kunt u profiteren van zowel compressie als verkleining.

    De meeste caching-plug-ins doen meer dan alleen pagina's cachen. 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 wilt u minificatie, dan raden wij u de HTML verkleinen inpluggen. Het is eenvoudig, ondersteunt HTML/CSS/JS en stelt je in staat om de minificatiemethode een beetje aan te passen (bijv.

    http:

    en

    https:

    van URL's).

    Statische HTML-minifiers

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

    Gebruik een van deze tools om te verkleinen:

    Dit is een haalbare techniek als je bent afgestapt van CMS'en zoals WordPress en nu statische sitegenerators gebruikt.

    GZIP-compressie inschakelen

    De stappen om GZIP-compressie in te schakelen, kunnen verschillen, afhankelijk van de webserversoftware die u gebruikt. Aangezien Apache de meest populaire optie is, bespreken we hoe u deze 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 om de volgende instellingen te hebben:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(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 compressie werkt op uw website? Test het met deze tool .

    Voor de ultieme efficiëntie moet u ook: leer hoe u uw CSS kunt controleren, opschonen en optimaliseren .

    Deel Deel Tweeten E-mail Moet u onmiddellijk upgraden naar Windows 11?

    Windows 11 komt binnenkort, maar moet je zo snel mogelijk updaten of een paar weken wachten? Laten we het uitzoeken.

    Lees volgende     Gerelateerde onderwerpen
    • Programmeren
    • HTML
    • Webontwikkeling
    Over de auteur Joel Lee(1524 artikelen gepubliceerd)

    Joel Lee is de hoofdredacteur van MakeUseOf sinds 2018. Hij heeft een B.S. in computerwetenschappen en meer dan negen jaar professionele schrijf- en redactieervaring.

    Meer van Joel Lee

    Abonneer op onze nieuwsbrief

    Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

    Klik hier om je te abonneren