Acest articol vă va prezenta un subiect cunoscut sub numele de Minify In și în proces vă oferă, de asemenea, o demonstrație practică detaliată. Următoarele indicații vor fi tratate în acest articol,
- Ce este minificarea?
- De ce este nevoie de reducere?
- Cum minimizați codul CSS, JS, HTML?
- Când ar trebui să faci asta?
- Avantajele reducerii?
Așa cum ne sugerează și numele destul de bine, reducerea se referă la minimizarea dimensiunii unui fișier. Într-o bază de coduri, avem libertatea de a minimiza fișierele HTML, CSS sau Javascript. Aici, vom discuta despre reducerea unui fișier CSS.
Când un dezvoltator codifică, el / ea se asigură că codul este în cel mai bun format lizibil pentru a simplifica orice proces de modificări ulterioare. Deci, numele variabilelor sunt într-un format ușor de înțeles și ocupă o mulțime de caractere. Apoi, adaugă, de asemenea, o cantitate bună de spațiu gol pentru ao face suficient de lizibil.
Dar, în întregul proces, tindem să slăbim șirurile pe care mărimea fișierului nostru le crește, ceea ce, la rândul său, mărește timpul de încărcare a site-ului web. Mai ales în cazul site-urilor web care au o mare parte din funcționalități și programe de completare, o bază de cod mai lungă doar înrăutățește site-ul.
Google are oricum un format restricționat pentru a clasa site-urile web pe pagina sa de căutare pe baza experienței de utilizare optimă pe care site-urile web le oferă. Cu cât site-ul dvs. se încarcă mai bine, cu atât site-ul dvs. se clasează mai bine pe pagina de căutare.
Cu atât de multe jocuri, nu doriți ca utilizatorii dvs. să sufere din cauza timpului de încărcare a site-ului necorespunzător și să treceți la următorul. Prin urmare, reducerea codului este extrem de importantă.
De fapt, în timp ce construim un site web, știm ce constă din baza de cod maximă?
Este vorba despre CSS, HTML și Javascript. Concurența de astăzi pentru a face site-ul dvs. web atrăgător din punct de vedere vizual subliniază foarte mult fișierul CSS și fără să ne dăm seama, ne folosim site-ul web cu cod greu.
Intră, minificare ..
Continuăm cu acest articol despre Minify CSS
Ce este minificare ?
Minimizarea vă permite să eliminați codul la o dimensiune minimă a fișierului, care nu afectează codul și totuși reduce dimensiunea fișierului. În acest proces, puteți elimina spațiul și caracterele inutile care nu afectează nicăieri originalitatea site-ului dvs. Câteva lucruri care ar trebui evitate din cod sunt:
- Caracterele spațiului alb
- Caractere de linie noi
- Delimitatori de blocuri
- Comentarii
- Scurtarea numelor variabilelor
Acești factori nu sunt implicați pentru ca site-ul dvs. să ruleze, ci doar să îngreuneze fișierul și să mărească timpul de încărcare a site-ului.
Citibilitatea codului este exclusiv exclusivă a ceea ce înțelege mașina. Browserul web nu are nevoie de o distanță suplimentară între caractere pentru a înțelege și a rula. Deci, încercați să le reduceți și să reduceți codul CSS și HTML.
Să luăm un exemplu:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Reduceți-mi CSS-ul
Aproape o diferență de 48% în fișierul original și minimizat. Redus cu 178 de octeți. După Minificare
#myContent {font-family: Arialfont-size: 90%}Salut Lume!
Continuăm cu acest articol despre Minify CSS
De ce este minificare Necesar?
Pentru a îmbunătăți timpul de încărcare a site-ului web. Nimănui nu-i place să aștepte ca un site să se încarce după comoditate. Cu atât de multe opțiuni disponibile, oamenii tind să treacă la alta. Deci, este mai bine să reduceți dimensiunea fișierului.
Continuăm cu acest articol despre Minify CSS
Ce mai faci? minify CSS, JS, cod HTML?
Pentru a minimiza, există un număr mare de instrumente disponibile online care vă pot ajuta să reduceți baza de coduri. De asemenea, puteți opta pentru a face acest lucru manual, dar pentru o bază de cod mai mare, este recomandabil să utilizați oricare dintre următoarele instrumente pentru a minimiza fișierul CSS:
CSSminifier.com: Un instrument extrem de simplu de utilizat. Doar copiați codul din partea stângă, generați fișierul minimizat și descărcați-l. Fișierul minificat va avea o extensie .min.
Fișierul CSS minimizat va avea extensia demo.min.css.
Smallseotools.com: fie copiați codul, fie încărcați fișierul de cod. Acesta vă va micșora codul și vă permite să îl copiați sau să îl descărcați.
Optimizare automată: acesta este un plugin pe care îl puteți adăuga la instrumentele dvs. WordPress. Ca plugin, puteți alege să reduceți codul CSS atunci și acolo.
secvența c ++ Fibonacci
Este mai ușor pentru un dezvoltator să înțeleagă când fișierul este micșorat și când nu. Un fișier mic va avea o extensie .min.
Continuăm cu acest articol despre Minify CSS
Când ar trebui să faci asta?
Minimizarea trebuie făcută în primul rând, după ce ați scris codul și trebuie să îl trimiteți pe server pentru un răspuns. Odată ce fișierele sunt minimizate, versiunile minimizate sunt utilizate pentru a le distribui utilizatorilor.
Beneficiile minificare ?
Reducerea dimensiunii fișierului: eliminând spațiul suplimentar, reducând numele variabilelor și eliminând comentariile, dimensiunea fișierului este aproape redusă cu 30-60%. Încărcare mai rapidă: cu date mai mici de trimis prin rețea, site-ul web se încarcă mai repede decât înainte. Costul lățimii de bandă mai scăzut: atunci când datele inutile sunt eliminate, lățimea de bandă necesară este mult mai mică, la fel și costul.
Lucruri de amintit:
Chiar și înainte de a încerca reducerea, asigurați-vă că codul dvs. nu sparge limitele. Fluxul nu ar trebui să fie întrerupt și funcționalitatea ar trebui să rămână fără chip. Trebuie să verificați dacă chiar și după reducere, codul dvs. rulează în mod similar.
De fapt, ca cea mai bună practică, puteți păstra oricând un șablon pregătit. Aduceți modificările în șablonul încorporat, ceea ce vă va economisi o cantitate generoasă de timp.
Este similar cu compresia?
Ei bine, puternic NU. minificarea este diferită de compresie. Comprimarea face ca un fișier micșorat să reducă mai mult, dar nu afectează stilul și structura codului.
Fișierul este micșorat și apoi comprimat ca un fișier zip și trimis prin rețea atunci când un client solicită accesul la site-ul web. Fișierul este apoi necomprimat și utilizat.
Exemple:
Înainte de reducere:
Portofoliu
- Acasă
După reducere:
Portofoliu
- Acasă
Codul este cu siguranță mai greu de citit și de înțeles pentru un om, dar este la fel de plauzibil pentru o mașină de redat. O mașină nu prea are grijă de frumusețea codului și a spațiului, înțelege esența și funcționează în consecință.
Ești suficient de impresionat de tehnica de minimizare?
Atunci încearcă singur. Reduceți povara fișierului dvs. și lăsați site-ul dvs. să circule liber pentru toți utilizatorii!
Acest lucru ne duce la sfârșitul acestui articol despre Minify în CSS.
Dacă sunteți interesat să aflați mai multe despre dezvoltarea web, consultați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să aflați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).
Dacă sunteți încă interesat Dacă aveți vreo întrebare, ați putea să o postați în secțiunea de comentarii a acestui blog „Minify In CSS” și vă vom răspunde cât mai curând posibil.