Organic Basics zajmuje się produkcją i sprzedażą zrównoważonej odzieży online od 2014 roku. Nieustannie staramy się dowiedzieć, jak możemy jeszcze bardziej poprawić nasze działania na rzecz zrównoważonego rozwoju, dlatego w zeszłym roku stworzyliśmy niskoemisyjną wersję naszego sklepu internetowego.
Niskoemisyjna wersja naszej strony zmniejsza emisję dwutlenku węgla nawet o 70% dzięki wykorzystaniu niektórych opisanych poniżej technik. Co ważniejsze, strona pokazuje, że zrównoważony rozwój ma znaczenie nie tylko w przypadku sprzedawanych produktów, ale także w kontekście tego, jak je sprzedajesz.
Coraz więcej czytaliśmy o zrównoważonych stronach internetowych w całym internecie. Zasilana energią słoneczną strona Low Tech Magazine oraz Kalkulator śladu węglowego strony internetowej firmy Wholegrain Digital pojawiały się jako inspiracja na różnych kanałach Slacka, więc postanowiliśmy sami rozpocząć eksperymenty.
Proste zasady i nieograniczone możliwości
Najpierw zapoznaliśmy się z informacjami na temat tego, jak faktycznie zbudować zrównoważoną stronę internetową, i zostaliśmy zasypani wskazówkami oraz poradami. Wkrótce zdaliśmy sobie sprawę, że nie możemy zrobić wszystkiego i musimy zawęzić dostępne opcje.
Zainspirowani manifestem Dogme 95 i jego Ślubami czystości napisaliśmy manifest zawierający 10 zasad tworzenia niskoemisyjnej strony internetowej. Podobnie jak Śluby czystości, zasady te wyznaczają granicę między dużą szczegółowością a otwartością na interpretację.
Dzięki temu projektanci i programiści mają przestrzeń do znalezienia rozwiązań najlepiej dopasowanych do ich konfiguracji technicznej, bez uszczerbku dla zrównoważonego rozwoju. Zasady nie określają konieczności stosowania żadnych konkretnych technologii, dzięki czemu mogą rozwijać się wraz z postępem technologicznym.
Poniżej omówię 10 zasad i przedstawię kilka pomysłów na to, jak można wdrożyć je na własnej stronie.
1. Nie ładuj żadnych obrazów, zanim użytkownik aktywnie o nie nie poprosi
Obrazy mają duży udział w wykorzystaniu danych przez każdą stronę internetową, a szczególnie dotyczy to sklepów internetowych. Musimy prezentować nasze produkty wizualnie, często z wielu stron lub na różnych modelach.
Ważne jest, abyśmy ładowali wyłącznie obrazy, które użytkownicy rzeczywiście muszą zobaczyć. Może to oznaczać ładowanie obrazów dopiero podczas przewijania strony przez użytkownika, gdy przechodzi on między slajdami, a nawet ukrywanie ich do momentu kliknięcia przez użytkownika przycisku „pokaż obraz”.
Zasada ta jest nieco podstępna, ponieważ ilustracje w formie skalowalnej grafiki wektorowej (SVG) są nadal dozwolone, ale rozmiar pliku SVG jest niezwykle mały w porównaniu z większością obrazów. Wykorzystaliśmy to na naszej stronie, wyświetlając ilustracje w siatce kolekcji (zobacz poniżej) i pokazując obrazy na stronie produktu dopiero wtedy, gdy użytkownik aktywnie zdecyduje się załadować pokaz slajdów.
Have an account? Log In
2. Ogranicz zużycie energii na urządzeniu użytkownika
Tę kwestię może być trudno zmierzyć, ale mimo to jest ona ważna. Głównym powodem jej uwzględnienia jest dopilnowanie, abyśmy nie skupiali się wyłącznie na tym, co dzieje się podczas przesyłania plików, lecz także na tym, co te pliki robią po dotarciu do urządzenia użytkownika.
Obecnie skupiamy się tutaj przede wszystkim na wykorzystaniu animacji oraz liczbie skryptów aktywnie działających na stronie internetowej. Zastosowanie grafiki 3D może również znacznie obciążać baterię urządzenia.
Oto kilka pytań, które możesz sobie zadać, aby stosować tę zasadę:
- Czy ta animacja / grafika 3D / skrypt poprawia doświadczenia użytkownika, czy jest tylko wypełniaczem?
- Czy możemy ograniczyć wykorzystanie tej animacji / grafiki 3D / skryptu na stronie?
- Czy możemy uprościć tę animację / grafikę 3D / skrypt, tak aby robił dokładnie to, co jest niezbędne?
Powiązany artykuł: Podejmowanie bardziej odpowiedzialnych decyzji dotyczących projektowania doświadczeń użytkownika
3. Dostosuj stronę do ilości energii odnawialnej, z której korzysta
Przy obecnym sposobie działania sieci energetycznych i internetu żadna witryna nie może działać w 100% na energii odnawialnej. Nie udaje się to nawet firmie Google, która coraz większy nacisk kładzie na energię odnawialną do zasilania swoich centrów danych.
Zamiast tego możemy sprawić, aby nasze witryny dostosowywały się do ilości energii odnawialnej w sieci elektrycznej. Wiele firm energetycznych, takich jak Barry, już robi coś podobnego, udostępniając klientom aplikację pokazującą, kiedy energia elektryczna powoduje mniejszą emisję dwutlenku węgla (zobacz poniżej).
W witrynie Organic Basics o niskim wpływie na środowisko korzystamy z interfejsu API carbonintensity.org.uk, aby uzyskiwać dane. Interfejs API zapewnia bezpłatny i łatwy dostęp do danych dotyczących intensywności emisji dwutlenku węgla w różnych regionach Wielkiej Brytanii. Alternatywą byłby interfejs API Electricity Map, który jest dość drogi, ale zawiera dane z o wiele większej liczby regionów na całym świecie. Wadą tego interfejsu API jest cena dostępu.
Musieliśmy wybrać londyńskie centrum danych, ponieważ nasza witryna jest hostowana w Google Cloud i jest to jedyna opcja w Wielkiej Brytanii. Ironią losu jest to, że centrum danych znajduje się w jednym z bardziej emisyjnych regionów w ofercie hostingu w chmurze Google.
W zależności od intensywności emisji dwutlenku węgla zmieniamy jakość wyświetlanych obrazów, a także ograniczamy liczbę animacji. Jeśli energia elektryczna powoduje naprawdę wysoką emisję dwutlenku węgla, całkowicie wyłączamy witrynę.
Zamiast tego wyświetlamy minimalistyczną stronę informującą naszych klientów, że witryna jest niedostępna. Podaje ona nawet przybliżony czas, po którym będzie można ponownie uzyskać dostęp do witryny, na podstawie danych prognostycznych z interfejsu API carbonintensity.org.uk. Od momentu uruchomienia witryna była niedostępna przez około 12,5 godziny.
4. Informuj użytkownika o wpływie jego sposobu przeglądania na środowisko
Kiedy robię zakupy online, oczekuję, że będę widzieć, ile kosztuje zawartość mojego koszyka. Dzięki temu mogę sprawdzić, czy mam jeszcze pieniądze na zakupy, czy muszę poszukać jakichś rabatów. Podobnie powinniśmy informować naszych klientów o wpływie ich sposobu przeglądania na klimat.
W naszej witrynie nieustannie obliczamy emisje, które użytkownik generuje podczas jej przeglądania. Dzięki temu może lepiej zrozumieć, czym są emisje dwutlenku węgla i jaki mają związek z korzystaniem z witryny. Jeśli to możliwe, należy również samodzielnie śledzić te emisje, ponieważ ostatecznie to właściciel witryny odpowiada za ich ograniczenie.
5. Nie używaj filmów
W Organic Basics uwielbiamy filmy, ale mogą one poważnie nadszarpnąć budżet węglowy witryny. Ta zasada jest zdecydowanie najbardziej rygorystyczna z całej dziesiątki, ale istnieje ku temu bardzo dobry powód.
Internet jest coraz bardziej zdominowany przez wideo i zamiast podążać za tym trendem, postanowiliśmy działać przeciwnie. Aby naprawdę przeciwdziałać kryzysowi klimatycznemu, nie wystarczy optymalizować i minimalizować — potrzebujemy postwzrostu.
Dzięki tej zasadzie zmuszamy do wyjścia poza odtwarzacz wideo i zastanowienia się, jak dodać ruch oraz dynamikę bez polegania na ładowaniu kolejnych megabajtów treści wideo. Alternatywnie rozważ użycie animacji CSS lub SVG. Aha, w jeszcze większym stopniu dotyczy to GIF-ów. Nie. Używaj. GIF-ów.
6. Przechowuj dane lokalnie na urządzeniu użytkownika, aby ograniczyć transfer danych
Wszystkie treści wyświetlane w witrynie można potencjalnie zapisać lokalnie na urządzeniu użytkownika. Nie ma sensu pobierać czegoś dwa razy, jeśli jest mało prawdopodobne, że się zmieni.
Większość deweloperów już uzna tę zasadę za ważną. Zoptymalizuje ona wydajność witryny, a jednocześnie zmniejszy jej wpływ na środowisko.
Aby to osiągnąć, możesz rozważyć zbudowanie witryny jako progresywnej aplikacji internetowej i umożliwienie dostępu offline.
7. Kompresuj wszystkie dane w największym możliwym stopniu
Gdy pliki trafią na urządzenie użytkownika, należy zadbać o to, aby pozostały na nim do czasu aktualizacji. Nazywa się to buforowaniem. Zanim jednak pliki tam trafią, trzeba upewnić się, że są możliwie najmniejsze.
Minimalizuj kod CSS i JavaScript oraz kompresuj obrazy. Wiele nowoczesnych struktur programistycznych, takich jak Nuxt.js czy Next.js, wykona tę pracę za Ciebie dla wielu typów plików.
To naprawdę oczywiste działanie i, podobnie jak buforowanie, ma sens również z punktu widzenia wydajności.
8. Ładuj tylko najważniejsze skrypty programistyczne, struktury i pliki cookie
Za każdym razem, gdy dodajesz do kodu bibliotekę lub zewnętrzny skrypt, zwiększasz rozmiar strony. Nawet jeśli biblioteka ma zaledwie 1 kb, szybko przełoży się to na 1 MB, jeśli stronę załaduje 1000 użytkowników.
Ta zasada ma przypominać o uwzględnianiu każdego skryptu, frameworka i pliku cookie, które dodajesz. To słowo „kluczowe” powinno być tutaj najważniejsze. Śledzenie konwersji i analityka są kluczowe we wszystkich sklepach e-commerce, ale czy naprawdę są potrzebne na każdej stronie?
Te rozważania dobrze współgrają z odrobiną troski o prywatność, ponieważ RODO i podobne przepisy wymagają uzyskania zgody przed załadowaniem skryptów.
9. Ogranicz ilość światła emitowanego przez ekran
Od czasu ogłoszenia manifestu otrzymaliśmy komentarze sugerujące, że ta zasada tak naprawdę niczego nie zmienia, ponieważ korzystanie z trybu ciemnego zmniejsza zużycie energii tylko na ekranach OLED.
My odpowiadamy: to dobrze dla użytkowników ekranów OLED! W witrynie Organic Basics o niewielkim wpływie nadal używamy tu i ówdzie bieli, ponieważ jest ona ważną częścią doświadczenia związanego z naszą marką. Jednak, jak pokazuje poniższy przykład, wprowadzamy również żółty odcień oraz szarą tonację, aby ograniczyć ilość światła emitowanego przez ekran.
More Articles
10. Zoptymalizuj i ogranicz korzystanie z niestandardowych krojów pisma
Na koniec przechodzimy do korzystania z niestandardowych krojów pisma. Kroje pisma nie mają dużego udziału w emisjach związanych ze stronami internetowymi, ale ich wykorzystanie może łatwo wymknąć się spod kontroli.
Z tego powodu w witrynie o niewielkim wpływie ograniczyliśmy się do jednego niestandardowego kroju pisma. Posunęliśmy się również do usunięcia niektórych znaków z zestawu znaków. Na stronie w języku angielskim naprawdę nie ma potrzeby używania cyrylicy.
Następny krok
Jeśli zastosujesz się do tych 10 zasad, z pewnością będziesz na dobrej drodze do przekształcenia swojego sklepu e-commerce w wersję o niewielkim wpływie. Co ważniejsze, przejdziesz drogę polegającą na spojrzeniu na swoją witrynę z perspektywy zrównoważonego rozwoju i dostrzeżeniu jej jako ważnego elementu układanki zrównoważonego rozwoju.
Rozważając te zasady, należy znaleźć rozwiązania, które najlepiej sprawdzą się w przypadku Twojej marki. Nie wszystkie zasady są równie rygorystyczne i warto wykorzystać to na swoją korzyść. Twoja witryna o niewielkim wpływie nie jest taka sama jak moja i nie powinna taka być.
Zrównoważony internet nie kończy się jednak na elektryczności i efektywności energetycznej, na których skupia się tych 10 zasad. Jeśli spojrzymy na to szerzej, musimy również zacząć brać pod uwagę materiały, z których wykonane są nasze urządzenia, centra danych i sieci.
Internet opiera się na (przezabawnych) memach z kotami i blogach, ale powstaje również z wykorzystaniem bardzo realnych minerałów ziem rzadkich, które często wydobywają ludzie pracujący w trudnych warunkach, ponosząc przy tym ogromne koszty środowiskowe.
W ciągu ostatnich kilku lat firma Fairphone zaoferowała nam bardziej zrównoważony smartfon, ale dyskusja na temat internetu jako całości w ogóle się nie rozpoczęła. Innymi słowy, potrzebujemy Fairphone'a dla infrastruktury serwerowej.
Powiązany artykuł: Rzuć wyzwanie swojemu zespołowi i zmotywuj go, by uczynił planetę interesariuszem Twojej witryny
Więcej na temat zrównoważonego rozwoju: Podręcznik zrównoważonego handlu elektronicznego