Yesss, ik heb weer een prachtige website mogen bouwen! Deze keer voor Ann My Dice, een metalcoreband uit Rotterdam. Een leuk project, omdat ik als conservatorium alumna nog steeds een zwak heb voor de muzieksector, en de wens van de band was om een zo duurzaam mogelijke website neer te zetten. Right up my alley! Maar ook droomprojecten hebben zo hun hiccups en uitdagingen, dus het leek me wel interessant om daar een inkijkje in te geven, en hoe ik die dingen heb opgelost.
Sommige mensen denken dat je als webdesigner of webdeveloper alwetend bent en alles kan wat ze willen. Maar dat is praktisch onmogelijk, en daarom onrealistisch. Al was het maar omdat WordPress bijvoorbeeld om het moment van schrijven 59.000 plugins heeft. Die kun je onmogelijk allemaal kennen, laat staan direct weten welke de beste oplossing is voor een specifiek probleem. Dat is een kwestie van goede research en simpelweg uitproberen. En dan heb ik het alleen nog maar over WordPress!
Ook al heb je als webdesigner of webdeveloper een bepaald basisniveau aan expertise, in ieder project kom je wel dingen tegen die nieuw voor je zijn, of die niet volgens het boekje gaan. Met ieder project leer je dus nieuwe dingen! Dingen die voor mij nieuw waren in dit project, waren bijvoorbeeld het werken met Bandsintown en Sumup (tot nu toe alleen klanten met Mollie als payment gateway gehad).
1 – Bandsintown plaatst scripts op pagina’s waar het niks te zoeken heeft
Bandsintown is één van de populairste methodes om aan je fanbase te laten weten dat je ergens speelt. Ann My Dice wilde niet op meerdere plekken handmatig hun concertdata moeten toevoegen, dus kozen we ervoor om de Bandsintown widget te gebruiken.
Nadeel: Deze widget is volgens mij ontworpen in het jaar 1827 en daarna nooit met zijn tijd meegegaan. Je moet én een WordPress plugin installeren, én een lap code plakken op de pagina waar je de widget wilt tonen (in dit geval de homepage). Suboptimaal. Die lap code genereer je als band in je Bandsintown account. Maar die werkt dus niet zonder de WordPress plugin 🙄 En die WordPress plugin joekelt op iedere pagina een script, ook als je verder niks met Bandsintown doet op die pagina’s. Ofwel: Je maakt een hoop pagina’s onnodig zwaar en daarmee minder duurzaam met scripts die daar niks te zoeken hebben. Boooeeee!
De ideale oplossing zou natuurlijk zijn dat Bandsintown zijn widgetontwerp grondig herziet, om te voorkomen dat dit soort onnodige scriptplaatsing gebeurt. Wat ik heb gedaan om dit voor Ann My Dice op te lossen, is met behulp van Asset Cleanup de betreffende scripts unloaden op de pagina’s waar ze niet nodig zijn.
2 – Sumup plaatst scripts op pagina’s waar het niks te zoeken heeft
Hetzelfde geldt voor Sumup. Ook deze partij plaatst scripts op pagina’s waar het helemaal niet nodig is. Sumup is namelijk alleen nodig op de checkout pagina, maar plaatst zijn scripts en stylesheets ook op alle pagina’s.
Ook hier is de ideale oplossing natuurlijk dat Sumup hun plugin zo aanpast dat er alleen code wordt geplaatst op de pagina waar het daadwerkelijk wordt gebruikt, en niet op alle pagina’s waar het niet wordt gebruikt. Met Asset Cleanup kon ik hier wel de stylesheet unloaden, maar helaas niet het script, omdat hij de version parameter niet lekker pakt. Hopelijk in een toekomstige update wel!
3 – Youtube CO2 minimaliseren door gebruik van modals
Ik heb eerder al een hele blog geschreven over mediabestanden wel of niet zelf uploaden. Maar naast duurzaamheidsoverwegingen zijn er nog veel meer keuzes die je kunt maken. De grootte van jouw hostingpakket bijvoorbeeld, of marketing- en zichtbaarheidsoverwegingen.
Ann My Dice wilde graag een showcase met hun 3 meest recente video’s op de homepage. Als je dat zomaar als 3 kale Youtube embeds doet, dan is dat retezwaar. Zo’n video laadt namelijk een enorme berg scripts voor de speler zelf (die heeft veel meer advanced functies dan je standaard browser videospeler) en ook nog eens voor tracking. Niet cool als dat allemaal wordt ingeladen wanneer een bezoeker die video’s niet eens bekijkt.
Wat ik heb gedaan is de video’s in modals tonen: De video en bijbehorende scripts worden pas ingeladen wanneer de thumbnail wordt aangeklikt. Zo voorkom je een hoop onnodig dataverkeer.
4 – Homepage met shop, grote foto’s én Bandsintown label B of lichter houden is lastig, maar niet onmogelijk
Ik streef er altijd naar om mijn webpagina’s zo lichtgewicht mogelijk te houden. Liefst niet zwaarder dan label B (0,341 g CO2 per paginabezoek), wat neerkomt op iets minder dan 1 MB voor een pagina. De homepagina van Ann My Dice is iets zwaarder, 1,1 MB. Dit omdat er een aantal keuzes zijn gemaakt die bij elkaar best wel zwaar in gewicht zijn:
Zou je 2 van deze 3 items op een pagina combineren, dan zou dat prima kunnen en de pagina onder de 1 MB houden. Maar omdat geen van deze 3 items onmisbaar is voor Ann My Dice, is het nét een label C geworden. Is nog altijd een stuk duurzamer dan de label F die ze eerst hadden. Zo zie je maar dat duurzaamheid nooit absoluut is, maar altijd in dienst staat van functionaliteit.
Wil jij een website of webshop laten bouwen die niet alleen mooi en functioneel is, maar ook met aandacht voor duurzaamheid gebouwd is? Digihobbit at your service!