In mijn werk als duurzaam webdesigner ben ik altijd op zoek naar de meest lichtgewicht manier om dingen voor elkaar te krijgen. Soms is gut feeling voldoende om een keuze te maken, maar soms wil je gewoon harde cijfers. In deze blogpost heb ik verschillende methodes naast elkaar gelegd om een kaartje te embedden op je website. Wat is duurzamer, Google Maps of Open Street Map?
Kleine disclaimer: Getallen van dit soort metingen zijn een goede indicatie en richtlijn, maar geen absolute waarheid. Het is een momentopname, en ook afhankelijk van parameters zoals bijvoorbeeld welke viewportgrootte wordt gebruikt voor de meting, en wat de carbon intensity van het wereldwijde elektriciteitsnetwerk is op een bepaald moment.
Samenvatting resultaten
| Testpagina | Paginagewicht in kB | CO2 per pageview in g | Toegevoegd gewicht van kaart in kB | Toegevoegde CO2 van kaart in g |
|---|---|---|---|---|
| Nulmeting | 81,93 | 0,025 | – | – |
| Google Maps, geïmplementeerd via iframe | 679,45 | 0,211 | 597,52 | 0,186 |
| Google Maps, geïmplementeerd via Kadence Blocks | 678,8 | 0,211 | 596,87 | 0,186 |
| 🌱 Open Street Map, geïmplementeerd via iframe | 236,95 | 0,074 | 155,02 | 0,049 |
Methode
Ik heb een nieuwe WordPress installatie gedaan en daar zo weinig mogelijk aan veranderd. Ik heb 4 pagina’s aangemaakt:
- Nulmeting, leeg, met verder alleen de kolomstructuur waarin ik de kaarten ga tonen op de andere pagina’s
- Google Maps, iframe gegenereerd via Google Maps zelf
- Google Maps, Kadence Blocks integratie
- Open Street Map, iframe gegenereerd in Open Street Map zelf
Ik voeg echt alleen de kaart toe op pagina’s 2,3 en 4, en zorg ervoor dat die getoond wordt op 600px breedte en 450px hoogte. Voor het adres gebruik ik de Incubase aan De Hems 10 in Enschede, waar ik mijn werkplek heb.
Ik heb de pagina’s met 2 tools doorgemeten: De Digihobbit Ecotool en Digital Beacon. Bij Digihobbit Ecotool kreeg ik de indruk dat de inhoud van de embeds niet goed werd meegenomen, and I was right! Dat gaat dus als issue mee in de volgende developmentronde, want dat is natuurlijk wel belangrijk. De resultaten van Digital Beacon waren in dit geval betrouwbaarder.
Resultaten nulmeting
| Categorie | Aantal requests | Gewicht op pagina in kB | CO2 per pageview in g |
|---|---|---|---|
| Document | 1 | 10,23 | 0,003 |
| Stylesheet | 2 | 4,03 | 0,001 |
| Script | 3 | 15,04 | 0,005 |
| Font | 1 | 52,63 | 0,016 |
Resultaten Google Maps – iframe
| Categorie | Aantal requests | Gewicht op pagina in kB | CO2 per pageview in g | Toegevoegd gewicht van kaart in kB | Toegevoegde CO2 van kaart in g |
|---|---|---|---|---|---|
| Document | 2 | 12,44 | 0,004 | 2,21 | 0,001 |
| Stylesheet | 4 | 8,77 | 0,003 | 4,74 | 0,002 |
| Script | 15 | 343,06 | 0,106 | 328,02 | 0,101 |
| Font | 3 | 121,93 | 0,038 | 69,3 | 0,022 |
| Image | 28 | 182,08 | 0,057 | 182,08 | 0,057 |
| Other | 5 | 11,19 | 0,003 | 11,19 | 0,003 |
Resultaten Google Maps – Kadence Blocks
| Categorie | Aantal requests | Gewicht op pagina in kB | CO2 per pageview in g | Toegevoegd gewicht van kaart in kB | Toegevoegde CO2 van kaart in g |
|---|---|---|---|---|---|
| Document | 2 | 12,62 | 0,004 | 2,39 | 0,001 |
| Stylesheet | 4 | 8,77 | 0,003 | 4,74 | 0,002 |
| Script | 15 | 342,26 | 0,106 | 327,22 | 0,101 |
| Font | 3 | 121,93 | 0,038 | 69,3 | 0,022 |
| Image | 25 | 182,07 | 0,056 | 182,07 | 0,056 |
| Other | 5 | 11,18 | 0,003 | 11,18 | 0,003 |
Resultaten Open Street Map – iframe
| Categorie | Aantal requests | Gewicht op pagina in kB | CO2 per pageview in g | Toegevoegd gewicht van kaart in kB | Toegevoegde CO2 van kaart in g |
|---|---|---|---|---|---|
| Document | 2 | 11,61 | 0,004 | 1,38 | 0,001 |
| Stylesheet | 3 | 7,57 | 0,002 | 3,72 | 0,001 |
| Script | 4 | 68,87 | 0,021 | 53,83 | 0,016 |
| Font | 1 | 52,63 | 0,016 | – | – |
| Image | 11 | 96,25 | 0,030 | 96,25 | 0,030 |
| Other | – | – | – | – | – |
Conclusie
Van een kaart-widget kun je verwachten dat hij wat afbeeldingen en scripts toevoegt om zijn functie te vervullen. Scripts om het correcte adres weer te geven, te kunnen zoomen, en mogelijk nog wat functies. Afbeeldingen omdat, nouja, een kaart is een afbeelding. Of beter: een raster van afbeeldingen.
Open Street Maps is beduidend lichter dan Google Maps. Dat komt grofweg door 3 dingen: minder afbeeldingen, minder scripts en minder fonts.
Tussen de twee manieren om Google Maps te implementeren, zit een verwaarloosbaar verschil. Niet de moeite waard om te bespreken op dit moment 😉
Wil je een interactief kaartje implementeren op je website om te laten zien waar je gevestigd bent, dan kun je dat dus het beste doen door middel van Open Street Map.
Bonustip
Voeg de kaartwidget alleen toe op de contactpagina, niet in de footer!
Er zijn eigenlijk twee veelvoorkomende plekken voor een kaartwidget op je website: op je contactpagina en in de footer. Wanneer je de kaart in de footer plaatst, wordt hij op iedere pagina getoond, wat op veel pagina’s eigenlijk niks toevoegt. Intuïtief verwachten bezoekers dat ze zo’n kaartje op je contactpagina kunnen vinden. Het is dus prima om die kaart alleen op je contactpagina te te voegen. Hij wordt dan alleen geladen op een logisch moment dat een websitebezoeker hoogstwaarschijnlijk zo’n kaartje wil zien. Niet op iedere pagina die de bezoeker laadt, ongeacht of de kaart relevant is op dat moment.