Kā optimizēt CSS piegādi – 7 vienkārši soļi

CSS optimizācijas vektora attēlsIr pagājuši tie laiki, kad dizaina eksperti un nozares vadošie emuāru autori ieteica mājas lapu veidošanu ne vairāk kā 30 kilobaitos…


Toreiz bija paredzēts, ka šis “vāciņš” tiks apstrādāts ar HTML, JavaScript, attēliem, CSS un Flash. Godīgi sakot, nav nepieciešams daudz, lai pilnībā pārsniegtu 30 kb.

Tā kā JavaScript un CSS ieguva popularitāti, kļuva ierasts, ka tikai CSS pārsniedza 30 KB robežu. Īpaši tas attiecas uz lielākām vietnēm.

Veidojot un veidojot savas vietnes lapas, jums nevajadzētu pārāk koncentrēties uz savu “kilobaitu skaitu”. Ir svarīgi saglabāt savas lapas optimizēts un stingri, rakstot savu CSS.

Optimizēšana nav tikai failu minimizēšana. Tas ir saistīts ar to, lai jūsu lapas nebūtu nekārtības un neuzpūtības, padarot tās pēc iespējas sakārtotākas un efektīvākas. Uzzinot vairāk par CSS optimizācijas paraugpraksi, jūs atradīsit, ka automātiski izveidojat mazākus failu izmērus.

Šeit ir 5 vienkāršas darbības, kuras varat darīt, lai optimizētu CSS.

Kā pilnībā optimizēt CSS piegādi

1. Izmantojiet saīsni

Īsa rakstīšana ir kļuvusi par ļoti izplatītu praksi. Šis ir līdz šim vienkāršākais veids, kā samazināt kodu un cik ilgs laiks jums nepieciešams koda ievadīšanai. Ja jūs to vēl nedarāt, nav tāda laika kā tagadējais.

css fonta īpašums

Ir daudz elementu, kuriem varat izmantot saīsinājumus, bet visbiežāk sastopamie ir šādi:

  • Marža
  • Polsterējums
  • Fonts
  • Kontūra
  • Robeža
  • Pamatinformācija
  • Saraksta stils

saīsinātās konfigurācijas vērtībasVarat arī apvienot vērtības, izmantojot saīsinājumu. Norādot dažādas vērtības, pārlūks būtībā izmantos noteiktu veidu, kā interpretēt noteikumus.

Izmantojot jebkuru saīsinājumu padarīt kopējo kodu daudz kodolīgāku. Jūs saglabājat gan rakstzīmes, gan līnijas.

Ja izmantojat saīsinājumus visos iespējamos apgabalos, tas var dramatiski samazināt kopējo faila lielumu.

2. Atbrīvojieties no hakiem

ti, css noteikumsLai apkalpotu IE specifiskus CSS noteikumus, izmantojot nosacītus CSS hakerus, tiek sniegta priekšrocība, ja tiek rādīts mazāks un tīrāks CSS noklusējuma fails..

Tas palīdz pārlūkprogrammām, kuras vairāk atbilst standartiem. Tomēr papildu lapas svaru lejupielādēs tikai tie pārlūkprogrammas, kuriem tas ir nepieciešams.

Ja jums ir jāizmanto hakeri, ir obligāti, lai jūsu izmantotais kods būtu specifisks Internet Explorer versijai, uz kuru koncentrējaties..

Ir daudz iepriekš rakstītu kodu, kas kalpo kā hacks, ja nevēlaties rakstīt pats. Nepieciešams laiks, lai tiešām apskatītu iepriekš uzrakstīto kodu un pārliecinātos, ka tas ir pareizs citādi tas varētu radīt vēl vairāk problēmu.

Tagad, ja varat izmantot CSS, lai iegūtu vēlamos rezultātus, dariet to bez jebkādiem hackiem. Protams, tas ir atkarīgs no tā, vai visas pārējās lietas ir vienādas. Jūsu kopējais kods būs daudz vieglāks un vienkāršāks, ja savā vietnē izmantosit mazāk hakeru.

3. Esiet pārdomāts par atstarpes izmantošanu

Jūsu CSS kodam, atstarpe ir obligāta lasāmībai.

Baltajā telpā ietilpst tādi elementi kā cilnes, atstarpes un papildu līniju pārtraukumi. Katrs atstarpe, kuru jūs varat novērst, ir līdzīga rakstzīmes likvidēšanai.

