Как оптимизировать веб-производительность и прибыль

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

По данным Kissmetrics, время загрузки является основным фактором отказа от страницы. Поскольку среднестатистический веб-посетитель не выносит страниц, которые загружаются слишком долго, процент отказов увеличивается с каждой секундой загрузки. В блоге отмечается, что почти 40% пользователей покидают страницу через 10 секунд. Пользователи мобильного Интернета, вероятно, испытывают наибольшее недовольство этой проблемой — 73% отметили, что они столкнулись с веб-сайтом, который загружался слишком медленно.

Проблема с загрузкой страницы напрямую влияет на покупательское поведение посетителей сайта. Kissmetrics также отмечает, что 79% покупателей, которые были недовольны работой веб-сайта, с меньшей вероятностью совершат повторную покупку на том же сайте. Почти половина потребителей ожидают, что страницы загрузятся за 2 секунды или меньше, а задержка в 1 секунду снизит удовлетворенность клиентов на 16%.

Последствия этих задержек выливаются в реальные деньги. Гигант электронной коммерции Amazon сообщил, что замедление загрузки страницы всего на 1 секунду обойдется ему в 1,6 миллиарда долларов дохода от продаж. Точно так же Google отметил, что замедление результатов поиска всего на четыре десятых секунды приведет к потере 8 миллионов поисковых запросов в день, что на миллионы меньше в онлайн-рекламе.

Как добраться до сути проблемы

Самыми большими факторами, влияющими на время загрузки, являются изображения, видео и графика. Современные веб-сайты содержат больше визуальных элементов и меньше текста, чтобы привлечь посетителей. По данным HTTP Archive, почти 64% среднего веса веб-сайта составляют изображения, а на видео приходится еще 8%.

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

Используйте более эффективные современные форматы изображений

Google добавил поддержку своего формата изображений WebP в браузеры Chrome, а Microsoft сделала то же самое для JPEG-XR в большинстве своих браузеров Internet Explorer и Edge. Но многие разработчики до сих пор не приняли эти изменения, придерживаясь тех же форматов JPG и PNG, вместо того, чтобы воспользоваться преимуществами современных форматов для оптимизации своих сайтов.

В идеале вы должны преобразовывать изображения в форматы WebP и JPEG-XR, когда это необходимо, и настраивать качество сжатия, чтобы сбалансировать форматы. Также важно определить конкретный браузер, который обращается к каждому изображению, и доставить версию изображения, оптимизированную для соответствующего браузера. Это позволит вам гарантировать, что пользователи получат наилучшие изображения с точки зрения визуального качества и оптимизации размера файла, не замедляя работу вашего сайта.

Устранение расточительного изменения размера на стороне браузера

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

Для старых браузеров проблема еще более заметна, поскольку их алгоритмы изменения размера обычно не соответствуют стандартам. Вы должны убедиться, что ваши изображения идеально соответствуют требуемым размерам веб-сайта. Лучше создавать разные эскизы одного и того же изображения, чем предоставлять большое изображение и полагаться на то, что браузер изменит его размер. Доступны некоторые инструменты, которые могут помочь в этом, такие как средство изменения размера изображений с открытым исходным кодом, такое как ImageMagick, или облачное решение, такое как Cloudinary.

Используйте правильные типы файлов изображений

JPEG, PNG и GIF являются наиболее распространенными форматами файлов, используемыми сегодня на веб-сайтах, но у каждого из них очень разные роли. Используйте неправильный формат, и вы зря потратите время посетителей и свои деньги. Частой ошибкой является использование PNG для доставки фотографий. Существует распространенное заблуждение, что PNG как форматы без потерь обеспечивают максимально возможное воспроизведение фотографий.

Хотя в целом это верно, это также совершенно ненужная оптимизация. Важно помнить, какой формат изображения следует использовать для отображаемого контента. PNG следует использовать для изображений, созданных компьютером (диаграммы, логотипы и т. д.), или когда вам нужна прозрачность изображения (наложения изображений); JPEG, когда вы показываете отснятую фотографию; и GIF, когда требуется анимация (анимация загрузки Ajax и т. д.).

Не используйте изображения одного размера для всех средств доставки

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

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

Используйте адаптивный дизайн

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

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

Используйте сети доставки контента (CDN)

Серверы CDNS обычно стратегически развернуты по всему миру, чтобы сократить время передачи контента туда и обратно. CDN позволяют быстрее предоставлять изображения пользователям и снижают вероятность сбоев, повышают эффективность SEO и улучшают взаимодействие с пользователем. При выборе CDN необходимо учитывать уровень ее глобального покрытия, скорость кэширования, способность выполнять логические операции на границе, среднее время отклика и другие показатели, например среднее время аннулирования.

Влияние изменений

Применяя эти передовые методы, вы действительно можете изменить пользовательский опыт, побуждая посетителей оставаться дольше, больше просматривать, участвовать и совершать покупки. Рассмотрим результаты этих компаний:

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

KartRocket, платформа электронной коммерции на основе SaaS, предлагающая прозрачную и полную экосистему электронной коммерции, которая помогает малым и средним предприятиям быстро и легко создавать интернет-магазины, необходимые для поиска способа обеспечения качества изображений, не влияя на время загрузки или производительность сайта для его клиенты. Он использовал инструменты для динамического управления изображениями, чтобы они были оптимизированы для небольших эскизов, больших изображений баннеров и изображений основных продуктов. Такой подход позволил KartRocket добиться 100-кратного увеличения времени отклика при загрузке изображений.

Суть

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

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