5 tips voor supersnelle CSS

Sep 14, 2025

Procedures

Heb je nagedacht over de omvang van de CSS van je site? Als uw stijlblad ballonvaren is, kan dit de pagina-weergave uitstellen.

16 TOP CSS-animatievoorbeelden

Hoewel CSS niet het grootste activatietype is, dient u, het is een van de eerste die de browser ontdekt. Omdat de browser wordt geblokkeerd van het weergeven van de pagina totdat CSS wordt gedownload en geparseerd, moet het zo mager mogelijk zijn. Hier zijn vijf tips om je daar te helpen.

Heb je een complexe site? Je hebt het perfecte nodig web hosting onderhoud. Of, als u een site wilt maken zonder de drukte, probeer dan een website bouwer

01. Gebruik ondiepe selectors

Je ouders vertelden je dat Shallowess geen deugd is, maar als het gaat om CSS, hebben ze het mis. Consequent gebruikt, kunnen ondiepe selectoren kilobytes van grote stijlbladen trimmen. Neem deze selector:

nav ul li.nav-item

Dit kan korter worden uitgedrukt:

.nav-item

Naast het helpen om uw CSS Svelte te behouden, geeft de browser ook de elementen die worden gericht door ondiepe selectors sneller. Browsers lezen selectors van rechts naar links. Hoe dieper de selectors zijn, hoe langer het duurt voordat de browser de elementen herstelt en herstelt de elementen die selectors worden toegepast. Voor complexe doms die vaak weerspiegelen, kunnen korte selectors ook op Jank worden gesneden.

Idealiter wilt u selectors als ondiep mogelijk zijn, maar dit betekent niet dat u alles naar het bot moet snijden. Soms heb je extra specificiteit nodig om componenten uit te breiden. Sla de juiste balans, maar wees ook pragmatisch.

02. Gebruik steno-eigenschappen

Using shorthand CSS will speed up your site — Het gebruik van SHORTHAND CSS zal uw site versnellen

Dit lijkt een gezond verstand, maar je zult verrast zijn over hoe vaak eigenschappen van de natuur onnodig worden gebruikt. Hier is een voorbeeld van sommige eigenschappen in de natuur in gebruik:

 Lettergrootte: 1.5rem;
Lijnhoogte: 1.618;
Font-familie: "Arial", "Helvetica", Sans-Serif;

Dat is veel CSS! Laten we dat opruimen:

 Lettertype: 1.5REM / 1.618 "Arial", "HELVETICA", SANS-SERIF;

De doopvont Shorthand-eigenschap condenseert verschillende verklaringen in een handige een-voering die veel minder ruimte in beslag neemt.

In het bovenstaande voorbeeld, gebruikt de steno van ongeveer 40 procent minder ruimte dan het gelijkhoudende equivalent. Het is op het eerste gezicht niet zo leesbaar, maar de syntaxis wordt tweede natuur nadat je wat tijd hebt doorgebracht met behulp van het.

Natuurlijk, doopvont is niet de enige steno beschikbaar voor jou. Bijvoorbeeld, marge kan worden gebruikt in plaats van langere eigenschappen zoals margin-top margin-rechts enzovoort.

De vulling eigendom werkt op dezelfde manier. Voor meer manieren om uw CSS op te ruimen, biedt Mozilla Developer Network een behulpzame lijst van steno-onroerendgoedreferenties

Wat als u een waarde verderop in de cascade moet overschrijven? Laten we bijvoorbeeld zeggen dat u een rubriekelement hebt dat zijn lettergrootte voor grotere displays moet wijzigen.

