Geminificeerde JavaScript

Silktide controleert of de scriptbestanden die je pagina downloadt, zijn geminificeerd: herschreven om spaties, opmerkingen en lange namen te verwijderen die alleen belangrijk zijn voor mensen die de code lezen. Niet-geminificeerde scripts zijn veel groter dan nodig, waardoor de pagina langzamer laadt.

verandert niets aan wat de code doet. Bijvoorbeeld:

// Voor minificatie: leesbaar, maar zwaar
function calculateTotalPrice(itemPrice, quantity) {
    return itemPrice * quantity;
}

// Na: identiek gedrag, een fractie van de omvang
function c(a,b){return a*b}

Waarom dit belangrijk is

is vaak het zwaarste onderdeel dat een pagina downloadt. In tegenstelling tot afbeeldingen moet JavaScript bovendien worden verwerkt voordat de pagina volledig interactief wordt. Niet-geminificeerde scripts worden regelmatig met de helft of meer verkleind, en die besparing geldt opnieuw voor elke bezoeker en elke niet-gecachete paginaweergave. Bezoekers op telefoons en tragere verbindingen merken dit het meest.

Omdat minificatie automatisch gebeurt en het gedrag niet verandert, zijn niet-geminificeerde productiescripts bijna altijd het gevolg van een vergissing: een buildstap die is overgeslagen, of ontwikkelingsbestanden die per ongeluk zijn geïmplementeerd.

Hoe je dit oplost

Schakel minificatie in tijdens het buildproces van de site. Elke moderne buildtool bevat een minifier, die meestal standaard is ingeschakeld voor productie-builds.
Als de site geen buildproces heeft, controleer dan het : de meeste CMS'en hebben een instelling of plug-in die scripts 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 de geminificeerde uitvoer publiceer je.
Als een gemeld bestand van een derde partij is, controleer dan of die 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.
Onderzoek elk scriptbestand dat de pagina downloadt en schat in hoeveel kleiner het zou worden als het werd geminificeerd.
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, dus een licht gecomprimeerd bestand kan nog steeds aanzienlijke besparingen opleveren. De controle rapporteert hoeveel kleiner het bestand zou kunnen worden; als je het door een actuele minifier laat verwerken, wordt het verschil meestal zichtbaar.

We hebben leesbare code nodig voor foutopsporing

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