Jak poprawa wydajności strony internetowej może pomóc ocalić planetę?

Być może nie myślisz o tym często, ale Internet zużywa kolosalne ilości energii elektrycznej. Ta energia elektryczna musi być gdzieś produkowana. W większości krajów oznacza to spalanie paliw kopalnych. To z kolei oznacza, że ​​ślad węglowy Internetu urósł do tego stopnia, że ​​mógł przyćmić globalne podróże lotnicze, a to sprawia, że ​​Internet jest największą na Ziemi maszyną opalaną węglem.

W raporcie Mozilla Internet Health Report 2018 stwierdza się, że — zwłaszcza gdy Internet rozszerza się na nowe terytorium — „zrównoważony rozwój powinien być ważniejszym priorytetem”. Jednak w tej chwili strony internetowe stają się coraz bardziej otyłe, co oznacza, że ​​zapotrzebowanie na energię w Internecie nadal rośnie wykładniczo.

Przez cały czas skutki zmian klimatu stają się coraz gorsze i liczniejsze z każdym mijającym rokiem. Zdecydowana większość klimatologów przypisuje rosnącą zaciekłość i częstotliwość ekstremalnych zjawisk pogodowych na całym świecie zmianom klimatycznym, które w dużej mierze przypisują działalności człowieka. Podczas gdy niektórzy kwestionują naukę, nawet największe światowe firmy naftowe akceptują to i przyznają, że ich modele biznesowe muszą się zmienić.

Każdy kraj na Ziemi (z wyjątkiem Stanów Zjednoczonych) podpisał paryskie porozumienie klimatyczne. Chociaż Stany Zjednoczone kontrowersyjnie się wycofały, wiele z najbardziej wpływowych osób, miast, stanów i firm w Ameryce — reprezentujących ponad połowę populacji i gospodarki Stanów Zjednoczonych — zachowało swoje zaangażowanie w porozumienie dzięki inicjatywie America's Pledge.

Jako twórcy stron internetowych zrozumiałe jest poczucie, że nie jest to kwestia, na którą mamy jakikolwiek wpływ, ale to nieprawda. Podjęto wiele wysiłków, aby poprawić sytuację w sieci. Fundacja Green Web prowadzi stale rosnącą bazę danych hostów internetowych, którzy są albo w całości zasilani energią odnawialną, albo są przynajmniej zobowiązani do neutralności pod względem emisji dwutlenku węgla. W 2013 roku A List Apart opublikowało Zrównoważone projektowanie stron internetowych autorstwa Jamesa Christie. W ciągu ostatnich trzech lat na konferencji SustainableUX eksperci ds. zrównoważonego rozwoju sieci dzielili się swoją wiedzą z wielu dziedzin internetowych.

Od 2009 roku Greenpeace wywiera presję na duże firmy internetowe, aby uporządkowały swój miks energetyczny za pomocą kampanii Clicking Clean. Częściowo w wyniku tej kampanii Google ogłosił w zeszłym roku, że po raz pierwszy zakupił wystarczającą ilość energii odnawialnej, aby pokryć 100% globalnego zużycia na potrzeby operacyjne.

A zatem, oprócz zasilania serwerów energią odnawialną, co jeszcze mogą zrobić twórcy stron internetowych w sprawie zmian klimatycznych?

„Nie możesz zarządzać tym, czego nie możesz zmierzyć”

Być może największą wygraną, jeśli chodzi o tworzenie witryn bardziej zrównoważonych, jest to, że wydajność, wrażenia użytkownika i zrównoważony rozwój są ze sobą ściśle powiązane. Kluczową miarą pomiaru trwałości produktu cyfrowego jest jego zużycie energii. Obejmuje to pracę wykonywaną przez serwer, klienta i pośredniczące sieci komunikacyjne, które przesyłają dane między nimi.

