Ako optimalizovať doručovanie CSS – 7 jednoduchých krokov

css optimalizácia vektorový obrázokPreč sú dni, keď odborníci na dizajn a špičkoví blogeri odporučili vytvoriť webové stránky s maximálnym počtom 30 kilobajtov…


Vtedy sa očakávalo, že táto „čiapka“ zvládne HTML, JavaScript, obrázky, CSS a Flash. Úprimne povedané, netrvá dlho, kým úplne prekročíme 30 kb.

S rastúcou popularitou skriptov JavaScript a CSS sa stalo pre CSS bežné prekročiť strop 30 kB. To platí najmä pre väčšie webové stránky.

Pri vytváraní a navrhovaní stránok pre vaše webové stránky by ste sa však nemali príliš sústrediť na „počet kilobytov“. Je dôležité, aby ste si svoje stránky ponechali optimalizované a pevne pri písaní CSS.

Optimalizácia nie je len o minimalizácii veľkosti súborov. Je to o tom, ako zabrániť tomu, aby boli vaše stránky neusporiadané a nafúknuté, aby boli čo najorganizovanejšie a najúčinnejšie. Keď sa dozviete viac o osvedčených postupoch optimalizácie CSS, zistíte, že automaticky vytvárate menšie veľkosti súborov.

Tu je 5 jednoduchých vecí, ktoré môžete urobiť pre optimalizáciu CSS práve teraz.

Ako plne optimalizovať doručovanie CSS

1. Použite skratku

Písanie v skratke sa stalo veľmi bežnou praxou. Toto je zďaleka najjednoduchší spôsob, ako zredukovať kód a ako dlho vám trvá kód. Ak to ešte nerobíte, nie je čas ako dnes.

Vlastnosť písma css

Existuje veľa prvkov, na ktoré môžete skratku použiť, ale najbežnejšie patria:

  • okraj
  • Vypchávka
  • font
  • obrys
  • hraničné
  • Pozadie
  • List-style

skrátené konfiguračné hodnotyHodnoty môžete kombinovať aj pomocou skratky. Zadaním rôznych hodnôt bude prehliadač v zásade používať určený spôsob interpretácie pravidiel.

Použitie akejkoľvek skratky aby bol váš celkový kód omnoho stručnejší. Uložíte znaky aj riadky.

Ak používate skratku vo všetkých možných oblastiach, môže to výrazne znížiť celkovú veľkosť súboru.

2. Zbavte sa hackov

tj pravidlo cssAk chcete slúžiť pravidlám CSS špecifickým pre IE, použitie podmienených hackov CSS vám poskytuje výhodu poskytovania menšieho a čistejšieho predvoleného súboru CSS..

Pomáha s prehliadačmi, ktoré viac vyhovujú normám. Dodatočnú váhu stránky však stiahnu iba prehliadače, ktoré to potrebujú.

Ak musíte použiť hack, je nevyhnutné, aby kód, ktorý používate, bol špecifický pre verziu programu Internet Explorer, na ktorú ste sa zamerali.

Existuje veľa vopred napísaných kódov, ktoré slúžia ako hacky, ak nechcete písať vlastné. Urobte si čas, aby ste sa skutočne pozreli na vopred napísaný kód a ubezpečili sa, že je presný alebo by to mohlo mať za následok ešte viac problémov.

Ak teraz môžete pomocou CSS dosiahnuť požadované výsledky, urobte to bez akýchkoľvek hackov. To samozrejme závisí od toho, či sú všetky ostatné veci rovnaké. Váš celkový kód bude omnoho ľahší a ľahší, keď na svojich stránkach použijete menej hackov.

3. Buďte inteligentní pri používaní medzier

Pre váš kód CSS, medzera je nevyhnutná kvôli čitateľnosti.

Prázdne miesto obsahuje prvky, ako sú karty, medzery a ďalšie zalomenia riadkov. Každý kúsok medzery, ktorý ste schopní odstrániť, je podobný odstráneniu postavy.

odstráňte prázdne riadkyČasto sa však neodporúča preskočiť na medzeru kvôli menšiemu súboru. Na svojich webových stránkach stále musíte zachovať optimálnu čitateľnosť.