noņemiet tukšās līnijasTomēr mazāka faila dēļ bieži vien nav ieteicams pārvietoties uz atstarpi. Jums joprojām ir jāuztur optimāla lasāmība savās tīmekļa lapās.

Atstarpe ir svarīga formatēšanai, tāpēc vēlaties atrast līdzsvaru. Ja rakstāt lielos blokos, lai tekstu aizpildītu, atstājiet atstarpi, īsa lasītāju uzmanība internetā liks viņiem noklikšķināt.

Viens veids, kā nodrošināt gan mazāku faila lielumu, gan lasāmību, ir nolaist cilnes un starp rindkopām ievietot tikai vienu rindu. Tas no lasāmības viedokļa nodrošina pietiekamu atstarpi, bet arī izslēdz daļu no šī atstarpes, kas nav nepieciešama.

Tagad CSS faila ražošanas versijai varat noņemt atstarpi. Tas joprojām būs jūsu darba failā.

Šis ir vēl viens veids, kā panākt kompromisu, lai jums būtu gan mazāki faili, gan lasāms formatējums.

4. Plūmju atjaunošana un ietvari

Kad jūs izmantojat CSS sistēmu, noteikti pārskatiet dokumentāciju.

Tikpat svarīgi ir apskatīt katru rindiņu, kas atrodas jūsu CSS failā. Dažreiz jūs atklāsit, ka sistēmā ir daži noteikumi, kurus jūs nevēlaties pašreizējam projektam. Tos var noņemt.

noņemti neizmantotie css noteikumi

Varētu secināt, ka prezentācijas detaļas var sasniegt kodolīgāk un eleganti …

Iespējams, tas nav tas, ko jūs parasti izmantojat, bet, ja tas darbojas, tas var ļaut tīrāku sistēmu. Kad jūs par tiem zināt, tas arī palīdz izvairīties no netīšas noteikumu kopiju dublēšanās.

Tāda pati informācija attiecas arī uz atiestatījumiem. Kad izmantojat atiestatīšanu, tie palīdz neitralizēt pārlūka noklusējuma stilu. Tagad, ja esat pazīstams ar izveidoto vietni, nav nekas neparasts atrast noteiktas deklarācijas, kurās zināt, ka jums tas nav vajadzīgs.

Piemēram, vispārīgā emuārā jūs tos, visticamāk, neizmantojat. Atbrīvojieties no visa, kas jums nepieciešams konkrētajā vietnē, kuru veidojat. Jūs varat nodrošinot labāku optimizētu darbu, kad izmantojat noteikumu kopumu attiecībā uz atiestatīšanu vai ietvaru.

Tomēr noklusējuma stāvoklī tos nevajadzētu pieņemt. Lai CSS faili būtu lasāmi un tievi, apskatiet katru deklarāciju atsevišķi un samaziniet nevajadzīgās.

5. Jūsu CSS nākotnes pārbaude

Css sintakse

Vēl viena noderīga CSS optimizācijas opcija: atdaliet lielāko daļu noteikumu no izkārtojumam raksturīgajām deklarācijām.

Piešķiriet izkārtojumu atsevišķam failam, ja tas ir iespējams. Ja nē, tad vismaz sava sadaļas piešķiršana var būt izdevīga.

Galu galā pozicionēšana un pludiņi – kas ir pašreizējās metodes, izmantojot CSS – nebija domāti kā izkārtojuma rīki.

Daži pat apgalvo, ka tie patiesībā ir līdzīgi hacks izkārtojumiem. Pašlaik nav dzīvotspējīgas alternatīvas, un jācer, ka pēc vienošanās par izkārtojuma standartiem viņi sāk saņemt atbalstu no pārlūkprogrammām..

Tiklīdz šis atbalsts ir noticis, nevajadzētu būt ļoti sarežģītam, lai aizstātu kastes modeļa rekvizītus, kas tiek uzlauzti attiecībā uz izkārtojumiem paredzētajiem..

Šobrīd labākā izvēle ir rīkoties ar izkārtojumu, izmantojot pareizās īpašības. Tas parasti saīsina lapas svaru daudz efektīvāk nekā ierobežotā īpašību kopuma izmantošana, kas pašlaik pieejama, lai kompensētu quirks.

6. Vienmēr saglabājiet atjauninātu dokumentāciju par savu darbu

Neatkarīgi no tā, vai strādājat tīmekļa vietnē kā komanda vai viens pats, noteikti sekojiet līdzi visam, ko esat paveicis.

Piemēram, viens pats var aizmirst kaut ko izdarītu. Kā komanda kāds var kaut ko darīt, un jūs, iespējams, nezināt, kamēr neesat veicis izmaiņas, kas var izraisīt problēmas ar dažādiem koda elementiem.

pievienojot css komentāruKoda kopēšana rada lielas bažas gan komandām, gan individuālajiem dizaineriem, it īpaši, ja tiek izmantoti populāri vietņu veidotāji. Wix, Squarespace un cita vietņu veidošanas programmatūra ir ir zināms par koda kopēšanu vai tā pilnīgu neesamību viņu datu bāzē.

Stila lapu un iezīmēšanas rokasgrāmatu izmantošana ir reāla dokumentācijas izvēle. Vēl viena iespēja ir izmantot CSS komentārus, un tas var būt noderīgi, lai sadalītu ilgos CSS failu elementus. Ievietojot tos stila vai marķējuma rokasgrāmatā, tiek liegts pievienot faila lielumu.

Viens no ātrākajiem koda uzpūšanās veidiem ir to pašu darbu veikt divreiz. Kodēšana ir sarežģīta, tāpēc obligāti jāsaglabā precīza visu izdarīto dokumentācija.

Ja strādājat vienatnē, ir ideāli pārskatīt šo dokumentāciju katru reizi, kad sēžat, lai sāktu strādāt. Strādājot komandā, pārliecinieties, vai visi kodē vienā dokumentā ievēro kopienas stila vai iezīmēšanas rokasgrāmatu lai kodēšanas izmaiņas būtu viegli saprotamas visiem grupas dalībniekiem.

7. Saspiest failus (CSS Optimization 101)

CSS saspiešana un optimizācija

Kompresija: tajā ir mazliet vairāk nekā šajā…

Viens efektīvs veids, kā optimizēt CSS, ir saspiešanas izmantošana. Tas ir veids, kā nodrošināt, ka jūsu faili ir draudzīgi pārlūkam, kaut arī tie nav lasāmi cilvēkiem.

Salīdzinot ar darba kopijām, tās būs tikai neliela izmēra. Ir dažādas lietojumprogrammas, kuras varat izmantot, lai atvieglotu saspiešanas procesu.

Tie veiks uzdevumus, piemēram, atradīs un novērsīs CSS rekvizītus, kas tiek pārrakstīti, saspiežot balto laukumu un meklējot iespējas izmantot CSS saīsinājumus.

Papildus šo lietojumprogrammu ērtībai tie var arī palīdzēt jums uzzināt vairāk par uzdevumiem, kurus varat veikt ar roku, ja vēlaties. Lai palīdzētu formatēt CSS failus, varat izmantot arī dažādus teksta redaktorus.

Viņi var apkalpot dažādu jūsu CSS failu zip versijas. Parasti to veic, izmantojot PHP. Ja vēlaties izmantot rīku optimizēšanu un saspiešanu, pirms izvēlaties sev piemērotāko, noteikti pārskatiet vairākas iespējas.

Tagad šīs lietojumprogrammas parasti labi samazina kļūdas, taču tās nav perfektas. Tādēļ pēc lietojumprogrammas izmantošanas vienmēr vajadzētu pārskatīt CSS, lai nodrošinātu precizitāti. Optimizēts un tīrs kods ir kritisks ne tikai faila lielumam, bet arī lasāmībai un uzturēšanai.

Tava kārta

Šeit aplūkotie principi ir svarīgi CSS apsvērumi, kā arī JavaScript, HTML un citas programmēšanas valodas. Salīdzinot ar jūsu vietnes renderēšanu, CSS faili nav tik pamanāmi galalietotājam.

Tomēr šeit apspriestie principi palīdz gan attīstīt, gan uzlabot lietotāju pieredzi.

Lielākā daļa labu tīmekļa mitināšanas uzņēmumu palīdzēs jums optimizēt CSS. Ātrākas vietnes padara jūs par laimīgu klientu, taču arī mazāki faili mazāk noslogo viņu serverus.

Mēs esam pārbaudījuši katru Kanādas tīmekļa mitinātāju un iesakām vietni SiteGround. Viņi ne tikai palīdz jums optimizēt CSS piegādi, bet arī viņu tehniskais atbalsts ir nepārspējams.

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

About the author

Adblock
detector