TECH UPDATE | In ons vorige blog  over Fastly, onderdeel van ons Performance Pack voor Magento, hebben we het gehad over hoe deze service ervoor zorgt dat de website zo snel mogelijk bij jouw bezoekers aankomt. Alleen Fastly is niet genoeg, we moeten ook optimaliseren wat er dan precies in dit proces gebeurt. In deze blog gaan we in op de vraag: hoe helpen we de browser om zo efficiënt en snel mogelijk jouw website aan de bezoeker te laten zien?

De browser (Chrome, Edge, of bij je grootmoeder nog Internet Explorer) moet veel werk verzetten om van vrij ‘platte’ HTML-code een mooie webshop te bouwen. Het lijkt misschien aan de voorkant simpel, aan de achterkant gebeurt er dus een heleboel. Belangrijk hierbij is het verwerken van CSS (Cascading Style Sheets) - styling. CSS geeft je website kleur, toont het juiste lettertype en zet tabellen met de juiste afstand van elkaar. Standaard wordt de CSS van alle pagina’s in één bestand gezet en wordt deze vereist door de website om alle content te tonen. Hierdoor moet de browser wachten op de download van dit grote bestand, want je wilt een website zonder styling natuurlijk niet laten zien aan je bezoeker!


De CNN website zonder styling -  dit is dus niet de bedoeling!

Om dit proces te optimaliseren kunnen we twee dingen doen.

  1. Eerst kijken we hoe je voorkomt dat je browser moet wachten op de download van het grote CSS-bestand
  2. Daarna kijken we of we alleen wat nodig is qua styling op de webshop, kunnen aanbieden. In plaats van alle styling die op de gehele webshop wordt gebruikt.

Het antwoord op beide zaken heet: Critical CSS. Critical in deze context staat voor de belangrijkste styling. En wat is het belangrijkste in die eerste paar seconden dat een pagina geladen is? Alles wat zichtbaar is! Dit noemen we ‘above the fold’: alles wat zichtbaar is op je scherm vóór je naar beneden scrolt. Als we nou alleen de styling die hiervoor nodig is kunnen genereren, dan kunnen we dat eerst aan de browser aanbieden. En hoeft deze niet door alle andere code heen te gaan.

 

 

Experius Critical CSS Module: zo kort mogelijk een wit scherm in beeld

Experius heeft voor deze oplossing een module gebouwd die in Magento automatisch de benodigde styling kan genereren: de Critical CSS Module. De impact van Critical CSS zit ‘m vooral op de echte laadtijd van de website vóór je iets ziet veranderen, en zorgt ervoor dat de bezoeker niet te lang met een wit scherm voor z’n neus zit. Vaak zien we een vermindering van wel 50% in die ‘tijd tot je geen wit scherm meer hebt’. Hoe minder wachten, hoe sneller de ervaring van de bezoeker en hoe sneller hij of zij lekker kan gaan browsen en bestellen. 

Hoe werkt de module? Bij elk deployment moment waarbij nieuwe code live gezet wordt, gaat deze module een paar pagina-types langs (product-, categorie- & contentpagina) om de Critical CSS te genereren = de belangrijkste styling op een rijtje zetten. Daarna zet de module dit ‘inline’ in het HTML document. Dit betekent dat je browser geen los bestand meer hoeft te downloaden én dat je browser zich in eerste instantie alleen op de belangrijke styling hoeft te richten! Voilà: weer een performance verbetering gerealiseerd. 

 

Experius Critical CSS is onderdeel van de Experius Performance Pack.
Meer zien en weten? Neem contact op met mij of rechtstreeks met jouw klantcoördinator!

 
Leestips - ook interessant: 

Google Core Web Vitals: de impact op jouw webshop 
 Fastly CDN: laad content nóg sneller op jouw webshop
 Razendsnel op die bestelknop drukken: hoe werkt Smart JS Bundling?

 
 

Floris Schreuder

Tech Lead Solutions & Magento Perfomance Consultant

Mail floris@experius.nl

Phone 030-8200238