Webshark Blog

Talán azt gondolod, hogy az internet és rajta a weboldalad egy “tiszta” dolog, egyáltalán nem szennyezi a környezetet úgy, mint az autók vagy a gyárkémények. Pedig a weboldalak létének is jelentős környezeti hatása van. Sok energiát meg lehet spórolni egy környezetbarát UX-szel. De hogyan? (2021.05.31. – Egy új fejezettel bővítettünk: Hogyan teheted zöldebbé a weboldalad?)

Amit mindjárt az elején leszögezhetünk: az internet energiafogyasztása és szén-dioxid kibocsátása elég jelentős.

Mennyire egészséges a web?

Az elektromosság tartja életben a webet: adatközpontokat használ, telekommunikációs hálózatokat és persze kellenek hozzá az eszközök a felhasználók részéről. Globálisan az internet több elektromos energiát használ évente, mint az Egyesült Királyság.

Ez pedig jelentős mennyiségű szén-dioxid kibocsátással jár: a világ teljes kibocsátásának mintegy 2 százalékáért felelős az internet által használt elektromosság. Ez a mennyiség megegyezik azzal, amit a légiközlekedési iparág bocsájt ki, amit általában a leginkább környezetszennyezőnek tartunk.

Arra a kérdésre, hogy mennyire egészséges – vagy éppen beteg – a web a Mozilla is megpróbált már válaszolni az Internet Health Reportban. A 2018-as jelentés egyik fejezete a web óriásira nőtt ökológiai lábnyomával foglalkozik. E szerint, ha a web egy ország volna, akkor a világ negyedik legnagyobb szén-dioxid kibocsátója lenne az Egyesült Államok, Kína és India után.

Miközben a kriptovaluták bányászata, az e-hulladék kérdése és az adattárolás viszonylag nagy nyilvánosságot kap, az már kevésbé szembetűnő, hogy az online viselkedésünk milyen nagy mértékben növeli az internet energiaéhségét. Ebbe pedig az is beletartozik, hogy miként tervezzük meg a weboldalakat vagy a mobiltelefonos applikációkat.

Ha például egy netes asszisztenshez fordulsz, és azt kéred tőle, hogy kapcsolja fel a világítást, akkor egyből elindítasz egy láncot az otthonodból különböző adatközpontokon keresztül, majd vissza. Ahelyett, hogy felállnál és felkapcsolnád a villanyt. Ritkán mérjük fel, hogy egyes tevékenyeségeink a neten milyen energiafelhasználással járnak. A “dolgok internete”, mely még kényelmesebbé teszi az életünket, szintén hatalmas mennyiségű energiát igényel.

Ráadásul, míg a többi iparágban komoly erőfeszítéseket tesznek a kibocsátás csökkentéséért, az internet esetében az elkövetkező években további gyors növekedés várható. Hiszen egyre gyarapszik azon személyek száma, akik hozzáférnek a nethez, ahogy az adatok is gyorsabban áramlanak és egyre több van belőlük, miközben olcsóbb őket tárolni. Az olyan streaming szolgáltatások, mint a YouTube, a Netflix vagy a Spotify mind óriási adat-használók és lendületesen bővülnek.

Mi a gond az egyes weboldalakkal?

A Mozilla jelentése felhívja a figyelmet azonban magára a webdesignra is. Rámutat arra, hogy a fenntarthatósághoz hozzátartozik, hogy miként tervezünk meg weboldalakat és applikációkat.

Az átlagos weboldalak is fokozatosan egyre nagyobbá válnak, egyre több adatot használnak fel. Az átlagos weboldal mérete a HTTPArchive.org szerint háromszorosára nőtt 2010 óta, és folyamatosan növekszik. Ennek hatására az internet globális szén-dioxid kibocsátása az elkövetkező évben 3,5 százalékra emelkedik. Abban az időszakban, amikor fontos lenne, hogy minden iparág a lehető legnagyobb mértékben csökkentse a kibocsátását.

A fenntartható UX, illetve a zöld design egyébként az elmúlt években lassú terjedésnek indult. 2016-ban már megjelent a Fenntarthatóságra tervezve című könyv Tim Fricktől, a zöldebb digitális termékek tervezéséről. Eközben pedig a fenntartható UX csoport is szervezett már egy virtuális konferenciát a témában. Ennek minden kiadása elérhető online.

