CSS-edastuse optimeerimine – 7 lihtsat sammu

css optimeerimise vektorpiltMöödas on päevad, mil disainieksperdid ja valdkonna juhtivad blogijad soovitasid veebisaite üles ehitada mitte rohkem kui 30 kilobaiti …


Toona eeldati, et see “kork” haldab HTML-i, JavaScripti, pilte, CSS-i ja Flashi. Olgem ausad, 30 kb täielikuks ületamiseks pole vaja palju.

Kuna JavaScripti ja CSSi populaarsus tõusis, muutus tavaliseks, et ainuüksi CSS ületas 30KB ülemmäära. See kehtib eriti suuremate veebisaitide kohta.

Siiski ei tohiks oma veebisaidi lehtede loomisel ja kujundamisel keskenduda vaid kilobaitide arvule. Oluline on oma lehti hoida optimeeritud ja CSS-i kirjutamisel tihe.

Optimeerimine ei tähenda ainult failide suuruse minimeerimist. See seisneb selles, et teie lehed oleksid rämpsust ja paisumisest vabad, muutes need võimalikult korraldatud ja tõhusaks. CSS-i optimeerimise parimate tavade kohta lisateabe saamisel leiate, et loote automaatselt väiksemate failide suurused.

Siin on 5 lihtsat toimingut, mida saate oma CSS-i optimeerimiseks praegu teha.

Kuidas CSS-edastust täielikult optimeerida

1. Kasutage kiirkirja

Lühikesest kirjutamisest on saanud väga tavaline tava. See on kaugelt kõige lihtsam viis oma koodi vähendamiseks ja kui kaua see teie koodini võtab. Kui te seda veel ei tee, pole praegu sellist aega nagu praegu.

css fondi vara

On olemas palju elemente, mille jaoks võite kasutada kiirjärjestust, kuid kõige levinumad on järgmised:

  • Marginaal
  • Polsterdamine
  • Font
  • Kontuur
  • Piir
  • Taust
  • Loendi stiil

stenografiseeritud väärtusedVäärtusi saab kombineerida ka otsetee abil. Erinevate väärtuste täpsustamisel kasutab brauser reeglite tõlgendamiseks põhimõtteliselt määratletud viisi.

Mis tahes lühikese tahte kasutamine muuda oma üldine kood palju sisutihedamaks. Salvestate nii märke kui ka jooni.

Kui kasutate lühendit kõigil võimalikel aladel, võib see faili üldist mahtu dramaatiliselt vähendada.

2. Vabanege häkkidest

st css-reegelIE-spetsiifiliste CSS-i reeglite teenindamiseks annab tingimuslike CSS-häkkide kasutamine teile eelise väiksema ja puhtama CSS-faili esitamisel.

See aitab standarditele vastavate brauseritega. Täiendava lehekaalu laadivad alla ainult brauserid, kes seda vajavad.

Kui peate kasutama häkki, on oluline, et kasutatav kood oleks spetsiifiline selle Internet Exploreri versiooniga, millele keskendute.

Seal on palju eelnevalt kirjutatud koode, mis toimivad häkkidena, kui te ei soovi oma kirjutada. Võtke lihtsalt aega, et vaadata eelnevalt kirjutatud koodi ja veenduda selle täpsuses vastasel juhul võib see põhjustada veelgi rohkem probleeme.

Kui nüüd saate soovitud tulemuste saamiseks kasutada CSS-i, siis tehke seda ilma häkkideta. Muidugi sõltub see sellest, kas kõik muud asjad on võrdsed. Teie üldine kood on palju kergem ja lihtsam, kui kasutate oma saidil vähem häkke.

3. Olge tühja ruumi kasutamisel tark

Teie CSS-koodi jaoks, tühik on kohustuslik loetavuse huvides.

Valge ruum sisaldab elemente, nagu vahelehed, tühikud ja täiendavad reavahetused. Iga tühik, mille olete võimeline kõrvaldama, sarnaneb märgi eemaldamisega.

