21 Způsoby, jak optimalizovat vaše CSS a urychlit vaše stránky

Sep 14, 2025

jak

CSS musí projít relativně složitým potrubím, stejně jako HTML a JavaScript. Prohlížeč musí stáhnout soubory ze serveru a pak pokračovat s analýzou a uplatňovat je na DOM. Vzhledem k extrémní úrovni optimalizace je tento proces obvykle velmi rychle - pro menší webové projekty, které nejsou založeny na rámcích, CSS obvykle tvoří jen malou část celkové spotřeby zdrojů.

Rámy narušení této rovnováhy. Zahrnout zásobník GUI JavaScript jako JQuery UI, a sledovat CSS, JS a HTML velikosti SKYRET. Často se vývojáři obvykle cítili špetku poslední - když sedí za silným osmizorovým pracovním stanicí s Internetem T3, nikdo se nestará o rychlost. Tyto změny jako latence nebo zařízení omezená CPU přicházejí.

19 Cool CSS Animace Příklady pro obnovení

Optimalizace CSS vyžaduje vícerozměrný přístup. Zatímco ručně psaný kód může být skromný s použitím různých technik, jít přes rámcový kód rukou je neefektivní. V těchto případech se používající automatizovaný minimisér poskytuje lepší výsledky.

Následující kroky nás vezmou na cestu světem optimalizace CSS. Ne každý jediný by mohl být přímo použitelný pro váš projekt, ale udržujte je na paměti. Chcete něco jednoduššího? Vyzkoušejte A. Webové stránky Builder. .

01. Použijte zkratka

Nejrychlejší CSS klauzule je ten, který se nikdy nedostane analyzovat. Pomocí tlačítek zkratka, jako je například prohlášení o marži uvedená níže, radikálně snižuje velikost souborů CSS. Mnoho dalších zkrácených forem lze nalézt společností Googling 'CSS zkratka ".

 p {Margin-top: 1px;
    Právo okraje: 2px;
    okraj-dno: 3px;
    Okrajově vlevo: 4PX; }

P {Margin: 1px 2px 3px 4px; }

02. Najděte a odstraňte nepoužité CSS

Odstranění nepotřebných částí vaší značky zřejmě způsobuje obrovské zisky rychlosti. Prohlížeč Google Chrome má tuto funkci z krabice. Prostě jít do výhledu & gt; Vývojář & gt; Nástroje pro vývojáře a otevřete kartu Zdroje v nedávné verzi a otevřete nabídku Command. Poté vyberte možnost Zobrazit pokrytí a hody oči na okno analýzy pokrytí zdůrazňující nepoužitý kód na aktuální webovou stránku.

03. Udělej to v pohodlnějším způsobem

Navigace prostřednictvím analýzy line-by-line není nutně pohodlná. Audit webového výkonu webu Chrome vrací podobné informace - jednoduše jej otevřete z panelu nástrojů, zobrazení & gt; Vývojář & gt; Nástroje pro vývojáře a gt; Audity a nechat ho běžet. Po dokončení se zobrazí seznam problematických prvků.

04. Buďte si vědomi problémů

Mějte na paměti, že automatizovaná analýza CSS může vždy vést k chybám. Proveďte důkladný test celé webové stránky poté, co nahradil soubory CSS s minimálními nimi - nikdy neví, jaké chyby způsobil optimalizátor. A pohybující se kupředu, slušné web hosting vám může pomoci snížit záhyby ve vašich stránkách.

05. Inline kritické CSS

Načítání externích stylů Náklady Čas díky latenci - kdokoliv si pamatuje "záblesk nestasteného obsahu"? Nejkritičtější bity kódu proto může jít do značky záhlaví. Ujistěte se, že to neoverete. Mějte na paměti, že kód musí být také číst lidé provádějící údržbě úkolů.

 & lt; html & gt;
  & lt; hlava & gt;
    & lt; styl & gt;
      .blue {barva: modrá;}
    & lt; / styl & gt;
    & lt; / hlava & gt;
  & lt; tělo & gt;
    & lt; divová třída = "modrá" & gt;
      Ahoj světe!
    & lt; / div & gt;

06. Povolení antiparallu analýzy

@Import Přidá strukturu do kódu CSS. Bohužel, přínosy nejsou zdarma: Jako dovoz může hnízdo hnízdo, analyzovat je paralelně není možné. Paralelizovatelnější způsob používá sérii & lt; link & gt; Štítky, které prohlížeč může najednou načíst.

 @import URL ("A.CSSS");
