Co dokładnie oznacza termin „Zrównoważony Web Design"? Skąd wiesz, jak bardzo ekologiczna jest Twoja strona? Jak możesz sprawić, by Twoja strona była bardziej zrównoważona i jakie są korzyści dla Twoich klientów? W tym artykule zebrałam dla ciebie odpowiedzi na te pytania i kilka ważnych narzędzi.

Fakty o zużyciu prądu przez internet

Ale jak to właściwie możliwe? Czy nie poszliśmy w stronę cyfryzacji, aby ratować nasze środowisko? Rzeczywistość w tym przypadku jest nieco inna: Niestety, cyfrowa nie oznacza automatycznie "zielona". Od farm serwerów, poprzez centra danych, aż po urządzenia końcowe - wszystko zużywa energię, aby funkcjonować.

Szacuje się, że przeciętna strona internetowa wytwarza 1,76 grama CO₂. Przy 10 000 odwiedzających miesięcznie daje to 211 kg CO₂ rocznie - za jedną stronę! 

Czy kiedykolwiek zastanawiałeś się nad tym, ile zasobów jest potrzebnych do stworzenia twojej strony internetowej? Więcej niż myślisz, na pewno! Każde żądanie wysłane przez twoją stronę internetową jest odbierane, przetwarzane, odsyłane i, jeśli to konieczne, zapisywane w dowolnym momencie. To bardzo dużo.

Nasze strony internetowe muszą stać się bardziej ekologiczne

1. Hosting WordPress i Zrównoważony Web Design

W międzyczasie wielu dostawców usług hostingowych dla WordPressa przyłącza się do nas i stawia na odnawialne źródła energii. Ponieważ jedno jest pewne: hosting WordPressa zużywa energię i powoduje znaczną emisję CO₂. W Raidboxes zrównoważony rozwój i ochrona klimatu nie są pustym hasłem, ale integralną częścią kultury korporacyjnej.

Możesz łatwo określić, czy Twoja strona jest "zielona", korzystając z narzędzia The Green Web Foundation. Jeśli wynik jest negatywny, powinieneś zmienić dostawcę hostingu WordPress. Porównanie możesz zobaczyć tutaj. 

2. Design i Zrównoważony Web Design

Właściwy projekt może zapobiec niepotrzebnemu zużyciu energii, np. jeśli Twoja strona nie będzie ładować niepotrzebnych i niechcianych treści. Jak możesz pogodzić projektowanie i zrównoważony rozwój oraz oszczędzać zasoby?

Mobile First

Na stronie Mobile First od początku optymalizujesz swoje treści pod kątem smartfonów. Zoptymalizowane strony nie muszą ładować zbyt dużych mediów na urządzeniach mobilnych. Są one zaprogramowane tak, że style desktopowe nie muszą być nadpisywane, ale są zaprojektowane bezpośrednio dla najmniejszego urządzenia.

Doświadczenie użytkownika (UX)

Wspominałam ci już o korzyściach płynących z dobrze zaplanowanej użyteczności. Dobrze funkcjonujące doświadczenie użytkownika pomaga tobie i twoim klientom uczynić twoją stronę bardziej trwałą. Minimalizujesz niepożądane objazdy swoich użytkowników. Idealnie byłoby, gdyby ładowane były tylko te strony, które użytkownik chce odwiedzić. Jeśli ograniczysz niechciane kliknięcia, wyślesz mniej żądań danych, a więc zużyjesz mniej energii.

Liczba stron

Także tutaj możesz pracować nad swoim zrównoważonym rozwojem podczas planowania strony internetowej. Ogólnie rzecz biorąc, im mniej stron, które muszą zostać załadowane, tym mniej żądań danych jest wysyłanych. Oprócz ułatwienia nawigacji na stronie, z ekologicznego punktu widzenia sensowne jest także połączenie treści i zmniejszenie liczby stron.

Powinniśmy bardziej świadomie i celowo korzystać z mediów takich jak obrazy, wszelkie animacje i filmy. Czy wszystkie obrazy, filmy, ikony i animacje, które zaplanowałeś na swojej stronie naprawdę dodają wartości? A może można obejść się bez niektórych z nich?

3. Rozwój i Zrównoważony Web Design

Pagespeed

Pagespeed od dawna jest częścią małego 1×1 projektowania stron internetowych. Dlaczego zwrócenie uwagi na dobre wykonanie jest dobre również dla środowiska? Strona, która ładuje się szybciej jest konsekwencją małej ilości danych do załadowania!

Dlaczego Twój pagepeed jest powolny może mieć różne przyczyny. Wiele narzędzi zapewnia nie tylko analizę, ale także rozwiązania dla zwiększenia wydajności.