Whitespace je dôležitý pre formátovanie, takže chcete nájsť rovnováhu. Ak do textu píšete veľkými blokmi, odstránite medzeru, krátke rozpätie pozornosti čitateľov na internete spôsobí, že kliknú preč.

Jedným zo spôsobov, ako zabezpečiť menšiu veľkosť a čitateľnosť súboru, je priekopa kariet a vloženie iba jedného riadku medzi jednotlivé odseky. Toto poskytuje dostatočné medzery z hľadiska čitateľnosti, ale tiež to eliminuje niektoré z tých medzier, ktoré nie sú potrebné..

Teraz môžete pre produkčnú verziu súboru CSS odstrániť medzeru. Bude stále v pracovnom súbore.

Toto je ďalší spôsob kompromisu, aby ste mali menšie súbory aj čitateľné formátovanie.

4. Orežte obnovenie a rámce

Ak používate rámec CSS, je nevyhnutné, aby ste si prečítali dokumentáciu.

Rovnako dôležité je pozrieť sa na každý riadok, ktorý sa nachádza v súbore CSS. Sú chvíle, keď zistíte, že v rámci existujú určité pravidlá, ktoré pre aktuálny projekt nechcete. Tieto môžu byť odstránené.

odstránené nepoužité pravidlá css

Možno zistíte, že prezentačné detaily môžete dosiahnuť stručnejšie a elegantnejšie…

Toto nemusí byť to, čo zvyčajne používate, ale ak to funguje, môže to umožniť čistejší rámec. Ak o nich viete, pomôže vám to aj vyhnúť sa neúmyselnému duplikovaniu množiny pravidiel.

Rovnaké informácie platia aj pre resetovanie. Keď použijete reset, pomôžu vám neutralizovať predvolený štýl prehliadača. Ak ste oboznámení s webom, ktorý vytvárate, nie je neobvyklé nájsť určité vyhlásenia, o ktorých viete, že ich nepotrebujete..

Napríklad na všeobecnom blogu ich pravdepodobne nebudete používať. Zbavte sa všetkého, čo nepotrebujete pre konkrétne stránky, ktoré vytvárate. Môžeš zabezpečte lepšie optimalizovanú prácu pri použití súboru pravidiel týkajúce sa resetovania alebo rámca.

V predvolenom stave by však nemali byť prijaté. Ak chcete, aby boli vaše súbory CSS čitateľné a štíhle, prečítajte si každé vyhlásenie osobitne a obmedzte zbytočné súbory.

5. Budúcnosť vášho CSS

Syntax CSS

Ďalšia užitočná možnosť optimalizácie CSS: oddeľte väčšinu pravidiel od vyhlásení špecifických pre rozloženie.

Ak je to možné, priraďte rozloženie svojmu samostatnému súboru. V opačnom prípade môže byť prospešné prinajmenšom poskytnutie vlastnej sekcie.

Nakoniec umiestnenie a plaváky – čo sú súčasné metódy využívajúce CSS – nemali slúžiť ako nástroje rozloženia.

Niektorí idú tak ďaleko, že hovoria, že sú to vlastne podobné hackerom rozloženia. V súčasnosti nie je realizovateľná alternatíva a dúfame, že akonáhle dôjde k dohodnutiu na štandardoch rozloženia, začnú dostávať podporu z prehliadačov..

Akonáhle sa takáto podpora stane, nemalo by byť veľmi ťažké vymieňať vlastnosti box-modelu, ktoré sú napadnuté za tie, ktoré sú určené pre rozloženie..

Práve teraz, najlepšou voľbou je zvládnuť rozloženie pomocou správnych vlastností. To zvyčajne kondenzuje hmotnosť stránky efektívnejšie ako použitie obmedzenej sady vlastností, ktoré sú v súčasnosti k dispozícii na kompenzáciu vtipov.

6. Vždy udržiavajte aktualizovanú dokumentáciu týkajúcu sa vašej práce

Či už pracujete na webovej stránke ako tím alebo samostatne, je nevyhnutné sledovať všetko, čo ste urobili.

