Projektowanie zrównoważonych stron internetowych: Jak projektować zrównoważone strony internetowe?

Sonja Hoffmann Ostatnia aktualizacja 21.12.2020
7 Min.
Zrównoważone projektowanie stron internetowych
Ostatnia aktualizacja 21.12.2020

Co dokładnie oznacza termin "Sustainable Web Design"? Skąd wiesz, jak bardzo ekologiczna jest Twoja strona? W jaki sposób możesz sprawić, by Twoja strona (strony) była bardziej zrównoważona i jakie są tego korzyści dla Twoich klientów? Zebrałem odpowiedzi na te pytania i kilka ważnych narzędzi w tym poście.

Fakty o power guzzlerze Internet

Jakie są koszty energii związane z naszą cyfrową konsumpcją

Według Websitecarbon, Internet zużywa 416,2 terawatogodzin (TWh) rocznie. To mniej więcej tyle, ile zużywają same Niemcy. Gdyby Internet był państwem, już dziś miałby szóste co do wielkości zużycie energii elektrycznej na świecie.

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 CO2. Przy 10.000 odwiedzających miesięcznie daje to 211 kg CO2 rocznie - dla jednej strony! 

Czy zastanawiałeś się kiedyś ile zasobów jest potrzebnych do stworzenia Twojej strony? Więcej niż myślisz, gwarantowane! Każde zapytanie wysyłane przez Twoją stronę jest gdzieś odbierane, przetwarzane, odsyłane i w razie potrzeby przechowywane. To daje bardzo dużo.

Nasze strony internetowe muszą stać się bardziej ekologiczne - ale jak?

1. hosting

W międzyczasie wielu dostawców usług hostingowych przyłącza się do nich i stawia na odnawialne źródła energii. Ponieważ jedna rzecz jest jasna: hosting zużywa energię i powoduje znaczną ilość emisji CO2. Na stronie RAIDBOXES zrównoważony rozwój i ochrona klimatu nie są tylko pustymi frazesami, lecz integralną częścią kultury przedsiębiorstwa.

Zielony Hosting dla WordPress na RAIDBOXES

Jeśli prowadzisz stronę lub sklep internetowy, zużywasz dużo zasobów. RAIDBOXES przeciwdziała temu - z pozytywnym dla klimatu hostingiem dla WordPress i WooCommerce.

Możesz łatwo określić, czy Twoja strona jest "zielona" z pomocą tego narzędzia z The Green Web Foundation. Jeśli wynik jest negatywny, powinieneś zmienić dostawcę usług hostingowych. Porównanie można zobaczyć tutaj

Fundacja Green Web
RAIDBOXES bazuje na zrównoważonej, certyfikowanej, ekologicznej energii elektrycznej pochodzącej z elektrowni wodnych.

2. projekt

Właściwy projekt może zapobiec niepotrzebnemu zużyciu energii, na przykład jeśli Twoja strona internetowa nie będzie ładować niepotrzebnych i niechcianych treści w pierwszej kolejności. Jak można pogodzić design 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

O korzyściach płynących z dobrze zaplanowanego usability mówiłem Ci już wcześniej. Dobrze funkcjonujące doświadczenie użytkownika pomaga Tobie i Twoim klientom uczynić Twoją stronę bardziej zrównoważoną. Minimalizujesz niepożądane objazdy swoich użytkowników. Ponieważ w idealnym przypadku ładowane są tylko te strony, które użytkownik rzeczywiście chce odwiedzić. Jeśli zmniejszysz liczbę niechcianych kliknięć, wyślesz mniej żądań danych, a zatem zużyjesz mniej energii.

Liczba stron

Również tutaj możesz pracować nad zrównoważonym rozwojem podczas planowania strony internetowej. Ogólnie rzecz biorąc, im mniej stron, które muszą być załadowane, tym mniej żądań danych zostanie wysłanych. Oprócz ułatwienia nawigacji w witrynie, z ekologicznego punktu widzenia sensowne jest również 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

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!

Szybsze strony internetowe - lepsze dla klimatu

Dlatego tym bardziej ważne jest, aby dobrze zoptymalizować swoją stronę i sklep. To jest Twój osobisty wkład w ochronę klimatu. Dowiedz się więcej na ten temat w naszym e-booku Page Speed & Performance.

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.

latarnia google
Ten wynik daje mi popularne narzędzie PageSpeed Insights.
latarnia morska
Google Lighthouse testuje również moją witrynę, między innymi pod kątem dostępności.

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