eemaldage tühjad readKuid väiksema faili huvides ei soovitata sageli tühimikku nühkida. Peate siiski oma veebilehtedel optimaalset loetavust säilitama.

Valge täht on vormindamisel oluline, nii et soovite leida tasakaalu. Kui kirjutate suurte tühikutena teksti, et tühimikku tühistada, Interneti lugejate lühike tähelepanuulatus paneb nad klõpsu minema.

Üks võimalus nii väiksema failisuuruse kui ka loetavuse tagamiseks on vahelehtede kraavimine ja lõikude vahele vaid ühe rea asetamine. See annab loetavuse seisukohast piisavalt tühikut, kuid ühtlasi kaob selle osa tühimikust, mis pole vajalik.

Nüüd saate oma CSS-faili tootmisversiooni tühimiku eemaldada. See on endiselt teie tööfailis olemas.

See on veel üks viis kompromisside tegemiseks, nii et teil on nii väiksemad failid kui ka loetav vorming.

4. Ploomide lähtestamine ja raamistikud

Kui kasutate CSS-i raamistikku, peate dokumendid kindlasti üle vaatama.

Sama oluline on vaadata iga rida, mis asub teie CSS-failis. Mõnikord võite avastada, et raamistikus on mõned reeglid, mida te ei soovi oma praeguse projekti jaoks. Neid saab eemaldada.

eemaldas kasutamata css-reeglid

Võib juhtuda, et saate esitluse üksikasjad saavutada kokkuvõtlikumalt ja elegantsemalt …

Tavaliselt ei pruugita seda tavaliselt kasutada, kuid kui see töötab, võib see võimaldada puhtamat raamistikku. Neist teada saades aitab see vältida ka reeglite tahtmatut dubleerimist.

Sama teave kehtib ka lähtestamise kohta. Kui kasutate lähtestamisi, aitavad need brauseri vaikestiili neutraliseerida. Kui olete loodud veebisaidiga tuttav, pole harvad juhud, kui leiate teatud deklaratsioone, mille kohta teate, et te ei vaja.

Näiteks üldises ajaveebis te neid tõenäoliselt ei kasuta. Vabanege kõigest, mida te konkreetsel ehitataval saidil vaja pole. Sa saad tagage reeglite komplekti kasutamisel parem optimeeritud töö lähtestamise või raamistiku osas.

Vaikimisi ei tohiks neid siiski aktsepteerida. CSS-failide loetavuse ja lahuse hoidmiseks vaadake iga deklaratsiooni eraldi ja vähendage mittevajalikke.

5. Teie CSS-i tulevikukindlus

Css-süntaks

Veel üks kasulik CSS-i optimeerimise võimalus: eraldage suurem osa reeglitest paigutuspõhistele deklaratsioonidele.

Kui see on võimalik, määrake paigutus oma individuaalsele failile. Kui ei, siis on vähemalt kasulik oma osa anda.

Lõppkokkuvõttes positsioneerimine ja ujukid – mis on praegused meetodid CSS-i kasutamisel – ei olnud mõeldud paigutusvahenditena.

Mõned lähevad isegi öelda, et need on tegelikult sarnased paigutuse häkkidega. Praegu pole ühtegi toimivat alternatiivi ja loodetakse, et kui kokkulepitud paigutusstandardid toimuvad, hakkavad nad brauseritest tuge saama..

Kui see tugi on toimunud, ei tohiks olla väga keeruline vahetada välja kasti mudeli atribuute, mida häkkitakse paigutustele mõeldud omaduste vastu..

Praegu on parim valik on hallata oma paigutust, kasutades õigeid atribuute. Tavaliselt koondab see lehe massi tõhusamalt, kui kasutada veidike kompenseerimiseks praegu saadaval olevat piiratud omaduste komplekti.

6. Hoidke oma töö kohta alati värskendatud dokumentatsiooni

Ükskõik, kas töötate veebisaidil meeskonnana või üksi, on hädavajalik jälgida kõike, mida olete teinud.

