Det fem år gamle site ikke var frygteligt, bestemt ikke. Men i løbet at de sidste par år er browsere blevet markant forbedrede, Internet Explorer er lagt i graven, og webudviklere kan omsider gøre brug af moderne HTML, CSS og medietyper.
Disse nye muligheder er det en fornøjelse både at arbejde med og måle resultaterne af. I artiklen her kan du læse om hvilke forbedringer vi har opnået og hvilke værktøjer der er anvendt. Alle screenshots fremstår på engelsk, men brugerfladen er selvfølgelig på dansk for de skribenter og redaktører der foretrækker dette.
Indhold
Markant reduktion i websitets klimaaftryk
Ifølge Website Carbon Calculator var det gamle site “renere” end 51 % af de målte websites, hvilket må betegnes som værende gennemsnitligt. Det nye site rammer 91 %. Det ligger altså blandt de mest klimavenlige websites, der er testet med Website Carbon Calculator.
Potentiel årlig CO2-reduktion
Hvad betyder dette omregnet i CO2-reduktion? Ved eksempelvis 10.000 månedlige sidevisninger er CO2-udledningen reduceret fra 108 kg til godt 5 kg.
Før
0kg CO2 årligt
Efter
0kg CO2 årligt
Målingerne er foretaget på forsiden, og selvom den er layoutet forskelligt i den nye og gamle version, indeholder den de samme oplysninger; en menu med søgefelt, en liste over seneste nyheder, en footer med navigation og kontaktoplysninger – helt standard. Alligevel er siden markant lettere.
Tekniske metoder til et slankere website
Den mængde data, der transporteres fra datacenteret til telefonen, når man besøger Ehlers-Danlos-websitet i dag, er reduceret til ¼. Dette har krævet en “bredspektret indsats”. Der er rigtig meget at hente på blandt andre disse områder:
- Skift til WordPress core block editor, også kendt som Gutenberg, i stedet for Divi.
- Brug af moderne medieformater som WebP og WebM.
- Dynamisk load af assets, fx kontaktformularer.
- Omhyggelig komprimering af assets, inkl. PDF-filer og fonte.
- Kun lokale assets, altså ingen Facebook eller Twitter-embeds.
At optimere websitet mest muligt, få det til at bruge mindst mulig energi, er det første og vigtigste skridt på vejen til en bæredygtig hjemmesiden. Vi arbejder med et budget for sidernes størrelse. Et ambitiøst men opnåeligt mål er maksimalt 500 KB pr side.
Hvorfor vælge et grønt webhotel?
Digitalt er fysisk. Data i skyen flagrer ikke rundt et sted oppe i himlen, som en mange rent faktisk forestiller sig. Websites ligger på et datacenter med meget håndgribelige computere som står tændt 24 timer i døgnet.
231 million trees would need to be planted to deal with the pollution caused as a result of the data US citizens consumed in 2019.
Gerry McGovern – World Wide Waste
Disse datacentre bruger enorme mængder strøm. Det samme gør det netværk af routere, kabler og antenner der flytter data fra datacentrene og ned på din telefon når du besøger hjemmesiden.
Derfor giver det også mening at stille nogle miljømæssige spørgsmål når der skal vælges webhotel:
- Er webhotellet forsynet med certificeret grøn strøm?
- Er webhotellet fysisk placeret tæt på hjemmesidens primære målgruppe?
- Hvor grøn er strømmen generelt grøn i de lande data passerer for at nå målgruppen?
At vælge et webhotel der forsynes af vedvarende energi er det andet store skridt på vejen til en bæredygtig hjemmeside.
Svensk strøm er grønnere end dansk
Electricity Maps viser det aktuelle klimaaftryk for landes energiproduktion. Dette afhænger selvfølgelig af vind og vejr, men det generelle billede er, at svensk strøm er 8-10 gange grønnere end både dansk og tysk. Mange glimrende webhoteller benytter datacentre i Tyskland eller Holland. Men er målet at minimere klimaaftrykket og er den primære målgruppe dansk, er et svensk webhotel et bedre valg.
Grøn hosting certificeret af The Green Web Foundation
Med de ovenstående overvejelser og selvfølgelig en række tekniske krav in mente, har vi valgt at hoste vores websites hos Oderland i Sverige. Oderland har en aktiv miljøpolitik, er mærket “Bra miljöval” af Göteborg Energi og er certificerede partnere hos The Green Web Foundation.
Kontinuerlig overvågning af hjemmesidens klimaaftryk
For at motivere indsatsen for at bevare et minimal klimaaftryk, overvåger vi løbende vores websites CO2-udledning med EcoPing. På den måde stikker tallene ikke pludseligt af, uden at vi bliver opmærksomme på det og kan sætte ind. Desuden er målingerne et af grundlagende for en kvalificeret CO2-kompensering.
CO2-kompensering og … træer!
Det tredje og sidste skridt mod et CO2-neutralt website er CO2-kompensation. Vi har som tusinder andre virksomheder valgt B-Corp certificerede Ecologi hertil. Deres klimaindsats er to-delt: den ene er at plante træer, og den anden er økonomisk støtte til klimaløsninger der udbydes som CO2-kompensation.
Nyplantede træer er år fra at opsamle den nødvendige mængde CO2, men er noget af det bedste vi kan gøre for miljø, klima og biodiversitet på lang sigt. Derfor kombineres træplantningsprojekterne med investeringer i klimaløsninger der gør en forskel nu og her.
Er du skeptisk? Godt. Du kan læse meget mere om Ecologis arbejde på ecologi.com/faqs
Beregning af årlige CO2-udledning og den nødvendige kompensation
For at sikre at vi får det hele med når vi beregner hvor meget vi skal kompensere, tager vi udgangspunkt i vores webhotels samlede trafik. Den inkluderer nemlig også trafik der forekommer under udvikling, deployment, backups, emails osv.
I skrivende stund er den årlige belastning beregnet til ca. 200 Kg CO2.
Dette kompenserer vi mindst 500 %. Altså har vi købt 2 ton aflad og plantet 50 træer.
Er det nok? Nej. Det redder ikke verden. Men det er et reelt forsøg på at tage et kvalificeret ansvar for det klimaaftryk vi sætter, med de produkter vi skaber.
Kontakt os endelig for uddybning af beregningsmetoder og anbefalinger.
Webtilgængelighed – inklusion af alle
Det giver sig selv, at en patientforening for folk med kroniske lidelser, der blandt andet giver betydelige motoriske udfordringer, behøver en hjemmeside, der er tilgængelig for alle og lever op til formelle krav om webtilgængelighed.
WebAIM Web Accessibility Evaluation Tool
Wattspeed, som omtales senere, er fin til hurtigt at afsløre, om der er problemer med webtilgængelig. Er der det, kan vi bruge WebAIM WAVE til udpege præcist, hvor der er fejl og mangler. Det er typisk manglende ARIA-labels, felter man ikke kan navigere til med tastaturet, manglende billedtekster, tekst der er vanskelig at læse pga. lille størrelse eller for lav kontrast.
Løbende tjek af webtilgængelighed i WordPress
At teste for webtilgængelighed efter publicering er fint, men også let at glemme. Derfor benytter vi et plugin, Accessibility Checker, til at tjekke op imod 40 almindelige tilgængelighedsregler hver gang en artikel gemmes. Resultatet vises direkte i editoren, så man kan løse problemerne med det samme.
Oplæsning med skærmlæsere
Når websitet har bestået HTML5– og syntetiske WCAG-tests, afprøver vi oplæsning af tekster på skærmen med en skærmlæser. Blinde benytter avancerede programmer som JAWS eller NVDA, men ved hjælp af Microsoft Windows’ indbyggede talesyntese og Edge browseren, kan vi få et indtryk af hvordan sitet fungerer, når det læses op, uden at skulle installerede ekstra software.
Herunder er et eksempel. Det skal lige bemærkes, at stemmen “Microsoft Helle” lyder ret syntetisk. De professionelle værktøjer har ofte en mere naturlig stemme.
Respekt for brugerens privatliv og GDRP compliance
Det er fuldt ud muligt at udvikle et WordPress-website med respekt for brugernes privatliv. Væsentlige overvejelser for ethvert website er, om man virkelig har brug for at indsamle data om brugeren, og behøver man dele dem med nogen. Som regel er svaret nej.
På det nye website respekterer vi brugerens privatliv med:
- Cookiefri zone. Uden cookies, ingen irriterende (og oftest ugyldige) cookie-popups.
- Understøttelse af WordPress’ indbyggede værktøjer til indsigt i og sletning af data.
- Indbygget besøgsstatistik med Matomo. Ingen deling af data med fx Google.
- Alle assets, altså billeder, fonte, scripts osv., er hostet på egen server i Danmark.
- Sikker levering af e-mails med TLS-kryptering og DMARC/SPF/DKIM records.
Matomo Analytics – et GDPR compliant alternativ
Når man ønsker statistik på vores websites, er rygmarvsreaktionen ofte at koble sitet op på en Google-konto, og lade Google Analytics (GA) opsamle data om de besøgendes adfærd. Denne information er værdifuld, især for Google, som jo til gengæld stiller GA til rådighed uden beregning.
I stedet anvender vi Matomo Analytics, der giver os 100 % ejerskab over besøgsdata og mulighed for at beskytte brugernes privatliv med IP-hashing, respekt for Do No Track, cookiefri statistik og GDPR-værktøjer. Matomo anvendes bl.a. af UN, Amnesty og EU.
Indsigt i, og sletning af persondata i WordPress
WordPress har indbyggede værktøjer til eksport og sletning af persondata. Persondata kan f.eks. være kontaktoplysninger indtastet i en tilmelding til et arrangement. Når vi vælger tredjeparts plugins, f.eks. til kontaktformular, nyhedsbrev eller events, sikrer vi os at plugin’et hægter sig på disse værktøjer, så vi har én velfungerende indgang til overholdelse af databeskyttelsesforordningen.
Performance og brugervenlighed
Det er lettest af identificere og rette fejl på sitet undervejs i udviklingsforløbet. Opdager vi et problem med et tema eller et plugin, går vi i dialog med udviklerne. De er altid interesserede i at få rettet fejlene, ikke blot for vores skyld, men for alle de oftest tusinder af brugere.
Wattspeed by Advanced Web Ranking
Wattspeed browser extension til Firefox og Chrome viser Google Lighthouse-score, HTML5-validerer, tester for mobilvenlighed og webtilgængelighed – alt sammen ved et tryk på en knap. Med Wattspeed er det derfor virkelig nemt at få et hurtigt indtryk af om siden er i orden.
Google Lighthouse
Med Lighthouse går vi yderligere i dybden i forhold til Googles anbefalinger for Performance, Accessibility, Best Practices og SEO. Alle disse parametre har indflydelse på brugeroplevelsen og deraf placeringen på søgemaskine. Det nye website består alle Google Lighthouse-tests.
Forfatter- og redaktør-venlighed med Gutenberg
Brugervenlighed handler ikke kun om at give den besøgende en god og intuitiv oplevelse, men i lige så høj grad om, at gøre livet let for dem som vedligeholder websitet i dagligdagen. Det typiske bestyrelsesmedlem er ikke webudvikler.
I stedet for en kompliceret pagebuilder som tidligere anvendt, bruger vi nu WordPress’ indbyggede block-editor kaldet Gutenberg. Det giver os flere fordele:
- Et meget enkelt interface for skribenter at arbejde i.
- Enorm fleksibilitet i forhold til valg af tema og styling.
- Mulighed for semantisk korrekt HTML og god webtilgængelighed.
- Et bredt udvalgt af integrationer til f.eks. formularværktøjer.
- En strategisk solidt valg i forhold til fremtidig udvikling.
Herunder ses eksempler på hvor enkel block-editoren kan fremstå for skribenter, samt hvordan listen over indlæg kan tilpasses til at vise netop de informationer der er brug for.
Sikker drift og overvågning
Et robust website er altid tilgængeligt. Ehlers-Danlos websitet er overkommeligt at administrere – det er trods alt et relativt simpelt site for små tusind medlemmer. Hvilken interesse skulle en hacker have i det? Bots på nettet skeler ikke til, hvem du er. Et website er en ressource der – hvis kompromitteret – kan anvendes til spam, sprede malware, mine bitcoins, høste data – kun fantasien sætter grænser, og hackernes fantasi fejler åbenlyst ikke noget.
Vi sikrer en stabil og forudsigelig drift af sitet med:
- Altid opdateret WordPress-core, LiteSpeed-webserver og PHP 8.
- End-point firewall med Brute Force Protection og tofaktor-godkendelse.
- To uafhængige, automatiske backups.
- Logning af administrative handlinger, fx logins og installation af plugins.
- Overvågning af oppe- og svartider.
Opsummering
Ehlers-Danlos-foreningen og vi har med det nye website fået opfyldt vores ønsker til en effektiv, let anvendelig og langtidsholdbar løsning.
Med et bæredygtigt design slår vi to fluer med ét smæk, da et slankere website performer tilsvarende bedre.
Når vi efterlever anbefalingerne for webtilgængelighed, bliver sitet let at bruge for alle besøgende – ikke kun for folk med funktionsnedsættelser.
Vi gemmer ikke unødvendige persondata om den besøgende, slipper for cookie-popups, og kan til hver en tid honorere et ønske om indsigt i eller sletning af persondata – det er privacy by design.
Alle anvendte plugins og temaet er open source og tilgængeligt på WordPress.org.