ecograder
Ecograder zapewnia dobre podejście do optymalizacji onpage.

Ecograder został stworzony specjalnie po to, aby testować zrównoważony rozwój stron internetowych. Osobiście uważam, że Ecograder jest najbardziej przyjazny dla użytkownika. Informacje są przedstawione w sposób zwięzły i zrozumiały, pomocne są wskazówki dotyczące poprawy pagespeed.

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ługa Website Carbon jest ogólnie informatywna, ale brakuje mi indywidualnie dopasowanych szczegółów, które znam z narzędzi Google, jak również Ecograder. Ponadto porównanie z innymi testowanymi stronami internetowymi jako miernik profesjonalnych projektów i argumentacji uważam za nieadekwatne.

webpagetest
Popularne narzędzie Webpagetest wnika w to bardzo głęboko.

Szczególnie dla programistów, Webpagetest jest doskonałym narzędziem, ponieważ zagłębia się w szczegóły. Można tu testować różne ustawienia wstępne. Od "Prostych testów" do "Zaawansowanych ustawień", które dają Ci możliwość wykluczenia różnych elementów Twojej strony lub dodania ich poprzez snippet kodu, a jednocześnie dostarczenia Raportu Google Lighthouse, aż do testów porównawczych dwóch stron internetowych, "wszystko" jest tutaj możliwe. Wyniki są również technicznie dopracowane w najdrobniejszych szczegółach. Ta strona służy więc do zaawansowanych testów, podczas gdy Google i spółka przeprowadzają swoje analizy w sposób nieco 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 również zadajemy sobie pytanie, czy ekologiczne podejście firm jest autentyczne: Czy zrównoważony internet w ogóle istnieje? Jak bardzo "zielona" może być naprawdę strona WordPress ? W artykule WordPress i zrównoważony rozwój znajdziesz aktualny stan dyskusji w niemieckojęzycznej społeczności WP.

Zrównoważony WordPress : Bądź jego częścią

RAIDBOXES od samego początku angażuje się w zrównoważony rozwój WordPress . Zobacz m.in. nasze wskazówki na temat WordPress i zrównoważonego rozwoju oraz ekologicznych sklepów internetowych. Chcesz sam wziąć na siebie większą odpowiedzialność? Następnie przeczytaj nasz artykuł Green Hosting dla WordPress .

Jaki wkład możemy wnieść w zrównoważone, wydajne projektowanie stron internetowych? Jakie są najważniejsze dźwignie w codziennym projektowaniu w celu oszczędzania zasobów? Niewiele Plugins i lekki Theme są tutaj głównymi wskazówkami.

Przeciętne strony WordPress mają rozmiar około 600 KB. Wybierając właściwą stronę Themes i biorąc pod uwagę wcześniej wyjaśnione podejście, można zaoszczędzić 50 procent lub więcej. Niewielki wybór przetestowanych stron Themes można znaleźć tutaj.

Jeśli Twoja strona jest już uruchomiona i przejście na Themes nie wchodzi w grę, możesz poprawić wydajnośćWordPress za pomocą tych 10 poprawek.

Jak przekonać klientów do udziału w projekcie

 Właściwie, następujące słowa kluczowe powinny wystarczyć, aby przekonać 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 potrzebujesz jeszcze dodatkowych argumentów, różne fundacje oferują również tzw. odznaki, które możesz zintegrować na stronach swoich klientów.

Wybierając dostawcę usług hostingowych, który wykorzystuje zrównoważoną, certyfikowaną zieloną energię, ta odznaka może być uwzględniona:

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

Wnioski, bardziej ekstremalne podejścia i materiały do czytania

Podczas moich badań nad tym tematem natknąłem 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.

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

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 również rozpowszechnianie informacji na temat zrównoważonego rozwoju i ochrony środowiska. Oferowanie i kupowanie produktów przyjaznych dla środowiska (do których w przeciwnym razie mielibyśmy mniejszy dostęp) to oczywiście także jeden z pozytywnych efektów przemysłu cyfrowego - by wymienić tylko kilka z nich.

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

Sustainable Web Design: Jakie masz pytania do Sonji?

Zapraszamy do skorzystania z funkcji komentarza. Chcesz być informowany o nowych artykułach dotyczących projektowania i tworzenia stron internetowych? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

h
tusk power

Bardzo ciekawe podejście, ciekawe czy webflow jest zielony ;). My poszliśmy w kierunku strony typu darkmode, nie wiem jak bardzo to jest na plus 😉

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.