@Import URL ("B.CSS");
@Import URL ("C.CSS");
v & lt, link rel = "stylový" href = "A.CSS" & gt;
Link Rel = "Stylesheet" href = "bcss" & gt;
& lt; link rel = "stylový" href = "c.CSS" & gt;

07. Nahradit snímky s CSS

Před lety byla samozřejmost sada poloprůhledných PNG pro vytváření průsvitných efektů na webové stránky. V současné době poskytují filtry CSS alternativu úspory zdrojů. Jako příklad, úryvek doprovázející tento krok zajišťuje, že dotčený obraz se objeví jako verze ve stupních šedi.

 IMG {
    -Webkit-filtr: stupně šedi (100%); /* starý
Safari * /
    Filtr: Stupně šedi (100%);
}

08. Použijte zkratky barev

Společná moudrost učí, že šestimístné popisovače barev je nejefektivnější způsob, jak vyjádřit barvy. Toto není případ - v některých případech mohou být zkrácené popisy nebo názvy barev kratší.

 Cíl {background-color: #ffffff; }
Cíl {Pozadí: #fff; }

09. Eliminujte nepotřebné nuly a jednotky

CSS podporuje širokou škálu jednotek a číselných formátů. Jsou to vděčný cíl pro optimalizaci - jak koncové a následující nuly mohou být odstraněny, jak je demonstrováno v úryvku níže. Dále mějte na paměti, že nula je vždy nula, a že přidání kóty nepřidává hodnotu na obsah obsažené.

 Polstrování: 0.2em;
marže: 20.0EM;
AVALUE: 0px;
Polstrování: .2EM;
marže: 20m;
AVALUE: 0;

10. Odstraňte nadměrné středníky

Tato optimalizace je poněkud kritická, protože ovlivňuje změny kódu. Specifikace CSS umožňuje vynechat poslední středník ve skupině nemovitostí. Vzhledem k tomu, že úspory dosažené touto optimalizační metodou jsou minimální, zmiňujeme to především pro ty, kteří pracují na automatizovaném optimalizátoru.

 p {
. . .
Velikost písma: 1.33EM
}

11. Použijte strukturu atlas

Načítání více malých Sprity je neefektivní v důsledku nad hlavou protokolu. CSS Sprites kombinují sérii malých obrázků do jednoho velkého souboru PNG, který je pak rozdělen od CSS pravidla. Programy jako TexturePacker. Zjednodušte proces tvorby značně.

 .download {
  šířka: 80px;
  Výška: 31px;
  Pozice na pozadí: -160PX -160PX
}
.download: Hover {
  šířka: 80px;
  Výška: 32px;
  Pozice na pozadí: -80px -160px
}

12. Chase dolů px

Jeden elegantní způsob, jak zvýšit výkon využívá specialitu standardu CSS. Předpokládá se, že číselné hodnoty bez jednotky jsou pixely - odstranění px uloží dva bajty pro každé číslo.

 H2 {polstrování: 0px; marže: 0px;}
H2 {polstrování: 0; Margin: 0}

13. Vyhněte se drahým vlastnostem

Analýza ukázala, že některé značky jsou dražší než jiné. Seznam doprovodný tento krok je považován za obzvláště výkonný-hlad - vyhněte se jim, když se dají příležitost tak učinit.

 okruh pohraničí
    box-stín
    přeměnit
    filtr
    : ntt-dítě
    Poloha: pevná;
    atd.

14. Odstraňte mezery

Whitespace - Myslíte si, že karty, vozík návraty a mezery - je snazší číst, ale slouží málo účelu z pohledu parser. Odstraňte je před odesláním. Ještě lepší způsob zahrnuje delegování této práce na skript s shell nebo podobným spotřebičem.

15. Eliminovat komentáře

Komentáře také slouží účelem kompilátoru. Vytvořte si vlastní analyzátor, abyste je odstranili před dodáním. Nejen, že to ušetří šířku pásma, ale také zajišťuje, že útočníci a klonery mají těžší čas pochopení myšlení za kódem po ruce.

16. Použijte automatickou kompresi

Tým uživatelských zkušeností uživatele Yahoo vytvořil aplikaci, která zpracovává mnoho kompresních úkolů. Je lodě jako soubor jar, K dispozici zde a může být spuštěn s JVM volby.

 Java -jar Yuicompressor-X.y.z.jar
Použití: Java -jar Yuicompressor-X.y.z.jar
 [Možnosti] [vstupní soubor]
Globální možnosti
    -H, --Help to zobrazí
 informace
    -Type & lt, js | css & gt; Určuje
 Typ vstupního souboru

17. Spusťte ho od NPM

Pokud dáváte přednost integraci produktu do node.js, navštivte npmjs.com/package/yuicompressor. . Špatně udržovaný úložiště obsahuje sadu souborů obalů a API JavaScriptu.

 var kompresor = Vyžadovat ('Yuicompressor');
kompresor.Compress ('/ cesta / do /
soubor nebo řetězec JS ', {
// Možnosti kompresoru:
charset: 'utf8',
Typ: 'JS',

18. Udržujte Sass et al in šek

Zatímco výkon Selector CSS není téměř tak kritický, protože to bylo před několika lety (viz zdroj), rámce, jako je SASS někdy emitují extrémně složitý kód. Podívejte se na výstupní soubory čas od času a přemýšlet o způsobech optimalizace výsledků. Máte výsledky sdílet s týmem? Udržujte soubory ve srovnání cloudové úložiště .

Co je sass?

19. Nastavte ukládání do mezipaměti

Staré adage tvrdí, že nejrychlejší soubor je ten, který nikdy neodstraní přes vodiče. Provedení požadavků mezipaměti prohlížeče dosahuje efektivně. Snadno, nastavení záhlaví ukládání do mezipaměti musí probíhat na serveru. Dobré využití dvou nástrojů zobrazených na obrazovce Screenshots - poskytují rychlý způsob, jak analyzovat výsledky vašich změn.

20. Busta cache

Návrháři se často nelíbí ukládání do mezipaměti kvůli strachu z problémů s nadcházejícími změnami. Úhledná cesta kolem problému zahrnuje, včetně značek se názvem souboru. Smírně, schéma uvedený v kódu doprovázející tento krok nefunguje všude, protože některé servery proxy odmítnou mezipaměti souborů s "dynamickými" cestami.

 LINK REL = "Stylesheet" href = "style.css? V = 1.2.3" & gt;

21. Nezapomeňte na základy

Optimalizace CSS je jen součástí hry. Pokud váš server nepoužívá kompresi HTTP / 2 a GZIP, při přenosu dat ztrácí čas času. Naštěstí je upevnění těchto dvou problémů obvykle jednoduché. Náš příklad ukazuje několik vylepšení k běžně používanému serveru Apache. Pokud se ocitnete v jiném systému, jednoduše obraťte se na dokumentaci serveru.

 pico /etc/httpd/conf/httpd.conf
AddoutputFilterByType Deflate Text / HTML
AddoutputFilterbytyPE Deflate Text / CSS

Tento článek byl původně publikován v čísle 282 časopisu Creative Web Design Web Designer. . Koupit vydání 282 zde nebo Přihlásit se zde web designer zde .

Související články:

10 Úžasné nové techniky CSS
Což je nejlepší CSS Preprocessor?
Úvod do vlastností CSS

21 Způsoby, jak optimalizovat vaše CSS a urychlit vaše stránky

01. Použijte zkratka

02. Najděte a odstraňte nepoužité CSS

03. Udělej to v pohodlnějším způsobem

04. Buďte si vědomi problémů

05. Inline kritické CSS

06. Povolení antiparallu analýzy

07. Nahradit snímky s CSS

08. Použijte zkratky barev

09. Eliminujte nepotřebné nuly a jednotky

10. Odstraňte nadměrné středníky

11. Použijte strukturu atlas

12. Chase dolů px

13. Vyhněte se drahým vlastnostem

14. Odstraňte mezery

15. Eliminovat komentáře

16. Použijte automatickou kompresi

17. Spusťte ho od NPM

18. Udržujte Sass et al in šek

19. Nastavte ukládání do mezipaměti

20. Busta cache

21. Nezapomeňte na základy

jak - Nejoblíbenější články

Jak nakreslit osobu

Jak malovat barevné zombie

Vytvoření efektů zvlnění s Pixijs

Sculpt realistická anatomie v Zbrushu

Cache v BBC výkonu Booster

Jak kreslit s afinitní fotografie pro iPad

Jak vyřezávat postavu ve VR

Vytvořit perspektivu tím, že deformuje vaše textury ve Photoshopu

Kategorie