Het is de tijd van het jaar dat iedereen het zich gemakkelijk maakt en zich voorbereidt op de feestelijke dagen. We zien dat iedereen dit jaar op zoek is naar manieren om de dagen rond Kerstmis wat kleurrijker te maken. In Nederland zijn we momenteel beperkt in het ontvangen van 2 gasten per dag [per december 2020], wat waarschijnlijk betekent dat we Kerstmis moeten verlengen met een3e of4e dag. Dit zal terug te zien zijn in online winkelacties, zoals het vinden van de juiste outfit(s) of cadeaus. Mijn kinderen vinden het bijvoorbeeld erg leuk om kleding te krijgen. Dus nog meer mode shoppen!
Wanneer de meeste mensen winkelen voor een nieuwe outfit, hebben ze de neiging om veel verschillende producten en kleurencombinaties te bekijken. In modetermen wordt dit cloth scanning genoemd. Dit betekent dat er meer productpagina’s worden bezocht. We weten al dat meer bekeken producten leiden tot meer gekochte producten. Optimaliseren voor langere sessies vereist voorspelbare sessieprestaties. Met andere woorden: elke weergave telt! De reden waarom we scannen is omdat het minder mentale belasting vraagt en we onze focus kunnen bewaren voor interessante producten. Dit vereist wel dat alle producten vloeiend verschijnen als je naar beneden scrolt of in de details klikt. Met andere woorden, je moet streven naar een voorspelbare gebruikerservaring.
De totale cognitieve belasting, of de hoeveelheid mentale verwerkingskracht die nodig is om jouw site te gebruiken, beïnvloedt hoe gemakkelijk gebruikers inhoud vinden en taken voltooien.
– Kathryn Whitenton
In dit artikel gebruiken we de MeasureWorks Fashion top-5 om je te laten zien welke stappen er nodig zijn om van de5e positie naar de nummer 1 te stijgen. Zoals je in de afbeelding hieronder kunt zien, is de nummer 5 op de lijst H&M.
Versla elke concurrentie in 5 gemakkelijk te volgen stappen
Hoewel de stappen en de titel eenvoudig klinken, is het toch niet zo eenvoudig. Als een site te complex wordt, zijn er niet veel eenvoudige oplossingen. Soms is helemaal opnieuw beginnen makkelijker. Het absolute minimum is proberen om het weer zo eenvoudig mogelijk te maken en jezelf de vraag blijven stellen hoeveel meer hebben we echt nodig. Bij het herbouwen van een site of pagina blijven de stappen hetzelfde, maar in dat geval moet de4e stap gericht zijn op het vooraf instellen van de juiste richtlijnen en frontend architectuur.
De 5 stappen om de snelste te worden en je concurrentie te verslaan op het gebied van webprestaties zijn:
- Je pagina’s bewaken
- Gegevenskwaliteit beoordelen: verschillende pagina’s vergelijken
- Prestatiedoelen instellen
- Het laadgedrag van de pagina’s analyseren
- Word snel, blijf snel!
Stap 1: Controleer je pagina’s
De eerste en belangrijkste stap is het monitoren van je site! In deze fase geldt: hoe meer, hoe beter. Waar mogelijk adviseer ik om Real User Monitoring in te schakelen. Met dit type monitoring kan de prestatie van elke gebruikersactie worden vastgelegd voor analyse. Belangrijk bij dit type monitoring is dat het correct wordt geïmplementeerd om de juiste beslissingen te kunnen nemen. Tot nu toe heb ik een combinatie gebruikt van Google Analytics, Chrome Real User Experience Report, Dynatrace, Akamai mPulse, LUX van SpeedCurve en Instana, naast enkele open-source tools.
Vooral bij toepassingen met één pagina of hybride toepassingen zoals H&M, moet er wat extra moeite worden gedaan om de juiste paginaweergavemetriek te krijgen. Bij het filteren op de productpagina H&M Multipacks vanaf €7,99 voor verschillende kleurpatronen wordt de URL bijgewerkt. Hierdoor wordt in de meeste tools een paginaweergave uitgevoerd, terwijl de gebruiker niet altijd van plan is om de filtersectie te sluiten na het toepassen van één filter. Moet dat worden gemeten als een paginaweergave of als een filteractie?
De eenvoudigste methode om te controleren is met synthetische tools. Dit is verreweg de eenvoudigste methode om gelijke pagina’s tussen concurrenten te vergelijken. Er kunnen een heleboel verschillende tools worden gebruikt, allemaal met hun voor- en nadelen. Denk aan PageSpeed insights, WebPageTest of monitoringtools zoals Rigor, Alertsite, Catchpoint of Dynatrace Synthetics.
Voor eenvoudige benchmarking gebruik ik graag WebPageTest en het Chrome Real User Report.
Stap 2: Gegevenskwaliteit beoordelen: verschillende pagina’s vergelijken
Het probleem met monitoring is dat het bedoeld is om correct te zijn voor veel verschillende sites en technieken. Soms kunnen de tools of een tool in het bijzonder het mis hebben. Dat is de reden waarom ik hamer op het valideren van de gegevens voordat er actie wordt ondernomen. Hoewel de Web Vitals Benchmark slechts uit drie meetgegevens bestaat, zijn er veel meer meetgegevens die samen kunnen worden gebruikt voor validatie.
Als we naar de afzonderlijke pagina’s kijken, zien we dat de Cumulative Layout Shift (CLS) en Total Blocking Time (TBT) redelijk gelijk zijn, maar dat de tijd tot Largest Contentful Paint (LCP) een grote variatie vertoont. Als er verschillen zijn die te groot lijken om waar te zijn, is dat vaak ook zo. In dit geval wordt de Largest Contentful Paint niet goed berekend of is er iets mis in de testtool voor deze pagina.
Als we handmatig naar de visuele belasting kijken met behulp van de bovenstaande filmstrip, zien we dat de LCP dichter bij 6 seconden zit. De andere concurrenten in de top-5 en de andere H&M’s en pagina’s worden gemeten zoals verwacht.
We moeten ook de homepage tussen concurrenten vergelijken. Dit geeft duidelijk weer waar we aan moeten werken… het wit verwijderen.We moeten ook de homepage tussen concurrenten vergelijken. Dit geeft duidelijk weer waar we aan moeten werken… het wit verwijderen.
Stap 3: De prestatiedoelen vaststellen
Bij het optimaliseren voor prestaties stellen we altijd de initiële doelen op basis van benchmarks voor de branche, benchmarks voor de concurrentie en beschikbare SLA’s. Wanneer we kijken naar SEO prestaties hebben we de Google Core Web Vitals geclassificeerd als SLA voor betere ranking. De reden hiervoor is eenvoudig. Als je je er niet aan houdt, word je gestraft. Net zoals de meeste SLA’s worden geschreven.
Als je net zo snel wilt worden als de nummer 1, is het voldoende om 20% te halen. Dit is het geval omdat we niet in staat zijn om verschillen kleiner dan 20% op te merken. Dat betekent dat we moeten streven naar een Largest Contentful paint van 2,64 seconden met een Cumulative Layout Shift Score van 0,1 en een maximale totale blokkeertijd van 840 ms (gebaseerd op de mogelijkheden van een Samsung Galaxy S8).
Stap 4: Het laadgedrag van de pagina’s analyseren
Alle H&M-pagina’s beginnen met het weergeven van de header en een wit scherm, gevolgd door een volledig geschilderd scherm. Mijn eerste aanname zou zijn dat we te maken hebben met een volledig client-side gerenderde pagina of met blokkerende scripts. Die blokkerende scripts kunnen per ongeluk zijn of expres voor AB-tests/personalisatie.
Op al die pagina’s is een zwaar gebruikte AB-testtool actief en aangezien ik eerder gevallen heb gezien waarbij de inhoud wordt geblokkeerd totdat alle wijzigingen kunnen worden toegepast, is dit een van de verdachten voor verbetering. Meestal kan de ervaring al worden verbeterd door de implementatie schoon te houden.
Laten we beginnen met uitzoeken of de AB-testsoftware de vertraging veroorzaakt.
Zonder de AB-testsoftware is het al een stuk sneller, maar niet zo snel als het zou moeten zijn. Onderzoek van de AB testcode onthult dat ze vertrouwen op jQuery voor hun AB tests. jQuery wordt synchroon geladen en zoals we weten gaat dat gepaard met prestatiekosten. In de broncode van de homepage zelf zien we ook enig gebruik van jQuery. JQuery wordt tenminste hergebruikt. De huidige tests kunnen eenvoudig worden ingeruild voor wat vanille JavaScript.
Als we naar het onderstaande script kijken, zien we iets anders. Het lijkt erop dat de voorkant wat logica bevat die deel uitmaakt van de content publishing suite (CMS).
$(document).ready(function() {
if (!hm.options.isPublishMode) {
$('.preshopping-container').show();
} else {
$('.preshopping-container').has("article[data-preshopping-teaser=false]").show();
}
});We kunnen ook zien dat de hero banner alleen kan worden gerenderd aan de client-kant. Er is een placeholder-div beschikbaar, maar zonder enige styling. Het zou beter zijn om een echte placeholder te tonen om ruimte te besparen en te laten zien dat er iets aankomt. Vervolgens worden er eigenschappen toegevoegd aan de placeholder-div. Zodra de scripts van de componenten aan de clientzijde zijn uitgevoerd, worden die eigenschappen vertaald naar zinvolle html.
De hero content onder de verklaring op de homepage gebruikt achtergrondafbeeldingen!
Tot nu toe hebben we geleerd dat het niet eenvoudig zal zijn om van de5e positie op de eerste plaats te komen. Dit zal een echte inspanning vergen door het prioriteitsmodel toe te passen dat voor het eerst werd geïntroduceerd door The Guardian in 2013 en verder werd verfijnd door mij, wat resulteerde in de onderstaande laadvolgorde.
- Kerninhoud (essentiële html, CSS, JavaScript en afbeeldingen)
- Aangepaste lettertypen en essentiële monitoring-/testtools
- Ervaringsverbetering (JavaScript, volledige CSS)
- Overig (Analytics, Ads-tags)
- Voorbereidingen voor volgende pagina’s
Stap 5: See Beyond, Drive Impact
Soms is het gemakkelijk om de prestatieladder te beklimmen en soms wordt het ingewikkeld, zoals deze keer met de H&M-site. Dat betekent dat het slimme prioriteiten stellen, culturele veranderingen en samenwerking met lokale en wereldwijde teams vereist. Het klinkt bijna als een prestatie-optimalisatieproject ;-). Gelukkig gebruikt H&M al akamai mPulse voor monitoring, wat betekent dat alle voortgang in realtime kan worden gevolgd en met de mogelijkheid om de voortgang over apparaten, landen enzovoort te verdelen.
Met de juiste KPI’s, prestatiebudgetten en wat hard werk kunnen ze zich richten op snel blijven. Snel blijven is erg belangrijk in deze concurrerende markt met vervangende producten. Als producten gelijkwaardig zijn, wordt het verschil gemaakt in bruikbaarheid, betrouwbaarheid en prestaties.
Prestaties zijn als een hygiënefactor, iedereen verwacht dat onze website snel is, maar klaagt als dat niet zo is.
-Tom Haveman, https://www.linkedin.com/in/tomhaveman/
Dit artikel is eerder gepubliceerd op LinkedIn.
