CSS-optimalisatie - 21 manieren om uw website sneller te maken

afdrukken · Probeer het eens: 8мин · Автор: · Опубликовано · Обновлено

reproducerenLuister naar artikel

CSS optimaliseren voor prestaties.

CSS moet door een relatief complexe pijplijn gaan, net als HTML en javascript. De browser moet bestanden downloaden van de server, en ga dan verder met het ontleden en toepassen op de DOM. Vanwege de extreme optimalisatieniveaus is dit proces meestal vrij snel - voor kleine webprojecten die niet op frameworks zijn gebaseerd, vormt CSS meestal slechts een klein deel van het totale bronnenverbruik.

Frames doorbreken deze balans. Voeg een JavaScript GUI-stack zoals jQuery UI toe en zie hoe uw CSS, JS en HTML exponentieel groeien. Vaak voelen ontwikkelaars zich niet slecht - als ze op een krachtig acht-core werkstation met T3 Internet zitten, geeft niemand om snelheid. Dit verandert naarmate latenties of apparaten met CPU-beperkingen een rol gaan spelen.

CSS-optimalisatie vraagt om een multidimensionale aanpak. Hoewel handgeschreven code op verschillende manieren kan worden gereduceerd, is het inefficiënt om de raamwerkcode met de hand te herhalen. In deze gevallen geeft het gebruik van de automatische minimalisatie betere resultaten.
De volgende stappen helpen u bij het optimaliseren van uw CSS. Mogelijk zijn ze niet allemaal direct van toepassing op uw project, houd daar rekening mee.

Gebruik Shortcut CSS-suggesties

CSS-optimalisatie voor snel laden van pagina's.

De snelste CSS-zin is degene die nooit wordt geparseerd. Het gebruik van steno-suggesties zoals de onderstaande velddeclaratie zal de grootte van uw CSS-bestanden drastisch verkleinen. Veel extra afkortingen kunnen worden gevonden door "CSS Shorthand" te googelen.

Hier is een voorbeeld:

p { marge-top: 1px;
    marge-rechts: 2px;
    marge-bodem:  3px;
    marge-links: 4px; }

p { marge: 1px 2px 3px 4px; }

Verwijder ongebruikte CSS-code

Het elimineren van onnodige delen van uw markup resulteert uiteraard in een enorme toename van de snelheid. De Google Chrome-browser heeft deze functie standaard.

Ga gewoon naar Beeld> Ontwikkelaar> Hulpprogramma's voor ontwikkelaars, open het tabblad Bronnen in de nieuwste versie en open het opdrachtmenu. Selecteer daarna "Toon dekking" en bewonder het dekkingsanalysevenster dat ongebruikte code op de huidige webpagina markeert.

Werk handiger met CSS

Navigeren door regel-voor-regel analyse is niet noodzakelijkerwijs handig. Chrome Web Performance Audit retourneert vergelijkbare informatie - open het gewoon vanuit de werkbalk, kies Beeld > Ontwikkelaar > Hulpprogramma's voor ontwikkelaars > Audit en voer het uit. Wanneer dit is gebeurd, verschijnt er een lijst met problematische items.

Wees altijd op de hoogte van problemen met betrekking tot uw stijlen

Houd er rekening mee dat geautomatiseerde CSS-parsing altijd tot fouten kan leiden. Voer een grondige test uit van de hele website nadat u de CSS-bestanden hebt vervangen door verkleinde bestanden - u weet nooit welke fouten de optimalisatie heeft gemaakt. En in de toekomst kan een fatsoenlijke webhost u helpen de rimpels op uw site glad te strijken.

Inline kritieke CSS

Het laden van externe stijlbladen kost tijd vanwege latentie - herinnert iemand zich de "flits van niet-gestileerde inhoud"? Op deze manier kunnen de belangrijkste stukjes code in de header-tag worden geplaatst.

Probeer het echter niet te overdrijven. Houd er rekening mee dat de code ook moet worden gelezen door mensen die onderhoudstaken uitvoeren.

Hier is een voorbeeld:

<html>
  <hoofd>
    <stijl>
      .blauw{kleur:blauw;}
    </stijl>
    </hoofd>
  <lichaam>
    <div klas="blauw">
      Hallo Wereld!
    </div>

 

