Frontender Magazine

Экологичный веб-дизайн

Все большее число отраслей производства стремится сократить выбросы парниковых газов в атмосферу (так называемый «углеродный след») и потребление энергии. Для автомобильной промышленности, строительства и даже телекоммуникационной отрасли уже установлены нормы вредных выбросов. В то же время углеродный след от работы интернета растет совершенно неконтролируемо: объем выбросов составляет 830 миллионов тонн CO2 в год, что больше, чем аналогичное воздействие всей авиационной промышленности. И это число может удвоиться к 2020 году.

Пора веб-разработчикам задуматься об этом.

В настоящее время те, кто занимается веб-разработкой, ответственны, как минимум, за 332 миллиона тонн выбросов CO240% всего углеродного следа от интернета. Этот объем мог бы быть не таким большим, но с появлением в дизайне каруселей, изображений с высоким разрешением и т.д. мы многие годы разрабатываем все больше и больше требовательных к потреблению энергии страниц, создавая монструозные сайты, похожие на карьерные самосвалы или вездеходы там, где нам стоило бы обойтись скромными гибридными автомобилями или даже велосипедами.

Хорошая новость в том, что у нас есть несколько способов исправить растолстевшие сайты и постоянно бороться с углеродным следом нашей отрасли — способов, которые отлично сочетаются с хорошей бизнес-практикой: веб-разработка для мобильных устройств требует вдумчивого и эффективного подхода к созданию страниц, а все более сложные метрики экономической эффективности в интернете уже толкают бизнес к использованию легких и быстрых сайтов.

Прежде чем перейти к деталям, давайте посмотрим, как определить величину «углеродного следа» от сайта.

Что такое углеродный след от веба?

Когда речь идет об энергопотреблении автомобиля, мы говорим о количестве километров, которые он может проехать на одном литре топлива. В случае с энергопотреблением сайтов мы можем говорить о количестве загружаемых данных. Это, в свою очередь, дает нам основания предполагать связь между размером страницы и углеродным следом. К сожалению, определение углеродного следа сайта, в лучшем случае, получается неоднозначным и неточным. Вот, что я думаю по этому поводу:

На основании этих данных, мы можем подсчитать, что сайт масштаба Tumblr с 183 миллионами просмотров страниц в день, примерно 10% которых происходит с мобильных устройств, потенциально несет ответственность за выброс 2600 тонн CO2 ежедневно.

Эти расчеты не принимают во внимание такие важные факторы, как количество потребляемой дата-центрами электроэнергии, получаемой из возобновляемых источников или с использованием органического топлива, или количество электроэнергии, потребляемой конечными пользователями, которые оказывают значительное влияние на итоговое значение. Но полученные данные дают нам основание для выявления зависимости между размером страницы и углеродным следом, а также дают понять, что сокращение объема передаваемой информации ведет к снижению выбросов CO2.

С чего начать? С наших проектов.

Снижение выбросов CO2 путем борьбы с «растолстевшими» сайтами

Размер среднестатистической страницы сегодня составляет 1,4 МБ, что в 15 раз больше, чем 10 лет назад, и основную часть этих данных составляют изображения (881 кб) и скрипты (224 кб). Общий размер чистого HTML-кода составляет всего 54 кб, но когда в последний раз вы видели сайт на чистом HTML? Эта среднестатистическая страница, кроме того, формируется за счет более чем 100 HTTP-запросов. Не важно, передаются ли в них большие объемы информации или маленькие, они добавляют задержку при загрузке страницы, а также увеличивают затраты электроэнергии. К тому же, среднестатистический сайт — медленный: страницы 2000 ведущих магазинов из рейтинга Alexa загружаются дольше 7 секунд, что гораздо больше, чем длительность загрузки, которую пользователи считают приемлемой.

Определение размера ресурсов для экологичного сайта

Никто специально не добивается размера страницы в 1,4 МБ, но клиенты часто настаивают на использовании привлекающих внимание изображений, реализации расширенного функционала взаимодействия с социальными сетями и использовании различных дизайнерских фишечек и рюшечек, и все это приводит к увеличению размера страницы. Лучший способ не допустить этого — это заранее ограничить ресурсы: определить желаемый размер страницы и стараться сохранить его.

Мы в MadPow внедрили подход, связанный с ограничением ресурсов, который помогает нам следить за скоростью загрузки страниц, приняв целью загрузку страницы за 2 или менее секунд. Само собой, чем больше веса страницы мы сбрасываем, тем меньше становится углеродный след сайта. Чтобы следить за ним, я умножаю размер страницы на количество ее просмотров пользователями, получая в грубом приближении суммарный трафик сайта, не забывая выделять отдельно кэшированные данные и более загрязняющий мобильный трафик.

