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

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

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

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

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

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

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

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

На основании этих данных, мы можем подсчитать, что сайт масштаба 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 миллиардов новых пользователей интернета. Так как суммарное влияние интернета на загрязнение окружающей среды продолжает расти, ответственность за климат лежит на тех, кто занимается развитием этой отрасли. Но разрабатывая экологичные ресурсы, мы можем снизить влияние интернета на окружающую среду, в то же время удовлетворяя потребности пользователей и увеличивая прибыльность бизнеса.

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