Energie Plus
Website van een installateur van zonnepanelen en thuisbatterijen, opnieuw ontworpen en flink versneld.
Een nieuwe huisstijl over een bestaande site, met het cms erachter, de content mee verhuisd en de snelheid op een telefoon als harde eis.
Schema in git, content in de database
Collecties en blueprints staan in de repository, maar entries, globals, alt-teksten en publicatiestatus leven per omgeving in de database. Een deploy verplaatst dus code en geen content. Alles wat content aanraakt werd daarom een artisan-commando dat je per omgeving draait, veilig te herhalen is, en daarna weggegooid wordt. Bij de uitrol zette dat commando zes hoofdpagina's opnieuw op, bouwde het dertien oude galerijen om en publiceerde het zestien pagina's die op concept stonden.
De grootste snelheidswinst was één regel
De homepage stond op 81 met een layoutverschuiving van 0,184. De oorzaak was niet de video en niet het gewicht: het lettertype werd pas ontdekt nadat de stylesheet binnen was, dus stond de tekst seconden in een vervangend font en verschoof de pagina zodra het echte font arriveerde. Eén regel die het font vooraf aankondigt bracht de verschuiving op alle pagina's naar nul en de score naar 95.
Beeld: maten die ontbraken en kwaliteit die niemand ziet
Tussen 1024 en 1920 zat geen enkele maat, terwijl een telefoon met een scherp scherm rond de 1170 pixels nodig heeft; de browser koos dus steeds de grootste. Met 1280 en 1536 erbij ging de hero van 580 naar 238 kB. De kwaliteit ging van 82 naar 70: 28 procent minder bytes bij een gemeten beeldgelijkenis van 0,96. Avif is geprobeerd en teruggedraaid, want de encoder in de container maakte er 86 kB van waar webp op 52 kB zat.
Meten hoort bij de uitrol
Na een push wacht de pipeline tot de nieuwe container zijn commit teruggeeft op een health-route, en meet dan vier pagina's. Zakt de toegankelijkheid of de seo onder 95, dan faalt de stap. Toen productie later toch trager bleek dan staging, wees het blokkeren van losse verzoeken de oorzaak aan: niet de hero-video waar iedereen naar keek, maar het meetscript van Analytics dat 1,8 seconde aan de grootste tekening kostte.
Een logo dat op iPhones zwart werd
Het aangeleverde logo zette zijn kleurverlopen als patroon met procentuele maten over de letters. Op iOS Safari loste dat niet op en viel de vulling terug op zwart. Nu staan de verlopen als geclipte afbeelding in de svg: naast het origineel gelegd geeft dat een gelijkenis van 0,998, en op een echte iPhone staat het logo weer in kleur.
Wat erin zit
- Statamic in Laravel Eén applicatie: redacteuren in /beheer, bezoekers op dezelfde app. Geen aparte api, geen worker.
- Blokken Zesentwintig bloktypes, elk een blade plus een set in de blueprint.
- Beeld via Glide Alles door de assetlaag, met srcset per maat en cachekoppen op de bucket.
- Hero-video Twee bestanden, desktop en mobiel, zonder geluid; het stilstaande beeld gaat ook als deelafbeelding mee.
- Formulieren Adres aanvullen via de PDOK-locatieserver, reCAPTCHA per formulier instelbaar.
- Structured data LocalBusiness met beoordeling en werkgebied, FAQ-pagina's, kruimelpad per subpagina.
- Twee omgevingen Staging en productie met eigen bucket en database; een deploy verplaatst alleen code.
Beeld
