5 Tipy pro super-rychlé CSS

Sep 14, 2025

jak

Přemýšleli jste o velikosti CSS vašich stránek? Pokud je váš stylový list balón, mohlo by to být zpožděné renderování stránky.

16 Top CSS Animace Příklady

Ačkoli CSS není největší typ aktiv, který slouží, je to jedna z prvních, že prohlížeč zjistí. Vzhledem k tomu, že prohlížeč je blokován od vykreslování stránky, dokud se CSS stáhne a analyzuje, musí být co nejpohodlnější. Zde je pět tipů, které vám pomohou dostat se tam.

Máte komplexní místo? Potřebujete perfektní web hosting servis. Nebo, pokud chcete udělat místo bez rozruchu, zkuste Webové stránky Builder. .

01. Použijte mělké selektory

Vaši rodiče vám řekli, že Mastowess není ctnost, ale pokud jde o CSS, jsou špatné. Mělké selektory mohou konzistentně používat kilobyty z velkých stylů. Vezměte tento volič:

nav ul li.nav-item

To by mohlo být vyjádřeno stručně:

.nav-item

Stejně jako pomáhá udržet vaše CSS Svelte, prohlížeč bude také vykreslit prvky zaměřené na mělké selektory rychleji. Prohlížeče si přečtěte selektory zprava doleva. Hlubší selektory jsou, tím déle vyžaduje prohlížeč, aby vykreslení a znovu vykreslení prvků, na které se tyto selektory vztahují. Pro komplexními DOM, které často reflow mohou krátké selekci také snížit na Jank.

V ideálním případě chcete, aby selektory byli co nejúspěšnější, ale to neznamená, že byste měli snížit všechno do kosti. Někdy potřebujete další specificitu pro rozšíření komponent. Strike správnou rovnováhu, ale také být pragmatický.

02. Použijte vlastnosti zkratka

Using shorthand CSS will speed up your site — Pomocí zkratka CSS bude urychlit vaše stránky

Vypadá to jako zdravý rozum, ale budete překvapeni, jak často se Longhand vlastnosti používají zbytečně. Zde je příklad některých vlastností Longhand v používání:

 Velikost písma: 1.5Rem;
Výška čáry: 1.618;
Font-Family: "Arial", "Helvetica", Sans-Serif;

To je spousta CSS! Uklidni to nahoru:

 Písmo: 1.5rem / 1.618 "Arial", "Helvetica", Sans-Serif;

. \ T písmo Northand nemovitost kondenzuje několik prohlášení do šikovného jednorázového vložka, která zabírá mnohem méně místa.

Ve výše uvedeném příkladu používá zkratka o 40% méně místa než jeho ekvivalent Longhanda. Není to tak čitelné na první pohled, ale syntaxe se stává druhou povahou poté, co jste strávili nějaký čas používat.

Samozřejmě, písmo Není vám jediná zkratka k dispozici. Například, okraj lze použít namísto delších vlastností jako margin-top. , marže vpravo a tak dále.

. \ T polstrování majetek funguje stejně. Pro více způsobů, jak vyčistit své CSS, Mozilla Developer Network nabízí užitečný seznam odkazy na nemovitosti .

Co když potřebujete přepsat hodnotu dále v kaskádě? Řekněme například, že máte nadpisový prvek, který potřebuje změnit velikost písma pro větší displeje.

V tomto případě byste měli použít konkrétnější velikost písma místo toho:

 H1 {
    Písmo: 1.5Rem / 1.618 "Arial", "Helvetica", Sans-Serif;
}
@Media (min-šířka: 60Rem) {
    H1 {
        Velikost písma: 2rem;
    }
}

To není jen vhodné, zvyšuje flexibilitu komponenty. Pokud je nějaká jiná část základního písmo Vlastnost je upravena, tyto změny budou perkolovat až do větších displejů. To funguje skvěle pro překročení komponenty, kde nový kontext vyžaduje jinou léčbu.

03. Použijte nápovědu Preload Resource

. \ T preload Resource Tip může poskytnout prohlížeč hlavu začátek na načtení CSS vašeho webu. . \ T preload Resource Tip vypráví prohlížeč, aby inicioval časný fetch pro aktivum.

Můžete ji nastavit jako & lt; link & gt; Tag v html:

& lt, link rel = "předpětí" href = "/ css / styles.css" as = "styl" & gt;

Nebo jako záhlaví HTTP v konfiguraci serveru:

odkaz: & lt; /csss/styles.csss> rel = preload; AS = Styl

V obou těchto scénářích, preload Dává prohlížeči hlavu při načítání /css/styles.css. . Použitím preload V záhlaví HTTP je preferován, protože to znamená, že prohlížeč bude objevovat nápovědu dříve v záhlaví odezvy namísto pozdějšího v těle odezvy.

