Snelle site van belang in het retail-landschap

Voor bij de doelgroep passende ontwerpen is een beroep gedaan op Fizz, waarna Blue 2 Blond de ontwerpen heeft mogen integreren in het LightBolt CMS.

Copycat

Het ontwerp werd door Fizz Digital Agency ook direct omgezet tot HTML prototypes. Om echter tot juiste integratie en vooral snelheidsoptimalisaties te komen, hebben we dit fundamenteel op de schop genomen en de prototypes binnen onze eigen werkwijze nagebouwd. Technische details zijn hieronder te lezen per onderwerp.

CMS features

Vanwege merk, collectie en opruimings-aanbod is het CMS verder afgestemd op de aanvullende wensen omtrent product-beheer. Dit zijn echter niet de enige modules waar het CMS van voorzien is.

Frontend features

Per feestdag kan men uitzonderingen voor openingstijden opgeven. Deze worden direct op de contactpagina vermeld, als ook een vooruitblik op een eigen pagina onder de noemer "speciale openingstijden". Vanuit beide vestigingen worden reviews direct gepubliceerd, waar via de website binnengekomen reviews eerst goedgekeurd dienen te worden.

Naast de collectie, diende het team in het oog te springen. Op basis van de ontwerpen, hebben wij dit gekoppeld met de achterkant. Elke dag zal er een ander team-lid van Wiechers Wonen de nadruk krijgen binnen de website. Begeleid met een hover-effect kan men door de teamleden navigeren.

Via een server side pinterest koppeling, worden pinterest berichten van de eigen pinterest-kanaal gelezen. Daarbij kan worden opgegeven welke boards wel èn niet uitgelezen moeten worden.

Backend features

Zowel een routebeschrijving als ook openingstijden kunnen vanuit de CMS omgeving worden opgegeven, waarbij feestdagen een rol spelen. Middels kaderblokken beheer, kunnen specifieke contentblokken op pagina's gepubliceerd worden. Feestdagen, opruiming of acties kan via die weg meer aandacht krijgen.

Producten hebben een versie-history, waarmee wijzigingen van product-teksten gereviseerd kunnen worden. Het CMS is tevens voorzien van een API, om op die manier het product-aanbod te kunnen koppelen met eigen (product)software, als ook gebruik te kunnen maken van Single Sign On voor website beheerders.

Het CMS kent een hotspot-module, waarmee hotspots geplaatst kunnen worden op (hero)afbeeldingen, om vervolgens naam en url op te kunnen geven, of een product te kunnen kiezen. Dit kan gebruikt worden voor sfeerplaten als ook teamfoto of plattegronden.

Client side toepassingen

Alhoewel het LightBolt CMS in de basis ondersteuning biedt voor resource hints en Critical Render Path, hebben we zelf op verschillende plekken invloed uitgeoefend op de aangeleverde ontwerpen.

Javascript libraries

Voor sliders c.q. carousel functionaliteit is gebruik gemaakt van flickity. Hiervoor hebben we in het CMS ondersteuning gebouwd om een flickity-toepassing te beïnvloeden qua instellingen. Fancybox wordt gebruikt voor het vergroten van product-afbeeldingen, als ook het weergeven van opvolgende productafbeeldingen. Daarnaast wordt Fancybox ingezet voor afbeeldingen in gallerijen op andere pagina's.

Voor toepassingen als collapse, dropdowns en tooltips, is gebruik gemaakt van Bootstrap 4. Bootstrap 4 CSS hebben we intact gehouden wegens het meer flexibele grid-systeem, maar hebben qua JavaScript library teruggegrepen op Bootstrap 3, vanwege het gewicht.

JavaScript reductie

Tooltips werden sporadisch gebruikt en hebben we er uit gesloopt. Hiermee is de site toegankelijk­er geworden en hebben we JavaScript fors kunnen reduceren. Dezelfde vlieger is opgegaan voor popups (Bootstrap modals) die waren ingezet voor contactmomenten. Hierbij opent een contact- of interesse formulier in een popup.

Omdat er reeds gebruik werd gemaakt van Fancybox en Fancybox versie 3 visueel goed naar smaak te wijzigen is, hebben we afstand genomen van de JavaScript dat gemoeid gaat met Bootstrap modals. Hiermee dekt Fancybox dezelfde functionaliteit van de Bootstrap modals en hebben we ook hier een reduceringsslag kunnen maken. Bovendien wordt Fancybox enkel ingeladen op pagina's waar het gebruikt wordt, wat overbodige network latency bespaart.

HTML code

Ook in de HTML code is performance en SEO technisch vaak ruimte voor verbetering. Zo hebben we de ontvangen ontwerpen ontdaan van vele CSS/bootstrap class-toekenningen. Immers is het meer standaard dat CSS documenten door de browser gecached worden, waarmee de benodigde HTML download per pagina gereduceerd wordt. Bovendien heeft een website beheerder niet altijd kennis van een framework als Bootstrap.

Code reductie

Naast het snijden in CSS classes, hebben we ook redundante code qua responsive gedrag en redundante bootstrap-nesting ingeperkt om tegelijkertijd de volgorde van content aan te passen, zodat de hoofdteksten hoger in het HTML document staan. Aanvullend hebben we waar mogelijk resources weg kunnen knippen. Het icoon voor de uitklapnavigatie op smartphones, werd gerealiseerd middels voor elke state een SVG-icoon. Dit hebben we vervangen door styling en animatie van de button puur via CSS plaats te laten vinden.

