Zrównoważone projektowanie stron internetowych: Jak projektować zrównoważone strony internetowe

Sonja Hoffmann Aktualizacja w dniu 21.10.2020 r.
7 Min.
Zrównoważone projektowanie stron internetowych
Ostatnia aktualizacja w dniu 21.10.2020 r.

Co dokładnie oznacza termin "Sustainable Web Design"? Skąd wiesz, jak ekologiczny jest twój teren? Jak możesz sprawić, by Twoja strona(y) była bardziej zrównoważona i jakie są korzyści dla Twoich klientów? Odpowiedzi na te pytania i kilka ważnych narzędzi, które zebrałem dla was w tym artykule.

Fakty na temat głodnego władzy Internetu

Jakie są koszty naszego cyfrowego zużycia energii

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

Ale jak to może być naprawdę? Czyż nie wprowadziliśmy dodatkowej technologii cyfrowej, aby chronić nasze środowisko? Rzeczywistość wygląda tu trochę inaczej: Niestety cyfrowy nie oznacza automatycznie zielonego. Od farm serwerów, przez centra danych, aż po rzeczywiste urządzenie końcowe - wszystko zużywa energię do działania.

Przeciętna strona internetowa produkuje około 1,76 grama CO2. Z 10.000 odwiedzających miesięcznie, otrzymujesz 211 kg CO2 na rok - na jedną stronę! 

Czy kiedykolwiek zastanawiałeś się nad tym, ile zasobów jest potrzebnych na twoją stronę internetową? Gwarantowane więcej niż ci się wydaje! Każde żądanie wysłane przez Twoją stronę internetową jest odbierane, przetwarzane, zwracane i w razie potrzeby zapisywane gdzieś. Tak wiele się ze sobą łączy.

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 koncentruje się na odnawialnych źródłach energii. Bo jedno jest pewne: hosting internetowy pożera energię i powoduje znaczną emisję CO2. Zrównoważony rozwój i ochrona RAIDBOXES klimatu to nie tylko puste hasło, ale integralna część naszej kultury korporacyjnej.

Zielony Hosting dla WordPress at RAIDBOXES

Jeśli prowadzisz stronę internetową lub sklep internetowy, zużywasz dużo zasobów. RAIDBOXES kontroluje się przed nim - z Pozytywne warunki klimatyczne dla WordPress i WooCommerce.

Czy Twoja strona jest "zielona", możesz łatwo dowiedzieć się z pomocą to narzędzie Fundacji Green Web. Jeśli wynik jest negatywny, wskazane jest, aby zmienić dostawcę usług hostingowych. Możesz dokonać porównania tutaj ...żeby zobaczyć. 

Fundacja Zielona Sieć
RAIDBOXES opiera się na zrównoważonej, certyfikowanej, ekologicznej energii elektrycznej z elektrowni wodnych.

2. wzornictwo

Właściwy projekt może zapobiec niepotrzebnemu zużyciu energii, na przykład jeśli Twoja strona w ogóle nie ładuje niepotrzebnych i niechcianych treści. Jak można połączyć projektowanie i zrównoważony rozwój oraz oszczędzać zasoby?

Mobile First

Dzięki Mobile First temu od samego początku zoptymalizujesz swoje treści pod kątem korzystania ze smartfonów. Zoptymalizowane strony nie muszą ładować zbyt dużych nośników na urządzenia mobilne. Są one zaprogramowane w taki sposób, że style pulpitu nie muszą być nadpisywane, ale są zaprojektowane bezpośrednio dla najmniejszego urządzenia.

doświadczenie użytkownika

O korzyściach z dobrze zaplanowanej użyteczności powiedziałem ci zgłoszony wcześniej. Dobrze funkcjonujący interfejs użytkownika pomaga Tobie i Twoim klientom uczynić Twoją stronę bardziej zrównoważoną. Minimalizujesz niepożądane objazdy swoich użytkowników. Najlepiej, jeśli tylko te strony zostaną załadowane, które użytkownik rzeczywiście chce odwiedzić. Jeśli ograniczysz liczbę niepożądanych kliknięć, wyślesz mniej zapytań o dane i tym samym zużyjesz mniej energii.

Liczenie stron

Tutaj również można pracować nad swoim zrównoważonym rozwojem podczas planowania strony internetowej. Ogólnie rzecz biorąc, im mniej stron musi być załadowanych, tym mniej jest wysyłanych wniosków o dane. Oprócz tego, że ułatwia to nawigację po Twojej stronie, to z ekologicznego punktu widzenia ma również sens podsumowanie treści i zmniejszenie liczby stron.

Powinniśmy bardziej świadomie i konkretnie korzystać z mediów takich jak zdjęcia, wszelkie animacje i filmy wideo. Czy naprawdę wszystkie zdjęcia, filmy, ikony i animacje, które zaplanowałeś na swojej stronie przynoszą wartość dodaną? A może poradzisz sobie bez niektórych z nich?

3. rozwój

Pagespeed