Anti-parallelle analyse

@importeren voegt structuur toe aan uw CSS-code. Helaas zijn de voordelen niet gratis: aangezien geïmporteerde bestanden kunnen worden genest, kunnen ze niet parallel worden geparseerd. De meer parallelle manier gebruikt een reeks tags die de browser in één keer kan ophalen.

Voorbeeld:

@importeren url("a.css");
@importeren url("b.css");
@importeren url(c.css);
v <link rel="stijlblad" href="a.css"> <link rel="stijlblad" href="b.css"> <link rel="stijlblad" href=c.css>

 

Vervang je afbeeldingen door CSS

Een paar jaar geleden was een set doorschijnende PNG-bestanden om doorschijnende effecten op websites te creëren gemeengoed. Momenteel zijn CSS-filters een resourcebesparend alternatief. Het fragment dat bij deze stap hoort, zorgt er bijvoorbeeld voor dat de afbeelding in kwestie wordt weergegeven als een grijswaardenversie van zichzelf.

Voorbeeld:

img { -webkit-filter: grijswaarden(100%); /* oude safari */ filter: grijswaarden(100%); }

 

Gebruik kleurencombinaties

Gezond verstand dicteert dat zescijferige kleurbeschrijvingen de meest efficiënte manier zijn om kleuren uit te drukken. Dit is niet het geval - in sommige gevallen kunnen verkorte beschrijvingen of kleurnamen korter zijn.