Semantiek en toegankelijk­heid

Deze aanpassingsronde hebben we direct aangegrepen om ook de semantiek ofwel gebruik van HTML elementen (zoals gebruik van het header-element voor topnavigatie en ul/ol voor opsommingen), als ook de toegankelijk­heid onder de loep te nemen. Denk aan het gebruik van toegankelijk­e kleuren, geen lege HTML elementen en betere focus aanduiding op product selectie. Daarnaast wordt de focus op de juiste elementen terug gebracht wanneer een dropdown, uitklapnavigatie of zoek-functie wordt gesloten.

Performance

Op performance vlak hebben we enkele zaken gewijzigd. Voor animaties hebben we een beroep gedaan op Hardware Acceleration om animaties soepeler te laten verlopen. Het LightBolt CMS verzorgt een optimale TTFB waar de eerder genoemde Critical Render Path als ook resource hints ook debet zijn aan een snelle weergave van een webpagina. HTTP2 ondersteuning is tevens meegenomen vanuit de hosting.

Lettertype

Van het in het ontwerp geïntroduceerde lettertype, is in overleg met Wiechers Wonen afstand genomen. Het lettertype lag dusdanig dicht bij standaard lettertypes, dat we hebben gekozen voor een system font stack, waarbij het gebruikte besturingssysteem in combinatie met de browser, automatisch het lettertype toepast dat ondersteund wordt. Behalve dat ongemakkelijke styling-issues wordt voorkomen, bespaart dit download-tijd als ook rerender/hertekenwerk door de browser, waardoor de gebruiker sneller de uiteindelijke webpagina krijgt voorgeschoteld.

Event listeners

Voor een meer optimale time-to-interactive hebben we JavaScript koppelingen waar mogelijk via listeners opgezet. Zo is er op de "afspraak maken"-pagina sprake van een datepicker, welke zich in een (fancybox)popup bevindt. Om die reden wordt deze pas geïnitialiseerd op het moment dat de fancybox geopend wordt. Dit voorkomt dat de bezoeker gedwongen opgezadeld wordt met JavaScript taken, waardoor de werking van sommige toepassingen uitgesteld zouden worden.

Filtering

Ook het gebruik van filters wordt middels event listeners op die manier voor specifieke taken uitgesteld, totdat de gebruiker een actie doet. Er is qua filtering voor gekozen om dit enkel client side te doen, voor optimale SEO indexering en snelle response in de browser. Er worden geen AJAX c.q. externe aanroepen gedaan om productweergave aan te passen op basis van toegepaste filters. De hoeveelheid producten leende zich goed voor deze oplossing.

Afbeeldingen

Voor het inladen van afbeeldingen hebben we verschillende technieken met elkaar gecombineerd. Denk aan image lazy-loading (maar ook video's of iframes), waarbij soms gebruik wordt gemaakt van initiele thumbnails als ook gekleurde placeholders. Daarbovenop hebben we het door LightBolt automatisch ondersteunde Webp-afbeeldingsformaten ingeschakeld, waarmee flinke besparingen gerealiseerd worden, zowel voor website (dataverkeer) als ook bezoeker (laadtijd).

Privacy en AVG

Buiten eventuele tracking mechanismen om dat door een marketingbureau wordt ingezet, biedt de website van zichzelf optimale privacy. De review-module is self-made, met als voordeel dat persoonsdata niet over andere kanalen of servers gaan.

Persoonsnamen die gepaard gaan met de openbare reviews, zijn bovendien gemaskeerd. Deze worden in de broncode omgekeerd gespeld, waarna ze via CSS in de juiste leesrichting worden weergegeven. Dit moet voorkomen dat men bij naam en toenaam te vinden is, wanneer er op Gegoogled wordt.

Third party trackers

Ook third-party toepassingen worden door het LightBolt CMS buiten boord gehouden, of geanonimiseerd voorgeschoteld. Denk aan:

• Youtube video's, deze worden cookie-loos geserveerd;
• Het weergeven van share-buttons geschiedt op privacy vriendelijke wijze, om directe tracking te voorkomen;
• Een Pinterest-widget is server side geprogrammeerd, om te voorkomen dat cookies en trackers van Pinterest in worden geladen.

Third party resources

Voor third-party resources (zoals fancybox en jquery) hebben we gebruik gemaakt van subresource integrity. Elk externe resource krijgt hiermee een hash mee, die door de browser vergeleken zal worden met de (hash van de) bestandsinhoud die aangeleverd wordt. Wanneer dit niet overeen komt, concludeert de browser dat het extern bestand qua versie en inhoud verschilt van hetgeen dat door de website verwacht wordt.

Hiermee kan de kans dat (al dan niet kwaadwaardig) gewijzigde bestanden risico's voor bezoekers met zich mee brengen, voorkomen. De juiste hash genereren voor een resource kan via srihash.org.

Pagespeed testing

Adviestraject en consultancy

Ook advies en consultancy ontvangen voor een eigen webshop of website traject ten behoeve van de performance? Alhoewel we graag zelf het technisch traject realiseren om garanties op performance af te kunnen geven, geven wij ook advies in bestaande trajecten. Neem daarvoor contact op met info op blue2blond punt nl.