Pagespeed od dawna jest częścią małego 1×1 projektu strony internetowej. Dlaczego również środowisko naturalne powinno zwracać uwagę na dobre wyniki? Strona, która ładuje się szybciej, jest konsekwencją małej ilości danych, które muszą być załadowane!

Szybsze strony internetowe - lepiej dla klimatu

Tym ważniejsze jest, aby dobrze zoptymalizować swoją stronę internetową i sklep. To jest twój osobisty wkład w ochronę klimatu. Możesz dowiedzieć się więcej na ten temat w naszym e-booku Szybkość i wydajność strony.

Powodów, dla których Twoja strona jest wolna może być kilka. Wiele narzędzi zapewnia nie tylko analizę, ale również rozwiązania zapewniające lepszą wydajność.

Do tego artykułu włożyłem własną stronę w jej krokach. Jak widać z mojego autotestu, analiza może nawet okazać się zupełnie odwrotna - w zależności od tego, z jaką aplikacją jest testowana. Powinieneś więc zastanowić się, co chcesz osiągnąć za pomocą testów.

latarnia morska w google
Wynik ten jest zapewniony przez popularne narzędzie PageSpeed Insights.
Gllighthouse
Google Lighthouse testuje moją stronę między innymi pod kątem dostępności.

Tutaj, jako porównanie, Chrome Developer Tool Lighthouse Google lub Google PageSpeed Insights. Oba narzędzia są użytecznymi punktami odniesienia dla optymalizacji strony startowej.

ecograder
Ecograder zapewnia dobre podejście do optymalizacji onpage.

Ecograder została stworzona specjalnie po to, by testować trwałość stron internetowych. Osobiście uważam Ecograder za najbardziej przyjazną dla użytkownika. Informacje są zwięzłe i łatwe do zrozumienia, pomocne są wskazówki dotyczące poprawy szybkości strony.

Również z Strona internetowa Kalkulator węgla jest głównie testowany pod kątem zrównoważonego rozwoju. Uważam, że obrazowe przedstawienie wyniku jest pozytywne. Porównanie z mniej abstrakcyjnymi jednostkami miary ułatwia nieco uświadamianie sobie zakresu jego pracy.

Uważam, że serwis internetowy Carbon ma na ogół charakter informacyjny, ale brakuje mi indywidualnie dopasowanych szczegółów, ponieważ znam je z Google Tools i Ecograder. Ponadto uważam, że porównanie z innymi przetestowanymi stronami internetowymi jako miara dla profesjonalnych projektów i argumentacja są niewystarczające.

test strony internetowej
Popularne narzędzie Webpagetest sięga bardzo głęboko.

Szczególnie dla deweloperów jest Test strony internetowej Doskonałe narzędzie, bo wchodzi w szczegóły. Można tu testować z różnych ustawień. Od "Prostego testowania" do "Zaawansowanych ustawień", które pozwalają na wykluczenie różnych elementów Twojej strony internetowej lub dodanie ich za pomocą fragmentu kodu, a jednocześnie zawierają raport z latarni morskiej Google, aż do testów porównawczych dwóch stron internetowych, "wszystko" jest tutaj możliwe. Nawet wyniki są podzielone technicznie w najdrobniejszych szczegółach. Ta strona jest więc wykorzystywana do zaawansowanych testów, podczas gdy Google i Co. są bardziej ogólne w swoich analizach.

Obrazy i inne media

Wspomniałem już wcześniej o tym, aby ponownie rozważyć oferowane treści. Teraz chodzi o optymalną integrację zdjęć. 

Tinypng Doskonale sprawdza się przy kompresji obrazów - i to zazwyczaj bez zauważalnej utraty jakości. Ten sam rezultat można osiągnąć za pomocą programu Photoshop i ustawienia "Eksport do sieci". Jeśli już zintegrowałeś swoje zdjęcia z CMS-emWordPress , możesz później zoptymalizować rozdzielczośćPlugin, na przykład za pomocą Smush.

Jeśli masz dużo zdjęć lub ikon, możesz użyć CSS sprites. Działają one podobnie jak sprites w tworzeniu gier komputerowych. Tutaj obrazy są zintegrowane raz na arkuszu sprite. Następnie CSS jest używany do określenia, pod jakimi współrzędnymi znajduje się każdy obraz. Więcej na ten temat można znaleźć tutaj.

Arkusze Sprite to wiele obrazów/ikonów, które są połączone w jednym pliku. Często projektanci grupują swoje wizerunki tematycznie. Na podstawie odpowiednich współrzędnych x- i y, arkusze są dzielone i odpowiednio integrowane. W ten sposób ładowany jest pojedynczy dokument, który odtwarza różne elementy wizualne.

Lazy Load jest kolejnym wariantem umożliwiającym optymalne załadowanie obrazów. Tutaj obrazy są ładowane, gdy gość ich potrzebuje. Istnieje niezliczona ilość wersji (bezpłatnych i płatnych) Pluginsdo WordPress tego również.

WordPress

