Kako optimizirati dostavo CSS – 7 preprostih korakov

css optimizacija vektorske slikeGotovo so minili dnevi, ko so strokovnjaki za oblikovanje in vodilni blogerji priporočali izdelavo spletnih strani največ 30 kilobajtov …


Takrat naj bi ta “pokrovček” obravnaval HTML, JavaScript, slike, CSS in Flash. Bodimo iskreni, ne potrebujete veliko, da popolnoma presežete 30 kb.

Ko sta JavaScript in CSS pridobila na priljubljenosti, je postalo običajno, da samo CSS presega zgornjo mejo 30 KB. To še posebej velja za večja spletna mesta.

Vendar pa pri gradnji in oblikovanju strani za svoje spletno mesto ne bi smeli biti preveč osredotočeni na svoje “kilobajtno število”. Pomembno je, da obdržite svoje strani optimiziran tesno pri pisanju CSS-ja.

Pri optimizaciji ne gre zgolj za zmanjšanje velikosti datotek. Gre za to, da vaše strani ostanejo brez nereda in nereda, da jih naredite čim bolj organizirane in učinkovite. Ko boste izvedeli več o najboljših praksah za optimizacijo CSS, boste ugotovili, da samodejno ustvarite manjše velikosti datotek.

Tu je 5 preprostih stvari, ki jih lahko storite, da takoj izboljšate svoj CSS.

Kako v celoti optimizirati dostavo CSS

1. Uporabite Skrajšavo

Pisanje s skrajšanimi rokami je postalo zelo pogosta praksa. To je daleč najpreprostejši način za zmanjšanje kode in koliko časa traja kodiranje. Če tega še ne počnete, ni časa, kot je sedanjost.

lastnost pisave css

Obstaja množica elementov, za katere lahko uporabite kratke roke, najpogostejši pa so:

  • Marža
  • Oblazinjenje
  • Pisava
  • Oris
  • Meja
  • Ozadje
  • Spisek

kratkoročne vrednosti configVrednosti lahko kombinirate tudi s kratkim rokom. Z določitvijo različnih vrednosti bo brskalnik v bistvu uporabil določen način za razlago pravil.

Uporaba kakršne koli kratice bo naredite svojo skupno kodo veliko bolj jedrnato. Shranjujete tako znake kot črte.

Če uporabite kratke roke na vseh možnih področjih, lahko to znatno zmanjša velikost celotne datoteke.

2. Znebite se kramp

torej pravilo cssČe želite uporabljati pravila za CSE, specifična za IE, vam s pomočjo pogojnih haksov CSS dajemo prednost manjši in čistejši privzeti datoteki CSS.

Pomaga pri brskalnikih, ki so bolj skladni s standardi. Vendar bodo dodatno težo strani prenesli le brskalniki, ki jo zahtevajo.

Če morate uporabiti kramp, je nujno, da je koda, ki jo uporabljate, značilna za različico Internet Explorerja, na katero ste osredotočeni..

Obstajajo številne vnaprej napisane kode, ki služijo kot hekerji, če ne želite napisati svoje. Vzemite si čas, da resnično pogledate vnaprej napisano kodo in se prepričate, ali je natančna ali pa bi to lahko povzročilo še večje težave.

Zdaj, če lahko s pomočjo CSS dobite želene rezultate, to storite brez kramp. Seveda je to odvisno od tega, da so vse ostale stvari enake. Vaša splošna koda bo veliko lažja in preprostejša, če na svojem spletnem mestu uporabljate manj kramp.

3. Bodite pametni glede uporabe Whitespacea

Za vašo kodo CSS, beli prostor je nujen za berljivost.

Whitespace vključuje elemente, kot so zavihki, presledki in dodatni prelomi vrstic. Vsak delček praznega prostora, ki ga lahko odstranite, je podoben izločitvi lika.

odstranite prazne vrsticeVendar pa zaradi manjše datoteke pogosto ni priporočljivo varčevati z belim prostorom. Še vedno morate ohraniti optimalno berljivost na svojih spletnih straneh.

Whitespace je pomemben za oblikovanje, zato želite najti ravnotežje. Če napišete v velike bloke besedilo, da odstranite nekaj praznega prostora, kratek razpon pozornosti bralcev na internetu jih bo oddaljil.

Eden od načinov za zagotovitev manjše velikosti datoteke in berljivosti je zarezovanje zavihkov in med odstavki samo eno vrstico. To zagotavlja dovolj beli prostor z vidika berljivosti, hkrati pa odpravlja nekaj tistega praznega prostora, ki ni potreben.

Zdaj lahko za proizvodno različico datoteke CSS odstranite belino. Še vedno bo prisoten v vaši delovni datoteki.

To je še en način za kompromis, tako da imate tako manjše datoteke kot berljivo oblikovanje.

4. Ponastavitve in okvirji slive

Ko uporabljate okvir CSS, morate nujno pregledati dokumentacijo.

Prav tako je pomembno, da si ogledate vsako posamezno vrstico v datoteki CSS. Včasih boste ugotovili, da v okviru obstajajo nekatera pravila, ki jih ne želite za svoj trenutni projekt. Te je mogoče odstraniti.

odstranjena neuporabljena pravila css

Morda boste ugotovili, da lahko predstavitvene podrobnosti dosežete na bolj jedrnat in eleganten način …

To običajno ne uporabljate, vendar če deluje, lahko to omogoči čistejši okvir. Ko veste za njih, vam to pomaga tudi, da se izognete nenamernemu podvajanju pravil.

Isti podatki veljajo tudi za resete. Ko uporabljate ponastavitve, pomagajo nevtralizirati privzeti slog brskalnika. Zdaj, če poznate spletno mesto, ki ga ustvarjate, ni redko najti določenih deklaracij, za katere veste, da ne boste potrebovali..