Napríklad, sám, môžete zabudnúť na niečo, čo ste urobili. Ako tím môže niekto niečo urobiť a vy si to nemusíte byť vedomí, kým nevykonáte zmeny, ktoré môžu spôsobiť problémy s rôznymi prvkami kódu.

pridanie komentára cssDuplikácie kódu sú obrovskou oblasťou záujmu tímov aj individuálnych dizajnérov, najmä pri používaní populárnych tvorcov webových stránok. Wix, Squarespace a ďalší softvér na vytváranie webových stránok sú známe duplikátom kódu alebo úplne chýbajú v ich databáze.

Použitie vodiacich listov so štýlmi a sprievodcov značkami je uskutočniteľnou voľbou dokumentácie. Môžete tiež použiť komentáre CSS, čo je ďalšia možnosť, a to môže byť užitočné pri delení častí súborov CSS, ktoré sú dlhé. Ich vloženie do sprievodcu štýlom alebo značkami im bráni v pridávaní veľkosti súboru.

Jedným z najrýchlejších spôsobov, ako nafúknuť kód, je to, že urobíte rovnakú prácu dvakrát. Kódovanie je komplexné, preto je nevyhnutné uchovávať presnú dokumentáciu všetkého, čo ste urobili.

Ak pracujete sami, je ideálne skontrolovať túto dokumentáciu vždy, keď si sadnete, aby ste mohli začať pracovať. Keď pracujete ako súčasť tímu, uistite sa, že všetci kódujú ten istý dokument dodržiava komunitný štýl alebo sprievodcu značkami aby zmeny v kóde ľahko pochopili všetci v skupine.

7. Komprimujte svoje súbory (optimalizácia CSS 101)

css kompresia a optimalizácia gif

Kompresia: je toho o niečo viac ako toto …

Jedným z efektívnych spôsobov optimalizácie CSS je použitie kompresie. Toto je spôsob, ako zabezpečiť, aby vaše súbory boli prístupné prehliadaču, aj keď sú nečitateľné ľuďmi.

V porovnaní s pracovnými kópiami to bude zlomok veľkosti. Existujú rôzne aplikácie, ktoré môžete využiť na uľahčenie procesu kompresie.

Tieto úlohy budú vykonávať úlohy, ako napríklad nájsť a opraviť všetky vlastnosti CSS, ktoré sa navzájom prepisujú, komprimujú medzeru a hľadajú šance na použitie skratky CSS..

Okrem pohodlia týchto aplikácií vám tiež môžu pomôcť dozvedieť sa viac o úlohách, ktoré môžete robiť ručne, ak uprednostňujete. Na formátovanie súborov CSS môžete tiež použiť rôzne textové editory.

Môžu slúžiť na zip verzie rôznych CSS súborov, ktoré máte. Spravidla sa to robí pomocou PHP. Ak chcete používať nástroje na optimalizáciu a kompresiu, pred výberom tej správnej prečítajte si viac možností.

Teraz tieto aplikácie vo všeobecnosti dokážu minimalizovať chyby, ale nie sú dokonalé. Z tohto dôvodu by ste mali vždy skontrolovať svoj CSS po použití aplikácie, aby ste zaistili presnosť. Optimalizovaný a čistý kód je rozhodujúci pre veľkosť súboru, ale aj pre čitateľnosť a údržbu.

Si na rade

Princípy, o ktorých sa tu diskutuje, sú solídnymi hľadiskami pre CSS, ale aj pre JavaScript, HTML a ďalšie programovacie jazyky. V porovnaní s vykreslením vašej webovej stránky nie sú súbory CSS pre koncového používateľa také výrazné.

Princípy, o ktorých sa tu hovorí, však pomáhajú pri vývoji aj pri používaní používateľa.

Väčšina dobrých spoločností poskytujúcich webhosting vám pomôže s optimalizáciou CSS. Rýchlejšie webové stránky z vás urobia spokojného zákazníka, ale menšie súbory sú tiež menej zaťažené ich servermi.

Testovali sme každého z kanadských webových hostiteľov a odporúčame službu SiteGround. Nielenže vám pomôžu optimalizovať poskytovanie CSS, ale ich technická podpora je jedinečná.

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