Ik roep altijd dat het duurzamer is om audio en video te embedden via een gespecialiseerd platform dan om een bestand rechtstreeks te uploaden naar je website. Dit omdat direct geuploade bestanden vaak worden gepreload wanneer iemand je pagina bezoekt, ongeacht of die bezoeker de media wel of niet afspeelt. Niet zo duurzaam. Maar hoe duurzaam is het eigenlijk om een Spotify embed toe te voegen? Ik neem de proef op de som en heb 6 verschillende scenario’s doorgerekend.
Het probleem met direct uploaden
Wanneer je een audiobestand direct naar je website uploadt, en op de meest directe en eenvoudige manier toevoegt, dan wordt dat bestand vaak in zijn geheel geladen wanneer iemand de betreffende webpagina bezoekt. Ongeacht of er gebruikersinteractie is, bijvoorbeeld het afspelen van die audio.
Audiobestanden zijn vaak vrij groot, denk aan zo’n 3 MB voor een mp3 liedje van een paar minuten, dus beeld je even in hoe zwaar een podcast van een half uur zal zijn!
Lang niet iedereen die jouw webpagina bezoekt, heeft de behoefte om dat bestand af te spelen. Ofwel: vaak wordt dat hele bestand voor niks geladen. Wat een energieverspilling!
Maar als je je podcast wilt embedden via Spotify, hoe zwaar is dat eigenlijk? Best wel zwaar, zag ik. Ik heb in 2023 een aantal podcasts opgenomen en geëmbed in mijn blogposts, en tijdens mijn jaarlijkse Website Sustainability Analyse zag ik dat die blogposts flink veel zwaarder waren dan de blogposts zonder Spotify embed. En dan was er ook nog verschil in de manier van embedden.
Tijd om daar eens in te duiken!
Methode
Voor dit onderzoekje heb ik een testdomein opgezet met een minimale WordPress website. Hierop heb ik de volgende pagina’s aangemaakt:
- Een pagina zonder Spotify podcast;
- Een pagina met een Spotify podcastaflevering embedded, waarbij ik hun eigen embedcode heb gekopieerd in een WordPress “eigen HTML” block;
- Een pagina met een Spotify podcastaflevering embedded, waarbij ik de link naar de podcastaflevering heb gekopieerd in een WordPress “embed Spotify” block;
- Een pagina waar ik het audiobestand (mp3) van de podcastaflevering rechtstreeks heb toegevoegd, met de preload instellingen op “automatisch”;
- Een pagina waar ik het audiobestand (mp3) van de podcastaflevering rechtstreeks heb toegevoegd, met de preload instellingen op “metadata”;
- Een pagina waar ik het audiobestand (mp3) van de podcastaflevering rechtstreeks heb toegevoegd, met de preload instellingen op “geen”.
Vervolgens heb ik alle pagina’s door Digital Beacon getrokken om de verschillende kunnen zien.
Natuurlijk heb ik in alle gevallen dezelfde podcastaflevering gebruikt.
Klein disclaimer: De podcast staat nogal briek op Test 02 omdat ik echt helemaal niks heb gedaan aan aligning. Ik heb letterlijk een kale WordPress installatie genomen, daar 6 pagina’s aangemaakt, en de Spotify embedcode gekopieerd in dit geval. In een normale situatie zou je natuurlijk nog wel even zorgen voor goede uitlijning, maar dat is een kwestie van enkele bytes.
Resultaten
Een samenvatting van de resultaten:
| Omschrijving | Aantal assets op pagina | Gewicht van pagina in kB | g CO2 uitstoot per paginabezoek |
|---|---|---|---|
| Geen podcast | 6 | 490.77 | 0.152 |
| Spotify embed code | 42 | 1989.69 | 0.616 |
| Spotify WP embed block | 43 | 2075.96 | 0.643 |
| Selfhosted, preload=auto | 7 | 12520.88 | 3.975 |
| Selfhosted, preload=metadata | 7 | 491.26 | 0.152 |
| Selfhosted, preload=none | 6 | 490.88 | 0.152 |
Hier vind je de complete resultaten
1 – Zonder podcast
Dit is onze basis. De pagina zoals hij in de meest basic versie van WP theme Twenty Twentyfour eruitziet, met één enkele paragraaf aan lorem ipsum. Hier worden maar 6 assets geladen, samen goed voor 490.77 kB (waarvan het overgrote deel 2 zware fonts, maar dat terzijde).
2 – Spotify embedded via embedcode
Wanneer ik de podcast in kwestie toevoeg via de embedcode van Spotify zelf, dan worden er opeens 42 assets geladen: vooral heel veel scripts en fetch. (Fetch zijn extra assets die worden opgevraagd door scripts.) Dit komt omdat de player van Spotify best wel wat advanced functies heeft ten opzichte van een standaard browser-player, en er ook een bak aan tracking scripts worden geladen. De podcast zelf wordt nog niet ingeladen.
3 – Spotify embedded via WordPress embed block
Of je Spotify embed via hun eigen embedcode of via het embed block van WordPress, dat ontloopt elkaar niet heel veel. Document assets zijn ietsje groter, kennelijk doet het WordPress embed block dat ietsje anders dan Spotify zelf. Verrassend genoeg komt het grootste verschil hier van een extra font. De speler is iets groter, en de titel van de podcast wordt ook groter weergegeven. Nader onderzoek met de developer tools van Firefox laat zien dat dit kennelijk een speciaal titelfont is, wat net een klein beetje verschilt van de rest. Persoonlijk zie ik het verschil niet, dus zonde van die extra ~90 kB.
4 – Selfhosted, preload automatisch
Selfhosted zonder verdere preloadinstellingen is overduidelijk de minst wenselijke optie. Wat hier gebeurt, is dat het mediabestand (de podcast mp3) al wordt ingeladen voordat de bezoeker er überhaupt voor heeft gekozen om het af te spelen of niet. Omdat het hier al snel gaat om meerdere megabytes. In dit geval is het een bescheiden podcastje van 5 minuten, en dat voegt al 12 MB aan gewicht toe aan je pagina. Ouch.
Ten eerste is dat enorm veel energieverspilling wanneer iemand de boel niet eens wil afspelen, en ten tweede druk je mensen ongevraagd een hoop data door de strot, wat erg onbeleefd is. Zo jaag je mensen erg snel door hun databundel heen als ze op dat moment niet op wifi zitten.
5 – Selfhosted, preload metadata
Hier heb ik een heel kleine aanpassing gedaan: ik heb de preload instellingen van de audiofile aangepast naar “metadata”. Dat betekent dat niet het hele bestand wordt ingeladen, maar alleen de informatie over het bestand. De mp3 zal pas inladen wanneer de bezoeker er daadwerkelijk voor kiest om af te spelen, net als bij Spotify. Alleen dan hier zonder de berg extra scripts en fetch assets, omdat er geen tracking vanuit een derde partij is, en de speler is een stuk eenvoudiger.
De metadata hier zorgt maar voor weinig extra gewicht ten opzichte van de pagina zonder podcast, omdat ik destijds tijdens het maken van de podcast nauwelijks metadata heb toegevoegd aan het bestand. Voeg je meer metadata toe, dan wordt er natuurlijk ook meer metadata geladen.
6 – Selfhosted, preload geen
Het kan nog een tandje extremer: Je kunt ook helemaal niks preloaden. Er is alleen een miniem verschil hier in het document – dat is natuurlijk wat groter omdat ik audio heb toegevoegd. Superduurzaam dus!
Wat kunnen we hiervan leren?
Houd er wel rekening mee dat het zelf hosten van grote bestanden ervoor zorgt dat je webruimte sneller volloopt. Het is dus nog steeds zaak om de bestanden zelf goed te optimaliseren en zo licht mogelijk te houden, en er goede contenthygiëne op na te houden.
Wil jij zelf de CO2-uitstoot van jouw website doormeten? Wil je weten hoe je de verbeterpunten spot, en hoe je die kunt aanpakken? Schrijf je dan in voor mijn online cursus “Verduurzaam je eigen website”.