Dubbele JavaScript
Silktide controleert of code die je pagina downloadt meer dan één keer wordt opgenomen. Dubbele code maakt een pagina groter en trager om te laden, zonder iets toe te voegen voor de bezoeker.
Moderne wordt meestal samengesteld uit veel kleine modules die worden gebundeld in enkele grote bestanden. Wanneer meerdere bundels onafhankelijk van elkaar worden gebouwd — bijvoorbeeld je eigen code plus een ingesloten widget — kan elke bundel een eigen kopie van dezelfde module bevatten. Bezoekers downloaden dan twee keer dezelfde functionaliteit.
Waarom dit belangrijk is
Elke gedupliceerde module kost downloadtijd, verwerkingstijd en mobiele data, zonder daar iets voor terug te leveren. Op een snelle kantoorverbinding is de verspilling misschien niet merkbaar, maar bezoekers op telefoons en tragere netwerken merken dit direct doordat een pagina langer nodig heeft om te verschijnen en te reageren.
Duplicatie neemt ook vaak ongemerkt toe: elk nieuw script of elke nieuwe widget die aan een site wordt toegevoegd, kan eigen kopieën van veelgebruikte bibliotheken meebrengen. Daardoor stapelt de verspilling zich in de loop van de tijd op, tenzij iemand ernaar zoekt.
Hoe je dit oplost
Dit is een oplossing voor je ontwikkelaars, in het buildproces van de site en niet in de inhoud ervan:
- Analyseer hoe de JavaScript van de site wordt gebundeld. De meeste bundeltools hebben een analysestand die visualiseert wat elk uitvoerbestand bevat, waardoor gedupliceerde modules eenvoudig te vinden zijn.
- Configureer de build zodat gedeelde afhankelijkheden worden ontdubbeld. Zo wordt een bibliotheek die op meerdere plaatsen wordt gebruikt één keer opgenomen en gedeeld, in plaats van in elke bundel te worden gekopieerd.
- Lijn versies op elkaar af: twee verschillende versies van dezelfde bibliotheek kunnen niet worden samengevoegd. Alles upgraden naar één versie is daarom vaak de echte oplossing.
- Als de duplicatie afkomstig is van een script van een derde partij dat je niet opnieuw kunt bouwen, vraag de aanbieder dan om een lichtere build of vervang het script.
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 de JavaScript-bestanden die de pagina downloadt en identificeer modules die in meer dan één bestand voorkomen. Kopieën worden herkend op basis van wat ze doen, zodat ze ook worden gevonden wanneer de bestanden anders zijn opgemaakt of .
- Rapporteer elke gedupliceerde module, de bestanden waarin deze voorkomt en de downloadgrootte die kan worden bespaard door de extra kopieën te verwijderen.
- Beoordeel de pagina op basis van de totale verspilde downloadgrootte: zelfs ongeveer 10 KB duplicatie leidt al tot een lagere beoordeling, en 50 KB of meer wordt als slecht beoordeeld.
Problemen oplossen
De twee bestanden bevatten geen identieke code
De controle koppelt modules op basis van wat ze zijn, niet op basis van hun exacte tekst. Dezelfde module kan er na minificatie in twee bundels heel verschillend uitzien en toch dezelfde gedupliceerde code zijn.
De duplicatie bevindt zich in een script van een derde partij
Je kunt de bundel van iemand anders niet opnieuw bouwen. Bespreek dit met de aanbieder, laad het script op een andere manier die je afhankelijkheden deelt, of accepteer de kosten als de waarde van het script daartegen opweegt.