Aquest article us presentarà un tema conegut com Minify In i en procés també us proporcionarà una demostració pràctica detallada. En aquest article es tractaran les següents indicacions,
- Què és la minificació?
- Per què és necessària la minificació?
- Com es minimitza el codi CSS, JS, HTML?
- Quan ho has de fer?
- Beneficis de la minificació?
Com el nom ens indica prou bé, la minificació consisteix a minimitzar la mida d’un fitxer. En una base de codi, tenim la llibertat de minimitzar fitxers HTML, CSS o Javascript. Aquí, parlarem de la reducció d’un fitxer CSS.
Quan un desenvolupador codifica, s'assegura que el codi estigui en el millor format llegible per simplificar qualsevol procés de canvis posteriors. Per tant, els noms de les variables tenen un format fàcilment comprensible i ocupen molts caràcters. A continuació, també afegeixen una bona quantitat d’espai en blanc perquè sigui prou llegible.
Però en tot el procés, solem afluixar les cadenes que augmenta la mida del nostre fitxer, cosa que al seu torn augmenta el temps de càrrega del lloc web. Especialment amb els llocs web que tenen una gran quantitat de funcionalitats i complements, una base de codi més llarga empitjora el lloc web.
De totes maneres, Google té un format restringit per classificar els llocs web a la seva pàgina de cerca en funció de l’experiència d’usuari òptima que ofereixen els llocs web. Com millor es carregui el lloc, millor es classificarà el lloc web a la pàgina de cerca.
Amb tant en joc, no voleu que els vostres usuaris pateixin a causa del mal temps de càrrega del lloc i passin al següent. Per tant, la minificació del codi és extremadament important.
De fet, mentre construïm un lloc web, sabem què consisteix en la base màxima de codi?
Es tracta de CSS, HTML i Javascript. La competència actual per fer que el vostre lloc web tingui un aspecte atractiu visualment destaca molt el fitxer CSS i sense adonar-nos aprofitem el nostre lloc web amb un codi pesat.
Entrades, minificació ..
Continuem amb aquest article sobre Minify CSS
Què és minificació ?
La minificació us permet reduir el codi a una mida mínima de fitxer que no afecta el codi i, tot i així, en redueix la mida. En aquest procés, podeu eliminar l’espai i els caràcters innecessaris que en cap lloc afecten l’originalitat del vostre lloc web. Algunes coses que s’han d’evitar del codi són:
- Personatges en blanc
- Nous caràcters de línia
- Delimitadors de blocs
- Comentaris
- Escurçament de noms de variables
Aquests factors no estan implicats per fer que el vostre lloc web s'executi, sinó que només pesarà el fitxer i augmentarà el temps de càrrega del lloc web.
La llegibilitat del codi és totalment exclusiva del que la màquina entén. El navegador web no necessita un espaiat addicional entre els personatges per entendre-ho i executar-lo. Per tant, proveu de reduir-los i minimitzeu el codi CSS i HTML.
Posem un exemple:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minimitza el meu CSS
Gairebé una diferència del 48% en el fitxer original i reduït. Reduït en 178 bytes. Després de la minificació
#myContent {font-family: Arialfont-size: 90%}Hola món!
Continuem amb aquest article sobre Minify CSS
Per què és minificació necessari?
Per millorar el temps de càrrega del lloc web. A ningú li agrada esperar que es carregui un lloc web segons conveniència. Amb tantes opcions disponibles, la gent tendeix a canviar a una altra. Per tant, és millor reduir la mida del fitxer.
Continuem amb aquest article sobre Minify CSS
Com ho fas? minificar CSS, JS, codi HTML?
Per minimitzar, hi ha una infinitat d’eines disponibles en línia que us poden ajudar a reduir la base de codi. També podeu optar per fer-ho manualment, però per a una base de codi més gran, és recomanable utilitzar qualsevol de les eines següents per minimitzar el fitxer CSS:
CSSminifier.com: una eina extremadament senzilla d'utilitzar. Simplement copieu el codi a la part esquerra, creeu el fitxer minificat i descarregueu-lo. El fitxer minificat tindrà una extensió .min.
El fitxer CSS minificat tindrà l'extensió demo.min.css.
Smallseotools.com: copieu el codi o pengeu el fitxer de codi. Minificarà el vostre codi i us permetrà copiar-lo o descarregar-lo.
Optimització automàtica: es tracta d’un complement que podeu afegir a les vostres eines de WordPress. Com a complement, podeu escollir minificar el vostre codi CSS allà i allà.
marc basat en dades en selenium webdriver
És més fàcil per a un desenvolupador entendre quan es redueix el fitxer i quan no. Un fitxer minificat tindrà una extensió .min.
Continuem amb aquest article sobre Minify CSS
Quan ho has de fer?
La reducció s'hauria de fer principalment quan hàgiu escrit el codi i l'heu d'enviar al servidor per obtenir una resposta. Un cop reduïts els fitxers, les versions reduïdes s’utilitzen per distribuir-les als usuaris.
Beneficis de minificació ?
Reducció de la mida del fitxer: en suprimir l’espaiat addicional, reduir els noms de variables i eliminar comentaris, la mida del fitxer es redueix pràcticament entre un 30-60%. Càrrega més ràpida: amb menys dades per enviar per la xarxa, el lloc web es carrega més ràpidament que abans. Cost d’ample de banda inferior: quan s’eliminen dades innecessàries, l’amplada de banda necessària és molt menor i el cost també.
Coses que cal recordar:
Fins i tot abans d’intentar minimitzar-lo, assegureu-vos que el vostre codi no estalviï. El flux no s’hauria d’interrompre i la funcionalitat hauria de romandre sense rostre. Heu de comprovar que fins i tot després de la minificació el vostre codi s’executa de la mateixa manera.
De fet, com a pràctica recomanada, podeu mantenir sempre preparada una plantilla. Feu els canvis a la plantilla integrada, cosa que us estalviarà un temps generós.
És similar a la compressió?
Bé, fortament NO. la minificació és diferent de la compressió. La compressió fa que un fitxer minificat redueixi més, però no afecta l'estil i l'estructura del codi.
El fitxer es comprimeix i es comprimeix com a zip i s’envia per la xarxa quan un client sol·licita accedir al lloc web. El fitxer es descomprimeix i s’utilitza.
Exemples:
Abans de la minificació:
Cartera
- Inici
Després de la minificació:
Cartera
- Inici
El codi és definitivament més difícil de llegir i entendre per a un ésser humà, però és igualment plausible per a una màquina. A una màquina no li importa la bellesa del codi i l’espai, entén l’essència i funciona en conseqüència.
T’ha impressionat prou la tècnica de minificació?
Llavors proveu-ho per vosaltres mateixos. Reduïu la càrrega del fitxer i deixeu que el vostre lloc web flueixi lliurement per a tots els usuaris.
Això ens porta al final d’aquest article sobre Minify In CSS.
Si esteu interessats en obtenir més informació sobre el desenvolupament web, consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).
Si encara us interessa Si teniu alguna pregunta, podeu publicar-la a la secció de comentaris d’aquest bloc “Minifica a CSS” i us respondrem el més aviat possible.