Mając to na uwadze, być może pierwszą rzeczą do rozważenia jest to, jak mierzymy zużycie energii w naszej witrynie? W rzeczywistości jest to trudniejsze przedsięwzięcie, niż mogłoby się wydawać, i trudno jest tu uzyskać dokładne dane. Istnieje jednak kilka dobrych rozwiązań awaryjnych, które możemy wykorzystać, które demonstrują zużycie energii. Obejmują one transfer danych (tj. ile danych musi pobrać przeglądarka, aby wyświetlić Twoją witrynę) oraz wykorzystanie zasobów sprzętu obsługującego i odbierającego witrynę. Oczywistym wskaźnikiem jest tutaj użycie procesora, ale użycie pamięci i inne formy przechowywania danych również odgrywają swoją rolę.

Transfer danych to jedna rzecz, którą możemy dość łatwo zmierzyć. Wszystkie główne przeglądarki udostępniają narzędzia programistyczne, które pozwalają nam mierzyć aktywność sieciową. Na poniższym zrzucie ekranu widzimy na przykład, że załadowanie strony internetowej Smashing Magazine po raz pierwszy wiąże się z transferem danych poniżej megabajta. Narzędzia programistyczne Firefoksa faktycznie dostarczają nam dwie liczby: pierwsza to rozmiar nieskompresowanych plików, które zostały przesłane, a druga to rozmiar skompresowany.

Najpopularniejszym narzędziem do kompresji zasobów podczas ich przemieszczania się w sieci jest gzip, więc różnica między tymi dwiema liczbami jest zazwyczaj wynikiem pracy gzipa. Ta ostatnia liczba oznacza, ile danych zostało faktycznie przesłanych i należy ją mieć na oku.

Uwaga : istnieje wiele innych narzędzi, które dostarczają nam metryki do przesyłania danych, w tym bardzo szanowany test strony internetowej.

Do mierzenia wykorzystania procesora Chrome udostępnia szczegółowego Menedżera zadań, który pokazuje ilość pamięci, wykorzystanie procesora i aktywność sieciową poszczególnych kart. Dla bardziej odważnych/technicznych polecenie top (tabela procesów) zapewnia podobne metryki w większości systemów operacyjnych typu Unix, takich jak macOS i Ubuntu. Ogólnie rzecz biorąc, możemy również uruchomić polecenie top na dowolnym serwerze, do którego mamy dostęp do powłoki.

Na szczęście istnieją wysiłki, takie jak WebsiteCarbon i Ecograder, które mają na celu przełożenie tych wskaźników na konkretną wartość CO2 (w przypadku WebsiteCarbon) lub wynik (w przypadku Ecograder).

Zrównoważone projektowanie stron internetowych

Teraz wiemy, jak mierzyć wpływ naszej witryny, nadszedł czas, aby pomyśleć o tym, jak możemy zoptymalizować rzeczy, aby była bardziej zrównoważona, wydajniejsza i ogólnie lepsza w użyciu.

Istnieje kilka istniejących prac, które możemy tu wykorzystać. W 2016 roku O'Reilly opublikował „Designing For Sustainability” Tima Fricka. W tej książce Tim zabiera nas na wycieczkę, wyjaśniającą dlaczego i jak zrównoważone projektowanie. Ale możemy również czerpać z bogactwa istniejących pomysłów, wykładów konferencyjnych i artykułów, które – choć nie skupiają się wyraźnie na zrównoważonym rozwoju – w ogromnym stopniu pokrywają się z filozofią zrównoważonego projektowania stron internetowych. Szczególnie dobrymi przykładami są tutaj poboczny projekt Brada Frosta „Death To Bullshit”, artykuły i rozmowy Heydona Pickeringa o pisaniu mniej cholernego kodu oraz wpis na blogu Adama Silvera „Designing For Actual Performance”.

Jeśli dokonujemy całkowitego przeprojektowania strony internetowej lub zaczynamy nową od zera, możemy zacząć od kilku naprawdę ważnych pytań. Na przykład, co tak naprawdę zasługuje lub musi znaleźć się na stronie głównej? A dokładniej, jaką wartość ma każdy element na stronie głównej? Jak ujął to Heydon Pickering:

„Najbardziej wydajną, dostępną i łatwą w utrzymaniu funkcją strony internetowej jest ta, której nie tworzysz w pierwszej kolejności”.

