Den här artikeln presenterar dig för ett ämne som kallas Minify In och under processen också ge dig en detaljerad praktisk demonstration. Följande tips kommer att behandlas i den här artikeln,
vad är funktionsöverbelastning i c ++
- Vad är minifiering?
- Varför behövs minifiering?
- Hur minifierar du CSS, JS, HTML-kod?
- När ska du göra det?
- Fördelar med minifiering?
Som namnet antyder oss ganska bra handlar minifiering om att minimera storleken på en fil. I en kodbas har vi friheten att förminska HTML-, CSS- eller Javascript-filer. Här kommer vi att diskutera om minifiering av en CSS-fil.
När en utvecklare kodar ser han / hon till att koden är i det bästa läsbara formatet för att förenkla alla processer med ytterligare förändringar. Så variabelnamnen är i ett format som är lätt att förstå och tar upp en hel del tecken. Sedan lägger de också till en hel del tomt avstånd för att göra det läsbart nog.
Men under hela processen tenderar vi att lossa strängarna som vår filstorlek ökar vilket i sin tur ökar webbplatsens laddningstid. Speciellt för webbplatser som har en stor bit av funktioner och tillägg, gör en längre kodbas bara webbplatsen värre.
Google har ändå ett begränsat format för att rangordna webbplatserna på sin söksida baserat på den optimala användarupplevelse som webbplatser erbjuder. Ju bättre din webbplats laddas, desto bättre rankas din webbplats på söksidan.
Med så mycket på spel vill du inte att dina användare ska lida på grund av dålig laddningstid på webbplatsen och gå vidare till nästa. Därför är minifiering av koden extremt viktig.
Infact, när vi bygger en webbplats vet vi vad som består av den maximala kodbasen?
Det handlar om CSS, HTML och Javascript. Tävlingen idag för att få din webbplats att se visuellt tilltalande ut betonar CSS-filen mycket och utan att inse att vi använder vår webbplats med tung kod.
Inför, minifiering ..
Fortsätter med den här artikeln om Minify CSS
Vad är minifiering ?
Med minifiering kan du ta bort koden till en minimal filstorlek som inte påverkar koden och ändå minskar filstorleken. Under processen kan du ta bort onödigt avstånd och tecken som ingenstans påverkar din webbplats originalitet. Några saker som bör undvikas från koden är:
- Mellanslagstecken
- Nya linjetecken
- Blockera avgränsare
- Kommentarer
- Förkortande variabelnamn
Dessa faktorer är inte inblandade för att få din webbplats att köra istället för att göra filen tyngre och öka webbplatsens laddningstid.
Kodens läsbarhet är helt exklusiv vad maskinen förstår. Webbläsaren behöver inte extra avstånd mellan karaktärerna för att förstå och köra. Så försök att minska dem och förminska CSS- och HTML-koden.
Låt oss ta ett exempel:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Förminska min CSS
Nästan en skillnad på 48% i den ursprungliga och minifierade filen. Minskat med 178 byte. Efter minifiering
#myContent {font-family: Arialfont-size: 90%}Hej världen!
Fortsätter med den här artikeln om Minify CSS
Varför är minifiering behövs?
För att förbättra webbplatsens laddningstid. Ingen gillar att vänta på att en webbplats laddas enligt bekvämligheten. Med så många tillgängliga alternativ tenderar människor att byta till en annan. Så det är bättre att minska filstorleken.
Fortsätter med den här artikeln om Minify CSS
Hur gör du minifiera CSS, JS, HTML-kod?
För att minifiera finns det ett femtontal verktyg tillgängliga online som kan hjälpa dig att minska kodbasen. Du kan också välja att göra det manuellt men för en större kodbas är det lämpligt att använda något av följande verktyg för att minifiera din CSS-fil:
CSSminifier.com: Ett extremt enkelt verktyg att använda. Kopiera bara koden till vänster, skapa den minifierade filen och ladda ner den. Den minifierade filen kommer att ha ett tillägg .min.
Din minifierade CSS-fil kommer att ha tillägget demo.min.css.
Smallseotools.com: Antingen kopiera din kod eller ladda upp din kodfil. Det kommer att minifiera din kod och låta dig kopiera eller ladda ner den.
Autoptimize: Detta är ett plugin som du kan lägga till i dina WordPress-verktyg. Som ett plugin kan du välja att förminska din CSS-kod då och där.
Det är lättare för en utvecklare att förstå när filen minifieras och när inte. En minifierad fil kommer att ha ett tillägg .min.
Fortsätter med den här artikeln om Minify CSS
När ska du göra det?
Minifiering bör primärt göras när du har skrivit koden och måste skicka den till servern för svar. När filerna har minifierats används de minifierade versionerna för att distribuera till användarna.
Fördelar med minifiering ?
Minskning av filstorlek: Genom att ta bort det extra avståndet, minska variabelnamnen och ta bort kommentarer minskas filstorleken nästan med 30-60%. Snabbare laddning: Med mindre data att skicka över nätverket laddas webbplatsen snabbare än tidigare. Lägre bandbreddskostnad: När onödig data tas bort är bandbredd som behövs mycket mindre och kostnaden också.
Saker att komma ihåg:
Redan innan du försöker minifiera, se till att din kod inte går utanför gränserna. Flödet bör inte störas och funktionaliteten ska förbli ansiktslös. Du måste kontrollera att din kod körs på samma sätt även efter minifiering.
Infact, som en bästa praxis kan du alltid hålla en mall redo. Gör dina ändringar i den inbyggda mallen som sparar dig generös tid.
Liknar det kompression?
Tja, starkt NEJ. minifiering är annorlunda än komprimering. Komprimering gör att en förminskad fil minskar mer men påverkar inte kodstyling och struktur.
Filen minifieras och komprimeras sedan som en zip och skickas över nätverket när en klient begär åtkomst till webbplatsen. Filen komprimeras sedan och används.
Exempel:
Före minifiering:
Portfölj
- Hem
Efter minifiering:
Portfölj
- Hem
Koden är definitivt svårare att läsa och förstå för en människa men är lika troligt för en maskin att göra. En maskin bryr sig inte riktigt om skönheten i koden och avståndet, den förstår kärnan och fungerar därefter.
Imponerad nog med minifieringstekniken?
Försök sedan själv. Minska bördan för din fil och låt din webbplats flöda fritt för alla användare!
Detta leder oss till slutet av den här artikeln om Minify In CSS.
Om du är intresserad av att lära dig mer om webbutveckling, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig hur du skapar imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuerar den till Amazon Simple Storage Service (S3).
Om du fortfarande är intresserad Om du har några frågor kan du lägga upp den i kommentarsektionen på denna 'Minify In CSS' -blogg, så återkommer vi till dig så snart som möjligt.