Tässä artikkelissa esitellään aihe nimeltä Minify In ja antaa sinulle prosessissa myös yksityiskohtaisen käytännön esittelyn. Seuraavat vihjeet käsitellään tässä artikkelissa,
- Mikä on pienentäminen?
- Miksi minifiointia tarvitaan?
- Kuinka minimoidaan CSS, JS, HTML-koodi?
- Milloin sinun pitäisi tehdä se?
- Minimoinnin edut?
Koska nimi viittaa meihin melko hyvin, pienentäminen tarkoittaa tiedoston koon pienentämistä. Koodipohjassa meillä on vapaus minimoida HTML-, CSS- tai Javascript-tiedostot. Tässä keskustelemme CSS-tiedoston pienentämisestä.
Kun kehittäjä koodaa, hän varmistaa, että koodi on parhaiten luettavassa muodossa yksinkertaistaakseen kaikki muut muutokset. Joten muuttujien nimet ovat helposti ymmärrettävässä muodossa ja vievät paljon merkkejä. Sitten he lisäävät myös hyvän määrän tyhjää väliä, jotta se olisi riittävän luettavissa.
Mutta koko prosessissa meillä on taipumus löysätä merkkijonoja, joiden tiedostokoko kasvaa, mikä puolestaan lisää verkkosivuston latausaikaa. Varsinkin verkkosivustojen kanssa, joilla on suuri joukko toimintoja ja lisäosia, pidempi koodipohja vain pahentaa verkkosivustoa.
Googlella on joka tapauksessa rajoitettu muoto verkkosivujen sijoittamiseksi hakusivulleen verkkosivustojen tarjoaman optimaalisen käyttökokemuksen perusteella. Mitä paremmin sivustosi latautuu, sitä paremmin verkkosivustosi sijoittuu hakusivulle.
Koska pelissä on niin paljon, et halua, että käyttäjät kärsivät huonosta sivuston latausaikasta ja siirtyvät seuraavaan. Siksi koodin pienentäminen on erittäin tärkeää.
Tosiasiassa, kun rakennamme verkkosivustoa, tiedämme, mikä koostuu koodin enimmäiskannasta?
Kyse on CSS: stä, HTML: stä ja Javascriptista. Kilpailu, jonka tarkoituksena on tehdä verkkosivustoltasi visuaalisesti houkutteleva, korostaa CSS-tiedostoa paljon ja tajuamatta, että käytämme verkkosivustoamme raskaalla koodilla.
Sisäänpääsyt, vähennys ..
Siirrytään tähän artikkeliin Minify CSS
Mikä on minimointi ?
Pienentämisen avulla voit poistaa koodisi pienimmälle tiedostokoolle, mikä ei vaikuta koodiin ja pienentää tiedostokokoa. Voit prosessin aikana poistaa tarpeettomat välit ja merkit, jotka eivät missään tapauksessa vaikuta verkkosivustosi omaperäisyyteen. Muutamia asioita, joita tulisi välttää koodista, ovat:
- Välilyönnit
- Uudet rivimerkit
- Estä erotimet
- Kommentit
- Lyhennetään muuttujien nimiä
Nämä tekijät eivät liity verkkosivustosi suorittamiseen, vaan vain tekevät tiedostosta painavamman ja pidentävät verkkosivuston latausaikaa.
Koodin luettavuus on täysin poissa koneen ymmärtämistä. Web-selain ei tarvitse ylimääräistä väliä merkkien välillä ymmärtämiseksi ja suorittamiseksi. Joten yritä vähentää niitä ja minimoida CSS ja HTML-koodi.
Otetaan esimerkki:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minimoi CSS
Lähes 48% ero alkuperäisessä ja pienennetyssä tiedostossa. Vähennetty 178 tavulla. Minimoinnin jälkeen
#myContent {font-family: Arialfont-size: 90%}Hei maailma!
Siirrytään tähän artikkeliin Minify CSS
Miksi on minimointi tarvittu?
Verkkosivuston latausaikojen parantamiseksi. Kukaan ei tykkää odottaa verkkosivuston lataamista mukavuuden mukaan. Koska käytettävissä on niin paljon vaihtoehtoja, ihmiset pyrkivät vaihtamaan toiseen. Joten on parempi pienentää tiedostokokoa.
Siirrytään tähän artikkeliin Minify CSS
Miten sinä minimoida CSS, JS, HTML-koodi?
Pienentämiseksi verkossa on useita työkaluja, jotka voivat auttaa sinua vähentämään koodipohjaa. Voit myös tehdä sen manuaalisesti, mutta suuremman koodipohjan saamiseksi on suositeltavaa käyttää mitä tahansa seuraavista työkaluista CSS-tiedoston minimoimiseksi:
CSSminifier.com: Erittäin yksinkertainen työkalu käyttää. Kopioi vain koodi vasemmalla puolella, luo pienennetty tiedosto ja lataa se. Pienennetyn tiedoston laajennus on .min.
Minimoidun CSS-tiedostosi laajennus on demo.min.css.
Smallseotools.com: Joko kopioi koodi tai lähetä kooditiedosto. Se minimoi koodisi ja antaa sinun kopioida sen tai ladata sen.
Autoptimointi: Tämä on laajennus, jonka voit lisätä WordPress-työkaluihisi. Laajennuksena voit halutessasi minimoida CSS-koodisi silloin ja sitten.
Kehittäjän on helpompi ymmärtää, milloin tiedosto on pienennetty ja milloin ei. Pienennetyllä tiedostolla on .min-laajennus.
Siirrytään tähän artikkeliin Minify CSS
Milloin sinun pitäisi tehdä se?
Pienentäminen on tehtävä ensisijaisesti, kun olet kirjoittanut koodin ja sinun on lähetettävä se palvelimelle vastausta varten. Kun tiedostot on pienennetty, jaettuja versioita käytetään jakamiseen käyttäjille.
Edut minimointi ?
Tiedoston koon pienentäminen: Poistamalla ylimääräinen väli, pienentämällä muuttujien nimiä ja poistamalla kommentit, tiedostokoko pienenee melkein 30-60%. Nopeampi lataus: Verkon kautta lähetettävää dataa on vähemmän, joten verkkosivusto latautuu nopeammin kuin ennen. Pienemmät kaistanleveyskustannukset: Kun tarpeettomat tiedot poistetaan, tarvittava kaistanleveys on paljon pienempi ja samoin kustannukset.
Muistettavaa:
Jopa ennen pienentämistä, varmista, että koodisi ei riko rajoja. Virtauksen ei pitäisi häiriintyä ja toiminnallisuuden tulisi pysyä kasvottomana. Sinun on tarkistettava, että koodisi toimii samalla tavalla myös pienentämisen jälkeen.
Itse asiassa parhaana käytäntönä voit aina pitää mallin valmiina. Tee muutokset sisäänrakennettuun malliin, mikä säästää runsaasti aikaa.
Onko se samanlainen kuin puristus?
ero hash-kartan ja hash-taulukon välillä
No, voimakkaasti EI. pienentäminen on erilainen kuin pakkaaminen. Pakkaus saa pienennetyn tiedoston vähentämään enemmän, mutta ei vaikuta koodin tyyliin ja rakenteeseen.
Tiedosto pienennetään ja pakataan sitten zip-tiedostona ja lähetetään verkon kautta, kun asiakas pyytää pääsyä verkkosivustolle. Sitten tiedosto puretaan ja sitä käytetään.
Esimerkkejä:
Ennen pienentämistä:
Salkku
- Koti
Minimoinnin jälkeen:
Salkku
- Koti
Koodia on ehdottomasti vaikeampaa lukea ja ymmärtää ihmiselle, mutta se on yhtä uskottava koneen renderöimiseksi. Kone ei välitä oikeastaan koodin kauneudesta ja välistä, se ymmärtää sisällön ja toimii sen mukaisesti.
Vaikuttanut tarpeeksi minimointitekniikalla?
Kokeile sitten itse. Vähennä tiedostosi taakkaa ja anna verkkosivustosi virrata vapaasti kaikille käyttäjille!
Tämä vie meidät tämän Minify In CSS -artikkelin loppuun.
Jos haluat oppia lisää verkkokehityksestä, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.
Jos olet edelleen kiinnostunut Jos sinulla on kysyttävää, voit lähettää sen tämän Minify In CSS -blogin kommenttiosioon, ja otamme sinuun yhteyttä mahdollisimman pian.