Контроль за размером ресурсов означает учет объема данных на каждом этапе разработки:

Стратегия формирования контента: Когда вы работаете над снижением размера сайта, быстрым решением проблемы может быть замена тяжеловесного контента на более легкие альтернативы, например, замена видео на статичные изображения или замена изображений на текст — однако необходимо следить, чтобы новый контент удовлетворял потребностям пользователей и бизнеса. Еще эффективнее будет использовать подход «сначала контент», потому что вы можете контролировать конечный размер сайта на этапе подготовки контента, учитывая потребности аудитории и в то же время ограничение размера ресурсов.

Проектирование взаимодействия: Фаза разработки, во время которой определяется пользовательское взаимодействие — это лучшее время, чтобы отказаться от использования требовательных к ресурсам элементов сайта. Вездесущие карусели — первое, на что стоит обратить внимание. Обычная карусель содержит от 3 до 6 изображений, плюс JavaScript, необходимый для ее анимации, обычно добавляющий до нескольких сотен килобайт. Эффективность каруселей в любом случае спорна; если вам нужны причины для отказа от каруселей, основанные на статистике их использования, обратите внимание на «вызов» каруселям от Брэда Фроста (Brad Frost). Другие элементы, необходимость которых на сайте стоит пересмотреть — кнопки публикации в социальные сети, встраиваемые карты, видео с автоматическим воспроизведением, Flash-контент, рекламные баннеры а также встраиваемый контент, предоставляемый третьими лицами — все они требуют загрузки большого объема вспомогательных данных.

Графический дизайн: Изображения вносят самый значительный вклад в углеродный след большинства сайтов (в среднем, 60%), и за счет них мы можем уменьшить объем ресурсов сайта. Для начала определите, может быть, вы можете обойтись меньшим количеством изображений? Кроме того, многие изображения в вебе сохранены в неправильном формате, имеют реальные размеры, несоответствующие отображаемым, или плохо оптимизированы. Бесплатные сервисы, такие как smush.it, могут оптимизировать ваши изображения лучше, чем обычные средства редактирования, и, кроме того, их можно использовать для пакетной обработки изображений.

Объединение всех небольших изображений на вашем сайте в CSS-спрайты или символьные шрифты сократит объем передаваемых данных и количество HTTP-запросов; иконки на чистом CSS — это самый экономный с точки зрения передачи данных вариант, если браузер поддерживает их. И так как передача мобильных данных оставляет гораздо больший углеродный след, чем передача данных по проводным сетям, убедитесь, что ваш отзывчивый сайт использует работающее решение для отзывчивых изображений. Грамотная оптимизация может снизить размер передаваемых изображений для мобильных на 72%.

Дизайн кода: Область клиентской оптимизации быстро развивается: уменьшение размера скриптов, передача сжатых данных, настройка времени кэширования, объединение файлов — все это может помочь снизить размер передаваемых данных и уменьшить число HTTP-запросов. Чтобы понять, как это работает, попробуйте использовать инструмент Google Page Speed на вашем сайте, и он покажет, какие техники вы можете применить, чтобы ускорить его. Если вы хотите более подробно изучить этот вопрос, я рекомендую прочесть статью «Производительность в вебе. Часть 1» или недавнюю статью Лары Свонсон (Lara Swanson) на ALA.

Экологичный хостинг: Еще до того, как начать уменьшать углеродный след вашего сайта с помощью дизайна и оптимизации, вам стоит переехать на экологичный хостинг. Многие из них используют электричество, вырабатываемое с помощью возобновляемых источников энергии — например, в Исландии, где дата-центры могут пользоваться преимуществами дешевой геотермальной энергии. В настоящее время экологичный хостинг, может быть, подойдет не для всех (он может быть более дорогим, а ваши клиенты могут находиться достаточно далеко от Исландии), но со временем появляется все больше местных экологичных хостингов. Некоторые облачные сервисы становятся более дружественными к окружающей среде — Google, Apple и Rackspace частично используют энергию из возобновляемых источников, однако, согласно информации Greenpeace, Amazon Web Services этого не делает.