In dit geval zou u de meer specifieke moeten gebruiken lettertypegrootte Eigenschap in plaats daarvan:

 H1 {
    Lettertype: 1.5rem / 1.618 "Arial", "Helvetica", SANS-SERIF;

@media (min-breedte: 60rem) {
    H1 {
        FONT-SIZE: 2REM;
    
}

Dit is niet alleen handig, het verhoogt ook de flexibiliteit van de component. Als een ander deel van de onderliggende doopvont Onroerend goed is gewijzigd, deze wijzigingen zullen tot grotere displays percoleren. Dit werkt geweldig voor onderdelen van component waar een nieuwe context een andere behandeling vereist.

03. Gebruik de PRELOad Resource-hint

De preload Resource Hint kan de browser een hoofd beginnen met het laden van de CSS van uw site. De preload Resource Hint vertelt de browser om een vroege halen voor een actief in te stellen.

Je kunt het instellen als een & LT; LINK & GT; Tag in HTML:

  & LT; LINK REL = "PROLOAD" HREF = "/ CSS / STYLES.CSS" AS = "STIJL" & GT;

Of als een HTTP-kop in uw serverconfiguratie:

  LINK: & LT; /CSSS/SSTYLES.CSS> ;;; rel = preload; AS = stijl

In beide scenario's, preload Geeft de browser een hoofd beginnen bij het laden /css/styles.csss Gebruik makend van preload In een HTTP-header heeft de voorkeur, omdat dit betekent dat de browser de hint eerder in de responskoppen zal ontdekken, in plaats van later in het responsorgaan.

Nog een reden om te gebruiken preload In een HTTP-header is dat het een server-duw-evenement op de meeste HTTP / 2-implementaties initieert. Server Push is een mechanisme waarmee activa worden gepromoot naar de klant wanneer aanvragen voor inhoud worden gemaakt en het biedt prestatievoordelen vergelijkbaar met het inzetten van CSS.

Server Push is niet beschikbaar op HTTP / 1. Echter, gebruiken preload In een HTTP / 1-omgeving kan de prestaties nog steeds verbeteren.

04. Cull-ontslagen met CSSCSS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSSCSS analyseert alle CSS-bestanden die u het geeft en laat u weten welke regelsets gedupliceerde verklaringen hebben

Het kan betalen om uw CSS te controleren voor dubbele regels met een ontslagcontrole. Neem bijvoorbeeld de Ruby-gebaseerde tool CSSCS's.

Ruby-gebruikers kunnen het installeren met:

  Gem CSSCSS

Eenmaal geïnstalleerd, kunt u uw CSS bekijken voor ontslagen zoals SO:

  CSSCSS -V Styles.CSS

Deze opdrachtlijsten die de regels selecteren die u kunt onthullen om ruimte te besparen:

 {H1} en {p} Deel 3-aangiften
  - Kleur: # 000
  - Lijnhoogte: 1.618
  - Marge: 0 0 1.5rem

U kunt dubbele regels onder één selector verplaatsen:

 H1, P {
    Kleur: # 000;
    Lijnhoogte: 1.618;
    Marge: 0 0 1.5rem;
}

Je zou verbaasd zijn hoeveel ruimte dit proces kan besparen in grote projecten. Gebruik de --helpen Optie om meer commando's te zien die u kunt gebruiken om de dingen verder te tweakken.

05. Ga de extra mijl met CSSNANO

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — CSSNANO neemt je mooi geformatteerde CSS en loopt het door veel gerichte optimalisaties

Voor de kers bovenop, kunt u gebruiken CSSNANO - een knooppunt en het afhankelijke tool van de post. CSSNANO minifies niet alleen CSS, het maakt vele gerichte optimalisaties die uw CSS nog verder kunnen verminderen. Installeer het op uw systeem met NPM zoals SO:

 NPM I -G CSSNANO-CLI

Gebruik het vervolgens om uw CSS te optimaliseren:

 CSSNANO STYLES.CSS geoptimaliseerde-stijlen.css

Als het uitvoeren van opdrachten Ad Hoc niet jouw stijl is, kun je CSSNANO automatiseren met een build-systeem. Hier is hoe CSSNANO in een GulpFile te gebruiken:

 COND GULP = vereist ("GULP");
const postCSS = vereisen ("GULP-POSTSS");
Const CSSNANO = vereisen ("CSSNANO");

const buildss = () = & gt; {
    Retourneer GULP.SRC ("CSS / STYLES.CSSS")
        .pipe (PostCSS ([CSSNANO ()])
        .pipe (Gulp.Dest ("CSS / geoptimaliseerd"));

const horloge = () = & gt; {
    Gulp.Watch ("CSS / Styles.css", BuildCSSS);

exports.buildcss = buildss;
Exports.Watch = horloge;

De buildss taak leest de CSS die u schrijft CSS / STYLES.CSS en leidt vervolgens de geoptimaliseerde uitvoer naar de CSS / geoptimaliseerd Directory. De kijk maar Taak begint uit buildss Wanneer er veranderingen voorkomen CSS / STYLES.CSS

De kijk maar taak kan vervolgens worden ingeroepen in de terminal, zoals:

 GULP-horloge

Met wat aanpassen kunt u een workflow bouwen die deze specifieke optimalisatie uitvoert, naast andere CSS-gerelateerde taken, zoals het bouwen van sass / minder bestanden, autoprefixing en meer.

Wilt u uw website-pagina's opslaan? Exporteren als PDF's en bespaar in betrouwbare cloud opslag

Dit artikel verscheen oorspronkelijk in netto- , 's werelds toonaangevende tijdschrift voor webontwerpers. Abonneer hier

Gerelateerde artikelen:

Informatie over het CSS-scherm onroerend goed
De nieuwe grens van CSS-animatie
Hoe complexe lay-outs te bouwen met behulp van CSS

5 tips voor supersnelle CSS

01. Gebruik ondiepe selectors

02. Gebruik steno-eigenschappen

03. Gebruik de PRELOad Resource-hint

04. Cull-ontslagen met CSSCSS

05. Ga de extra mijl met CSSNANO

Procedures - Meest populaire artikelen

Gravity Sketch gebruiken

10 Regels voor het gebruik van gebruiksvriendelijke webformulieren

Maak een interactieve parallax-afbeelding

Aan de slag te gaan met typescript

Aan de slag met HTML Canvas

Maak een logo in Illustrator

Maak een composiet in Photoshop

Hoe de huid in de schaduw in 3D

Categorieën