See artikkel tutvustab teile teemat, mida nimetatakse minimeerimiseks ja annab teile selle käigus ka üksikasjaliku praktilise tutvustuse. Järgmisi näpunäiteid käsitletakse selles artiklis,
- Mis on minimeerimine?
- Miks on vaja minimeerimist?
- Kuidas minimeerida CSS-i, JS-i ja HTML-koodi?
- Millal peaksite seda tegema?
- Minimeerimise eelised?
Kuna nimi vihjab meile üsna hästi, tähendab minimeerimine faili suuruse minimeerimist. Koodibaasis on meil vabadus minimeerida HTML-, CSS- või Javascripti faile. Siin arutleme CSS-faili minimeerimise üle.
Arendaja kodeerimisel veendub ta, et kood on kõige loetavamas vormingus, et lihtsustada edasiste muudatuste tegemist. Niisiis, muutujate nimed on vormingus, mis on hõlpsasti arusaadav ja võtavad terve hulga märke. Seejärel lisavad nad ka piisavalt palju tühikuid, et see oleks piisavalt loetav.
Kuid kogu protsessi jooksul kipume lõdvendama stringe, et meie faili suurus suureneb, mis omakorda pikendab veebisaidi laadimisaega. Eriti veebisaitide puhul, millel on suur hulk funktsioone ja lisandmooduleid, muudab pikem koodibaas lihtsalt veebisaidi halvemaks.
Google'il on niikuinii piiratud vorming veebisaitide järjestamiseks oma otsingulehel optimaalse kasutajakogemuse põhjal, mida veebisaidid pakuvad. Mida paremini teie saiti laaditakse, seda paremini teie veebisait otsingulehel asetseb.
Kui mängus on nii palju, ei taha te, et teie kasutajad kannataksid saidi halva laadimisaja tõttu ja läheksid järgmise juurde. Seetõttu on koodi minimeerimine äärmiselt oluline.
Tegelikult teame veebisaidi koostamise ajal, mis koosneb maksimaalsest koodibaasist?
See kõik on seotud CSS-i, HTML-i ja Javascriptiga. Täna toimuv võistlus teie veebisaidi visuaalse väljanägemise nimel rõhutab CSS-faili palju ja mõistmata, et kasutame oma veebisaiti raskekoodiga.
Sisestused, minimeerimine ..
Selle artikliga edasi minimeerimine CSS-is
erinevus xml ja HTML vahel
Mis on minimeerimine ?
Minimeerimine võimaldab teil oma koodi eemaldada minimaalseks failimahuks, mis koodi ei mõjuta ja vähendab siiski faili suurust. Selle käigus saate eemaldada tarbetud tühikud ja märgid, mis ei mõjuta teie veebisaidi originaalsust. Koodis tuleks vältida järgmisi asju:
- Tühimärgid
- Uued reamärgid
- Blokeeri eraldajad
- Kommentaarid
- Muutujate nimede lühendamine
Need tegurid pole seotud teie veebisaidi käitamise muutmisega, vaid muudavad faili raskemaks ja pikendavad veebisaidi laadimisaega.
Koodi loetavus on täiesti välistatud sellest, mida masin mõistab. Veebibrauser ei vaja mõistmiseks ja käitamiseks tähemärkide vahel täiendavat tühikut. Niisiis, proovige neid vähendada ja CSS-i ja HTML-koodi minimeerida.
Võtame näite:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minimeeri minu CSS
Peaaegu 48% erinevus algses ja minimeeritud failis. Vähendatud 178 baiti. Pärast minimeerimist
#myContent {font-family: Arialfont-size: 90%}Tere, Maailm!
Selle artikliga edasi minimeerimine CSS-is
Miks on minimeerimine vaja?
Veebisaidi laadimisaja paremaks muutmiseks. Kellelegi ei meeldi mugavuse järgi veebisaidi laadimist oodata. Kuna saadaval on nii palju võimalusi, kipuvad inimesed üle minema teisele. Seega on parem faili suurust vähendada.
Selle artikliga edasi minimeerimine CSS-is
Kuidas sa minimeerida CSS, JS, HTML-kood?
Minimeerimiseks on veebis saadaval palju tööriistu, mis võivad aidata teil koodibaasi vähendada. Võite ka lubada seda käsitsi teha, kuid suurema koodibaasi jaoks on CSS-faili minimeerimiseks soovitatav kasutada mõnda järgmistest tööriistadest:
CSSminifier.com: Äärmiselt lihtne tööriist kasutada. Kopeerige lihtsalt vasakpoolne kood, genereerige minimeeritud fail ja laadige see alla. Minimeeritud failil on laiend .min.
Teie minimeeritud CSS-failil on laiend demo.min.css.
Smallseotools.com: kas kopeerige kood või laadige üles koodifail. See vähendab teie koodi ja võimaldab teil seda kopeerida või alla laadida.
Autoptimeerimine: see on pistikprogramm, mille saate oma WordPressi tööriistadesse lisada. Pistikprogrammina saate oma CSS-koodi minimeerida siis ja seal.
Arendajal on lihtsam aru saada, millal fail minimeeritakse ja millal mitte. Minimeeritud failil on laiend .min.
Selle artikliga edasi minimeerimine CSS-is
Millal peaksite seda tegema?
Minimeerimine peaks toimuma peamiselt siis, kui olete koodi kirjutanud ja peate selle vastuseks serverile saatma. Kui failid on minimeeritud, kasutatakse minimeeritud versioone kasutajatele levitamiseks.
Eelised minimeerimine ?
Faili suuruse vähendamine: lisaväljade eemaldamise, muutujate nimede vähendamise ja kommentaaride eemaldamise abil vähendatakse faili suurust peaaegu 30–60%. Kiirem laadimine: kui võrgu kaudu edastamiseks on vähem andmeid, laaditakse veebisait varasemast kiiremini. Madalam ribalaiuse hind: mittevajalike andmete eemaldamisel on vaja palju vähem ribalaiust ja ka kulusid.
Mida meeles pidada:
Isegi enne minimeerimise katset veenduge, et teie kood ei lõhuks piire. Voog ei tohiks häirida ja funktsionaalsus peaks jääma näotu. Peate kontrollima, kas ka pärast minimeerimist töötab teie kood sarnaselt.
Tegelikult saate malli alati hea praktikana hoida. Tehke sisseehitatud mallis muudatused, mis säästavad teile palju aega.
Kas see sarnaneb tihendamisega?
Noh, tugevalt EI. minimeerimine erineb kokkusurumisest. Tihendamine muudab minimeeritud faili vähendamise veelgi, kuid ei mõjuta koodi stiili ja struktuuri.
Fail minimeeritakse ja tihendatakse seejärel ZIP-failina ja saadetakse üle võrgu, kui klient taotleb veebisaidile juurdepääsu. Seejärel tihendatakse fail ja seda kasutatakse.
Näited:
Enne minimeerimist:
Portfell
- Kodu
Pärast minimeerimist:
Portfell
- Kodu
Kood on inimese jaoks kindlasti raskemini loetav ja arusaadav, kuid masina renderdamiseks on see sama usutav. Masin ei hooli tegelikult koodi ilust ja tühikutest, ta mõistab põhisisu ja töötab vastavalt sellele.
Minimeerimistehnika muljet piisavalt?
Seejärel proovige ise. Vähendage oma faili koormust ja laske oma veebisaidil vabalt liikuda kõigi kasutajate jaoks!
See viib meid selle artikli lõppu CSS-is Minify.
Kui soovite veebiarenduse kohta lisateavet saada, vaadake järgmist autor Edureka. Veebiarenduse sertifitseerimiskoolitus aitab teil õppida, kuidas luua muljetavaldavaid veebisaite HTML5, CSS3, Twitter Bootstrap 3, jQuery ja Google API-de abil ning juurutada see Amazon Simple Storage Service'i (S3).
Kui olete endiselt huvitatud, kui teil on küsimusi, võite selle postitada selle ajaveebi “Minify In CSS” kommentaaride jaotisesse ja võtame teiega esimesel võimalusel ühendust.