Com optimitzar el lliurament de CSS: 7 senzills passos

css imatge vectorial d’optimitzacióJa van arribar els dies en què els experts en disseny i bloggers líder en la indústria van recomanar la creació de pàgines web de no més de 30 quilobytes …


Aleshores, es preveia que aquest “cap” tractés HTML, JavaScript, imatges, CSS i Flash. Siguem sincers, no es necessita gaire superar els 30 kb.

Com que JavaScript i CSS van guanyar popularitat, es va fer habitual que els CSS només sobrepassessin els 30KB. Això és especialment cert per a llocs web més grans.

Tot i això, no heu de centrar-vos en el vostre “nombre de kilobytes” a l’hora de construir i dissenyar pàgines per al vostre lloc web. És important mantenir les vostres pàgines optimitzat i estricte en escriure el vostre CSS.

L’optimització no consisteix només a minimitzar les mides dels fitxers. Es tracta de mantenir les vostres pàgines lliures de trastorns i fer-les el més organitzades i eficients possible. Quan apreneu més sobre les bones pràctiques d’optimització de CSS, trobareu que automàticament creareu mides de fitxer més petites.

A continuació, detallem cinc coses senzilles per optimitzar el CSS.

Com optimitzar el lliurament CSS

1. Utilitzeu taquigrafia

Escriure a taquigrafia s’ha convertit en una pràctica molt habitual. Aquesta és, amb molt, la manera més senzilla de reduir el codi i la durada del codi. Si encara no ho feu, no hi ha temps com el present.

propietat de font css

Hi ha multitud d’elements que podeu utilitzar de taquigrafia, però els més comuns inclouen:

  • Marge
  • Encoixinament
  • Font
  • Esquema
  • Frontera
  • Antecedents
  • A la llista

valors de configuració de taquigrafiaTambé podeu combinar valors mitjançant drecera. En especificar diferents valors, el navegador utilitzarà fonamentalment una forma especificada per interpretar les regles.

Utilitzant qualsevol tipus de taquigrafia feu que el vostre codi global sigui molt més succint. Esteu desant tant personatges com línies.

Si utilitzeu drecera a totes les àrees possibles, això pot reduir dràsticament la mida general del fitxer.

2. Desfer-se dels retrocessos

és a dir, css rulePer complir les regles CSS específiques de l’IE, l’ús d’hacks condicionals CSS us proporciona l’avantatge de servir un fitxer CSS predeterminat més petit i net..

Ajuda amb els navegadors que compleixen més normes. Tot i això, el pes addicional de pàgina només els descarregarà els navegadors que ho necessitin.

Si heu d’utilitzar un hack, és imprescindible que el codi que utilitzeu sigui específic per a la versió d’Internet Explorer en la qual estigueu concentrats..

Hi ha nombrosos codis preescrits que serveixen com a hacks si no voleu escriure el vostre. Aprofiteu el temps per mirar realment el codi preescrit i assegureu-vos que és exacte altrament, això podria donar lloc a problemes encara més importants.

Ara, si podeu utilitzar CSS per obtenir els resultats que desitgeu, feu-ho sense cap tipus de problema. Per descomptat, això depèn que totes les altres coses siguin iguals. El vostre codi global serà molt més lleuger i senzill quan feu servir menys accessos al vostre lloc.

3. Ser intel·ligent en l’ús de Whitespace

Per al vostre codi CSS, l’espai en blanc és imprescindible per a la llegibilitat.

Espai en blanc inclou elements, com ara pestanyes, espais i salts de línia addicionals. Tots els espais en blanc que es poden eliminar és similar a l’eliminació d’un personatge.

suprimiu les línies buidesTot i això, sovint no es recomana escorcollar a l’espai en blanc per un fitxer més petit. Encara haureu de mantenir la llegibilitat òptima a les vostres pàgines web.

L’espai en blanc és important per formatar, així que voleu trobar un equilibri. Si escriviu en blocs grans a text per eliminar algun espai en blanc, la curta atenció dels lectors a Internet els farà clicar fora.

Una forma de proporcionar una mida i una llegibilitat més reduïdes del fitxer és escorcollar pestanyes i només posar una sola línia entre paràgrafs. Això proporciona un espai en blanc suficient des del punt de vista de la llegibilitat, però també elimina una part d’aquest espai en blanc que no és necessari.

Ara, per a la versió de producció del fitxer CSS, podeu eliminar l’espai en blanc. Encara estarà present al vostre fitxer de treball.

Aquesta és una altra manera de fer el compromís perquè tinguis fitxers més petits i el format de lectura.

4. Restabliments i marcs de poda

Quan utilitzeu un marc CSS, és imprescindible que reviseu la documentació.

És igualment important mirar totes les línies que hi ha dins del fitxer CSS. Hi ha vegades que descobrireu que hi ha algunes regles en el marc que no voleu per al vostre projecte actual. Es poden eliminar.

s’han eliminat les regles de css que no s’han fet servir

Podríeu trobar que podeu obtenir detalls presentatius d’una manera més concisa i elegant …

Pot ser que no sigui el que utilitzeu normalment, però si funciona, això pot permetre un marc més net. Quan en coneixeu, també us permet evitar duplicacions involuntàries de conjunts de regles.

La mateixa informació també s’aplica als restabliments. Quan utilitzeu restabliments, ajudaran a neutralitzar l’estil predeterminat d’un navegador. Ara, si coneixeu el lloc web que esteu creant, no és estrany trobar determinades declaracions que sabeu que no necessitareu.