Pracuję w zespole VIP WordPress.com, więc w tym duchu postanowiłem rzucić sobie wyzwanie, tworząc minimalistyczny motyw WordPress, aby zobaczyć, jak daleko mogę posunąć się do technik zrównoważonego projektowania stron internetowych. W rezultacie powstał motyw o nazwie Susty, który można zobaczyć w akcji na dołączonej przeze mnie stronie internetowej: sustywp.com. W tym konkretnym przykładzie witryna dostarczana jest z nieco ponad 6 KB transferu danych, co jest dobre, biorąc pod uwagę, że mediana witryny ma około 1,5 MB.

Więc co zrobiłem? Cóż, powiem ci.

Zmniejsz liczbę żądań sieciowych

Jak wspomniałem powyżej, żądania sieciowe są czymś, co możemy łatwo zmierzyć, więc stanowią dobry punkt wyjścia. Łącząc Susty, zauważyłem, że było wiele żądań HTTP, które nie wydawały się konieczne. Na przykład WordPress łączy niektóre CSS i JavaScript, które wykrywają użycie emotikonów i zapewniają, że nie pojawiają się one jako niedozwolone znaki. Nie ma w tym nic złego, ale jeśli nie planujesz używać emotikonów lub jesteś zadowolony i pewny, że różne domyślne ustawienia systemu Cię chronią, możesz uniemożliwić ich ładowanie.

Stanowi to stosunkowo niewielką oszczędność, ale ustalając filozofię usuwania niechcianego kodu i żądań z naszych stron, możemy znacznie poprawić wydajność. Na przykład:

• Czy ładujemy całe jQuery dla jakichś podstawowych operacji DOM?
  Czy możemy osiągnąć te same cele za pomocą czystego JavaScriptu? O bardziej zaawansowanej eliminacji martwego kodu (tzw. potrząsanie drzewem) przeczytasz w tym poście dla Google autorstwa Jeremy'ego Wagnera.
• Czy mamy karuzelę obrazów?
  Czy naprawdę potrzebujemy tych wszystkich obrazów? Czy znacząco poprawiają wrażenia użytkownika? A może moglibyśmy zredukować to do jednego, mocnego obrazu? A może nawet losowo pokazać jeden z wybranych obrazów, aby dać poczucie dynamizmu powracającym użytkownikom? Nawiasem mówiąc, przeprowadzone tutaj badania pokazują, że większość użytkowników nie lubi ani nie angażuje się w karuzele.
• Jeśli używamy wielu obrazów, czy skorzystalibyśmy na dostarczaniu naszych obrazów w formacie WebP dla tych przeglądarek, które go obsługują?
  Przez długi czas wsparcie WebP było frustrująco ograniczone. Ale ponieważ Firefox ma zacząć wspierać go w wersji 65 (premiera w styczniu 2019 r.), to tylko kwestia czasu, zanim pozostali maruderzy, tacy jak Safari, nadrobią zaległości.
• Czy ładujemy setki kilobajtów czcionek internetowych?
  Czy używamy wszystkich ładowanych czcionek internetowych? Czy w ogóle potrzebujemy czcionek internetowych? Większość urządzeń w dzisiejszych czasach ma stos na wpół przyzwoitych czcionek, czy moglibyśmy po prostu określić listę czcionek, które chcielibyśmy, aby były uporządkowane według preferencji? Jeśli musimy używać czcionek internetowych, powinniśmy upewnić się, że nasze czcionki są tak wydajne, jak to możliwe.
• Czy osadzamy filmy z YouTube?
  Osadzony film z YouTube zwykle dodaje około megabajta transferu danych, zanim ktokolwiek wejdzie z nim w interakcję. Jeśli tylko ułamek naszych użytkowników rzeczywiście będzie siedział i oglądał wideo osadzone w naszej witrynie, czy zamiast tego moglibyśmy po prostu utworzyć do niego link?

Przyjrzyj się wszystkim

W tym duchu możemy również przesłuchać każdy aspekt naszych stron. Co naprawdę zasługuje na to, by tam być? Czy nasz pasek boczny wnosi jakąś rzeczywistą wartość, czy po prostu umieściliśmy tam jedną, ponieważ konwencja nakazuje, aby strony internetowe miały paski boczne? Więc dodaliśmy jeden i wypełniliśmy go gównem.