Další důvod k použití preload V záhlaví HTTP spočívá v tom, že bude iniciovat událost serveru na většině implementací http / 2. Server Push je mechanismus, kterým jsou aktiva preemptivně tlačena do klienta, když jsou provedeny požadavky na obsah, a nabízí výkonnostní výhody podobné inlining CSS.

Server Push není k dispozici na http / 1. Nicméně použití preload V prostředí HTTP / 1 může stále zlepšit výkon.

04. Redundies s CSSCSS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCSS bude analyzovat všechny soubory CSS, které vám dáte, a dejte vám vědět, které pravidla mají duplicitní deklarace

To může platit kontrolovat CSS pro duplicitní pravidla s redundantní kontrolou. Například vezměte nástroj Ruby založené na nástroji CSSCS.

Uživatelé ruby ho mohou nainstalovat pomocí:

  GEM instalace CSSCSSS

Po instalaci můžete zkoumat své CSS pro propouštění jako tak:

csscsss -v styles.css

Tyto příkazy, které selectory sdílí pravidla, která můžete de-duplikovat ušetřit prostor:

 {h1} a {p} Sdílení 3 deklarace
  - Barva: # 000
  - Výška řádku: 1.618
  - Margin: 0 0 1.5Rem

Duplicitní pravidla můžete přesunout pod jedním voličem:

 H1, P {
    Barva: # 000;
    Výška čáry: 1.618;
    marže: 0 0 1.5rem;
}

Měli byste překvapeni, kolik místa může tento proces ušetřit ve velkých projektech. Použijte --Pomoc Možnost zobrazení více příkazů můžete použít k vylepšení věci dále.

05. Jděte další míli s CSSNano

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — CSSNANO vezme vaše pěkně formátované CSS a provozuje to prostřednictvím mnoha zaměřených optimalizací

Pro třešeň nahoře můžete použít cssnano. - nástroj závislý na uzlu a postcss. CSSNano nejen minifikuje CSS, dělá mnoho zaměřených optimalizací, které mohou vaše CSS ještě dále snížit. Nainstalujte jej do systému s NPM jako tak:

 NPM i -G CSSNANO-CLI

Poté jej použijte pro optimalizaci vašich CSS:

 CSSNano styles.css Optimalized-styles.css

Pokud běžící příkazy ad hoc není váš styl, můžete automatizovat CSSNano s systémem sestavení. Zde je, jak používat CSSNano v gulpfile:

 CONST gulp = požadovat ("gulp");
CONST postcss = požadovat ("gulp-postcss");
CONST CSSNANO = Vyžadovat ("CSSNANO");

const buildcss = () = & gt; {
    vrátit gulp.src ("css / styles.css")
        .pipe (PSCSS (PSCSNANO (CSSNANO ()])
        .pipe (Gulp.DEST ("CSS / Optimalizováno"));
};
konstrukční hodinky = () = & gt; {
    gulp.Watch ("css / styles.css", buildcss);
};
Export.Buildcss = buildcss;
Export.Watch = hodinky;

. \ T Buildcss. Úloha čte CSS píšete CSS / Styles.css. , pak potrubí optimalizovaný výstup do CSS / Optimalized. adresář. . \ T hodinky Úloha začíná Buildcss. Kdykoliv se vyskytnou změny CSS / Styles.css. .

. \ T hodinky Úkol může pak vyvolat v terminálu, jako je například:

 Gulp Watch

S některými vylepšením můžete vytvořit pracovní postup, který provádí tuto konkrétní optimalizaci kromě jiných úkolů souvisejících s CSS, jako jsou stavební Sass / Méně souborů, autoprefixování a další.

Chcete uložit stránky webových stránek? Exportovat jako PDF a uložte spolehlivý cloudové úložiště .

Tento článek se původně objevil síť , přední světový časopis pro web designéry. Přihlásit se zde .

Související články:

Pochopení vlastnosti CSS Display
Nová hranice animace CSS
Jak vytvořit komplexní rozložení pomocí CSS

5 Tipy pro super-rychlé CSS

01. Použijte mělké selektory

02. Použijte vlastnosti zkratka

03. Použijte nápovědu Preload Resource

04. Redundies s CSSCSS

05. Jděte další míli s CSSNano

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

Použijte negativní prostor pro kreslení lepších rukou

Řízení kmenové verze pro vzdálené týmy

Afinitní návrhář: Jak používat omezení

Afinitní návrhář: Jak používat mřížky

Převést flash hry na HTML5

Upgrade textury v návrhu látky

Naučte se spustit design a obsah sprintů

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

Kategorie