Остаточная компенсация: Даже после применения минималистичного дизайна, оптимизации сайта и переезда на экологичный хостинг, за вашим сайтом все еще тянется углеродный след. Признавая свою ответственность за это, вы можете оплатить компенсацию, которая, как правило, составляет $19 за тонну в зависимости от проекта. Денежная компенсация не очищает атмосферу от CO2, и это очень плохая альтернатива снижению выбросов. Тем не менее, многие программы компенсации предлагают дополнительные бонусы, такие как финансирование образования в области развития и защиты хрупкой окружающей среды.

Мотивация людей к оптимизации сайтов

Оптимизация с целью снижения выбросов равноценна оптимизации для улучшения производительности, поэтому даже для бизнеса, не стремящегося к улучшению экологической ситуации, существует несколько веских причин посадить свои сайты на диету: быстрая загрузка страниц доставляет удовольствие пользователям (особенно мобильным), она приводит к лучшей конверсии, и такие страницы лучше оптимизированы для поисковых систем.

Добавив к этому списку климатическую выгоду, мы получим вескую причину снижения размера страниц и передаваемых данных, особенно для компаний, уже стремящихся к защите климата (например, компаний, подписавших Декларацию о защите климата).

Интернет как защитник климата

Несмотря на свой огромный углеродный след, интернет может быть спасителем климата. Переход старых отраслей и услуг в интернет имеет потенциал по снижению выбросов CO2на 8 миллионов тонн к 2020 году, что больше, чем предсказываемый в размере 1,4 миллиона тонн к 2020 году след интернета.

Примеры положительного влияния интернета на экологическую ситуацию:

Мы продолжаем предпринимать шаги по развитию принципов экономии в сети. Тем не менее, нам скоро предстоит встречать 5 миллиардов новых пользователей интернета. Так как суммарное влияние интернета на загрязнение окружающей среды продолжает расти, ответственность за климат лежит на тех, кто занимается развитием этой отрасли. Но разрабатывая экологичные ресурсы, мы можем снизить влияние интернета на окружающую среду, в то же время удовлетворяя потребности пользователей и увеличивая прибыльность бизнеса.

Возможно, мы считаем, что экологичные решения всегда требуют от нас пойти на какие-либо жертвы, но в случае с вебом это не так. Сайты могут быть экологичнее, и в то же время удовлетворять потребности пользователей и улучшать итоговые показатели бизнеса. И даже если проблема кажется очень большой, любой диетолог скажет вам, что небольшие изменения складываются, давая существенный эффект. Почему бы нам не начать?

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом редакторам Антону Немцеву в skype ravencry, Константину Гупалову в skype cosmik_soul или в skype matmuchrapna доброму Владимиру Старкову.

James Christie
Автор:
James Christie
Twitter:
@JC_UX
Сaйт:
http://jcux.co.uk/
LinkedIn:
james-christie
Сергей Смольников
Переводчик:
Сергей Смольников
Мой Круг:
http://sergey-smolnikov.moikrug.ru/
Twitter:
@smolnikov
GitHub:
smolnikov

Комментарии (18 комментариев, если быть точным)

Автар пользователя
SilentImp

Не уверен автор тонко нас троллит или пишет это все абсолютно серьезно, но советы он дает дельные. Сайтам давно пора сесть на диету.

Автар пользователя
satantx

Когда писалась статья? В какой век? Ну весит страница 1.5 метра и что? Ну посижу у экрана лишние 7 секунд, не умру.

Автар пользователя
matmuchrapna

@satantx, подержав в руках лишние пару минут свой смартфон, в который загружается очередной сайт в несколько мегабайт вы скорее всего поменяете мнение

Автар пользователя
SilentImp

@satantx статья писалась не далее, как два месяца назад. В Украине 1 3G оператор. С крохотным покрытием и очень небольшой клиентской базой. Проблемы монополии и корупции. Но факт тот, что я просто не утяну страницу в полтора метра телефоном. Все просто сдохнет по таймаутам. Вот как то так. Так что оптимизация сайтов, особенно для мобильных устройств, это очень и очень актуально.

Автар пользователя
satantx

Но согласитесь, мало кто будет делать такие сайты, даже адаптивные много весят, не смотря ни на что. Даже у этой команды, если посмотреть портфолио — тяжелые сайты. Пока что выход — это делать приложения отдельные, правда и затратные.

Автар пользователя
SilentImp

Не соглашусь. На этом сайте, несмотря на то, что он неплохо выглядит и выполняет свои функции графика почти отсутствует. И даже при этом нашлось очень много всего, что можно оптимизировать, сделать лучше и после редизайна он будет еще почти на порядок меньше.