Per exemple, en un bloc general, és probable que no les utilitzeu. Necessiteu alliberar-vos de tot el que no necessiteu per al lloc específic que esteu construint. Tu pots assegureu un millor treball optimitzat quan feu servir un conjunt de regles respecte a un restabliment o marc.

Tanmateix, en el seu estat predeterminat, no s’han d’acceptar. Perquè els vostres fitxers CSS siguin llegibles i inclinats, mireu totes les declaracions de forma individual i retallau les que no siguin necessàries.

5. Prova futura del vostre CSS

Sintaxi de Css

Una altra opció útil d’optimització CSS: separeu la majoria de les vostres regles de les declaracions específiques de disseny.

Assigna el disseny al seu propi fitxer individual si això és possible. Si no, almenys donar-li una secció pròpia pot ser beneficiós.

En definitiva, el posicionament i la flotació (que són els mètodes actuals mitjançant CSS) no estaven destinats a servir com a eines de disseny.

Alguns arriben fins a dir que en realitat es semblen als hacks de disseny. En aquest moment no hi ha una alternativa viable i l’esperança és que, un cop es donin els estàndards de disseny acordats, comencin a obtenir suport dels navegadors.

Una vegada que es produeix aquest suport, no hauria de ser molt difícil canviar les propietats del model de caixa que es piquen per a les destinades als dissenys..

Ara mateix, la la millor opció és gestionar el disseny mitjançant les propietats adequades. Normalment, es condensarà el pes de la pàgina amb més eficàcia que no pas l’ús del conjunt limitat de propietats disponibles actualment per compensar els interessos.

6. Mantingueu sempre la documentació actualitzada sobre la vostra feina

Tant si treballeu en un lloc web com en equip o en solitari, és imprescindible fer un seguiment de tot el que heu fet.

Per exemple, només, potser oblideu alguna cosa que heu fet. Com a equip, algú pot fer alguna cosa i és possible que no en siguis conscient fins que no facis canvis que puguin causar problemes amb diversos elements del codi..

afegir comentari cssLes duplicacions de codi són un gran àmbit d’inquietud tant per a equips com per a dissenyadors individuals, especialment quan s’utilitzen constructors de llocs web populars. Wix, Squarespace i altres programes de construcció de llocs web són conegut per la duplicació de codi o per completar-lo a la base de dades.

L’ús de guies de fulls d’estil i guies de marcatge són opcions viables de documentació. També podeu utilitzar comentaris de CSS és una altra opció i això pot ser beneficiós per a seccionar els elements dels fitxers CSS que són llargs. Si afegiu aquest estil a la guia d’estil o de marcatge, els impedeix afegir la mida del fitxer.

Una de les maneres més ràpides de saltar codi és fent el mateix treball dues vegades. La codificació és complexa, per la qual cosa és imprescindible mantenir una documentació precisa de tot el que heu fet.

Si treballeu sol, és ideal revisar aquesta documentació cada vegada que us asseieu per començar a treballar. Quan treballeu com a part d’un equip, assegureu-vos que tothom codifiqui al mateix document s’adhereix a un estil o guia de marcació de la comunitat de manera que tots els grups del grup entenen fàcilment els canvis de codificació.

7. Comprimeix els fitxers (CSS Optimization 101)

css de compressió i optimització del gif

Compressió: hi ha una mica més que això …

Una forma eficaç d’optimitzar CSS és mitjançant compressió. Aquesta és una manera de garantir que els vostres fitxers siguin compatibles amb els navegadors, tot i que els humans no són llegibles.

En comparació amb les còpies de treball, aquestes seran una fracció de la mida. Hi ha diferents aplicacions que podeu aprofitar per facilitar el procés de compressió.

Es realitzaran tasques, com trobar i arreglar qualsevol propietat CSS que es sobreescriu entre si, comprimint l’espai blanc i es buscaran possibilitats d’utilitzar CSS shorthand.

A més de la comoditat d’aquestes aplicacions, també us poden ajudar a obtenir més informació sobre les tasques que podeu fer a mà si ho preferiu. També podeu utilitzar diversos editors de text per ajudar a formatar els vostres fitxers CSS.

Poden servir versions zip dels diversos fitxers CSS que teniu. Això es fa normalment amb PHP. Si voleu utilitzar eines d’optimització i compressió, assegureu-vos de revisar diverses opcions abans d’escollir-ne la més adequada.

Ara, aquestes aplicacions generalment són bones per minimitzar els errors, però no són perfectes. Per això, sempre heu de revisar el vostre CSS després d’utilitzar una aplicació per garantir-ne l’exactitud. El codi optimitzat i net és fonamental per a la mida del fitxer, però també per a la llegibilitat i el manteniment.

El teu torn

Els principis aquí comentats són consideracions sòlides per a CSS, però també per a JavaScript, HTML i altres llenguatges de programació. En comparació amb la representació del vostre lloc web, els fitxers CSS no són tan destacats per a l’usuari final.

Tanmateix, els principis aquí discutits ajuden tant a desenvolupar l’experiència com a l’experiència de l’usuari.

La majoria de bones empreses d’allotjament web us ajudaran amb l’optimització de CSS. Els llocs web més ràpids et converteixen en un client feliç, però els fitxers més petits també tenen menys càrrega als seus servidors.

Hem provat tots els amfitrions web canadencs i us hem recomanat SiteGround. No només t’ajuden a optimitzar l’entrega de CSS, sinó que el seu suport tecnològic no té parangó.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector