Никто не любит ждать.

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

Для вашего бизнеса B2B это не исключение. Интернет-клиенты ненавидят ждать загрузки веб-сайтов.

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

При обсуждении скорости мобильной страницы кажется, что магическое число составляет три секунды или меньше.

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

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

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

Увеличьте скорость загрузки страниц с помощью этих 6 советов

Хотя все эти советы полезны для повышения скорости страницы (особенно на мобильных сайтах), мы потратим больше времени на уменьшение размера изображения из-за разнообразия типов изображений. Уменьшение размера изображения - самый простой способ ускорить работу вашего сайта.

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

1. Уменьшите размер изображения.

Средний размер мобильной веб-страницы составляет 2,2 МБ , из которых 68% составляют изображения. Это плохие новости; размер веб-сайта не должен превышать 1 МБ.

Сжимайте ваши изображения

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

Инструмент анализа изображений Website Speed ​​Test и imgIX по весу страницы - это два инструмента для оценки изображений вашего веб-сайта и выявления возможностей сжатия для повышения скорости.

Есть несколько типов изображений веб-сайтов, которые следует учитывать при определении приоритета того, что вы собираетесь сжимать:

• Фоновые изображения: это довольно очевидно. Убедитесь, что они служат определенной цели, если они увеличивают скорость вашей страницы.

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

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

Для сжатия изображений можно использовать несколько инструментов: TinyPNG , Compressor.io , GIMP и Photoshop . В Photoshop вы можете настроить размер изображения с помощью параметров «Сохранить для Интернета» или «Экспортировать как».

Используйте соответствующий тип файла для изображений

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

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

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

Загрузите изображения подходящего размера

Оптимальный размер изображения зависит от вашего сайта. Например, Shopify рекомендует, чтобы файлы изображений на веб-сайте электронной коммерции были менее 70 КБ.

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

Мы сосредоточились на снимках экрана рабочего стола программы и включали их только в следующих случаях:

• Он максимально приближен к реальному виду платформы, то есть не «карикатурен», не упрощен графическими формами и т. Д.

Он максимально приближен к полному изображению экрана рабочего стола, а не обрезан.

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

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

Ниже приведены два примера, демонстрирующих эти характеристики:

Пример 1:

Скриншот Airtable, программы для работы с электронными таблицами и базами данных ( Источник )

Пример 2:

Скриншот Pipedrive, CRM-решения ( Источник )

Средний размер проанализированных снимков экрана программного обеспечения B2B составил 211 КБ, что почти вдвое меньше рекомендованного максимума в 500 КБ для общего веса страницы.

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

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

Для тех, кто сделал использовать меньший размер изображения на своем мобильном сайте, средний размер файла был 54,1 KB.

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

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

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

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

Последний совет, связанный с размером изображения: постарайтесь загружать изображения как можно ближе к размеру, который они будут отображаться на вашем сайте. Например, если изображение будет иметь ширину 280 пикселей, не загружайте его с шириной 1500 пикселей.

2. Уменьшите количество ресурсов на странице.

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

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

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

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

3. Не размещайте видео на своем сайте.

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

Вместо этого, чтобы сэкономить место, размещайте свои видео на сторонних сайтах, таких как YouTube, Wistia или Vimeo, вместо того, чтобы загружать их прямо на свой сайт.

4. Уменьшите размер шрифта.

Уменьшите количество различных типов шрифтов на странице и рассмотрите возможность использования Google Fonts или Adobe Typekit.

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

5. Улучшите код своего сайта.

Очистите код своего сайта, чтобы повысить скорость загрузки страниц ( Источник )

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

Вы также можете улучшить код своего сайта, сжав HTML, JavaScript и CSS с помощью минификации, чтобы удалить информацию, которая не нужна вашему браузеру, например пробелы, отступы и комментарии. Хотя это выходит на территорию разработчиков, важно иметь возможность облегчить этот разговор с вашим веб-мастером, поскольку процесс минификации может уменьшить размер кода от 10% до 90% .

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

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

6. Рассмотрите несколько других областей улучшения скорости.

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

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

Увеличить скорость загрузки страницы легко… и необходимо

Мы дали вам много информации, с которой можно поработать, но повышение скорости вашей страницы не должно быть сложной задачей.

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

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

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

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