Безусловно, есть ряд областей, где нужно видео, тяжелая графика и даже звуковое сопровождение, как ни жутко это может прозвучать … но в большинстве случаев иконки, большие картинки, не нужный, не продуманный контент на сайте потому, что гладиолус. Увы.

Автар пользователя
smolnikov

@satantx мне кажется, Вы не поняли смысла статьи. Он несколько глубже («объемнее», если хотите), и при этом отлично раскрыт в тексте. Бытует мнение, что интернеты и вообще все, что связано с ИТ — это совершенно экологически чистая отрасль. Автор утверждает, что это не так, и объясняет, почему.

Автар пользователя
SilentImp

@smolnikov связь проведена очень изящно и вполне обоснована. Но мне, например, очень сложно пока ее воспринять и принять с полной серьезностью. Хихикая вот сижу.

Автар пользователя
smolnikov

@SilentImp ты бы видел мои глаза, когда я начал переводить эту статью — О_О. Я все думал: «Автор все это серьезно?» Но сомнений в серьезности и обоснованности (44 ссылки на источники! У меня в магистерской работе, кажется, меньше источников было) слов автора к концу статьи уже не возникает — все так.
И если мы можем «не делать хуже», то почему бы не приложить немного усилий.

Автар пользователя
nDmitry

Насчет экологии и ИТ. Мы можем экономить килобайты на HTTP трафике сайтов, но «петабайты» P2P трафика, например, никуда не денутся. Непонятно также про 183 млн. просмотров страниц Tumblr в день и 2600 тонн CO2 — учитывал ли автор кеширование или «тупо умножил ради пафоса» и все посетители у него ходят исключительно с чистым кешем?

Автар пользователя
SilentImp

Точно так же никуда не денутся, скажем, ТЭЦ. Но мы не можем на это непосредственно повлиять изменив методы работы. А на то, какими будут сайты — можем. Давайте делать что можем. И если каждый будет делать то, что может, вне зависимости от области деятельности — мир определенно станет лучше.

По поводу Tumblr.com — статистика показывает количество уникальных пользователей. Я думаю можно предположить что раз нету куки, то и кэш тоже чистый. Но с уверенностью я сказать не могу.

Автар пользователя
nDmitry

Пользователь уникальный сутки, соответственно, кука ставится на это время. Кроме того, речь о просмотрах, т. е. каждый пользователь делает какое-то количество просмотров, уже кеш не может быть чистым на каждый просмотр. И даже у уникальных пользователей кеш скорее всего есть, т. к. пользователь мог заходить на Tumblr вчера, неделю, месяц назад и т. д., могут быть в кеше какие-то ресурсы с public CDN, если Tumblr их использует, да и не тумблером единым — я помню были даже какие-то цифры насчет jquery и google cdn.

Автар пользователя
SilentImp

Ну и отлично. Если наши ресурсы оставляют меньший углеродный след это повод для радости. Так что стоит этому порадоваться и засесть за рефакторинг своих проектов, что бы уменьшить его еще в пару раз.

Автар пользователя
smsteel

Статья про много-весящие-сайты на сайте с кастомными шрифтами, 10 css, 9 яваскриптами, отсутствием минифицации и какой-либо оптимизации. Well played.

Автар пользователя
SilentImp

Изначально я планировал что код сайта можно будет сам по себе использовать для обучения. Именно поэтому файлы не канкатенированы и не минифицированы. Но даже так он весит очень не много. И да, сейчас на подходе редизайн, где все это будет. Так как как показала практика в сорсы как правило все же никто не заглядывает. К сожалению.

Автар пользователя
satantx

А зачем редизайн? Отлично же смотрится, если только к коде что оптимизировать. Только не флэт!) А то он уже везде)

Автар пользователя
SilentImp

Не всем нравится шрифтовая подборка, были жалобы на то, что на мобильных недостаточно быстро подгружается веб-шрифт, кое какие вопросы с адаптивностью. В целом в основном мелочи, но если их учесть, то журнал станет лучше, а это — хорошо. И это … у нас и так околофлетовый дизайн же…

Автар пользователя
cortc

Цифра в 13кВт•ч за 1Гб полный бред.

Для сравнения, автомобиль Тесла на батарее в 40 кВт•ч может проехать 225 км. Любой нормальный инженер получив такую цифру серьезно задумался над своими вычислениями.

Или еще такое сравнение, 1кВт•ч сейчас в среднем по России стоит 3-4 рубля, то за 1Гб трафика вы должны будете заплатить 39-56 рублей. У Вас такой тариф у провайдера?

Да и основной трафик в интернете - это видео/картинки, но никак не css-стили сайта.