A 2018-as kiadás egyik beszélgetésében a Zillow szoftvernérnöke, Amanda Sopkin arról beszél, miként csökkenthető a digitális szemét egy rendezettebb felhőben történő tárolás és a felesleges fájlok törlése révén. Ez különösen fontos lenne a designerek számára, akik elég komoly mennyiségű fájlt szoktak tárolni.

Egy másik, 2016-os beszélgetésben, Andrew Boardman a nagy híroldalak gyakorlatát kritizálja, mert ezeknél a hirdetésektől kezdve a nyomkövető kódokon keresztül a rejtélyes funkciójú Javascriptekig minden megtalálható. Ezen oldalak nehezek és népszerűek, ami azt jelenti, hogy nagy szeletet hasítanak ki a webből, és így jelentős az energiaigényük is. Ha ezeket a weboldalakat könnyebbé és rendezettebbé tennék, akkor nem csak kevesebbet fogyasztanának, de könnyebb lenne a hozzáférés és az olvashatóság is.

A Mozilla jelentéséből viszont kiderül az is, hogy létezik egy fenntartható webdesignról szóló oldal, mely az online bevezetése azoknak a technikáknak, melyek segítségével mérsékelhető a digitális termékek lábnyoma.

Ebbe beletartoznak az optimalizált fotók és videók, melyek feldolgozása kevesebb energiát igényel, de foglalkozik a használhatósággal is. Hiszen ha egy rosszul tervezett weboldalon kell valamit megtalálnia a felhasználónak, akkor az sokkal több energiát emészt fel. Ezzel szemben a tömör, világos, egyszerű oldalak környezetbarátabbak, arról nem beszélve, hogy az emberek számra is könnyebb a használatuk. Úgy tűnik tehát, hogy a felhasználó-központú design a bolygónk számára is jobb megoldás.

De mit is kellene tenni ahhoz, hogy csökkentsd a weboldalad szén-dioxid kibocsátását?

• Mérni kell a jelenlegi kibocsátás mértékét
• Csökkenteni kell az adatok mennyiségét
• Megújuló energiából kell fedezni az energiaellátását

Hogyan mérd a weboldalad szén-dioxid kibocsátását?

Elég nehéz úgy javítani bármely dolgon is, ha nem tudod mérni azt, hogy honnan és hova tart. Talán azt gondolod, hogy egy weboldal esetében lehetetlen meghatározni azt, hogy mekkora a kibocsátása. Pedig ma már rendelkezésre áll egy ingyenes eszköz, a WebsiteCarbon.com, mely megmutatja, hogy mekkora egy weboldal szén-dioxid kibocsátása oldalmegtekintésenként, éves szinten (egy meghatározott oldalmegtekintés alapján), mekkora az energiafogyasztása, és hogy a weboldalt megújuló energiájú adatközpont hostolja-e.

Hogy legyen mihez hasonlítani: az átlagos weboldal 6,8 gramm szén-dioxidot termel oldalmegtekintésenként. Havi 10 ezer oldalmegtekintés esetén a weboldal 816 kg CO2-t termel évente. Ez több, mint amennyit egy repülőgép kibocsát egy London-Tokió út során. A leghatékonyabb weboldal egyébként a www.muskfoundation.org, mely Elon Musk nonprofit alapítványáé: a kibocsátása mindössze 0.009 gram oldalmegtekintésenként. Ez persze együtt jár egy extrém egyszerűséggel, és nem is kínálja azt a felhasználói élményt, mint amit a felhasználók ma elvárnak egy weboldaltól.

Ha már tudod, hogy mennyi szén-dioxidot bocsát ki a weboldalad, akkor nekiállhatsz a csökkentésének.

Hogyan teheted zöldebbé a weboldalad?

Mivel az adatátvitel közvetlenül felel az energiafogyasztásért és a kibocsátásért, ezért a legfontosabb dolog, hogy csökkentsük ennek mértékét. Erre két megoldás kínálkozik.

1. A webdesign-megoldás

Egyrészt csökkentheted valamennyi oldalad méretét. Ennek olyan előnyei is lesznek, mint a gyorsabb betöltési idő, mely által javul a felhasználói élmény, különösen az olyan felhasználók számára, akik korlátozott sávszélességgel használják a netet. Hogyan érheted ezt el a webdesignnal?

