Is een Progressive Web App (PWA) voor iedereen, was de hoofdvraag op LinkedIn. Uiteraard, maar tegen welke kosten. En interessanter, wat zijn de redenen om voor PWA te kiezen?
PWA biedt mogelijkheden die binnen het web niet op eenzelfde manier te realiseren zijn, zoals:
- Offline experience
je kunt bronnen beschikbaar om in te spelen op verlies van internet-connectie; - App experience
Je kunt een website of webapplicatie het uiterlijke en ervaring van een native applicatie meegeven; - Push notificaties
de gebruiker hoeft de webpagina niet open hebben staan;
PWA is dus voor iedereen, zou je kunnen zeggen. Ook wanneer je huidige website gebrek aan goede performance kent, wordt niet enkel AMP als oplossing voor een trage website gezien, maar ook PWA. Dit is op zichzelf onterecht.
Initiële PWA performance door JavaScript
Een Progressive Web App wordt veelal gebouwd middels een JavaScript framework als React, Angular of Vue. Daarover zijn de volgende quotes te vinden.
- React
application will never load faster than 1.1 seconds
- Angular
app will always take at least 2.7 seconds to boot up
- Vue app
users will need to wait at least 1 second before they can start using it.
Een Progressive Web App gaat dus gepaard met JavaScript, wat per definitie ten koste gaat van de Time to Interactive (1.). JavaScript zal namelijk eerst gedownload, geparsed en uitgevoerd moeten worden. Dat duurt langer dan een statisch html document voorschotelen.
De initiële laadtijd van een Progressive Web App zal dus niet kunnen opboksen tegen een non-JavaScript website.
Initiële PWA laadtijd beperken
Bouw je toch een PWA? Pas dan technieken als code splitting toe en maak gebruik van een Server Side Rendering in plaats van Client Side Rendering. Ook de First Meaningful Paint (FMP) zal hier van profiteren.
Eénmaal opgestart, is PWA sneller
Doordat het zogenaamde skelet reeds geladen is, biedt een Progressive Web App een verbeterde performance indien bronnen eenmaal ingeladen zijn. Vervolgens kunnen vervolgpagina's vooraf ingeladen worden, indien men op het punt staat verder te navigeren. Ook bronnen als hoofdzakelijke stylesheets en JavaScript hoeven niet meer gedownload of ingeladen te worden.
Module specifieke JavaScripts moeten nog wel ingeladen worden, indien code splitting is toegepast. Het is zonde om bronnen, benodigd om het bestelproces te laten functioneren, al vooraf in te laden terwijl men nog enkel een productpagina bekijkt.
Deze bronnen zijn echter versneld in te laden middels resource hints, om ze paraat te hebben op het moment dat ze gebruikt gaan worden. Zogenaamde "pre-warmed cache" of "navigation warmup".
Performance alleen is geen reden om voor PWA te kiezen
In tegenstelling tot andere voordelen die PWA kan bieden, is performance op zichzelf geen reden om voor een PWA te kiezen.
The [...] problem with PWA, and more relevant to our topic, is that it somehow got associated with performance.
tonsky.me/blog/pwa
En wel om de volgende redenen:
- De performance optimaliseren van een eventuele bestaande website zal goedkoper zijn;
- HTTP/2 en HTTP/2 Server Push is ook buiten PWA om in te zetten;
- Resource hints zijn logischerwijs ook te gebruiken in geval van non-PWA websites;
- ook non-PWA websites genieten van het caching voordeel, indien correct geconfigureerd.
Soms wordt gedacht dat HTTP/2 of resource hints individueel je performance problemen kan doen verdwijnen. Zo wordt ook wel eens over PWA gedacht. Door benodigd gebruik van JavaScript schuilt er dus een gevaar in die gedachte, is veelal in de PageSpeed Insights c.q. Lighthouse resultaten terug te zien.
Dat optimale pagespeed en performance ook behaald kan worden zonder toepassingen als PWA of AMP, wordt bewezen door de websites die wij bouwen, als ook deze website. Onder meer door gebruik te maken van resource hints in combinatie met caching, ervaar je optimale performance tijdens het navigeren. Daar komt geen PWA aan te pas.
PWA conclusie
PWA zelf zorgt niet voor verbeterde performance, vanwege benodigde JavaScript. De technieken die in PWA gebruikt worden, uiteraard wel. Die technieken kunnen dus buiten PWA om ook worden ingezet voor optimale performance.
Wanneer de doelgroep van een website, webshop of applicatie conversie- en marketingtechnisch ook beter bediend en bereikt kan worden met een PWA, zou performance logischerwijs direct meegenomen kunnen (en moeten) worden.
Niet toe aan een PWA, maar is je website of webshop gebaat bij verbeterde performance? Dit deden we eerder voor onder meer Nuon Sales Force en Maxilia. Bekijk onze resultaten of neem contact op!
(1.) in een volgend artikel licht ik de theorie achter de invloed van een PWA op de Time to Interactive metric toe.
