Что такое устойчивый веб-дизайн и как его достичь
Опубликовано: 2022-12-01
«Я очень хочу электромобиль, но я просто не могу себе этого позволить», — с раскаянием сказал один мой друг несколько месяцев назад. Мы с ним обсуждали изменение климата и изменения в наших привычках.
Я усмехнулся.
«Вы знаете, что они также потребляют энергию, и если вы не заряжаете свой электромобиль через розетку, использующую возобновляемые источники энергии, вы все равно довольно сильно загрязняете окружающую среду, верно?»
Он сказал, что знал это, но все же чувствовал, что он и его 20-летний VW были пощечиной всем его усилиям вести более устойчивую, экологически чистую жизнь.
«Как насчет этого — я могу рассказать вам, как сократить выбросы углерода в вашем цифровом мире», — предложил я. Он озадаченно посмотрел на меня. Затем я сказал ему, что, согласно некоторым статистическим данным, средний пользователь Интернета производит примерно такое же количество CO2, как если бы он проехал 1000 км на обычной машине, и существуют различные виды деятельности, которые способствуют этому.
Он бился с этой идеей почти десять минут, пока я не вытащил данные на телефоне. Честно говоря, я не винил его, поскольку помню, что у меня была такая же реакция в тот день, когда я понял, что каждая веб-страница, которую я посещаю, имеет скрытую цену - энергию, потраченную на ее поддержание.
Грязный секрет Интернета, так сказать.
Согласно калькулятору углерода веб-сайта, средний веб-сайт производит примерно 0,5 грамма CO2 за просмотр страницы, поэтому для веб-сайта со 100 000 просмотров в месяц это 500 кг в год. Имейте в виду, что это на сайте!
Для справки, средний автомобиль выбрасывает 1200 кг CO2 на 1000 км, так что вы можете видеть, как Интернет оказывает очень ощутимое влияние на изменение климата и глобальное потепление из-за его огромного углеродного следа.
Итак, возникает вопрос: что вы как владелец веб-сайта можете сделать, чтобы уменьшить влияние своего сайта на окружающую среду?
Устойчивый веб-дизайн, конечно.
В Kualo мы настолько неразрывно связаны с концепцией устойчивого развития, что считаем вполне естественным исследовать эту тему. В этой статье мы узнаем:
Мы хотим предоставить вам точные чертежи, которые помогут вам свести к минимуму углеродный след вашего веб-сайта, поэтому без лишних слов давайте приступим!
Это то, что мы можем прочитать в Манифесте устойчивого веб-дизайна, где веб-сайт кратко объясняет, что включает в себя это кредо. Давайте быстро пройдемся по 6 пунктам:
Если вы рассмотрите все вышеизложенное, то увидите, что этот манифест призывает не только к устойчивому веб-дизайну, но и к созданию основы для устойчивой деловой практики и устойчивой экономики. Чтобы иметь лучшее будущее, нам нужны предприятия, которые предоставляют значимые и полезные услуги и продукты, оказывающие минимальное негативное воздействие на окружающую среду и людей.
Другими словами, если вы стремитесь к устойчивому веб-дизайну, вам следует:
Теперь, возвращаясь к тому, что я сказал в начале этой статьи (и к нашей инфографике о воздействии Интернета на окружающую среду), мы знаем, что это, по сути, постоянно растущая энергетическая черная дыра. С другой стороны, мы также знаем, что Интернет имеет решающее значение для многих людей, и они не могут поменять его на более энергоэффективную версию, как в случае с автомобилем или ноутбуком.
Но знаешь, что мы можем поменять?
Наш дизайн сайта, конечно.
Если главное заключается в том, что размер вашего веб-сайта и то, как он построен, напрямую влияет на то, сколько CO2 он будет генерировать, то это то, что мы должны решить как владельцы веб-сайтов.
Но есть ли дополнительная выгода в изменении наших подходов, когда дело доходит до веб-дизайна?
Я бы сказал абсолютно да.
Как маркетолог, я привык рассматривать все аспекты своих цифровых усилий и то, как они влияют на мои проекты. Я могу сразу сказать вам, что даже на личном уровне гораздо лучше развернуть веб-сайт, который следует экологически чистому веб-дизайн, и вот некоторые из причин, почему:
По очевидным причинам пользователи предпочитают более короткие пути пользователя, поскольку они не тратят свое время впустую. Однако, помимо удобства клиентов, они также будут посещать меньше страниц, чтобы найти то, что им нужно, и, таким образом, сокращать выбросы углерода от своего посещения.
(Изображение предоставлено: https://www.appcues.com/blog/user-journey-map)
Это хорошая идея, чтобы лучше ознакомиться с концепцией пути пользователя, а затем, как только вы сможете свободно создавать свои карты пути пользователя, адаптировать свой веб-дизайн к ним.
Хороший пользовательский опыт (UX), позволяющий избежать проблем, неизбежно приведет как к снижению энергопотребления, так и к более довольным клиентам.
Выбор провайдера, который предлагает устойчивый хостинг на основе возобновляемых источников энергии, является обязательным. Также рекомендуется ознакомиться с их общей экологической политикой и проверить, предпринял ли ваш хостинг-провайдер дополнительные меры для компенсации выбросов CO2 и/или участвует ли он в других методах устойчивого развития.
Если на сайте нет кеширования, то вы усложняете работу сервера. Каждый раз, когда кто-то обращается к странице вашего веб-сайта, содержимое страницы должно создаваться на лету путем обработки PHP-кода, выполнения запросов к базе данных и преобразования его в HTML-контент, отображающий ваш веб-сайт.
Это использует больше ЦП, памяти и диска сервера, потребляя энергию в процессе. Сервер должен будет делать это для каждого посетителя и каждой страницы, поэтому чем больше у вас посетителей и страниц, тем больше энергии вы потребляете.
При наличии кэширования большая часть этой интенсивной нагрузки выполняется только в первый раз, когда посетитель запрашивает страницу. Полученный HTML-код затем сохраняется в кэше, чтобы при каждой последующей загрузке страницы не приходилось выполнять всю эту тяжелую работу.
Более того, ваши страницы загружаются быстрее. Это не только выигрыш для вас и ваших посетителей, но также означает, что ваши посетители тратят меньше времени на ожидание загрузки страницы, потребляя при этом меньше энергии.
Существует множество способов кэширования веб-сайтов, в Kualo мы предпочитаем LiteSpeed Cache для кэширования страниц, а также у нас есть Redis и Memcached для кэширования запросов к базе данных. Сверхбыстрые веб-сайты и лучшая устойчивость — что может не понравиться?
Это часто бывает с плагинами, ориентированными на маркетинг, или дубликатами, о которых мы забыли. Оцените, что у вас есть, а затем то, что вам нужно, и отдайте предпочтение всему остальному.
(пользовательский шрифт, созданный для Duolingo агентством Johnson Banks)
Ваш типичный файл пользовательского шрифта может легко превышать 200 КБ, включая один вес. Если вы используете разные начертания и шрифты, это неизбежно складывается, что влияет как на скорость, так и на потребление энергии.
Поэтому рекомендуется использовать пользовательские шрифты только в том случае, если вы считаете, что они действительно важны для вашего бренда и практических целей.
https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache для WordPress включает автоматическую оптимизацию изображений, поэтому вам не нужно беспокоиться об этом самостоятельно. Более того, он может преобразовывать изображения для использования в современных форматах файлов, таких как WebP, которые примерно на 25% меньше по размеру по сравнению с изображениями PNG или JPG.
Помимо оптимизации, нам также необходимо учитывать, является ли их использование оправданным и целеустремленным.
Например, некоторые фотографии продуктов могут оказаться бесполезными (например, очень похожие ракурсы). В других случаях изображения, используемые на странице, такие как случайные стоковые изображения, можно легко заменить альтернативными, такими как графика SVG, или того же эффекта можно добиться с помощью стилей CSS.
Если это включает в себя большое количество изображений или видео, которые могут быть большого размера, все эти данные должны перемещаться по Интернету, даже если они никогда не будут видны.
Ленивая загрузка означает, что вы запрашиваете этот контент только тогда, когда пользователь прокручивает вашу страницу вниз. Эти разделы появятся непосредственно перед тем, как этот контент появится в поле зрения, поэтому с точки зрения посетителей он будет таким, как если бы он всегда был там — нет заметной разницы.
Вы не только избежите передачи ненужных данных, но и улучшите показатель PageSpeed, сделав свой веб-сайт менее весомым.
Некоторые приложения поставляются со встроенной отложенной загрузкой, или ее можно подключить с помощью плагина. Для WordPress LiteSpeed Cache включает функцию ленивой загрузки, которая способна лениво загружать что-либо из изображений, видео, встроенного контента или даже целых блоков HTML, если ваша страница очень длинная.
Анимации обычно не имеют тактической цели, поэтому используйте их как можно реже. В случае с видео важно, какой цели они будут служить, поэтому, если вы считаете, что они полезны для ваших пользователей, действительно используйте их, просто убедитесь, что они максимально оптимизированы.
Часто ваш код HTML, CSS и Javascript будет содержать дополнительные данные, такие как пробелы, разрывы строк или комментарии. Эти пробелы или комментарии полезны только для того, чтобы разработчик мог легко прочитать и понять код, но они не влияют на то, как браузер интерпретирует ваш код.
Минимизация вашего кода избавляет от всего этого ненужного веса, уменьшает размер файлов, которые необходимо передавать через Интернет, и ускоряет загрузку вашего сайта.
Для WordPress LiteSpeed Cache обрабатывает этот аспект за вас, но большинство других приложений также будут иметь аналогичную функцию, доступную через плагин.
Возможно, вы использовали тему или конструктор страниц, который включает в себя массу различных макетов, стилей или функций, которые вы никогда не используете нигде на своем сайте.
Весь код останется в ваших файлах CSS и JS, что увеличит объем данных, которые необходимо передать через Интернет, и замедлит загрузку вашего сайта без уважительной причины.
Может быть сложно точно определить, какой код удалить вручную, но для WordPress LiteSpeed Cache позволяет автоматически удалять неиспользуемый CSS. Это удаляет неиспользуемый CSS и создает уникальный файл CSS для каждой страницы. Это может быть полезно, если у вас всего несколько страниц, но если на вашем сайте много страниц, может оказаться более эффективным использовать один файл CSS.
Javascript может быть сложнее удалить, хотя LiteSpeed может, по крайней мере, отложить его загрузку до тех пор, пока не будет обнаружена активность пользователя. Это может быть уместно, при условии, что это не требуется для содержимого верхней части страницы.
В конечном счете, лучший совет — избегать использования компоновщиков страниц или раздутых плагинов, где это возможно, и использовать чистый код, который, как вы знаете, действительно необходим.
Они будут тратить гораздо больше времени, пытаясь найти то, что ищут, что приведет к большему потреблению энергии.
Чтобы избежать этого, убедитесь, что ваш дизайн хорошо адаптируется к как можно большему количеству этих переменных, чтобы обеспечить оптимальный опыт для пользователей.
Что еще более важно, с точки зрения устойчивости, это помогает сократить выбросы CO2, поскольку передача данных в разные части мира требует много энергии. И чем дальше данные должны перемещаться, тем больше энергии они требуют.
Также полезно упомянуть, что изображения, обслуживаемые через CDN, обычно уменьшаются в размере, если вы каким-то образом пропустили этот шаг. Многие CDN предоставят вам инструменты для оптимизации изображения, включая уменьшение размера изображения, плотность пикселей, формат и сжатие.
Конечно, важно выбрать CDN, использующий возобновляемую энергию, например Cloudflare.
Вы можете просмотреть их вручную или использовать Google Analytics, чтобы оценить, какие страницы могут быть устаревшими или неэффективными. Затем вы можете решить, можете ли вы адаптировать их, чтобы они содержали полезный, актуальный контент, или определить, что они просто предназначены для мусорного ведра.
Участие в проектах по посадке деревьев и компенсации выбросов углекислого газа — это отличный способ повысить устойчивость не только вашего веб-дизайна, но и вашего бизнеса в целом. Деревья являются абсолютными победителями, когда речь идет о сокращении выбросов CO2, поскольку они поглощают их и превращают в кислород.
Мы приглашаем вас посетить наших партнеров в Экологии (или любую другую подобную организацию) и начать сажать эти деревья!
Я усмехнулся.
«Вы знаете, что они также потребляют энергию, и если вы не заряжаете свой электромобиль через розетку, использующую возобновляемые источники энергии, вы все равно довольно сильно загрязняете окружающую среду, верно?»
Он сказал, что знал это, но все же чувствовал, что он и его 20-летний VW были пощечиной всем его усилиям вести более устойчивую, экологически чистую жизнь.
«Как насчет этого — я могу рассказать вам, как сократить выбросы углерода в вашем цифровом мире», — предложил я. Он озадаченно посмотрел на меня. Затем я сказал ему, что, согласно некоторым статистическим данным, средний пользователь Интернета производит примерно такое же количество CO2, как если бы он проехал 1000 км на обычной машине, и существуют различные виды деятельности, которые способствуют этому.
Он бился с этой идеей почти десять минут, пока я не вытащил данные на телефоне. Честно говоря, я не винил его, поскольку помню, что у меня была такая же реакция в тот день, когда я понял, что каждая веб-страница, которую я посещаю, имеет скрытую цену - энергию, потраченную на ее поддержание.
Грязный секрет Интернета, так сказать.
Согласно калькулятору углерода веб-сайта, средний веб-сайт производит примерно 0,5 грамма CO2 за просмотр страницы, поэтому для веб-сайта со 100 000 просмотров в месяц это 500 кг в год. Имейте в виду, что это на сайте!
Для справки, средний автомобиль выбрасывает 1200 кг CO2 на 1000 км, так что вы можете видеть, как Интернет оказывает очень ощутимое влияние на изменение климата и глобальное потепление из-за его огромного углеродного следа.
Итак, возникает вопрос: что вы как владелец веб-сайта можете сделать, чтобы уменьшить влияние своего сайта на окружающую среду?
Устойчивый веб-дизайн, конечно.
В Kualo мы настолько неразрывно связаны с концепцией устойчивого развития, что считаем вполне естественным исследовать эту тему. В этой статье мы узнаем:
- Что такое устойчивый веб-дизайн?
- Зачем нам нужен устойчивый веб-дизайн?
- Каковы преимущества устойчивого веб-дизайна?
- Лучшие практики устойчивого веб-дизайна
Мы хотим предоставить вам точные чертежи, которые помогут вам свести к минимуму углеродный след вашего веб-сайта, поэтому без лишних слов давайте приступим!
Что такое устойчивый веб-дизайн?
«Устойчивый веб-дизайн — это подход к разработке веб-сервисов, который ставит людей и планету на первое место. Он предоставляет цифровые продукты и услуги, соответствующие принципам «Манифеста устойчивого развития сети»: чистые, эффективные, открытые, честные, регенеративные и устойчивые».Это то, что мы можем прочитать в Манифесте устойчивого веб-дизайна, где веб-сайт кратко объясняет, что включает в себя это кредо. Давайте быстро пройдемся по 6 пунктам:
- Чистота: услуги, используемые вашим веб-сайтом, должны питаться от возобновляемых источников энергии, то есть ваш веб-хостинг должен быть экологичным.
- Эффективность: предоставляемые вами услуги должны быть полностью оптимизированы для использования минимально возможного количества энергии (и материалов).
- Открытость: предоставляемые вами услуги должны быть доступны для всех и должны позволять пользователям полностью контролировать свои данные.
- Честность: ваш веб-сайт не будет предоставлять вводящий в заблуждение контент и/или не будет пытаться ввести пользователей в заблуждение с помощью веб-дизайна.
- Регенеративный: ваши услуги будут участвовать в экономике, ориентированной на поддержку сообществ и окружающей среды.
- Устойчивость: ваши услуги будут предоставляться тогда и там, где они больше всего нужны
Если вы рассмотрите все вышеизложенное, то увидите, что этот манифест призывает не только к устойчивому веб-дизайну, но и к созданию основы для устойчивой деловой практики и устойчивой экономики. Чтобы иметь лучшее будущее, нам нужны предприятия, которые предоставляют значимые и полезные услуги и продукты, оказывающие минимальное негативное воздействие на окружающую среду и людей.
Другими словами, если вы стремитесь к устойчивому веб-дизайну, вам следует:
- Используйте как можно меньше ресурсов
- Разработайте и следуйте продуманному контент-плану, который гарантирует, что каждая страница, которую вы разрабатываете, имеет цель.
- Используйте оптимизированную сборку веб-сайта
- Ни в коем случае не вводите пользователей в заблуждение относительно выполнения действий, которые они могут не захотеть.
Почему устойчивый веб-дизайн важен?
Таким образом, Интернет имеет множество преимуществ для общества, но требует огромных экологических издержек. Средний веб-пользователь потребляет онлайн-контент 5-6 часов в день на своем компьютере или мобильном устройстве. Поскольку мы продолжаем использовать технологии чаще, чем когда-либо прежде, это будет только увеличиваться в ближайшие годы, пока миллиарды людей не будут просматривать веб-сайты со всего мира с 8 различных типов устройств!Теперь, возвращаясь к тому, что я сказал в начале этой статьи (и к нашей инфографике о воздействии Интернета на окружающую среду), мы знаем, что это, по сути, постоянно растущая энергетическая черная дыра. С другой стороны, мы также знаем, что Интернет имеет решающее значение для многих людей, и они не могут поменять его на более энергоэффективную версию, как в случае с автомобилем или ноутбуком.
Но знаешь, что мы можем поменять?
Наш дизайн сайта, конечно.
Если главное заключается в том, что размер вашего веб-сайта и то, как он построен, напрямую влияет на то, сколько CO2 он будет генерировать, то это то, что мы должны решить как владельцы веб-сайтов.
Преимущества устойчивого веб-дизайна
Вообще говоря, если вы читаете это, у вас уже есть веская причина хотеть создать устойчивый веб-сайт, и эта причина связана с защитой окружающей среды. По сути, вы хотите стать героем планеты, и я восхищаюсь вами за это.Но есть ли дополнительная выгода в изменении наших подходов, когда дело доходит до веб-дизайна?
Я бы сказал абсолютно да.
Как маркетолог, я привык рассматривать все аспекты своих цифровых усилий и то, как они влияют на мои проекты. Я могу сразу сказать вам, что даже на личном уровне гораздо лучше развернуть веб-сайт, который следует экологически чистому веб-дизайн, и вот некоторые из причин, почему:
- Вы потратите меньше : от расходов на дизайнера до производства контента каждая дополнительная вещь будет стоить вам денег. Более сложный дизайн будет стоить вам денег, больше копирайтинг и контента будут стоить вам денег и так далее. Быть минималистом и иметь только то, что вам действительно нужно, — отличный способ сократить расходы.
- Ваши клиенты будут более довольны: если раньше, когда сайты были в новинку, люди наслаждались прибамбасами, то теперь все ими завалены, так как проводят весь день в серфинге. Это означает, что для среднего пользователя, чем понятнее ваш веб-сайт, тем больше вероятность, что он найдет то, что хочет, вместо того, чтобы нажать кнопку X и перейти к тому, кто не тратит свое время впустую.
- Ваши усилия по SEO будут более эффективными : скорость была вещью в течение нескольких лет, когда дело доходит до рейтинга Google, но с каждым годом мы видим, что это становится все более и более важным, когда речь идет о SEO. Google НЕНАВИДИТ медленные веб-сайты, и они обязательно отдадут предпочтение более легким и быстрым сайтам. Кстати, это также верно и для клиентского опыта, как мы все знаем.
Как сделать ваш сайт устойчивым
1. Начните с планирования пути пользователя
Если вы не знакомы с этой концепцией, путь пользователя — это просто последовательность действий, которые пользователь предпримет при посещении вашего сайта для достижения определенной цели — регистрация, покупка и т. д.По очевидным причинам пользователи предпочитают более короткие пути пользователя, поскольку они не тратят свое время впустую. Однако, помимо удобства клиентов, они также будут посещать меньше страниц, чтобы найти то, что им нужно, и, таким образом, сокращать выбросы углерода от своего посещения.
(Изображение предоставлено: https://www.appcues.com/blog/user-journey-map)
Это хорошая идея, чтобы лучше ознакомиться с концепцией пути пользователя, а затем, как только вы сможете свободно создавать свои карты пути пользователя, адаптировать свой веб-дизайн к ним.
Хороший пользовательский опыт (UX), позволяющий избежать проблем, неизбежно приведет как к снижению энергопотребления, так и к более довольным клиентам.
2. Выберите экологичного хостинг-провайдера
Я знаю, что это звучит немного корыстно, поскольку мы, в конце концов, являемся хостинговой компанией, но реальность такова, что то, кто управляет вашим веб-сайтом каждый божий день, имеет абсолютное значение, если вы хотите уменьшить свой углеродный след. К сожалению, дата-центры потребляют большую часть энергии, которая идет на питание интернета. Крайне важно, чтобы мы быстро перешли на 100% возобновляемые источники.Выбор провайдера, который предлагает устойчивый хостинг на основе возобновляемых источников энергии, является обязательным. Также рекомендуется ознакомиться с их общей экологической политикой и проверить, предпринял ли ваш хостинг-провайдер дополнительные меры для компенсации выбросов CO2 и/или участвует ли он в других методах устойчивого развития.
3. Кешируйте все!
Если вы используете приложение на основе PHP, как это делают многие веб-сайты (WordPress, Magento, Drupal и т. д.), то кэширование является обязательным для обеспечения устойчивости.Если на сайте нет кеширования, то вы усложняете работу сервера. Каждый раз, когда кто-то обращается к странице вашего веб-сайта, содержимое страницы должно создаваться на лету путем обработки PHP-кода, выполнения запросов к базе данных и преобразования его в HTML-контент, отображающий ваш веб-сайт.
Это использует больше ЦП, памяти и диска сервера, потребляя энергию в процессе. Сервер должен будет делать это для каждого посетителя и каждой страницы, поэтому чем больше у вас посетителей и страниц, тем больше энергии вы потребляете.
При наличии кэширования большая часть этой интенсивной нагрузки выполняется только в первый раз, когда посетитель запрашивает страницу. Полученный HTML-код затем сохраняется в кэше, чтобы при каждой последующей загрузке страницы не приходилось выполнять всю эту тяжелую работу.
Более того, ваши страницы загружаются быстрее. Это не только выигрыш для вас и ваших посетителей, но также означает, что ваши посетители тратят меньше времени на ожидание загрузки страницы, потребляя при этом меньше энергии.
Существует множество способов кэширования веб-сайтов, в Kualo мы предпочитаем LiteSpeed Cache для кэширования страниц, а также у нас есть Redis и Memcached для кэширования запросов к базе данных. Сверхбыстрые веб-сайты и лучшая устойчивость — что может не понравиться?
4. Если вы пишете код, убедитесь, что это чистый код
Большинство пользователей будут использовать какую-либо CMS, но если вы все же напишете какой-то код, убедитесь, что его легко понять, легко изменить, и он позволяет избежать ненужных дублирований и операций.5. Избегайте бесполезных плагинов и дополнений
Это относится к приведенному выше правилу, но для людей, которые действительно используют CMS, такие как WordPress, Magento, Craft, Laravel и так далее. Иногда мы можем слишком увлечься всеми возможностями, которые предлагает нам рынок плагинов, и утопить наш сайт в ненужных плагинах.Это часто бывает с плагинами, ориентированными на маркетинг, или дубликатами, о которых мы забыли. Оцените, что у вас есть, а затем то, что вам нужно, и отдайте предпочтение всему остальному.
6. Избегайте или используйте минимально нестандартные шрифты
Это может стать неожиданностью, но пользовательские шрифты могут значительно увеличить размер файла вашего веб-сайта].(пользовательский шрифт, созданный для Duolingo агентством Johnson Banks)
Ваш типичный файл пользовательского шрифта может легко превышать 200 КБ, включая один вес. Если вы используете разные начертания и шрифты, это неизбежно складывается, что влияет как на скорость, так и на потребление энергии.
Поэтому рекомендуется использовать пользовательские шрифты только в том случае, если вы считаете, что они действительно важны для вашего бренда и практических целей.
7. Используйте медиафайлы с умом (и оптимизируйте их)
Само собой разумеется, что все изображения на вашем сайте должны быть оптимизированы по размеру. Мы знаем это из лучших практик, связанных со скоростью сайта (и, следовательно, с SEO). Иногда мы видим, как клиенты спрашивают, почему их сайт работает медленно, только для того, чтобы обнаружить, что главная страница включает 4 МБ изображений, потому что они загрузили очень большие оригиналы! Те же самые изображения можно было бы обслуживать без снижения качества путем их оптимизации.https://youtu.be/eY-VyLd2t-Q
LiteSpeed Cache для WordPress включает автоматическую оптимизацию изображений, поэтому вам не нужно беспокоиться об этом самостоятельно. Более того, он может преобразовывать изображения для использования в современных форматах файлов, таких как WebP, которые примерно на 25% меньше по размеру по сравнению с изображениями PNG или JPG.
Помимо оптимизации, нам также необходимо учитывать, является ли их использование оправданным и целеустремленным.
Например, некоторые фотографии продуктов могут оказаться бесполезными (например, очень похожие ракурсы). В других случаях изображения, используемые на странице, такие как случайные стоковые изображения, можно легко заменить альтернативными, такими как графика SVG, или того же эффекта можно добиться с помощью стилей CSS.
8. Ленивая загрузка ниже содержимого сгиба
Каждая из ваших веб-страниц может содержать много контента «ниже сгиба», то есть контента, который не виден, пока посетитель не прокрутит вашу страницу вниз.Если это включает в себя большое количество изображений или видео, которые могут быть большого размера, все эти данные должны перемещаться по Интернету, даже если они никогда не будут видны.
Ленивая загрузка означает, что вы запрашиваете этот контент только тогда, когда пользователь прокручивает вашу страницу вниз. Эти разделы появятся непосредственно перед тем, как этот контент появится в поле зрения, поэтому с точки зрения посетителей он будет таким, как если бы он всегда был там — нет заметной разницы.
Вы не только избежите передачи ненужных данных, но и улучшите показатель PageSpeed, сделав свой веб-сайт менее весомым.
Некоторые приложения поставляются со встроенной отложенной загрузкой, или ее можно подключить с помощью плагина. Для WordPress LiteSpeed Cache включает функцию ленивой загрузки, которая способна лениво загружать что-либо из изображений, видео, встроенного контента или даже целых блоков HTML, если ваша страница очень длинная.
9. Ограничьте использование видео и анимации
Вам не нужно делать свой веб-сайт похожим на страницу Word и избегать видео и анимации, как чумы, но, как и в случае с изображениями, вместо этого используйте их экономно.Анимации обычно не имеют тактической цели, поэтому используйте их как можно реже. В случае с видео важно, какой цели они будут служить, поэтому, если вы считаете, что они полезны для ваших пользователей, действительно используйте их, просто убедитесь, что они максимально оптимизированы.
10. Минимизируйте HTML, CSS и Javascript на своем сайте
Опять же, вы, возможно, уже делаете это для ускорения, но если нет, давайте быстро рассмотрим причину этого.Часто ваш код HTML, CSS и Javascript будет содержать дополнительные данные, такие как пробелы, разрывы строк или комментарии. Эти пробелы или комментарии полезны только для того, чтобы разработчик мог легко прочитать и понять код, но они не влияют на то, как браузер интерпретирует ваш код.
Минимизация вашего кода избавляет от всего этого ненужного веса, уменьшает размер файлов, которые необходимо передавать через Интернет, и ускоряет загрузку вашего сайта.
Для WordPress LiteSpeed Cache обрабатывает этот аспект за вас, но большинство других приложений также будут иметь аналогичную функцию, доступную через плагин.
11. Удалите ненужные CSS и Javascript
Хотя минимизация удаляет ненужные данные, она не анализирует, действительно ли какой-либо из этих кодов используется вашим сайтом.Возможно, вы использовали тему или конструктор страниц, который включает в себя массу различных макетов, стилей или функций, которые вы никогда не используете нигде на своем сайте.
Весь код останется в ваших файлах CSS и JS, что увеличит объем данных, которые необходимо передать через Интернет, и замедлит загрузку вашего сайта без уважительной причины.
Может быть сложно точно определить, какой код удалить вручную, но для WordPress LiteSpeed Cache позволяет автоматически удалять неиспользуемый CSS. Это удаляет неиспользуемый CSS и создает уникальный файл CSS для каждой страницы. Это может быть полезно, если у вас всего несколько страниц, но если на вашем сайте много страниц, может оказаться более эффективным использовать один файл CSS.
Javascript может быть сложнее удалить, хотя LiteSpeed может, по крайней мере, отложить его загрузку до тех пор, пока не будет обнаружена активность пользователя. Это может быть уместно, при условии, что это не требуется для содержимого верхней части страницы.
В конечном счете, лучший совет — избегать использования компоновщиков страниц или раздутых плагинов, где это возможно, и использовать чистый код, который, как вы знаете, действительно необходим.
12. Убедитесь, что ваш сайт правильно работает на разных устройствах
Тестирование вашего сайта на различных размерах экрана, браузерах, устройствах и пропускной способности может занять довольно много времени, но оно тесно связано с устойчивым веб-дизайном. Это связано с пунктом 1, означающим, что неправильное отображение контента и дизайна приведет к плохому UX и путанице среди пользователей.Они будут тратить гораздо больше времени, пытаясь найти то, что ищут, что приведет к большему потреблению энергии.
Чтобы избежать этого, убедитесь, что ваш дизайн хорошо адаптируется к как можно большему количеству этих переменных, чтобы обеспечить оптимальный опыт для пользователей.
13. Используйте CDN для доставки вашего контента
Так что же такое CDN? Сеть доставки контента (CDN) — это сеть серверов, расположенных в разных географических точках. Способ, которым они помогут вашему контенту загружаться быстрее, заключается в том, чтобы обслуживать его из местоположения рядом с вашими пользователями. Другими словами, это связано как со скоростью, так и с пользовательским опытом.Что еще более важно, с точки зрения устойчивости, это помогает сократить выбросы CO2, поскольку передача данных в разные части мира требует много энергии. И чем дальше данные должны перемещаться, тем больше энергии они требуют.
Также полезно упомянуть, что изображения, обслуживаемые через CDN, обычно уменьшаются в размере, если вы каким-то образом пропустили этот шаг. Многие CDN предоставят вам инструменты для оптимизации изображения, включая уменьшение размера изображения, плотность пикселей, формат и сжатие.
Конечно, важно выбрать CDN, использующий возобновляемую энергию, например Cloudflare.
14. Проведите аудит своего контента, чтобы убедиться, что он соответствует стратегии
Если у вас большой веб-сайт, периодическая проверка его содержимого имеет решающее значение. Некоторые страницы неизбежно устареют или больше не будут служить своей цели. Это особенно верно для баз знаний, а также для страниц продуктов, сообщений в блогах и т. д.Вы можете просмотреть их вручную или использовать Google Analytics, чтобы оценить, какие страницы могут быть устаревшими или неэффективными. Затем вы можете решить, можете ли вы адаптировать их, чтобы они содержали полезный, актуальный контент, или определить, что они просто предназначены для мусорного ведра.
15. Сократите выбросы CO2, компенсировав свой углеродный след
Стать экологически благоприятным бизнесом было, вероятно, одним из лучших решений, которые мы когда-либо принимали с точки зрения повышения уровня нашей устойчивости. На данный момент мы посадили более 50 000 деревьев и компенсировали выбросы более 2000 тонн CO2 с намерением продолжить этот путь в ближайшие годы.Участие в проектах по посадке деревьев и компенсации выбросов углекислого газа — это отличный способ повысить устойчивость не только вашего веб-дизайна, но и вашего бизнеса в целом. Деревья являются абсолютными победителями, когда речь идет о сокращении выбросов CO2, поскольку они поглощают их и превращают в кислород.
Мы приглашаем вас посетить наших партнеров в Экологии (или любую другую подобную организацию) и начать сажать эти деревья!