Készíts minimalista weboldalt!

Egy minimalista weboldal nem csak azért jó, mert sokkal inkább a felhasználóra összpontosít, jobb felhasználói élményt kínál, jobb teljesítményt érhetsz el vele, hanem azért is, mert kevesebb adat mozgatására van szükség a használatánál.

Nagyobb whitespace

A szándékosan kialakított negatív terek a weboldaladon nem csak esztétikusabbá teszik azt, de így kisebb képeket használhatsz, mely csökkenti a fájlméreteket. Emellett pedig a az üres terek hatékony és bőkezű alkalmazásával a felhasználók sokkal jobban tudnak koncentrálni a lényegre: a képekre és a szövegekre.

Egyszerű felhasználói út

Az egyszerűsített felhasználói út azt jelenti, hogy csökkented azoknak a lépéseknek (és oldalaknak) a számát, melyet a felhasználónak meg kell tennie a látogatása alkalmával, hogy célt érjen. Ezzel mérsékled a forgalmazott adatmennyiséget is. Egyébként egy hosszabb felhasználói út általában nagyobb visszafordulási arányt jelent, és a felhasználó könnyebben elveszhet a folyamatban.

Használd a sötét módot!

A sötét mód mára trenddé vált, nem csak mobilokon, hanem asztali gépeken is. Előnye nem csak az, hogy segíti a rövid távú olvasást, hanem az is, hogy csökkenti az OLED-kijelzős mobilok energia-felhasználását. Például, ha a Google Mapst sötét módban futtatjuk egy AMOLED kijelzős Pixel mobilon, akkor az 63 százalékkal kevesebb energiát igényel.

Vektorgrafikák használata

A grafikus illusztrációk használata is komoly trend 2021-ben, viszont egy átlagos weboldal 26 képet használ oldalanként, aminek megjelenítése mintegy egy megabájtos adaméretet jelent átlagosan. Ez megfelel 150 ezer szónak egy HTML fájlban. Egy kép tehát nagyjából 5000 szóval ér fel. A vektorillusztrációk használatával a fájlok mérete némileg csökkenthető.

Képek tömörítése

Egy weboldal esetében a legtöbb lekérés a képek miatt történik, ami azt jelenti, hogy nagymértékben a képek felelnek egy weboldal méretéért. Vagyis itt lehet a legtöbb adatot megtakarítani. A weben számos képtömörítő alkalmazást találsz, de ha átállsz WebP formátumú képekre, azzal is 30 százalékot megspórolhatsz.

Ne használj GIF-eket!

A GIF-ek az elmúlt években nagy népszerűségre tettek szert, de adatmennyiség szempontjából nem szerencsés a használatuk. Ez annak köszönhető, hogy egy GIF sok képből áll össze egy nagyobb fájllá. Eredetileg nem is mozgóképre tervezték, ezért is nagy a mérete. Érdemes inkább WebP formátumot vagy akár Mp4 videóformátumot használni.

Ne használj túl sok animációt!

Ha jól használod az animációkat, akkor rendben van, de sokan túlzásokba esnek. De már egy mozgó karuszel használata is 7 százalékkal nagyobb processzorhasználatot eredményez egy statikus képhez képest. Ezért, ahol nem muszáj, ott ne használ animációkat.

Használj rendszer-betűtípusokat vagy változtatható fontokat

A rendszer-betűtípusok nem csak ingyenesek, de nem is igényelnek szerver-lekérést, így nincs adatforgalom. Egy másik dolog, amit megtehetsz, ha a TTL formát átalakítod WOFF2 fájlformátumba, így kisebb lesz a mérete.

Mivel segíthetsz még?

• Egyszerű és hatékony kóddal.
• Mindig a megfelelő méretű képek betöltésével CSS-átméretezés helyett.
• A nagyobb fájlok (videók, hangok) környezetbarát külső szolgáltatóknál való tárolásával.
• Ha nem használsz automatikusan elinduló videókat.
• Megszünteted a régebbi böngészők (például IE8) támogatását.
• Mérsékled a nyomkövetést és a hirdetési scriptek futását, melyek nem adnak értéket a felhasználóknak.
• Használod az AMP-t, mely leegyszerűsíti az oldalad a mobilos felhasználók számára.