Dla tego artykułu, umieściłem moją własną stronę przez jej trudy. Jak zobaczysz na moim autoteście, analiza może okazać się nawet zupełnie odwrotna - w zależności od tego, z jaką aplikacją jest testowana. Należy więc zastanowić się, jakie są Twoje cele związane z testami.

Tutaj jako porównanie Chrome Developer Tool Google Lighthouse i Google PageSpeed Insights. Oba narzędzia są przydatnymi punktami orientacyjnymi dla optymalizacji onpage.

Ecograder został stworzony specjalnie do testowania trwałości stron internetowych. Osobiście uważam, że Ecograder jest najbardziej przyjazny dla użytkownika. Informacje są zwięzłe i łatwe do zrozumienia, a wskazówki dotyczące poprawy szybkości strony są pomocne.

Strona internetowa Carbon Calculator również przeprowadza głównie testy pod kątem zrównoważonego rozwoju. Obrazowe przedstawienie wyniku uważam za pozytywne. Porównania do mniej abstrakcyjnych jednostek miary ułatwiają nieco uświadomienie sobie zakresu własnej pracy.

Uważam, że usługi Website Carbon są ogólnie rzecz biorąc pouczające, ale brakuje mi w nich indywidualnie dopasowanych szczegółów, które znam z Google Tools i Ecograder. Ponadto uważam, że porównanie z innymi testowanymi stronami internetowymi jako miernik profesjonalnych projektów i argumentacji jest nieadekwatne.

Zwłaszcza dla programistów Webpagetest jest doskonałym narzędziem, ponieważ jest bardzo szczegółowy. Możesz testować różne ustawienia wstępne. Od "Prostego testowania" do "Ustawień zaawansowanych", które pozwalają wykluczyć różne elementy strony internetowej, a dokładniej dodać je za pomocą fragmentu kodu i jednocześnie dostarczyć raport Google Lighthouse, po testowanie porównawcze dwóch stron internetowych - "wszystko" jest tu możliwe. Wyniki są również technicznie dopracowane w najdrobniejszych szczegółach. Ta strona jest więc wykorzystywana do zaawansowanych testów, podczas gdy Google i spółka przeprowadzają swoje analizy w sposób bardziej ogólny.

Obrazy i inne media

Aby ponownie przemyśleć oferowane treści, już wcześniej poruszyłem ten temat. Teraz chodzi o to, aby optymalnie zintegrować te obrazy. 

Tinypng działa wspaniale do kompresji obrazów - i zazwyczaj bez zauważalnej utraty jakości. Ten sam efekt można osiągnąć za pomocą Photoshopa i ustawienia "Export for Web". Jeśli już zintegrowałeś swoje obrazy z systemem CMS, takim jak WordPress , możesz jeszcze zoptymalizować ich rozdzielczość za pomocą Plugin, takiego jak Smush.

Jeśli masz dużo obrazów lub ikon, możesz spojrzeć na CSS sprites. Działają one podobnie do sprite'ów w grach komputerowych. Tutaj obrazki są integrowane raz na arkusz sprite. Następnie CSS określa, pod jakimi współrzędnymi znajduje się dany obraz. Więcej na ten temat można znaleźć tutaj.

Sprite sheets to wiele obrazów/ikon, które są łączone w jeden plik. Projektanci często grupują swoje obrazy tematycznie. Na podstawie powiązanych współrzędnych x i y arkusze są odpowiednio dzielone i uwzględniane. W ten sposób ładowany jest jeden dokument, w którym wyświetlane są różne elementy wizualne.

Lazy Load jest kolejnym wariantem dla optymalnego ładowania obrazów. Tutaj obrazy są ładowane wtedy, gdy odwiedzający ich potrzebuje. Dla WordPress istnieją obecnie również niezliczone (darmowe i płatne) Plugins.

WordPress

Oczywiście, my też zadajemy sobie pytanie, czy ekologiczne podejście firm jest autentyczne: Czy zrównoważony internet w ogóle istnieje? Jak bardzo "zielony" może być WordPress? W artykule WordPress i zrównoważony rozwój znajdziesz aktualny stan dyskusji w niemieckojęzycznej społeczności WP.

Jaki wkład możemy wnieść w zrównoważone, wydajne projektowanie stron internetowych? Jakie są najważniejsze dźwignie w codziennym projektowaniu, które pozwalają oszczędzać zasoby? Niewiele wtyczek i lekki motyw to najważniejsze wskazówki.

