Ovaj će vas članak upoznati s temom poznatom pod nazivom Minify In a u tijeku vam također pružaju detaljne praktične demonstracije. U ovom će članku biti obrađeni sljedeći putokazi,
- Što je minifikacija?
- Zašto je potrebna minifikacija?
- Kako minificirate CSS, JS, HTML kôd?
- Kada biste to trebali učiniti?
- Prednosti minifikacije?
Kao što nam ime prilično dobro govori, minifikacija se odnosi na minimiziranje veličine datoteke. U osnovi koda imamo slobodu umanjiti HTML, CSS ili Javascript datoteke. Ovdje ćemo razgovarati o minificiranju CSS datoteke.
Kada programer kodira, on / ona osigurava da je kôd u najbolje čitljivom formatu kako bi pojednostavio svaki postupak daljnjih promjena. Dakle, nazivi varijabli su u formatu koji je lako razumljiv i zauzimaju puno znakova. Zatim dodaju i dobru količinu praznih razmaka kako bi bili dovoljno čitljivi.
No, u cijelom procesu težimo popuštanju nizova s kojima se povećava naša datoteka, što zauzvrat povećava vrijeme učitavanja web stranice. Naročito kod web stranica koje imaju velik dio funkcionalnosti i dodataka, dulja baza koda web mjesto samo pogoršava.
Google ionako ima ograničeni format za rangiranje web stranica na stranici pretraživanja na temelju optimalnog korisničkog iskustva koje web mjesta pružaju. Što se vaša web lokacija bolje učitava, to se web lokacija bolje rangira na stranici za pretraživanje.
S toliko toga ulogom ne želite da vaši korisnici pate zbog lošeg vremena učitavanja web-lokacije i prijeđu na sljedeću. Stoga je umanjenje koda izuzetno važno.
U stvari, dok gradimo web stranicu, znamo što se sastoji od maksimalne baze koda?
Sve je u CSS-u, HTML-u i Javascriptu. Današnje natjecanje kako bi vaša web stranica izgledala vizualno privlačno naglašava CSS datoteku i bez da shvaćamo da našu web stranicu koristimo teškim kodom.
Ulazi, minifikacija ..
Nastavljamo s ovim člankom o Minify CSS
Što je minifikacija ?
Minifikacija vam omogućuje uklanjanje koda na minimalnu veličinu datoteke koja ne utječe na kôd, a smanjuje veličinu datoteke. U tom procesu možete ukloniti nepotrebne razmake i znakove koji nigdje ne utječu na originalnost vašeg web mjesta. Nekoliko stvari koje treba izbjegavati iz koda su:
- Razmaci
- Znakovi u novom retku
- Blok graničnici
- Komentari
- Skraćivanje imena varijabli
Ovi čimbenici nisu uključeni u to da vaše web mjesto radi, već samo otežavaju datoteku i povećavaju vrijeme učitavanja web mjesta.
Čitljivost koda potpuno je isključiva od onoga što stroj razumije. Web pregledniku nije potreban dodatni razmak između znakova da bi ga razumio i pokrenuo. Dakle, pokušajte ih smanjiti i umanjite CSS i HTML kôd.
Uzmimo primjer:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Umanji moj CSS
Gotovo razlika od 48% u izvornoj i minificiranoj datoteci. Smanjeno za 178 bajtova. Nakon minifikacije
#myContent {font-family: Arialfont-size: 90%}Pozdrav svijete!
Nastavljamo s ovim člankom o Minify CSS
Zašto je minifikacija potrebno?
Da biste poboljšali vrijeme učitavanja web stranice. Nitko ne voli čekati da se web stranica učita prema pogodnosti. S toliko dostupnih opcija, ljudi imaju tendenciju prebaciti se na drugu. Dakle, bolje je smanjiti veličinu datoteke.
Nastavljamo s ovim člankom o Minify CSS
Kako ti umanjiti CSS, JS, HTML kôd?
Da biste je umanjili, na mreži je dostupno mnoštvo alata koji vam mogu pomoći u smanjenju baze koda. Možete se i ručno odlučiti, ali za veću bazu koda preporučljivo je koristiti bilo koji od sljedećih alata za umanjivanje CSS datoteke:
CSSminifier.com: Izuzetno jednostavan alat za upotrebu. Samo kopirajte kod s lijeve strane, generirajte minificiranu datoteku i preuzmite je. Smanjena datoteka imat će nastavak .min.
Vaša minificirana CSS datoteka imat će nastavak demo.min.css.
Smallseotools.com: Ili kopirajte svoj kôd ili prenesite svoju kodnu datoteku. Umanjit će vaš kôd i omogućit će vam kopiranje ili preuzimanje.
Automatska optimizacija: ovo je dodatak koji možete dodati u svoje WordPress alate. Kao dodatak možete odabrati umanjivanje CSS koda tada i tamo.
Programeru je lakše razumjeti kada je datoteka umanjena, a kada ne. Smanjena datoteka imat će nastavak .min.
php ubaci u $ tablicu
Nastavljamo s ovim člankom o Minify CSS
Kada biste to trebali učiniti?
Minifikaciju treba izvršiti prvenstveno kada napišete kôd i morate ga poslati na poslužitelj radi odgovora. Nakon što se datoteke minificiraju, minificirane verzije koriste se za distribuciju korisnicima.
Prednosti minifikacija ?
Smanjenje veličine datoteke: Uklanjanjem dodatnih razmaka, smanjenjem imena varijabli i uklanjanjem komentara veličina datoteke se gotovo smanjuje za 30-60%. Brže učitavanje: s manje podataka za slanje putem mreže, web stranica se učitava brže nego prije. Niži trošak propusnosti: Kada se uklone nepotrebni podaci, potrebna je propusnost mnogo manja, a takav je i trošak.
Stvari koje treba zapamtiti:
Čak i prije pokušaja minificiranja, pobrinite se da vaš kôd ne prijeđe ograničenja. Tok se ne bi smio ometati, a funkcionalnost bi trebala ostati bez lica. Morate provjeriti da li se i nakon minifikacije vaš kôd izvodi na sličan način.
U stvari, kao najbolju praksu uvijek možete držati predložak spreman. Unesite promjene u ugrađeni predložak što će vam uštedjeti velikodušno vrijeme.
Je li slično kompresiji?
Pa, snažno NE. minifikacija se razlikuje od kompresije. Sažimanjem se smanjena datoteka smanjuje više, ali ne utječe na stil i strukturu koda.
Datoteka se umanjuje, a zatim komprimira u zip i šalje mrežom kada klijent zatraži pristup web mjestu. Datoteka se zatim nekomprimira i koristi.
Primjeri:
Prije minifikacije:
Portfelj
- Dom
Nakon minifikacije:
Portfelj
- Dom
Kod je definitivno teže pročitati i razumjeti za čovjeka, ali je podjednako vjerojatan i za stroj koji ga može prikazati. Stroj se zapravo ne brine za ljepotu koda i razmake, razumije bit i radi u skladu s tim.
Dovoljno ste impresionirani tehnikom minifikacije?
Zatim pokušajte sami. Smanjite teret svoje datoteke i dopustite da vaše web mjesto slobodno teče za sve korisnike!
Ovo nas dovodi do kraja ovog članka o Minify In CSS.
Ako vas zanima više o web-razvoju, pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja i rasporediti ih na Amazon Simple Storage Service (S3).
Ako ste i dalje zainteresirani Ako imate bilo kakvo pitanje, možete ga objaviti u odjeljku za komentare na ovom blogu 'Minify In CSS' i javit ćemo vam se u najkraćem mogućem roku.