W Susty eksperymentowałem z nieco niekonwencjonalnym podejściem polegającym na sprowadzaniu nawigacji do własnej strony. Dzięki temu mogę mieć strony, które są sprowadzone do dosłownie podstawowych elementów, a dodatkowa zawartość jest ładowana tylko na wyraźne żądanie użytkownika. Susty jest tak lekki i tak szybki, że zdałem sobie sprawę z badań użytkowników (czyli mojego partnera), że ładowanie menu tak naprawdę nie wyglądało jak nowa strona, więc postanowiłem, aby wyglądało jak nakładka, z krzyżykiem do odrzuć, że w rzeczywistości po prostu wracasz do poprzedniej strony.

Oprócz pomagania mi w tworzeniu przyjemnych, lekkich stron, zdegradowana nawigacja eliminuje również potrzebę stosowania wymyślnego kodu ukrywania / ujawniania w celu ich wyświetlenia. W tym miejscu chciałbym wyjaśnić, że Susty jest przykładem skrajnego doprowadzenia technik zrównoważonego projektowania stron internetowych (nie sugeruję, że jest to archetyp dobrej strony internetowej).

Pisz CSS jak twoja babcia

Jeśli chodzi o poważne zwiększenie wydajności, należy pamiętać, że liczy się dosłownie każdy znak kodu. Każdy znak reprezentuje bajt, a nawet po skompresowaniu przez gzip, nadal zyskuje na wadze. CSS to domena, w której często widzimy dużo wzdęć. Na szczęście istnieje coraz więcej coraz bardziej złożonych narzędzi, które mogą pomóc w wyeliminowaniu nieużywanego CSS. Ten fantastyczny post Sarah Dayan opisuje, w jaki sposób zmniejszyła swój pakiet CSS z 259 KB do 9 KB!

Jeśli zaczynamy od zera, być może powinniśmy w pierwszej kolejności głębiej zastanowić się nad tym, jak piszemy CSS. Heydon Pickering napisał doskonały post o tym, jak możemy pisać CSS w sposób, który wykorzystuje mocne strony tego, jak zaprojektowano składnię, i jak to może pomóc programistom zapobiegać powtórzeniom. Heydon zwraca również uwagę na to, jak bardzo marnuje się nadmierne używanie div i klas — zarówno w HTML, jak i CSS.

Co analizujesz?

Wydaje się, że w sieci stało się mniej lub bardziej wszechobecne, aby każdy mógł analizować, co robią odwiedzający ich witrynę za pomocą narzędzi takich jak Google Analytics, KISSmetrics, Piwik itp. Chociaż nie mam wątpliwości, że istnieją uzasadnione przypadki użycia, czy naprawdę potrzebujesz analityki na każdej stronie? Ja na przykład zazwyczaj dodałem Google Analytics do każdej witryny, którą zarządzam. Ale stosunkowo niedawno dotarło do mnie, że w przypadku większości wspomnianych witryn było to prawie całkowicie bezcelowe przedsięwzięcie: „Och, sześć osób przyszło dziś do tego posta przez Facebooka”. Kogo to obchodzi?

Chyba że naprawdę tego potrzebujesz, a zamierzasz analizować dane i działać na ich podstawie, po prostu porzuć analitykę i znajdź lepszy sposób na spędzenie czasu niż gapienie się na przyziemność tego, ile osób odwiedziło dzisiaj witrynę X.

Użycie czegoś takiego jak Google Analytics nie tylko zwiększa wagę Twojej strony, ale także rodzi wątpliwości etyczne dotyczące danych, które zbierasz od użytkowników w imieniu Google, co oznacza, że ​​istnieje powód, dla którego Google udostępnia usługę Analytics bezpłatnie.

Nie zapominajmy o podstawach

W dzisiejszych czasach jest tak wiele informacji na temat następujących rzeczy, ale nigdy nie powinniśmy popadać w samozadowolenie i o nich zapomnieć. Oprócz powyższego, absolutnie powinniśmy zawsze minimalizować HTML, CSS i JavaScript oraz łączyć je tam, gdzie to konieczne. Powinniśmy również skompresować wszystkie obrazy, aby były jak najmniejsze, używać właściwych formatów, we właściwych ustawieniach i korzystać z renderowania progresywnego.

