Zrównoważone projektowanie stron internetowych

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

Co dokładnie oznacza termin "zrównoważone projektowanie stron internetowych"? Jak sprawdzić, czy Twoja witryna jest ekologiczna? W jaki sposób możesz sprawić, by Twoja witryna była bardziej zrównoważona i jakie są korzyści dla Twoich klientów? W tym artykule zebrałem dla Ciebie odpowiedzi na te pytania oraz kilka ważnych narzędzi.

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

Czy zastanawiałeś się kiedyś, ile zasobów jest potrzebnych do stworzenia witryny? Więcej niż myślisz, gwarantowane! Każde żądanie wysłane przez witrynę jest odbierane, przetwarzane, odsyłane i w razie potrzeby zapisywane w dowolnym momencie. To bardzo dużo.

Nasze strony internetowe muszą stać się bardziej ekologiczne

1) Hosting WordPress i zrównoważone projektowanie stron internetowych

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

Zielony hosting WordPress dla WordPress na Raidboxes

Jeśli prowadzisz stronę internetową lub sklep internetowy, zużywasz dużo zasobów. Raidboxes przeciwdziała temu - oferując przyjazny dla klimatu hosting WordPress.

Za pomocą tego narzędzia The Green Web Foundation można łatwo określić, czy witryna jest "zielona". Jeśli wynik jest negatywny, należy zmienić dostawcę usług hostingowych WordPress. Porównanie można zobaczyć tutaj

Fundacja Green Web
Raidboxes opiera się na zrównoważonej, certyfikowanej, ekologicznej energii elektrycznej pochodzącej z elektrowni wodnych.

2. projektowanie i zrównoważone projektowanie stron internetowych

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

Mówiłem 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ą witrynę bardziej zrównoważoną. Minimalizujesz liczbę niepożądanych objazdów przez użytkowników. W idealnej sytuacji ładowane są tylko te strony, które użytkownik chce odwiedzić. Ograniczenie liczby niepożądanych kliknięć oznacza wysyłanie mniejszej liczby żądań danych, a tym samym mniejsze zużycie energii.

Liczba stron

Także tutaj, podczas planowania strony internetowej, można pracować nad zrównoważonym rozwojem. Ogólnie rzecz biorąc, im mniej stron trzeba załadować, tym mniej żądań danych jest wysyłanych. Oprócz ułatwienia nawigacji w witrynie, połączenie treści i zmniejszenie liczby stron ma również sens z ekologicznego punktu widzenia.

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żone projektowanie stron internetowych

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 ważniejsze jest, aby dobrze zoptymalizować swoją stronę internetową i sklep. To jest Twój osobisty wkład w ochronę klimatu. Więcej informacji na ten temat można znaleźć w naszym e-booku Prędkość i wydajność strony.

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 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.

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

Webpagetest to doskonałe narzędzie, zwłaszcza dla programistów, ponieważ jest bardzo szczegółowe. Można testować różne ustawienia wstępne. Od "Prostego testowania" do "Ustawień zaawansowanych", które pozwalają wykluczyć różne elementy witryny, a dokładniej dodać je za pomocą fragmentu kodu, a jednocześnie dostarczyć raport Latarni Google, po testowanie porównawcze dwóch witryn - tutaj możliwe jest "wszystko". Wyniki są również technicznie dopracowane w najdrobniejszych szczegółach. Ta witryna jest zatem wykorzystywana do zaawansowanych testów, podczas gdy Google i inne firmy 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 program WordPress. Zobacz m.in. nasze wskazówki dotyczące WordPressa i zrównoważonego rozwoju oraz ekologicznych sklepów internetowych. Chcesz sam wziąć na siebie większą odpowiedzialność? Następnie przeczytaj nasz artykuł Zielony hosting dla WordPressa.

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 witryna już działa i zmiana motywów nie wchodzi w rachubę, możesz poprawić wydajność WordPressa za pomocą tych 10 poprawek.

Jak przekonać innych do przyłączenia się do akcji

 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.

W przypadku wyboru dostawcy usług hostingowych WordPress, który korzysta ze zrównoważonej, certyfikowanej ekologicznej energii elektrycznej, ta odznaka może być uwzględniona:

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

Zgoda*
To pole służy do weryfikacji i nie powinno być zmieniane.

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

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 znacznie ułatwia także 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. Najważniejsze punkty wyjaśniono w przejrzystych akapitach i zaproponowano 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.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Jeden komentarz do"Projektowanie zrównoważonych stron internetowych: Jak projektować zrównoważone strony internetowe".

  1. 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.