Przeciętna strona WordPressa ma około 600 KB. Wybierając odpowiedni motyw i biorąc pod uwagę podejście opisane powyżej, możesz zaoszczędzić 50 procent lub więcej. Niewielki wybór przetestowanych motywów można znaleźć tutaj.

Jeśli twoja strona już działa i zmiana motywów na razie nie wchodzi w grę, możesz poprawić wydajność swojego WordPress z pomocą tych 10 sztuczek.

Jak przekonać innych, by się przyłączyli

 Właściwie poniższe słowa kluczowe powinny już wystarczyć, by przekonać Twoich klientów do zrównoważonego projektowania stron internetowych: 

• poprawiona użyteczność i doświadczenie użytkownika,
• przejrzyste i łatwe do zrozumienia projekty, 
• lepsze pozycje w rankingach SEO, 
• krótszy czas ładowania i 
• strony zoptymalizowane pod kątem urządzeń mobilnych. 

Jeśli nadal potrzebujesz dodatkowych argumentów, różne fundacje oferują także tzw. odznaki, które możesz umieszczać na stronach swoich klientów.

Przy wyborze dostawcy hostingu WordPressa, który korzysta ze zrównoważonej, certyfikowanej, zielonej energii elektrycznej, ta odznaka może być uwzględniona:

• https://www.thegreenwebfoundation.org/ (według kodu)
• https://wordpress.org/plugins/the-green-web-widget/ (według wtyczki)

Na przykład WebsiteCarbon oferuje odznakę, którą możesz umieścić na swoich stronach, by pokazać, że twoje treści są tworzone w sposób zrównoważony i ekologiczny.

Wnioski dotyczące zrównoważonego projektowania stron internetowych

Podczas moich badań nad tym tematem natknęłam się na niezliczone statystyki. Wysyłanie wiadomości e-mail ma taki sam wpływ na nasze środowisko jak używanie plastikowej torby. Książki są często bardziej przyjazne dla środowiska niż e-booki. Kupowanie albumów muzycznych jest lepsze dla naszych zasobów niż ich streaming. Lista jest nieskończona. Przede wszystkim statystyki te burzą nasze powszechne przekonanie, że digital oznacza również "zielony".

Pomijając fakt, że my jako projektanci i programiści stron internetowych odgrywamy oczywiście dużą rolę w tym, jak sieć będzie się rozwijać w przyszłości, możemy również zacząć od siebie i korzystać z internetu nieco bardziej świadomie.

Dowiedz się, które z Twoich aplikacji są ekologiczne, a które pilnie potrzebują czyszczenia: Dzięki narzędziu ClickClean od Greenpeace, możesz uzyskać interesujący przegląd swoich (ulubionych) aplikacji i dowiedzieć się, jak bardzo są one wartościowe ekologicznie.

Artykuły, które tworzą większą świadomość dla bardziej ekologicznej przyszłości: 

• Jack Lenox, na przykład, zbudował motyw WordPress, który ma tylko 7 KB.  
• Brad Frost na swoim blogu DeathToBullshit w humorystyczny sposób zachęca nas, żebyśmy się tego właśnie nie podejmowali.  
• Heydon Pickering daje wskazówki dotyczące kodowania, jak odchudzić swoją witrynę.

Nie powinniśmy również zapominać o pozytywnym wpływie Internetu na nasze środowisko. Na przykład, korzystanie z wideokonferencji oszczędza nam podróży. Szczególnie w ciągu ostatnich kilku miesięcy każdy powinien zdać sobie sprawę z tego, jak z pomocą Internetu możemy uniknąć korzystania ze środków transportu, a tym samym zmniejszyć emisję CO2. 

Dodatkowo dysponujemy powierzchnią biurową, która może być zredukowana dzięki biurom domowym. Ponadto, sieć oferuje nam możliwość połączenia sił z innymi: Na przykład, możemy korzystać z platform car-sharingowych i rezerwować "miejsca noclegowe", takie jak AirBnB, które są bardziej przyjazne dla środowiska niż hotele.

Internet ułatwia też rozpowszechnianie informacji na temat zrównoważonego rozwoju i ochrony środowiska. Oferowanie i kupowanie produktów przyjaznych dla środowiska (do których w innym przypadku mielibyśmy mniejszy dostęp) to oczywiście także jeden z pozytywnych efektów przemysłu cyfrowego - to tylko kilka z nich.

Jeśli chcesz zagłębić się w ten temat, polecam stronę sustainablewebdesign.org jako punkt wyjścia. Najważniejsze punkty są tu wyjaśnione w przejrzystych akapitach i zaproponowane są możliwe rozwiązania techniczne do ich realizacji.