De grootste uitdaging onder de voormalige PageSpeed Insights tests, is volledig komen te vervallen nu de PageSpeed Insights gebruik maakt van de Lighthouse engine.
Samenvatting? Zie onderaan het artikel.
Webshop en website eigenaren kregen begin 2018 al te maken met plotselinge verandering van de pagespeed score in PageSpeed Insights. De nadruk kwam bij deze wijziging nog meer te liggen om de First Contentful Paint, waarbij code dat verantwoordelijk was voor styling beneden de vouw, asynchroon werd ingeladen. Op die manier werd voorkomen dat de browser gedwongen moet wachten met 'inkleuren' van het scherm van de potentiële klant.
De nieuwe situatie
Sinds PageSpeed Insights van de Lighthouse engine gebruik maakt, is deze factor geheel komen te vervallen. Nog steeds houdt de score rekening met het asynchroon inladen van CSS, oftewel "Defer unused CSS". Dat deze noemer trouwens verwarrend kan zijn, wordt middels een github issue geïllustreerd die is ingediend binnen het Lighthouse project.
Buiten deze test om beveelt Google aan om alles "Above the Fold" alvast correct in te kleuren middels CSS styling. Hiermee zal de gebruiker een sneller reagerende website ervaren en neemt conversie in geval van een webshop of boekingssysteem toe, soms met miljoenen meer omzet dankzij optimale performance.
Onopgemaakte pagina
Echter, deze "Defer unused CSS" criterium, houdt met het laatste geen rekening. Met andere woorden: je kunt de pagina primair geheel stijl-loos voorschotelen, waarmee het oogt alsof de website volledig 'gebroken' is. Vervolgens kun je alle styling asynchroon inladen, waarna de styling alsnog wordt toegepast. Dit zorgt voor een flikkerend effect in styling, maar wordt door Google niet afgestraft.
Deferred demo
Ter illustratie heb ik een demo-pagina gemaakt, waarbij de styling een seconde later inlaadt. Hierbij wordt initieel een onopgemaakte pagina voorgeschoteld. Dit vindt de Lighthouse analyse akkoord, maar is geen situatie dat je aan potentiële klanten voor wilt schotelen.
Defer technieken
Een techniek welke het LightBolt CMS hanteerde, was het asynchroon inladen van de gehele stylesheet. Hierbij werd alles "Above the fold" alvast getekend. Deze techniek werd enkel bij de eerste pagehit binnen een sessie toepast. Vanaf dat moment is de stylesheet immers gecached en werkt deze techniek enkel averechts (toename in content-download en voordeel van caching zou anders teniet worden gedaan).
Hiervoor heb ik een demo opgezet. Voornaamste CSS wordt alvast ingeladen. Bewust zijn de buttons niet opgemaakt. Deze worden met een seconde vertraging opgemaakt. Toepassing van deze techniek wordt aanbevolen voor content dat zich onder de vouw bevindt.
Deze techniek levert in de Lighthouse performance analyse desondanks een procent-punt aftrek op. Dit komt doordat een Lighthouse test niet meer gezien wordt als eerste bezoeker, waardoor deze techniek niet door Lighthouse ontdekt wordt. Desondanks, indien eenmaal gecached, levert het een snelle pagina op. Dit is te ervaren wanneer vanuit bovenstaande demo wordt doorgeklikt naar de "undeferred" demo-pagina:
Defer oplossing voor Lighthouse
Om het voordeel van caching te blijven benutten en benodigde tijd voor content-download beperkt te houden, blijven we deze techniek graag inzetten. Alhoewel het primair een tekortkoming van de Lighthouse analyse betreft, hebben we hier omheen weten te werken.
Ons LightBolt CMS hebben we kunnen voorzien van een uitbreiding waarbij zowel de Lighthouse analyse als ook de bezoeker tegemoet wordt gekomen. Op deze website zie je de techniek reeds in actie. Bij een opvolgende paginabezoek binnen een sessie, wordt de gehele stylesheet asynchroon ingeladen. Dit heeft een witte pagina als gevolg. Om hier omheen te werken, maken we gebruik van een implementatie welke ook door Google's AMP wordt gehanteerd.
Onzichtbaar naar zichtbaar
De gehele webpagina wordt primair volledig transparant gemaakt, via de CSS opacity property. Zodra de stylesheet ingeladen wordt, wordt deze transparantie op animatie-basis opgeheven. Omdat de stylesheet bij het eerste bezoek reeds gecached was, zal er geen vertraging in het spel zijn. De animatie van 100% transparantie (onzichtbaar) naar 0% transparantie (zichtbaar) vindt plaats over een tijdsbestek van 0.1 seconde. De webpagina wordt hiermee soepel in beeld gebracht en blijft daardoor snel aanvoelen.
In deze demo hebben we de animatie-duur bewust opgehoogd naar 0.5 seconden, om het effect goed te kunnen illustreren.
Meer over opacity:
Samenvatting: Defer unused CSS
Alle demo-pagina's zullen tegen de 100% performance score behalen. Primair lijkt de techniek dus niet van invloed op de Lighthouse performance score. In de basis pas je een loading-techniek primair toe voor bezoekers, om te voorzien in een gevoel van snelheid en reactietijd naar bezoekers toe.
In geval van een meer omvangrijke website, waarmee meer styling gemoeid gaat, is het herhaaldelijk inlinen (demo) van CSS geen best practice. Toename in kilobytes, dataverkeer en juist ook laadtijd is het ongewenst resultaat.
Undeferred CSS (demo) is dan praktisch voor opvolgende bezoeken, maar zal juist in geval van grotere websites door Lighthouse performance analyse worden afgestraft. Deferred CSS (demo) zonder primaire styling is ook geen oplossing, gezien een onopgemaakte pagina dat men te zien krijgt.
Door te spelen met zichtbaarheid / CSS opacity (demo), kun je zowel bezoekers als de Lighthouse analyse tegemoet komen. Idealiter zou ik echter zien dat Lighthouse weet om te gaan met eerste bezoek binnen een sessie en opvolgende bezoeken, zodat de undeferred oplossing zonder afstraffing kan worden ingezet.