Wydajność po stronie serwera

Do tej pory skupialiśmy się prawie wyłącznie na interfejsie użytkownika, ale wiele z tego staje się nieistotnych, jeśli nie zoptymalizujemy również rzeczy po stronie serwera. Wspomniałem już o tym kilka razy, ale absolutnie powinniśmy zawsze włączać kompresję gzip.

Powinniśmy maksymalnie ułatwić obsługę naszej strony internetowej dla naszego serwera. Przeważnie używam Nginx i mam szczególny sentyment do pamięci podręcznej FastCGI i stwierdziłem, że jest ona szczególnie wydajna. Jeśli masz dostęp powłoki do własnego serwera, oto post wyjaśniający, jak go skonfigurować. Jest mniej opcji technicznych, jeśli nie masz (lub nie chcesz) tak dużej kontroli nad swoim serwerem. Szczególnym faworytem w przestrzeni WordPressa jest WP Super Cache.

Powinniśmy używać HTTP2 zamiast HTTPS. Korzystanie z HTTPS otwiera świat nowych technologii internetowych, takich jak pracownicy usług, które pozwalają nam traktować samą sieć jako coś, co warto mieć. Jeśli chcesz dowiedzieć się więcej na ten temat, gorąco polecam nową książkę Jeremy'ego Keitha „Going Offline”.

Uwaga : możesz również zapoznać się z modułem Google PageSpeed, dostępnym zarówno dla Apache, jak i Nginx.

Wreszcie, największy wpływ, jaki możemy tutaj mieć, to hostowanie naszych stron internetowych w centrach danych zasilanych energią odnawialną. W Wielkiej Brytanii mogę gorąco polecić firmę Krystal i Kualo w zakresie firm, w których bezpośrednio hostuję swoje witryny. (Aby zapoznać się z pełnym katalogiem zielonych hostów internetowych, sprawdź The Green Web Foundation.)

Na zakończenie

Mam nadzieję, że przekonałem Cię, że warto podjąć wysiłek, aby nasze strony internetowe były bardziej zrównoważone. Zwłaszcza, że ​​w tym procesie wykonujemy również nasze strony internetowe:

• Bardziej wydajna,
• Bardziej przyjazny dla użytkownika,
• Bardziej dostępne,
• Bardziej przyjazny dla serwera,
• Lepiej zoptymalizowany pod kątem wyszukiwarek.

Odpowiedzią niektórych osób na ideę zrównoważonego projektowania stron internetowych — która nie jest nierozsądna — jest to, że wydaje się to być bardzo małym ustępstwem na rzecz ochrony środowiska. Oczywiście, jak duży wpływ możesz mieć, zależy od tego, jak obciążone są witryny, nad którymi pracujesz. Ale oprócz pomagania sieci w stawaniu się nieco bardziej przyjaznym dla środowiska, zrównoważone projektowanie stron internetowych jest zasadniczo najlepszymi praktykami w projektowaniu stron internetowych.

Warto też pomyśleć o zrównoważeniu emisji dwutlenku węgla, których nie da się uniknąć. Kompensacja emisji dwutlenku węgla jest czasem wyśmiewana i nie bez powodu. Główny problem z kompensacją polega na tym, że zazwyczaj okres, w którym węgiel zostanie zrównoważony, jest dość długi. Na przykład w przypadku sadzenia drzew liczba podana dla ilości sekwestracji węgla jest zwykle oparta na okresie 100 lat. Tak więc, jeśli chodzi o ograniczenie emisji dwutlenku węgla teraz, nie jest to tak naprawdę rozwiązanie. Ale to lepsze niż nic.

Motto myclimate to dać z siebie wszystko, a resztę zrównoważyć. Napisałem post na blogu o rozwijaniu własnego programu redukcji emisji dwutlenku węgla. Gorąco polecam również inicjatywę 1% For The Planet. Wreszcie, jeśli jesteś właścicielem firmy i chciałbyś dołączyć do sojuszu firm, które chcą widzieć lepszą sprawiedliwość społeczną, środowiskową i ekonomiczną, sprawdź program Certified B Corporation.