Jak optimalizovat doručování CSS – 7 jednoduchých kroků

css optimalizace vektorový obrázekPryč jsou dny, kdy odborníci na design a špičkoví bloggerové doporučují stavět webové stránky ne více než 30 kilobajtů…


Tehdy se očekávalo, že tato „čepice“ bude zpracovávat HTML, JavaScript, obrázky, CSS a Flash. Buďme upřímní, netrvá dlouho, než úplně překročíme 30 kb.

Jak JavaScript a CSS získaly popularitu, pro CSS bylo běžné překročit strop 30 kB. To platí zejména pro větší webové stránky.

Při vytváření a navrhování stránek pro váš web byste se však neměli příliš soustředit na svůj „počet kilobyte“. Je důležité, aby vaše stránky optimalizováno a pevně při psaní CSS.

Optimalizace není jen o minimalizaci velikosti souborů. Je to o tom, jak udržet své stránky bez nepořádku a nadýmání, aby byly co nejvíce organizované a efektivní. Když se dozvíte více o doporučených postupech optimalizace CSS, zjistíte, že automaticky vytvoříte menší velikosti souborů.

Zde je 5 jednoduchých věcí, které můžete udělat pro optimalizaci vašeho CSS právě teď.

Jak plně optimalizovat doručování CSS

1. Použijte zkratku

Psaní ve zkratce se stalo velmi běžnou praxí. Toto je zdaleka nejjednodušší způsob, jak snížit kód a jak dlouho vám trvá kód. Pokud to ještě neuděláte, není čas jako dnes.

Vlastnost písma css

Existuje celá řada prvků, pro které můžete zkratku použít, ale mezi nejčastější patří:

  • Okraj
  • Polstrování
  • Písmo
  • Obrys
  • okraj
  • Pozadí
  • Seznam stylů

zkratka konfigurovat hodnotyHodnoty můžete také kombinovat pomocí zkratky. Zadáním různých hodnot prohlížeč v zásadě použije specifický způsob interpretace pravidel.

Pomocí jakékoli zkratky aby byl váš celkový kód mnohem stručnější. Ukládáte znaky i řádky.

Pokud používáte zkratku ve všech možných oblastech, může to výrazně snížit celkovou velikost souboru.

2. Zbavte se hacků

tj. pravidlo cssChcete-li obsluhovat pravidla CSS specifická pro IE, použití podmíněných hacků CSS vám poskytuje výhodu obsluhy menšího a čistšího výchozího souboru CSS.

Pomáhá s prohlížeči, který je více kompatibilní s normami. Dodatečnou váhu stránky však stáhnou pouze prohlížeče, které to vyžadují.

Pokud musíte použít hack, je nezbytné, aby kód, který používáte, byl specifický pro verzi aplikace Internet Explorer, na kterou jste zaměřeni.

Existuje mnoho předpřipravených kódů, které slouží jako hacky, pokud nechcete psát vlastní. Udělejte si čas, abyste se opravdu podívali na předem napsaný kód a zajistili jeho přesnost jinak by to mohlo mít za následek další problémy.

Nyní, pokud můžete použít CSS k získání požadovaných výsledků, udělejte to bez hacků. To samozřejmě závisí na tom, že všechny ostatní věci budou stejné. Váš celkový kód bude mnohem lehčí a jednodušší, pokud na svém webu používáte méně hacků.

3. Buďte inteligentní při používání Whitespace

Pro váš kód CSS, mezera je nezbytná pro čitelnost.

Mezera zahrnuje prvky, jako jsou záložky, mezery a další konce řádků. Každý kousek mezery, který jste schopni eliminovat, je podobný odstranění postavy.

odstranit prázdné řádkyČasto se však nedoporučuje šetřit mezerami kvůli menšímu souboru. Stále musíte na svých webových stránkách udržovat optimální čitelnost.

Mezera je důležitá pro formátování, takže chcete najít rovnováhu. Pokud do textu píšete velkými bloky, abyste odstranili mezeru, krátká pozornost čtenářů na internetu způsobí, že kliknou.

Jedním ze způsobů, jak zajistit menší velikost a čitelnost souboru, je vykopat karty a mezi jednotlivé odstavce vložit pouze jeden řádek. To poskytuje dostatečné mezery z hlediska čitelnosti, ale také eliminuje některé ty mezery, které nejsou nutné..

Nyní můžete pro produkční verzi vašeho souboru CSS odstranit mezeru. Bude stále v pracovním souboru.

Toto je další způsob kompromisu, takže máte jak menší soubory, tak čitelné formátování.

4. Prune Resets and Frameworks

Pokud používáte framework CSS, je nezbytné, abyste si dokumentaci prohlédli.

Stejně důležité je podívat se na každý jednotlivý řádek, který je v souboru CSS. Jsou chvíle, kdy zjistíte, že existují určitá pravidla v rámci, která pro váš aktuální projekt nechcete. Ty lze odstranit.

odstraněna nepoužívaná pravidla css

Možná zjistíte, že prezentační detaily můžete dosáhnout stručnějším a elegantnějším způsobem…

To nemusí být to, co obvykle používáte, ale pokud to funguje, může to umožnit čistší rámec. Když o nich víte, pomůže vám to také vyhnout se neúmyslnému zdvojování sad pravidel.

Stejné informace platí také pro resetování. Používáte-li reset, pomáhají neutralizovat výchozí styl prohlížeče. Nyní, pokud znáte web, který vytváříte, není neobvyklé najít určitá prohlášení, o kterých víte, že nepotřebujete.