doel { Achtergrond kleur: #ffffff; }
doel { achtergrond: #fff; }

 

Verwijder overbodige nullen en enen

CSS ondersteunt een breed scala aan eenheden en getalnotaties. Ze zijn een welkom doelwit voor optimalisatie - zowel de volgnullen als de volgnullen kunnen worden verwijderd, zoals te zien is in het onderstaande fragment. Houd er ook rekening mee dat nul altijd nul is en dat het toevoegen van een dimensie de waarde van de informatie die erin zit niet verhoogt.

opvulling: 0.2em;
marge: 20.0 uur;
waarde: 0px;
opvulling: .2em;
marge: 20 uur;
waarde: 0;

 

Verwijder extra puntkomma's

Deze optimalisatie is enigszins kritisch omdat het codewijzigingen beïnvloedt. Met de CSS-specificatie kunt u de laatste puntkomma in een eigenschapsgroep weglaten. Aangezien de besparingen die door deze optimalisatiemethode worden behaald minimaal zijn, noemen we het vooral voor degenen die met de automatische optimalisatie werken.

p {
. . .
lettertypegrootte: 1.33m
}

 

Gebruik textuursprites

Het laden van meerdere kleine sprites is inefficiënt vanwege protocoloverhead. CSS-sprites combineren een reeks kleine afbeeldingen tot één groot PNG-bestand, dat vervolgens wordt opgesplitst met behulp van CSS-regels. Programma's zoals textuurverpakker , vereenvoudigt het creatieproces aanzienlijk.

.downloaden {
  breedte:80px; 
  hoogte:31px; 
  achtergrond positie: -160px -160px
}
.download: zweef {
  breedte:80px; 
  hoogte:32px; 
  achtergrond positie: -80px -160px
}

 

Verwijder ongewenste pixel

Een handige manier om de prestaties te verbeteren is een kenmerk van de CSS-standaard. Eenheidsloze numerieke waarden worden verondersteld pixels te zijn - het verwijderen van pixels bespaart twee bytes voor elk nummer.

h2 {opvulling:0px; marge:0px;}
h2 {opvulling:0; marge:0}

 

Vermijd veeleisende proporties

Uit de analyse bleek dat sommige tags meer kosten dan andere. De lijst die bij deze stap hoort, wordt beschouwd als bijzonder veeleisend voor de prestaties - vermijd deze wanneer u de kans krijgt om dit te doen.

rand-radius doos-schaduw transformatie
    filter
    :n-kind
    positie: gemaakt;
    enzovoort.

 

Verwijder onnodige spaties

Spaties - denk aan tabs, regelterugloop en spaties - maken code leesbaarder, maar doen niet veel vanuit het oogpunt van een parser. Elimineer ze voor verzending. Beter nog, delegeer dit werk aan een shellscript of vergelijkbaar apparaat.

Verwijder ongewenste reacties

Opmerkingen zijn ook nutteloos voor de compiler. Maak uw eigen parser om ze te verwijderen voordat ze worden afgeleverd. Dit bespaart niet alleen bandbreedte, maar maakt het ook moeilijker voor aanvallers en cloners om erachter te komen wat er achter de code zit.

Gebruik automatische compressie

Het UI-team van Yahoo heeft een applicatie gemaakt die veel compressiewerk doet. Het wordt geleverd als een JAR-bestand en kan worden uitgevoerd met de JVM van uw keuze.

java -jar yuicompressor-xyzjar
Gebruik: java -jar yuicompressor-xyzjar [opties] [invoerbestand] Algemene opties -h, --help Toont deze informatie --type Specificeert het type van het invoerbestand

 

Rennen vanaf NPM

Als u het product liever in Node.JS integreert, gaat u naar npmjs.com/pakket/yuicompressor . De slecht onderhouden repository bevat een set wrapper-bestanden en een JavaScript-API.

var-compressor = vereisen('yuicompressor');
 compressor.samenpersen('/pad/naar/ bestand of tekenreeks van JS', {
    //Compressor opties:
    tekenset: 'utf8',
    type: 'js',

 

Houd Sass en anderen onder controle

Hoewel de prestaties van de CSS-selector niet zo kritisch zijn als een paar jaar geleden (zie bron), produceren frameworks zoals Sass soms extreem complexe code. Bekijk de uitvoerbestanden van tijd tot tijd en denk na over hoe u de resultaten kunt optimaliseren. Heb je resultaten om te delen met het team? Sla bestanden op in openbare cloudopslag.

Stel caching in

Het oude gezegde luidt dat het snelste bestand degene is die nooit over de draad gaat. Door de cache van de browser te doorzoeken wordt dit efficiënt bereikt. Helaas moet het instellen van caching-headers op de server worden gedaan. Maak goed gebruik van de twee tools die in de schermafbeeldingen worden getoond, ze bieden een snelle manier om de resultaten van uw wijzigingen te analyseren.

Cache wissen

Ontwerpers houden vaak niet van caching uit angst voor problemen met aankomende wijzigingen. Een handige manier om dit probleem op te lossen, is door tags met de bestandsnaam op te nemen. Helaas werkt het schema beschreven in de code die bij deze stap hoort niet overal, aangezien sommige proxy's weigeren bestanden met "dynamische" paden in de cache op te slaan.

<koppeling rel="stijlblad" href="stijl.css?v=1.2.3">

 

Vergeet de basis niet

CSS-optimalisatie is slechts een deel van de optimalisatie-inspanning. Als uw server geen HTTP/2- en gzip-compressie gebruikt, gaat er veel tijd verloren bij het overdragen van gegevens. Gelukkig is het oplossen van deze twee problemen vrij eenvoudig. Mijn voorbeeld toont verschillende instellingen voor een veelgebruikte Apache-server met behulp van een .htaccess-bestand. Als u zich op een ander systeem bevindt, raadpleegt u gewoon de documentatie van de server.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE tekst/html AddOutputFilterByType DEFLATE text/css

Ik zal heel blij zijn als dit artikel nuttig voor je is. Welnu, ik zal nieuwe relevante materialen over dit onderwerp blijven toevoegen.

Bedankt voor het lezen Nicola Top

Hoe nuttig is de post?

Klik op de smiley om te beoordelen!

gemiddelde score 4.9 / 5. Aantal beoordelingen: 8

Er zijn nog geen beoordelingen. Beoordeel eerst.

Читайте также:

1 reactie

  1. Илья schreef:

    Ik volg je project al een hele tijd. Ik kijk naar het herstel, het is erg leuk om veranderingen ten goede te zien. Ik hou van je ontwerp en lay-out. Je kunt zien dat je aan kwaliteit werkt, bedankt voor je inzet.

Добавить комментарий

Het e-mailadres wordt niet gepubliceerd. Обязательные поля помечены *

14 + 4 =