A lényeg, hogy próbáld meg minél egyszerűbbé tenni a weboldalad. Ha valamilyen elem létjogosultságával kapcsolatban kétely merül fel benned, akkor hagyd el! Csak olyan elemeket tegyél hozzá, melyek elhagyhatatlanok és értékük van a felhasználók számára.

Szintén fontos egy jó gyorsítótárazó megoldás használata. Ez ugyanis csökkenti a szerver sávszélesség-igényét, mivel a weboldalt statikus külső forrásból szolgálja ki.

2. Az oldalletöltések számának optimalizálása

A másik lényeges dolog, hogy mérsékeld az oldalbetöltések számát. A forgalom csökkentésének lehetősége kontraproduktívnak tűnhet, mégis előnyös lehet a weboldaltulajdonos és a felhasználó számára is. Jusson eszedbe a visszafordulási arány, mely azt mutatja meg, hogy hány felhasználó érkezett úgy a weboldaladra, hogy szinte azonnal el is hagyta azt. A visszafordulási arány csökkentése pedig előnyös a felhasználói élmény és a SEO szempontjából is. Úgyhogy fontold meg, hogy csak a valóban értékes látogatókat csábítod az oldaladra.

Hogyan állj át megújuló energiára?

Az internet által felhasznált energia 48 százalékáért az adatközpontok, 14 százalékáért a telekommunikációs hálózatok, míg 38 százalékáért az emberek eszközei felelősek. Weboldaltulajdonosként semmit nem tehetsz a telekommunikációs hálózatokkal vagy azzal kapcsolatban, hogy a felhasználók milyen eszközön neteznek. Ugyanakkor arra már lehet némi befolyásod, hogy milyen adatközpontot használ a weboldalad. Ehhez csak ki kell választani a megfelelő hosting-szolgáltatót.

Persze a legtöbb hosting-szolgáltató ezzel nem foglalkozik, a megszokott elektromos hálózatot használja, és nem nagyon foglalkozik azzal, honnan kapja az áramot. Ugyanakkor akadnak már olyan szolgáltatók, melyek megújuló energiára támaszkodnak az adatközpontjaik üzemeltetésénél.

Azt persze elég nehéz meghatározni, hogy melyik szolgáltató használ “zöldebb” energiát. A Green Web Foundationnek egyébként van egy adatbázisa a különböző szolgáltatókról, melyek állításuk szerint környezetbarátak, de Magyarország és magyar szolgáltató egyáltalán nem szerepel rajta.

Érdemes itt megemlíteni, hogy a Google egyébként élen jár a zöld energia felhasználásában, és 2017-ben már elérte azt, hogy teljes mértékben megújuló energiára támaszkodik.

• A Google adatközpontjai fele annyi energiát használnak, mint egy átlagos adatközpont.
• A Google nettó működési szén-dioxid kibocsátása 2016-ban már nulla volt.
• A cég most 3,5-ször nagyobb számítási teljesítményt ér el ugyanannyi energia felhasználásával, mint 5 évvel korábban.
• A Google a gépi tanulást is felhasználja arra, hogy növelje az energiahatékonyságot.
• Olcsó, de kreatív megoldásokkal javítja a légáramlást az adatközpontjaiban, ezáltal 27 °C fokra emelheti a belső hőmérsékletet, és jelentős mértékben csökkenti így az energiafelhasználást.

Ha tehát komolyan gondolod a környezetvédelmet a globális felmelegedés ellen tennél valamit, akkor most már tudod, hogy milyen lépésekkel érhető el az, hogy a weboldalad környezetbarátabb legyen:

• A szén-dioxid kibocsátásos mérése.
• Az adatmennyiség csökkentése az oldal mérete és a felesleges megtekintések mérséklése által.
• Megújuló energiát használó hosting-szolgáltatásra való áttéréssel.

Ezen lépésekkel nem csak csökkentjük a szén-dioxid kibocsátásunkat, de a látogatóink számára is javuló felhasználói élményt kínálunk az egyszerűbb, tudatosabban megtervezett weboldallal. Az alacsonyabb szén-dioxid kibocsátás tehát nem csak a környezet, hanem a felhasználók és így a weboldaltulajdonosok számára is előnyös.