Oczywiście zadajemy sobie również pytanie, kiedy podejście ekologiczne firm jest autentyczne: Czy istnieje nawet zrównoważony Internet? Jak "zielony" może WordPress być naprawdę? W artykule WordPress i zrównoważony rozwój Znajdziesz aktualny status dyskusji w niemieckojęzycznej społeczności WP.

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

RAIDBOXES jest zobowiązana od samego początku do trwały WordPress jeden. Zobacz m.in. nasze wskazówki dotyczące WordPress & Zrównoważony rozwój jak również do Zielone sklepy internetowe. Chcesz wziąć na siebie większą odpowiedzialność? Następnie przeczytaj nasz wkład Ekologiczny hosting dla WordPressa Na wylot.

Jaki wkład możemy wnieść w zrównoważone i efektywne projektowanie stron internetowych? Jakie są najważniejsze dźwignie w codziennym projektowaniu, aby oszczędzać zasoby? Niewiele Plugins i jedna lekka Theme końcówka jest tu najważniejsza.

Przeciętne WordPress strony dochodzą do około 600 KB. Wybierając właściwe Themes podejście i biorąc pod uwagę wcześniej wyjaśnione, można zaoszczędzić 50 procent lub więcej. Znajdziesz tu mały wybór przetestowanychThemes tutaj.

Jeśli Twoja strona jest już uruchomiona, a zmiana jednej Themes z nich jest niemożliwa, możesz zmienić swoją WordPress Popraw wydajność za pomocą tych 10 śrub nastawczych.

Jak przekonasz swoich klientów do udziału

 Właściwie to następujące słowa kluczowe powinny już wystarczyć, aby przekonać klientów do zrównoważonego projektowania stron internetowych: 

  • Zwiększona użyteczność i komfort użytkowania,
  • jasne i łatwe do zrozumienia wzory, 
  • lepsze rankingi SEO, 
  • krótszy czas ładowania oraz 
  • Strony zoptymalizowane pod kątem zastosowań mobilnych. 

Jeśli potrzebujesz dalszych argumentów, różne fundacje oferują również tzw. plakietki, które możesz zintegrować na stronach internetowych swoich klientów.

Przy wyborze dostawcy usług hostingowych, który wykorzystuje zrównoważoną, certyfikowaną zieloną energię elektryczną, plakietka ta może być dołączona:

Na przykład, również WebsiteCarbon plakietkę, którą można zintegrować z twoimi stronami, aby pokazać, że twoje treści są zrównoważone i ekologiczne.

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

Podczas moich badań na ten temat 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ą zatem często bardziej przyjazne dla środowiska niż e-booki. Kupowanie albumów muzycznych jest lepsze dla naszych zasobów niż ich strumieniowe przesyłanie. Lista jest nieskończona. Przede wszystkim statystyki te wstrząsają naszym poprzednim ogólnym rozumieniem tego, że cyfrowy oznacza również "zielony".

Oprócz tego, że jako projektanci i twórcy stron internetowych w naturalny sposób odgrywamy główną 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ą zielone, a które muszą być pilnie wyczyszczone: Za pomocą narzędzia ClickClean Od Greenpeace otrzymasz interesujący przegląd swoich (ulubionych) aplikacji i dowiesz się, jak bardzo są one cenne z punktu widzenia ekologii.

Wkład, który tworzy większą świadomość na rzecz 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. Zwłaszcza w ostatnich kilku miesiącach każdy powinien był zdawać sobie sprawę, jak Internet może pomóc nam uniknąć korzystania z transportu, a tym samym ograniczyć emisje CO2 . 

Ponadto, istnieje możliwość zmniejszenia powierzchni biurowej, która może być zredukowana dzięki funkcji domowego biura. Co więcej, sieć oferuje nam możliwość połączenia sił z innymi: Możemy na przykład korzystać z platform car sharing i rezerwować "domowników", takich jak AirBnB, które są bardziej przyjazne dla środowiska niż hotele.

Internet ułatwia również znacznie 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 moglibyśmy mieć mniejszy dostęp) to oczywiście także jeden z pozytywnych efektów branży cyfrowej - by wymienić tylko kilka z nich.

Jeśli chciałbyś zagłębić się w ten temat, polecam stronę internetową sustainablewebdesign.org jako punkt wyjścia. W przejrzyście ułożonych akapitach wyjaśniono tu najważniejsze punkty i zaproponowano możliwe rozwiązania techniczne dla ich realizacji.

Sustainable Web Design: Jakie masz pytania do Sonji?

Zachęcamy do skorzystania z funkcji komentarza. Chcesz być informowany o nowych wkładach w projektowanie i rozwój stron internetowych? Następnie podążaj za nami dalej TwitterFacebook albo o naszym Newsletter.

Po studiach projektowania gier i kreatywnego pisania w zielonym regionie Auckland, wyspecjalizował się Sonja Hoffmannw projektowaniu stron internetowych i aplikacji oraz ich rozwoju. Skupia się na gamifikacji i badaniu motywacji i doświadczenia użytkowników, w połączeniu z pasją i ciekawością trendów technologicznych.

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola oznaczone są * Zaznaczone.