Performance.now 2018

Net Fronteers achter de rug en toen stond op 8 & 9 november Performance.now() alweer op de agenda. Onze Eleveners Nick, Remco en Patrick hebben twee interessante dagen achter de rug en die willen ze graag met ons delen.

Performance.now() werd dit jaar voor het eerst gehouden, door de organisatie achter Mobilism en CSS Day. Vergeleken met een conferentie als Fronteers was Performance.now() een stuk kleiner qua formaat, maar niet minder interessant! Inhoudelijk gingen de talks een stuk dieper in op de materie en werden technischer aangevlogen. Dit sloot goed aan bij onze verwachtingen, met name omdat wij een technisch bureau zijn. We zetten 'm voor volgend jaar weer op de wensenlijst!

Er stonden 16 sprekers op het programma, met elk 50 minuten en een korte Q&A aan het eind. De talks waren redelijk divers en ze hadden allemaal een eigen inzicht. Overall waren de onderwerpen:

• Javascript Performance
• Progressive Web Apps (PWA's)
• Image optimization
• Performance monitoring
• Perceived performance

Performance

Bij performance op het web wordt al snel gekeken naar Javascript en Javascript frameworks. Hier lag dan ook de focus tijdens de openingstalk van de conferentie. Bijna alle sites maken gebruik van Javascript en dat heeft impact op laadtijd en performance van de website. Javascript frameworks zijn vaak de grote boosdoeners.

Iedereen maakt gebruik van Third-Party Scripts als Google Analytics, Hotjar, Adobe Analytics en nog veel meer. We vergeten vaak dat, ondanks dat deze aangeleverd worden door een derde partij, we deze scripts nog steeds moeten inladen in de website. Ook dit kost tijd en kan ten koste gaan van de snelheid van de eigen website. Het is belangrijk om ook de snelheid en kwaliteit van Third-Party scripts te (blijven) monitoren.

Naast de website kant van performance is er ook nog de mogelijkheid om de performance van je webserver te verbeteren. Zo kun je op meerdere manieren de caching van je bestanden inregelen om eventuele code en afbeeldingen op te slaan zodat deze vele malen sneller laden. Ook kwam hierbij uiteraard HTTP/2 ter sprake en werd er alvast vooruitgekeken naar HTTP/3 (voorheen bekend als 'Quic').

Optimaliseren van websites

Met een focus op performance kwamen al snel de termen Progressive Web App (PWA) en Service Workers aan de beurt. Er is momenteel geen duidelijke definitie van wat een PWA is of moet zijn, maar een website/applicatie krijgt meestal de naam PWA als deze functionaliteiten bevat die voor de gebruiker meestal gerelateerd worden aan een Native App. Denk hierbij aan het kunnen installeren van de applicatie op de homescreen van het device, het offline kunnen gebruiken van de webapplicatie en het kunnen ontvangen van pushberichten vanuit deze webapplicatie.

Gelukkig is het zo dat iedereen nu al met een Progressive Web App aan de slag kan. Door middel van Service Workers en caching kan een website heel snel aan voelen. Een van de performance methodes is het toepassen van een zogeheten "App Shell". Door je basis interface te cachen (headers, footers etc) kun je je bezoekers het idee geven dat je website direct geladen wordt. Door deze snelle methode krijgen je bezoekers al gauw een positieve "Perceived performance".

Monitoring en Metrics

Een van de overkoepelende thema's was het meten van performance van een website. Iets wat je op een redelijk niveau kunt doen met de standaardwaarden van een browsers als Start Render, First Meaningful Paint en Visually complete.

Hoewel je hier zeker wel mee uit de voeten kunt voor het maken van de eerste stappen naar het optimaliseren van je website, werd al snel duidelijk dat je veel specifieker moet en kunt meten. Maak dan gebruik van de juiste tools en blijf monitoren.

Learnings

Het kan soms lastig zijn om te beginnen met optimaliseren van je webapplicatie. Daarom is het zo belangrijk dat je altijd blijft meten wat er precies lang duurt. Doordat je weet waar je performance minder wordt kun je gefocust kijken naar manieren om deze op te lossen. Een kort lijstje van punten waar je op kunt letten voor performance:

• Gebruik technieken als 'async/defer' om het laad moment uit te stellen en 'preload' de browser alvast te informeren dat er op een later moment iets geladen gaat worden.
• Optimaliseer gebruik van scripts afkomstig van derde partijen. Gebruik alleen wat je nodig hebt. Zorg ervoor dat als het Third-Party script (tijdelijk) niet beschikbaar is, dit geen negatieve gevolgen heeft voor de website.
• Optimaliseer het gebruik van webfonts en icon fonts. Deze zijn vaak heel zwaar en komen ook van derde partijen.
• Meet de correcte punten met betrekking tot performance.
• Test (onder andere) de performance, bijvoorbeeld met behulp van www.webpagetest.org
• Controleer altijd meerdere apparaten en internet snelheden. Niet iedere bezoeker heeft super snel internet of dure hardware.
• Zorg ervoor dat je alleen in laad wat je echt nodig hebt op dat moment, en maak keuzes met betrekking tot het gebruik van frameworks. Een framework kan soms heel handig zijn, maar zorg ervoor dat de keuze van het framework ook echt toegevoegde waarde heeft voor de applicatie en dus niet alleen maar voordelen voor de ontwikkelaar terwijl de applicatie er op achteruit gaat.