Denne artikkelen vil introdusere deg for et tema kjent som Minify In og i prosess også gi deg en detaljert praktisk demonstrasjon. Følgende tips vil bli dekket i denne artikkelen,
- Hva er minifisering?
- Hvorfor er minifikasjon nødvendig?
- Hvordan minifiserer du CSS, JS, HTML-kode?
- Når skal du gjøre det?
- Fordeler med minifisering?
Som navnet antyder oss ganske bra, handler minifisering om å minimere størrelsen på en fil. I en kodebase har vi frihet til å formindske HTML-, CSS- eller Javascript-filer. Her vil vi diskutere om minifisering av en CSS-fil.
Når en utvikler koder, sørger han / hun for at koden er i det best lesbare formatet for å forenkle enhver prosess med ytterligere endringer. Så variabelnavnene er i et format som er lett forståelig og tar opp mange tegn. Deretter legger de også til en god mengde blank avstand for å gjøre det lesbart nok.
Men i løpet av hele prosessen har vi en tendens til å løsne strengene for at filstørrelsen øker, noe som igjen øker nettstedets lastetid. Spesielt på nettsteder som har en stor mengde funksjoner og tillegg, gjør en lengre kodebase nettstedet verre.
Google har uansett et begrenset format for å rangere nettstedene på søkesiden sin basert på den optimale brukeropplevelsen som nettsteder gir. Jo bedre nettstedet ditt lastes, desto bedre rangeres nettstedet ditt på søkesiden.
Med så mye som står på spill, vil du ikke at brukerne skal lide på grunn av dårlig lastetid på nettstedet og gå videre til neste. Derfor er minifisering av koden ekstremt viktig.
Faktisk, mens vi bygger et nettsted, vet vi hva som består av maksimal kodebase?
Det handler om CSS, HTML og Javascript. Konkurransen i dag for å få nettstedet ditt til å se attraktivt ut, understreker CSS-filen mye, og uten å innse utnytter vi nettstedet vårt med tung kode.
Inngår, minifiseres ..
Fortsetter med denne artikkelen om Minify CSS
Hva er minifisering ?
Med Minification kan du fjerne koden din til en minimal filstørrelse som ikke påvirker koden, og som likevel reduserer filstørrelsen. I prosessen kan du fjerne unødvendig mellomrom og tegn som ingen steder påvirker nettstedets originalitet. Noen få ting som bør unngås fra koden er:
- Mellomrom tegn
- Nye linjekarakterer
- Blokk avgrensere
- Kommentarer
- Forkortelse av variabelnavn
Disse faktorene er ikke involvert for å få nettstedet til å kjøre i stedet for bare å gjøre filen tyngre og øke nettstedets lastetid.
få størrelse på array-javascript
Kodens lesbarhet er helt eksklusiv hva maskinen forstår. Nettleser trenger ikke ekstra avstand mellom tegnene for å forstå og kjøre. Så prøv å redusere dem og minifisere CSS og HTML-koden.
La oss ta et eksempel:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Miniser CSS
Nesten en forskjell på 48% i den opprinnelige og minifiserte filen. Redusert med 178 byte. Etter minifisering
#myContent {font-family: Arialfont-size: 90%}Hei Verden!
Fortsetter med denne artikkelen om Minify CSS
Hvorfor er minifisering behov for?
For å bedre lastetiden til nettstedet. Ingen liker å vente på at et nettsted skal lastes i henhold til bekvemmeligheten. Med så mange tilgjengelige alternativer, har folk en tendens til å bytte til en annen. Så det er bedre å redusere filstørrelsen.
Fortsetter med denne artikkelen om Minify CSS
Hvordan gjør du minifisere CSS, JS, HTML-kode?
For å minifisere er det mange verktøy tilgjengelig på nettet som kan hjelpe deg med å redusere kodebasen. Du kan også velge å gjøre det manuelt, men for en større kodebase anbefales det å bruke et av følgende verktøy for å minifisere CSS-filen:
CSSminifier.com: Et ekstremt enkelt verktøy å bruke. Bare kopier koden på venstre side, generer den minifiserte filen og last den ned. Den minifiserte filen har utvidelsen .min.
Den minifiserte CSS-filen din vil ha utvidelsen demo.min.css.
Smallseotools.com: Kopier enten koden eller last opp kodefilen. Det vil minifisere koden din og lar deg kopiere den eller laste den ned.
Autoptimiser: Dette er et plugin som du kan legge til i WordPress-verktøyene dine. Som et plugin kan du velge å minifisere CSS-koden din der og der.
Det er lettere for en utvikler å forstå når filen minifiseres og når ikke. En minifisert fil har utvidelsen .min.
Fortsetter med denne artikkelen om Minify CSS
Når skal du gjøre det?
Minifisering bør først og fremst gjøres når du har skrevet koden og må sende den på serveren for å få svar. Når filene er minifiserte, brukes de minifiserte versjonene til å distribuere til brukerne.
Fordeler med minifisering ?
Reduksjon av filstørrelse: Ved å fjerne ekstra mellomrom, redusere variabelnavn og fjerne kommentarer blir filstørrelsen nesten redusert med 30-60%. Raskere lasting: Med mindre data å sende over nettverket lastes nettstedet raskere enn før. Lavere båndbreddekostnad: Når unødvendige data blir fjernet, er båndbredde som trengs, mye mindre, og det er også kostnadene.
Ting å huske:
Selv før du prøver å minifisere, må du sørge for at koden din ikke går utenfor grensene. Flyten skal ikke forstyrres, og funksjonaliteten skal forbli ansiktsløs. Du må sjekke at koden din kjører på samme måte selv etter minifisering.
Infact, som en god praksis kan du alltid holde en mal klar. Gjør endringene i den innebygde malen, noe som vil spare deg for mye tid.
Ligner det komprimering?
Vel, sterkt NEI. minifisering er annerledes enn komprimering. Komprimering gjør at en redusert fil reduserer mer, men påvirker ikke kodestilen og strukturen.
Filen blir minifisert og deretter komprimert som en zip og sendt over nettverket når en klient ber om å få tilgang til nettstedet. Filen komprimeres deretter og brukes.
Eksempler:
Før minifisering:
Portefølje
- Hjem
Etter minifisering:
Portefølje
- Hjem
Koden er definitivt vanskeligere å lese og forstå for et menneske, men er like sannsynlig for en maskin å gjengi. En maskin bryr seg ikke veldig om skjønnheten i koden og avstanden, den forstår kjernen og fungerer deretter.
Imponert nok med minifiseringsteknikken?
Prøv så selv. Mindre belastningen på filen din og la nettstedet flyte fritt for alle brukerne!
Dette bringer oss til slutten av denne artikkelen om Minify In CSS.
Hvis du er interessert i å lære mer om nettutvikling, kan du sjekke ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).
Hvis du fremdeles er interessert. Hvis du har spørsmål, kan du legge det ut i kommentarfeltet til denne 'Minify In CSS' -bloggen, og vi vil kontakte deg så snart som mulig.