Com funciona l'HTML comprimit i per què és possible que el necessiteu

Com funciona l'HTML comprimit i per què és possible que el necessiteu

Si teniu un lloc web, ja hauríeu de saber fer-ho utilitzeu els formats d’imatge adequats i optimitzeu les imatges per al web. Tot i que la compressió d’imatges és una pràctica ben coneguda, la compressió HTML tendeix a passar per alt, cosa que és una pena perquè els beneficis valen la pena.





En aquest article, revisarem els dos mètodes principals per reduir els fitxers HTML, per què s’han de reduir els fitxers HTML i com fer-ho.



Compressió vs. Minificació

Pel que fa a l'optimització de fitxers HTML, hi ha dos mètodes principals: compressió i minificació . Són similars a la superfície, però en realitat són dues tècniques diferents, de manera que no els confongueu.





Minificació

Podeu pensar en la minificació com l'eliminació de caràcters i línies innecessàries del codi font. Penseu en la sagnia, els comentaris, les línies buides, etc. No es requereix cap d'ells en HTML: existeixen per facilitar la lectura del fitxer. Si retalleu aquests detalls es pot reduir la mida del fitxer sense afectar res.

Pàgina HTML d'exemple:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Mida original: 354. Mida mínima: 272. Estalvi: 82 (23,16%).

Molts desenvolupadors web i propietaris de llocs reserven la minificació només per als fitxers JS i CSS, però aquesta pràctica obsoleta és un error. La minificació HTML també és important.



Als anys 2000, les eines de minificació eren rares. Havies de minimitzar manualment els fitxers cada vegada que canviava alguna cosa. Com que els fitxers HTML canvien amb més freqüència que els fitxers JS i CSS, era massa tediós reduir-los cada vegada. Avui en dia, és un punt discutible.

Compressió

Quan els usuaris visiten el vostre lloc web, ho fan mitjançant el protocol HTTP. El navegador envia una sol·licitud al vostre servidor web per a una pàgina específica, el servidor web troba la pàgina i, a continuació, envia el contingut d’aquesta pàgina al navegador del visitant.



Però com que el protocol HTTP admet la compressió, el servidor web pot comprimir la pàgina abans d’enviar-la al visitant (suposant que la compressió està activada a la configuració del servidor) i, a continuació, el navegador del visitant pot descomprimir la pàgina al seu estat original.

L’esquema de compressió més comú és GZIP , que és un format de fitxer que utilitza un fitxer algorisme de compressió sense pèrdues anomenat DEFLATE.

L'algoritme busca repetir ocurrències de text al fitxer HTML i, a continuació, reemplaça aquestes repeticions per referències a una ocurrència anterior. Cada referència és simplement dos nombres: a quina distància hi ha la referència i a quants caràcters fem referència.

Penseu en una cadena de text com aquesta (exemple extret del lloc web GZIP):

Blah blah blah blah blah.

L’algorisme reconeix la següent repetició:

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

La primera ocurrència és la nostra referència, així que deixeu-ho:

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

La segona ocurrència fa referència a la primera ocurrència, que té cinc caràcters darrere i cinc caràcters de llarg:

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

Però en aquest cas, l'algorisme reconeix que la següent ocurrència és la mateixa seqüència de caràcters, de manera que amplia la longitud de referència en cinc altres:

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

I un altre cop:

Blah b[5,15]lah.

I l'algorisme és prou intel·ligent per adonar-se que els tres caràcters següents són els tres primers caràcters de la referència, de manera que s'estén en tres:

Blah b[5,18].

Ara penseu en un fitxer HTML típic i quanta repetició hi ha dins. Gairebé totes les etiquetes, com ara

, té una etiqueta de tancament corresponent, com ara

. A més, moltes etiquetes es repeteixen a tot arreu, com ara

,

,