Na splošno na spletnem blogu jih verjetno ne boste uporabljali. Znebite se le tistega, kar ne potrebujete za določeno spletno mesto, ki ga gradite. Ti lahko zagotovite bolje optimizirano delo, če uporabljate niz pravil glede ponastavitve ali okvira.

Vendar v svojem privzetem stanju ne bi smeli biti sprejeti. Če želite, da so datoteke CSS berljive in vstavljene, si oglejte vsako izjavo posebej in zmanjšajte tiste, ki so nepotrebne.

5. V prihodnosti preverite svoj CSS

Css sintaksa

Še ena uporabna možnost za optimizacijo CSS: večino svojih pravil ločite od deklaracij za vašo postavitev.

Če je to mogoče, postavitev postavite svoji posamezni datoteki. Če ne, je vsaj koristno, če mu daste svoj odsek.

Konec koncev, pozicioniranje in lebdenje – ki so trenutne metode, ki uporabljajo CSS – niso bile mišljene kot orodje za postavitev.

Nekateri segajo daleč, ko pravijo, da so ti pravzaprav podobni tatvinam. Trenutno ni izvedljive alternative in upanje je, da ko se dogovorijo o standardih postavitve, začnejo dobivati ​​podporo brskalnikov..

Ko se ta podpora zgodi, ne bi smelo biti zelo težko zamenjati lastnosti škatlastega modela, ki so zaskočene, s tistimi, ki so namenjene postavitvam.

Prav zdaj najboljša izbira je, da z ustreznimi lastnostmi ravnate s postavitvijo. Običajno bo teža strani kondenzirana učinkoviteje kot uporaba omejenega nabora lastnosti, ki so trenutno na voljo za nadomestitev poizvedb.

6. Vedno hranite posodobljeno dokumentacijo o svojem delu

Ne glede na to, ali na spletnem mestu delate kot ekipa ali sami, je nujno, da spremljate vse, kar ste storili.

Na primer, sami lahko pozabite, kaj ste storili. Kot ekipa lahko nekdo nekaj stori in morda se ne zavedate, dokler ne spremenite, ki lahko povzročijo težave z različnimi elementi kode.

doda komentar cssPodvajanje kode povzroča veliko skrbi tako ekipam kot posameznim oblikovalcem, zlasti pri uporabi priljubljenih graditeljev spletnih strani. Wix, Squarespace in druga programska oprema za gradnjo spletnih mest so znani po podvajanju kode ali pa jo v celoti manjkajo iz svoje baze.

Uporaba vodičev za sloge in vodniki za označevanje so odločljiva izbira dokumentacije. Uporabite lahko tudi komentarje CSS, je še ena možnost, kar je lahko koristno za odsek dolgih elementov datotek CSS. Če jih postavite v vodnik za slog ali oznako, jim preprečite dodajanje velikosti datoteke.

Eden od najhitrejših načinov prekrivanja kode je, če dvakrat opravite isto delo. Kodiranje je zapleteno, zato je treba nujno voditi natančno dokumentacijo o vsem, kar ste storili.

Če delate sami, je idealno, da pregledate to dokumentacijo vsakič, ko sedite, da začnete delati. Ko delate v skupini, se prepričajte, da vsi šifrirajo v istem dokumentu spoštuje slog skupnosti ali vodnik za označevanje tako da spremembe v kodiranju zlahka razumejo vsi v skupini.

7. Stisnite datoteke (CSS Optimization 101)

css stiskanje in optimizacija gif

Stiskanje: v tem je nekaj več kot to…

Eden od učinkovitih načinov za optimizacijo CSS je uporaba kompresije. Tako lahko zagotovite, da so vaše datoteke prijazne do brskalnika, čeprav jih ljudje ne berejo.

V primerjavi z delovnimi kopijami bo to le delček velikosti. Obstajajo različne aplikacije, ki jih lahko izkoristite za lažji postopek stiskanja.

Te bodo opravile naloge, kot so iskanje in popravljanje lastnosti CSS, ki se prepisujejo med seboj, stiskanje belega prostora in iskanje možnosti za uporabo kratice CSS.

Poleg praktičnosti teh aplikacij vam lahko pomagajo tudi, če želite, da izveste več o nalogah, ki jih lahko opravljate ročno. Za oblikovanje datotek CSS lahko uporabite tudi različne urejevalnike besedil.

Prikažejo lahko zip različice različnih datotek CSS, ki jih imate. To se običajno izvaja s PHP. Če želite uporabiti orodja za optimizacijo in stiskanje, preverite več možnosti, preden izberete pravo za vas.

Zdaj so te aplikacije na splošno dobre pri zmanjševanju napak, vendar niso popolne. Zaradi tega morate vedno uporabljati CSS po uporabi aplikacije, da zagotovite natančnost. Koda, ki je optimizirana in čista, je ključnega pomena za velikost datoteke, pa tudi za berljivost in vzdrževanje.

Ti si na vrsti

Tu obravnavana načela so trdna vprašanja za CSS, pa tudi za JavaScript, HTML in druge programske jezike. V primerjavi z upodabljanjem vašega spletnega mesta datoteke CSS niso tako vidne za končnega uporabnika.

Vendar tukaj obravnavana načela pomagajo tako pri razvijanju kot uporabniški izkušnji.

Večina dobrih podjetij za spletno gostovanje vam bo pomagala pri optimizaciji CSS. Hitrejša spletna mesta vas osrečujejo, manjše datoteke pa tudi manj stremijo na njihove strežnike.

Preizkusili smo vsakega od kanadskih spletnih gostiteljev in priporočamo SiteGround. Ne samo, da vam pomagajo optimizirati prikazovanje CSS-jev, temveč je njihova tehnična podpora neprimerljiva.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector