Kako optimizirati isporuku CSS-a – 7 jednostavnih koraka

css optimizacija vektorska slikaProšli su dani kada su stručnjaci za dizajn i blogeri vodećih u industriji preporučili izradu web stranica ne više od 30 kilobajta …


Tada se očekivalo da će ova “kapa” obraditi HTML, JavaScript, slike, CSS i Flash. Budimo iskreni, ne treba puno da se dostigne 30 kb.

Kako su JavaScript i CSS stekli popularnost, postalo je uobičajeno da samo CSS prelazi gornju granicu od 30 KB. To se posebno odnosi na veće web stranice.

No prilikom izrade i dizajniranja stranica za vaše web mjesto ne biste se trebali pretjerano fokusirati na svoj “kilobajt”. Važno je zadržati svoje stranice optimizirano uska i za vrijeme pisanja CSS-a.

Optimizacija se ne odnosi samo na smanjivanje veličina datoteka. Radi se o tome da vaše stranice budu bez nereda i podvale, da ih učinite što organiziranijim i učinkovitijim. Dok saznate više o najboljim praksama za optimizaciju CSS-a, otkrit ćete da automatski stvarate manje veličine datoteka.

Evo 5 jednostavnih stvari koje trenutno možete učiniti kako biste optimizirali svoj CSS.

Kako u potpunosti optimizirati isporuku CSS-a

1. Koristite Skraćenicu

Pisanje u kratkim crtama postalo je vrlo uobičajena praksa. Ovo je daleko najjednostavniji način da smanjite svoj kôd i koliko vam treba vremena za kodiranje. Ako to još ne radite, nema vremena poput sadašnjosti.

css svojstvo fonta

Postoji mnoštvo elemenata za koje možete koristiti skraćenicom, ali najčešći uključuju:

  • Margina
  • punjenje
  • krstionica
  • obris
  • Granica
  • pozadina
  • Lista stilu

Skraćene vrijednosti konfiguracijeTakođer možete kombinirati vrijednosti pomoću kratke ruke. Specificirajući različite vrijednosti, preglednik će u osnovi koristiti određeni način za tumačenje pravila.

Korištenjem bilo koje skraćenice volja učinite vaš ukupni kod daleko sažetijim. Spremite i znakove i crte.

Ako koristite skraćenicu na svakom mogućem području, to može značajno smanjiti ukupnu veličinu datoteke.

2. Riješite se hakova

tj. css praviloZa posluživanje CSE pravila specifičnih za IE, korištenje uvjetnih CSS hakova daje vam prednost posluživanja manje i čistije zadane CSS datoteke.

Pomaže u preglednicima koji su u skladu sa standardima. No dodatnu težinu stranice preuzet će samo preglednici koji to zahtijevaju.

Ako morate koristiti hack, neophodno je da kôd koji koristite odgovara verziji Internet Explorera na koju ste usredotočeni.

Postoje brojni unaprijed napisani kodovi koji služe kao hakeri ako ne želite napisati vlastiti. Samo izdvojite vrijeme da stvarno pogledate unaprijed napisani kôd i provjerite je li točan ili bi to moglo dovesti do još većih problema.

Ako sada možete koristiti CSS da biste dobili željene rezultate, učinite to bez ikakvih hakiranja. Naravno, to ovisi o tome da li su sve ostale stvari jednake. Vaš ukupni kôd bit će daleko lakši i jednostavniji kada na web mjestu koristite manje hakira.

3. Budite pametni kada koristite Whitespace

Za vaš CSS kôd, bijeli prostor je imperativ za čitljivost.

Bijeli prostor uključuje elemente, poput kartica, razmaka i dodatnih prijeloma linija. Svaki zalogaj bijelog prostora koji ste u mogućnosti ukloniti sličan je uklanjanju lika.

uklonite prazne redoveMeđutim, često se ne preporučuje preskakanje slobodnog prostora radi manje datoteke. I dalje morate održavati optimalnu čitljivost na svojim web stranicama.

Whitespace je važan za oblikovanje, pa želite naći ravnotežu. Ako pišete velikim blokovima tekst da biste uklonili neki razmak, kratki raspon pažnje čitatelja na internetu natjerat će ih da kliknu.

Jedan od načina za pružanje i manje veličine datoteke i čitljivosti je iskopati jezičke i staviti samo jedan redak između odlomaka. To pruža dovoljno bjelog prostora s stajališta čitljivosti, ali isto tako eliminira dio tog razmaka koji nije potreban.

Sada, za proizvodnu verziju CSS datoteke, možete ukloniti bijeli prostor. I dalje će biti prisutna u vašoj radnoj datoteci.

Ovo je još jedan način za kompromis kako biste imali i manje datoteke i čitljivo oblikovanje.

4. Resetiranje i okviri šljive

Kada koristite CSS okvir, neophodno je pregledati dokumentaciju.

Jednako je važno pogledati svaki pojedinačni redak unutar vaše CSS datoteke. Postoje slučajevi kada ćete otkriti da u okviru postoje neka pravila koja ne želite za svoj trenutni projekt. Oni se mogu ukloniti.

uklonjena neiskorištena css pravila

Možda ćete otkriti prezentacijski detalj na sažetiji i elegantniji način …

To možda nije ono što obično koristite, ali ako djeluje, to može omogućiti čistiji okvir. Kad znate za njih, ovo vam također pomaže da izbjegnete nenamjerno dupliciranje skupova pravila.

Isti podaci odnose se i na resetovanja. Kad koristite resetovanja, pomažu u neutralizaciji zadanog stila preglednika. Sada, ako ste upoznati s web stranicom koju stvarate, nije neuobičajeno da pronađete određene izjave za koje znate da vam neće trebati..

Na primjer, na općenitom blogu vjerojatno ih nećete koristiti. Samo se riješite svega što vam nije potrebno za određenu stranicu koju gradite. Možeš osigurajte bolje optimizirani rad kada koristite skup pravila u vezi s resetiranjem ili okvirom.

Međutim, u zadanom stanju ne bi ih trebalo prihvatiti. Da biste CSS datoteke pročitali i naslonili, pregledajte svaku deklaraciju pojedinačno i smanjite one nepotrebne.

5. Budući dokaz vašeg CSS-a

Css sintaksa

Još jedna korisna opcija za optimizaciju CSS-a: odvojite većinu svojih pravila od deklaracija specifičnih za vaš izgled.

Dodijelite izgled svojoj pojedinačnoj datoteci ako je to moguće. Ako ne, barem davanje vlastitog dijela može biti od koristi.

Konačno, pozicioniranje i lebdenje – koje su trenutne metode pomoću CSS – nisu trebali služiti kao alati za oblikovanje.

Neki idu čak i dalje kad kažu da su zapravo slični izgledima. Trenutno ne postoji održiva alternativa i nada se da će, nakon što se dogovore standardi za izgled, početi dobivati ​​podršku preglednika..

Jednom kada se dogodi ova podrška, ne bi trebalo biti vrlo teško zamijeniti svojstva modela boksa koja su sjeckana na one namijenjene izgledima.

Upravo sada Najbolji izbor je rukovati vašim izgledom koristeći ispravna svojstva. Obično će se težina stranice kondenzirati učinkovitije nego pomoću ograničenog skupa svojstava trenutno dostupnih za kompenzaciju quirki.

6. Uvijek čuvajte ažuriranu dokumentaciju o svom radu

Bez obzira radite li na web stranici kao tim ili sami, obavezno morate pratiti sve što ste napravili.

Na primjer, sami možete zaboraviti nešto što ste učinili. Kao tim, netko može nešto učiniti, a vi možda niste svjesni dok ne učinite promjene koje mogu uzrokovati probleme s različitim elementima koda.

dodavanje css komentaraUmnožavanje koda veliko je pitanje koje zabrinjava i timove i pojedine dizajnere, posebno kada se koriste popularni graditelji web stranica. Postoje Wix, Squarespace i drugi softver za izgradnju web stranica poznat po dupliciranju koda ili ga u cijelosti nedostaje iz baze podataka.

Korištenje vodiča za stilove i vodiči za označavanje mogući su izbor dokumentacije. Također možete koristiti CSS komentare druga je opcija, a ovo može biti korisno za odvajanje dugačkih CSS datoteka. Ako ih stavite u vodič za stil ili označavanje, sprječava ih da dodaju veličinu datoteke.

Jedan od najbržih načina uklanjanja koda je dvostruko obavljanje istog posla. Kodiranje je složeno, stoga je obavezno voditi točnu dokumentaciju o svemu što ste napravili.

Ako radite sami, idealno je pregledati ovu dokumentaciju svaki put kada sjednete za početak rada. Kad radite kao dio tima, vodite računa da se svi kodiraju u istom dokumentu pridržava se stila zajednice ili vodiča za označavanje tako da su promjene u kodiranju lako razumljive svima u grupi.

7. Stisnite datoteke (CSS optimizacija 101)

gif kompresije i optimizacije css

Kompresija: ima nešto više od ovoga …

Jedan učinkovit način za optimizaciju CSS-a je uporaba kompresije. Na ovaj ćete način osigurati da su vaše datoteke pregledniku prilagođene iako ih ljudi ne mogu pročitati.

U usporedbi s radnim primjercima, to će biti djelić veličine. Postoje različite aplikacije koje možete iskoristiti kako biste olakšali postupak kompresije.

Oni će izvoditi zadatke, poput pronalaženja i popravljanja svih CSS svojstava koja se prepisuju, kompresije bijelog prostora i traže šanse za korištenje CSS kratice.

Osim praktičnosti ovih aplikacija, oni vam mogu pomoći i da saznate više o zadacima koje možete ručno obavljati, ako želite. Za oblikovanje CSS datoteka možete koristiti i razne uređivače teksta.

Mogu poslužiti zip verzije različitih CSS datoteka koje imate. To se obično radi pomoću PHP-a. Ako želite koristiti alate za optimizaciju i sažimanje, provjerite više opcija prije nego što odaberete pravu za vas.

Sada su te aplikacije uglavnom dobre u minimiziranju pogrešaka, ali nisu savršene. Zbog toga biste uvijek trebali pregledati CSS nakon korištenja aplikacije da biste osigurali točnost. Kôd koji je optimiziran i čist presudan je za veličinu datoteke, ali i za čitljivost i održavanje.

Tvoj red

Ovdje opisani principi su čvrsta razmatranja za CSS, ali i za JavaScript, HTML i ostale programske jezike. U usporedbi s prikazom vaše web stranice, CSS datoteke nisu tako istaknute za krajnjeg korisnika.

Međutim, ovdje opisana načela pomažu i u iskustvu u razvoju i u korisničkom iskustvu.

Većina dobrih web hosting tvrtki pomoći će vam u optimizaciji CSS-a. Brže web stranice čine vas zadovoljnim kupcem, ali manje datoteke također su manje opterećene na njihovim poslužiteljima.

Isprobali smo svakog od kanadskog web domaćina i preporučujemo SiteGround. Ne samo da vam pomažu u optimiziranju isporuke CSS-a, već je i njihova tehnička podrška bez premca.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map