,

  • , etc. Els atributs també es repeteixen sovint, inclòs

    class

    ,

    href

    , i

    src

    . És fàcil veure per què la compressió GZIP és tan eficaç amb HTML.

    L’únic inconvenient és que el servidor web necessita una mica més de CPU per executar la compressió cada vegada que es demana una pàgina. Però, atès que la CPU no és preocupant avui en dia, gairebé sempre és millor habilitar GZIP que deixar-ho sense, fins i tot si teniu allotjament web d’entrada.

    Per què hauríeu de comprimir i minimitzar?

    Hi ha dos avantatges principals, ambdós fonamentals en el paisatge web pesat per a mòbils actual.

    Càrregues de pàgina més ràpides

    De mitjana, un minificador HTML pot reduir la mida d’un fitxer al voltant d’un 3 per cent amb la configuració bàsica. Amb opcions avançades opcionals, un fitxer HTML es pot reduir entre un 3 i un 7 per cent, per una reducció potencial de fins a un 10 per cent. Això es tradueix directament en temps de càrrega de la pàgina més ràpids.

    Es fa servir menys amplada de banda

    Suposem que teniu 10 fitxers, cada un reduït de 50 KB a 45 KB per obtenir una reducció total de 50 KB. I suposem que el vostre lloc web atén una mitjana de 1.000 visitants cada dia, on cada visita té una mitjana de deu pàgines. La minificació HTML només redueix l’ús de l’amplada de banda en 50 MB al dia (1,5 GB al mes).

    Compressió + Minificació

    Com podeu veure, la minificació HTML és útil per si mateixa, especialment a mesura que el vostre lloc es fa més gran, els fitxers augmenten i el trànsit augmenta. Tingues en compte que Directrius de Google PageSpeed recomanem minimitzar HTML, de manera que si sou escèptic, permeteu que us convenci del contrari.

    com fer una captura de pantalla sense imprimir la pantalla

    Però el que és fantàstic en l'optimització d'HTML és que no cal triar ni la minificació ni la compressió. Podeu fer les dues coses! De fet, vosaltres hauria fes les dues coses.

    De mitjana, podeu esperar que la compressió GZIP redueixi un fitxer HTML entre un 70 i un 90 per cent. Utilitzant l’exemple anterior amb una estimació de compressió conservadora, els fitxers HTML reduïts passarien de 45 KB a 13,5 KB cadascun, per una reducció total de 365 KB. En comparació amb el no comprimit / sense comprimir, l’amplada de banda del lloc es redueix en 365 MB al dia (11 GB al mes).

    I, a més de l’estalvi d’amplada de banda, cada pàgina es carrega molt més ràpidament perquè el navegador de l’usuari final només necessita descarregar 13,5 KB contra 50 KB per pàgina.

    Com comprimir i minimitzar HTML

    Afortunadament, cap dels dos és molt difícil en aquests dies i no necessiteu gaire coneixement tècnic per configurar-los.

    Connectors de WordPress

    Si teniu un lloc de WordPress, tot el que heu de fer és instal·lar un connector i obtenir els avantatges de la compressió i la minificació.

    La majoria dels connectors de memòria cau fan més que simplement pàgines de memòria cau. Per exemple, Memòria cau més ràpida de WP i Memòria cau total de W3 tots dos tenen configuració d’un sol clic que us permet activar la minificació HTML i la compressió GZIP, entre altres funcions que acceleren encara més les càrregues de la pàgina i redueixen l’ús de l’amplada de banda.

    Si tu només voleu minimitzar, us recomanem el Minimitza HTML connectar. És senzill, admet HTML / CSS / JS i us permet modificar una mica el mètode de minificació (per exemple, si voleu eliminar-lo)

    http:

    i

    https:

    d’URL).

    Minificadors HTML estàtics

    Si els vostres fitxers HTML són estàtics (és a dir, no són generats dinàmicament per un CMS o un framework web), podeu mantenir dos conjunts de fitxers HTML: un conjunt 'font', que no es modifica per facilitar-ne l'edició, i un conjunt 'minimitzat', que creeu cada vegada que feu un canvi en un fitxer font.

    Per minimitzar, utilitzeu una d'aquestes eines:

    Aquesta és una tècnica viable si us heu allunyat dels CMS com el WordPress i ara utilitzeu generadors de llocs estàtics.

    Activeu la compressió GZIP

    Els passos per habilitar la compressió GZIP poden variar en funció del programari de servidor web que utilitzeu. Atès que Apache és l'opció més popular, explicarem com habilitar-lo mitjançant .htaccess.

    Connecteu-vos al servidor web mitjançant FTP i, a continuació, creeu un fitxer anomenat

    .htaccess

    al directori arrel. Editeu el fitxer .htaccess per tenir la configuració següent:


    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

    No esteu segur de si la compressió funciona al vostre lloc web? Proveu-lo amb aquesta eina .

    Per obtenir la màxima eficiència, també ho hauríeu de fer Obteniu informació sobre com podeu comprovar, netejar i optimitzar el vostre CSS .

    Compartir Compartir Tweet Correu electrònic Heu d'actualitzar el Windows 11 immediatament?

    Windows 11 arribarà aviat, però hauríeu d’actualitzar el més aviat possible o esperar unes setmanes? Anem a esbrinar.

    Llegiu a continuació     Temes relacionats
    • Programació
    • HTML
    • Desenvolupament web
    Sobre l'autor Joel Lee(1524 articles publicats)

    Joel Lee és l’editor en cap de MakeUseOf des del 2018. Té un B.S. en informàtica i més de nou anys d'experiència en redacció i edició professional.

    Més de Joel Lee

    Subscriu-te al nostre butlletí

    Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

    Feu clic aquí per subscriure-us