CSS-minificatie

Silktide controleert of de stylesheets die je pagina downloadt zijn geminificeerd — herschreven om de spaties, opmerkingen en herhalingen te verwijderen die alleen belangrijk zijn voor mensen die de code lezen. Niet-geminificeerde stylesheets zijn groter dan nodig, waardoor de pagina langzamer zichtbaar wordt.

verandert niets aan hoe de pagina eruitziet. Bijvoorbeeld:

/* Voor minificatie: leesbaar, maar zwaar */
h1 {
  background-color: #000000;
}
h2 {
  background-color: #000000;
}

/* Na: identiek resultaat, een fractie van de grootte */
h1,h2{background-color:#000}

Waarom dit belangrijk is

Stylesheets blokkeren meestal het renderen: de browser downloadt de van de pagina voordat er iets wordt weergegeven. Elke onnodige byte in een stylesheet verlengt dus rechtstreeks de lege tijd voordat je pagina verschijnt. Minificatie verkleint de omvang van stylesheets doorgaans aanzienlijk, en de besparing geldt opnieuw voor elke bezoeker bij elke niet-gecachete paginaweergave.

Omdat minificatie automatisch gebeurt en niets aan het gedrag verandert, zijn niet-geminificeerde stylesheets in productie vrijwel altijd het gevolg van een vergissing: een overgeslagen buildstap of ontwikkelingsbestanden die per ongeluk zijn gepubliceerd.

Hoe je dit oplost

Schakel CSS-minificatie in het buildproces van de site in. Elke moderne buildtool bevat een minifier, die bij productie-builds meestal standaard is ingeschakeld.
Als de site geen buildproces heeft, controleer dan het : de meeste CMS'en hebben een instelling of plug-in die stylesheets automatisch minificeert.
Gebruik als laatste redmiddel een zelfstandige minifier om bestanden te verwerken voordat je ze uploadt. Bewaar de leesbare originelen — die bewerk je en je publiceert de geminificeerde uitvoer.
Als een gemelde stylesheet van een derde partij is, controleer dan of die partij een geminificeerde versie aanbiedt; de meeste doen dat.

Hoe Silktide dit test

Laad de pagina in een echte browser, met het apparaattype, de verbindingssnelheid en de testlocatie die voor je snelheidstests zijn ingesteld.
Bekijk elke stylesheet die de pagina downloadt en schat in hoeveel kleiner die zou zijn na minificatie.
Rapporteer elk bestand met een betekenisvolle mogelijke besparing en beoordeel de pagina op basis van het totaal: bij ongeveer 50 KB aan mogelijke besparing wordt de beoordeling verlaagd, en bij 250 KB of meer wordt de beoordeling slecht.

Problemen oplossen

Het bestand ziet er al geminificeerd uit

Minifiers verschillen in hoe grondig ze te werk gaan. Een licht gecomprimeerde stylesheet kan dus nog steeds aanzienlijke besparingen opleveren. De controle rapporteert hoeveel kleiner het bestand kan worden; als je het door een actuele minifier laat verwerken, wordt het verschil meestal meegenomen.

We hebben leesbare styles nodig voor foutopsporing

Bewaar leesbare bronbestanden in je project en gebruik source maps voor foutopsporing. Daarmee kunnen ontwikkelaarstools in de browser de oorspronkelijke styles tonen, terwijl bezoekers de geminificeerde versie ontvangen. Je hoeft nooit leesbare code aan te bieden om leesbare foutopsporing mogelijk te maken.