In het kader van performance optimalisatie (en wellicht micro-optimalisatie, zoals Critical Path CSS?), heb ik me gestort op het inwisselen van een door JavaScript aangestuurde hamburger/uitklap menu en carousel. Middels CSS selectors kunnen omliggende elementen voor praktische doeleinden aangestuurd worden.
Pure CSS alternatieven
De voornaamste reden was de aanwezigheid van overtollige JavaScript. Ik heb de Bootstrap 4 JavaScript file ingeladen om tooltips, de carousel en de navigatie werkend te maken.
- Om tooltips mogelijk te maken middels Bootstrap, heb je de tether.js nodig. Afhankelijkheden word ik nooit blij van, zeker niet als het balast niet in verhouding staat tot het doel. Hier heb ik dan ook als eerste afstand van gedaan. Tooltips kunnen prima middels attributen, in combinatie met pseudo-classes en de CSS content property + attr.
tooltip voorbeeld - Uitklap navigaties kunnen via CSS gerealiseerd worden. Dit idee, uiterlijk van elementen via checkboxes aansturen, passen we voornamelijk in webapplicaties van onze hand toe, om ze een meer moderne uitstraling te geven.
Aangezien deze toepassingen voornamelijk op smartphones terug zullen komen, dient er extra rekening te worden gehouden met het inzetten van animaties (en bij voorkeur beperken tot translate en opacity).
navigatie voorbeeld - Een carousel, aangestuurd door radio-buttons. Extra JS kan benodigd zijn om de carousel of slider aan te vullen met bijvoorbeeld swipe-ondersteuning (zoals op onze homepagina) of een optie tot pauzering, alhoewel daar ook JS-loze slideshow voorbeelden van zijn te vinden.
radio-button voorbeeld 1 en radio-button voorbeeld-2
JavaScript bagage de deur uit
Middels CSS 3 selectors, waaronder sibling + pseudo class in combinatie met formuliervelden, kunnen acties die voorheen via JavaScript gerealiseerd worden, dus uitstekend vervangen worden.
Ook met het nieuwe HTTP/2 protocol, zou optimaliseren in bronnen en performance geen ondergeschoven kindje moeten zijn. Middels bovenstaande aanpassingen, heb ik afstand kunnen doen van de gehele Bootstrap JavaScript bagage. Hiermee wordt directe laadtijd en uitvoertijd in de browser beperkt.
Verdere optimalisatie
Meer zou gewonnen kunnen worden, door bijvoorbeeld in zijn geheel afstand te doen van JavaScript frameworks (waarvan jQuery het bekendst is). Of de inspanning die hiermee gemoeid zou gaan, de moeite waard is, hangt af van zowel de wensen in verhouding tot de beschikbare tijd binnen een project. Sommige libraries of plugins maken op hun beurt reeds gebruik van frameworks, met als gevolg dat er een zoektocht gestart moet worden naar een plugin welke niet rust op een framework, of waarbij zelf JavaScript geschreven moet worden.
Bij veel JavaScript gebruik, zal er een keerpunt zijn waarbij er middels een framework, juist minder JavaScript handmatig geschreven hoeft te worden. Dit komt de grootte van externe bestanden op zijn beurt tegemoet. In bovenstaand geval, heb ik experimenteel de Bootstrap JavaScript framework laten vallen, doordat het als overbodig ballast voelde.