Näiteks võite üksi unustada midagi, mida olete teinud. Meeskonnana võib keegi midagi ette võtta ja te ei pruugi olla teadlik enne, kui teete muudatusi, mis võivad põhjustada probleeme koodi erinevate elementidega.

css-kommentaari lisamineKoodide dubleerimine on nii meeskondade kui ka üksikute disainerite jaoks suur murekoht, eriti populaarsete veebisaitide koostajate kasutamisel. Wix, Squarespace ja muu veebisaitide tarkvara on teada, et kood dubleerib või on selle andmebaasist täielikult puudu.

Stiililehtede juhendite ja märgistusjuhendite kasutamine on mõistlikud dokumenteerimisvalikud. Teine võimalus on kasutada ka CSS-i kommentaare ja see võib olla kasulik pikkade CSS-failide elementide jaotamiseks. Kui asetate need stiili- või märgistusjuhendisse, ei saa nad faili suurust lisada.

Üks kiireimaid viise koodi puhkemiseks on sama töö kaks korda tegemine. Kodeerimine on keeruline, seetõttu on hädavajalik, et kõik teie tehtud toimingud oleksid täpsed.

Kui töötate üksi, on ideaalne, et töö alustamiseks tuleks see dokumentatsioon üle vaadata iga kord, kui istute. Meeskonnas töötades veenduge, et kõik kodeeriksid samas dokumendis järgib kogukonna stiili või märgistusjuhendit nii et kodeerimismuudatused oleksid kõigile rühma liikmetele hõlpsasti arusaadavad.

7. Tihendage oma failid (CSS Optimization 101)

css tihendamine ja optimeerimine gif

Tihendamine: selles on natuke rohkem kui see …

Üks tõhus viis CSS-i optimeerimiseks on tihendamine. See on viis tagada, et teie failid on brauserisõbralikud, isegi kui need pole inimestele loetavad.

Võrreldes töökoopiatega on need vaid murdosa suurusest. Pakkeprotsessi lihtsustamiseks võite kasutada erinevaid rakendusi.

Need täidavad ülesandeid, näiteks otsivad ja parandavad kõik CSS-i atribuudid, mis üksteist üle kirjutavad, tihendavad tühiku ja otsivad võimalusi CSS-i kasutamiseks.

Lisaks nende rakenduste mugavusele saavad need aidata teil saada lisateavet nende ülesannete kohta, mida saate soovi korral käsitsi teha. CSS-failide vormindamiseks võite kasutada ka erinevaid tekstiredaktorit.

Nad võivad teenindada teie pakutavate erinevate CSS-failide ZIP-versioone. Tavaliselt tehakse seda PHP abil. Kui soovite kasutada tööriistu optimeerimist ja tihendamist, lugege enne enda jaoks sobiva valiku valimist üle mitu võimalust.

Nüüd on need rakendused vigade minimeerimiseks üldiselt head, kuid need pole täiuslikud. Seetõttu peaksite pärast rakenduse kasutamist oma CSS-i alati üle vaatama, et tagada täpsus. Optimeeritud ja puhas kood on oluline nii faili suuruse kui ka loetavuse ja hoolduse jaoks.

Sinu kord

Siin käsitletud põhimõtted on CSS-i, aga ka JavaScripti, HTML-i ja muude programmeerimiskeelte olulised kaalutlused. Võrreldes teie veebisaidi renderdamisega pole CSS-failid lõpptarbija jaoks nii silmapaistvad.

Siin käsitletavad põhimõtted aitavad aga arendada nii arenemiskogemust kui ka kasutajakogemust.

Enamik häid veebimajutusettevõtteid aitab teid CSS-i optimeerimisel. Kiiremad veebisaidid muudavad teid õnnelikuks kliendiks, kuid ka väiksemad failid on nende serveritele vähem koormavad.

Oleme testinud kõiki Kanada veebimajutajaid ja soovitame SiteGroundi. Need mitte ainult ei aita teil CSS-edastust optimeerida, vaid nende tehniline tugi on võrratu.

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

About the author

Adblock
detector