Například na obecném blogu je pravděpodobně nebudete používat. Zbavte se všeho, co nepotřebujete pro konkrétní stavbu, kterou stavíte. Můžeš zajistit lepší optimalizaci práce při použití sady pravidel pokud jde o reset nebo rámec.

Ve výchozím stavu by však neměly být přijaty. Chcete-li, aby vaše soubory CSS byly čitelné a štíhlé, podívejte se na každou deklaraci samostatně a omezte ty, které jsou zbytečné.

5. Budoucnost vašeho CSS

Syntaxe Css

Další užitečná možnost optimalizace CSS: oddělte většinu pravidel od deklarací specifických pro rozvržení.

Pokud je to možné, přiřaďte rozvržení ke svému samostatnému souboru. Pokud tomu tak není, může být prospěšné přinejmenším poskytnutí vlastní sekce.

Konečně, polohování a plováky – což jsou současné metody využívající CSS – neměly sloužit jako nástroje rozvržení.

Někteří jdou tak daleko, že říkají, že jsou ve skutečnosti podobné hackerům v rozvržení. V tuto chvíli neexistuje životaschopná alternativa a doufáme, že jakmile dojde ke shodě na standardech rozvržení, začnou získávat podporu z prohlížečů.

Jakmile se tato podpora stane, nemělo by být velmi obtížné zaměnit vlastnosti box-modelu, které jsou hackovány za ty, které jsou určeny pro rozvržení.

Právě teď, nejlepší volbou je zpracovat rozvržení pomocí správných vlastností. To obvykle kondenzuje hmotnost stránky efektivněji než použití omezené sady vlastností, které jsou v současné době k dispozici pro kompenzaci vtípků.

6. Vždy mějte aktualizovanou dokumentaci týkající se vaší práce

Ať už pracujete na webových stránkách jako tým nebo samostatně, je nutné sledovat vše, co jste udělali.

Například, sám, můžete zapomenout na něco, co jste udělali. Jako tým může někdo něco udělat a vy si to nemusíte být vědomi, dokud neprovedete změny, které mohou způsobit problémy s různými prvky kódu.

přidání css komentářeZdvojení kódu je velkým problémem jak pro týmy, tak pro jednotlivé designéry, zejména při používání populárních tvůrců webových stránek. Wix, Squarespace a další software pro vytváření webových stránek jsou známý pro duplikování kódu, nebo úplně chybí z jejich databáze.

Použití vodicích listů stylů a vodítek značek je proveditelnou volbou dokumentace. Můžete také použít komentáře CSS, což je další možnost, což může být užitečné pro oddělení částí prvků CSS, které jsou dlouhé. Jejich vložení do průvodce stylem nebo značkami jim zabrání v přidání velikosti souboru.

Jedním z nejrychlejších způsobů, jak bloat kód, je to, že děláte stejnou práci dvakrát. Kódování je složité, proto je nezbytné uchovávat přesnou dokumentaci všeho, co jste udělali.

Pokud pracujete sami, je ideální tuto dokumentaci zkontrolovat pokaždé, když se posadíte, abyste mohli začít pracovat. Když pracujete jako součást týmu, ujistěte se, že všichni kódují stejný dokument dodržuje komunitní styl nebo průvodce značkami aby změny ve kódování byly snadno pochopitelné pro všechny ve skupině.

7. Komprimujte své soubory (optimalizace CSS 101)

css komprese a optimalizace gif

Komprese: je toho o něco víc než tohle …

Jedním z účinných způsobů optimalizace CSS je použití komprese. Toto je způsob, jak zajistit, aby vaše soubory byly kompatibilní s prohlížečem, i když jsou nečitelné lidmi.

Ve srovnání s pracovními kopiemi se jedná o zlomek velikosti. Existují různé aplikace, které můžete využít k usnadnění procesu komprese.

Budou provádět úkoly, jako je hledání a oprava všech vlastností CSS, které se přepisují, komprimují mezeru a hledají šance na použití zkratky CSS.

Kromě pohodlí těchto aplikací vám mohou také pomoci dozvědět se více o úkolech, které můžete dělat ručně, pokud dáváte přednost. K formátování souborů CSS můžete také použít různé textové editory.

Mohou obsluhovat zip různých souborů CSS, které máte. To se obvykle provádí pomocí PHP. Pokud chcete použít nástroje pro optimalizaci a kompresi, nezapomeňte si před výběrem správné vybrat několik možností.

Nyní jsou tyto aplikace obecně schopny minimalizovat chyby, ale nejsou dokonalé. Z tohoto důvodu byste měli vždy zkontrolovat svůj CSS po použití aplikace, aby byla zajištěna přesnost. Optimalizovaný a čistý kód je rozhodující pro velikost souboru, ale také pro čitelnost a údržbu.

Tvůj tah

Zde diskutované principy jsou důkladné úvahy pro CSS, ale také pro JavaScript, HTML a další programovací jazyky. Ve srovnání s vykreslením vašeho webu nejsou soubory CSS pro koncového uživatele tak výrazné.

Zde diskutované zásady však pomáhají jak s vývojovými zkušenostmi, tak s uživatelskými zkušenostmi.

Většina dobrých webhostingových společností vám pomůže s optimalizací CSS. Rychlejší weby z vás dělají spokojeného zákazníka, ale menší soubory jsou také méně zatíženy jejich servery.

Testovali jsme každého z kanadských webových hostitelů a doporučujeme SiteGround. Pomáhají nejen optimalizovat poskytování CSS, ale jejich 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