Wij hielpen Stichting De Molleboon aan een onderhoudsvrije website, zodat de stichting meer handen vrij krijgt voor (maatschappelijke) activiteiten in het gelijknamige stamcafé.
Deze voormalige Joomla website is overgezet naar het LightBolt CMS, om een meer technisch onderhoudsvrije website te introduceren, waar security en privacy tegelijkertijd gewaarborgd blijven.
Met deze Joomla CMS switch, is ook het ontwerp gemoderniseerd en meer responsive als ook toegankelijk gemaakt. Alhoewel de website een one-pager betreft, wordt de website dus nog steeds gevoed door een CMS. Hierdoor is de website in de toekomst eenvoudig uit te breiden met aanvullende (landings)pagina's.
Website Performance Optimization
In een wisselwerking tussen opdrachtgever en onze CodeGorilla developer Johan, heeft Johan binnen Blue 2 Blond de nieuwe website zelfstandig tot stand gebracht. In een jaar tijd is Johan intern opgeleid van junior frontend developer tot WPO'er, ofwel Website Performance Optimizer; een niche dat nog door weinig bedrijven tot in de meetbaar groene cijfers bedreven wordt.
Gecombineerd met het LightBolt CMS wordt de website namelijk voorzien van een optimale pagespeed en performance score, wat de website snelheid en bezoeker-conversie ten goede komt. Waar de score voorheen rond de 60% hing, komt de nieuwe website tegenwoordig uit op een nette 98% (met de laatste tweaks, inmiddels 99%).
Joomla metrics in Lighthouse
De aanbevelingen die door Lighthouse worden gegeven voor de voormalige Joomla website (wat neer komt op de gemiddelde Joomla website), waren voorheen dan ook als volgt:
Finishing JS performance touch
De finishing touch binnen deze website, is de foto-gallery welke onderaan de webpagina is te vinden: omdat een bezoeker pas na scrollen in aanraking komt met de fotogallerij, en pas op een foto kan klikken zodra deze in beeld is gescrolled, worden benodigdheden voor het uitvergroten (wij gebruiken daarvoor de fancybox plugin) van een afbeelding niet direct geladen.
Hierdoor wordt de main-thread van de browser niet onnodig geblokkeerd en zal de website initieel sneller geladen zijn, doordat de browser vrij baan houdt om andere zaken als stylesheet, afbeeldingen en meer belangrijke JS eerst te laden en toe te passen.
Pas wanneer de fotogallerij in beeld dreigt te komen, wordt de fancybox-plugin gedownload, maar nog niet uitgevoerd. Zodra de gebruiker klikt, zal de fancybox reeds gedownload zijn, wordt de JavaScript werkelijk uitgevoerd en wordt de afbeelding vergroot weergegeven. Het preloaden doen we middels JavaScript en zorgt voor het volgend verschil in situatie:
Zonder JS preloading
Merk hierbij het gat tussen klikken door de gebruiker, en openen van de fancybox op, wat op de Main thread wordt uitgevoerd. In dit tijdsbestek moet de browser de fancybox eerst downloaden (Network request).
Met JS preloading
Doordat Fancybox reeds is ge-preload (zie: resource hints), is er geen gat (op de plek van de vraagteken, moest in de eerste situatie Fancybox eerst nog gedownload worden) en reageert de browser direct door de foto te openen; er is geen tussentijdse network request benodigd, doordat Fancybox middels preload reeds gedownload is.
Een betere pagespeed begint in de basis
Bovenstaand betreft geen performance truuk, maar een best practice. JavaScript Payloads opdelen waar mogelijk en gebruik maken van bestaande concepten als resource hints. Dit nemen wij in de basis mee voor websites voor onze opdrachtgevers.
Je eigen website testen op pagespeed score? Dit kan via Google's PageSpeed Insights, waar je de url van de website of specifieke (landings)pagina in kunt vullen. Of ook effectieve middelen toepassen voor betere performance? Mail of bel met erwin op blue2blond punt nl / 06 2161 5721.
Eigen site testen Contact opnemen
- Website:
- demolleboon.nl
- Oplevering:
- maart 2019
- Opdrachtgever:
- Stichting De Molleboon
- Teamleden:
