Что нужно сделать, чтобы ваш интернет-магазин работал быстрее

Как повысить скорость вашего сайта и увеличить конверсию

Как вы думаете, скорость вашего сайта имеет значения? 

Всего лишь 1 секунда задержки при открытии определенной страницы стоит вам:

  • На 11% меньше просмотров на странице
  • Снижение удовлетворенности клиентов на 16%
  • 7% потеряли в конверсиях

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

И это еще не все. Другие исследования показали, что:

  • 47% людей ожидают, что веб-сайт, который они посещают, загружается до 2-3 секунд или меньше;
  • 40% людей будут «рубить» веб-страницу, если ее загрузка и открытие займет более 3 секунд;
  • 52% онлайн-клиентов считают, что быстрая загрузка определенной страницы в Интернете - это то, что делает их лояльными к выбранному сайту.

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

Минимизируйте HTTP-запросы

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

По этой логике на данном этапе правильно сделать одну важную вещь. Это должно максимально упростить дизайн вашего сайта, что не означает снижение его функциональности или эстетических качеств.

  • Оптимизируйте количество элементов на своей странице;
  • Используйте CSS вместо использования изображений, когда это возможно;
  • Объедините разные стили вместе;
  • Ограничьте сценарии и вставьте их внизу веб-страницы.

 

Ограничить время отклика сервера.

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

Включить сжатие.

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

Включить кеширование в браузере

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

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

Различные исследования показывают, что от 40% до 60% пользователей вашего сайта вводят его с пустым кешем, и именно поэтому вы заставляете свою страницу тспользовать максимуму ресурсов вашего сервера .

Минимизировать ресурсы

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

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

 Для сжатия кода также выполняются следующие рекомендации Google:

  • Чтобы сжать HTML, вы можете использовать Page Speed ​​Insights Chrome Extension для создания оптимизированной версии вашего HTML-кода. Запустите анализ вашей страницы и посмотрите на правило «Сократить HTML». Нажмите «Просмотреть оптимизированный контент», чтобы загрузить минимизированный HTML-код;
  • Чтобы минимизировать код CSS, вы можете использовать YUI Compressor или js;

Оптимизировать изображения

Когда дело доходит до изображений, вам нужно сосредоточиться и обратить пристальное внимание на три вещи: размер, формат и атрибут src.

Размер

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

  • Вырежьте изображения до нужного размера. Например, если ваша страница имеет ширину 570 пикселей, измените размер фотографии на эту ширину. Старайтесь не просто загружать 2000-пиксельное изображение и устанавливать параметры необходимой ширины (в данном случае 570 пикселей). Это может замедлить загрузку вашей страницы и, таким образом, нанести вред ее использованию пользователями;
  • Установите диапазон цветов на минимально допустимый уровень;
  • Удалить комментарии к изображению.

Формат

  • JPEG, вероятно, ваш лучший выбор;
  • PNG также является подходящим форматом для этого, хотя не все старые браузеры поддерживают его;
  • GIF-файлы следует использовать только для небольшой или упрощенной графики (менее 10x10 пикселей или цветовой гаммы 3 или менее цветов), а также для анимированных изображений;
  • Не используйте BMP или TIFF.

Атрибуты SRC

Когда вы закончите с размером и форматом изображений и установите их правильно, убедитесь, что код правильный. Для HTML код должен содержать следующее <img src = "">

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

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

Оптимизировать загрузку CSS

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

Внешний CSS загружается в основу вашего HTML с кодом, подобным следующему:

<! - Твои стили ->

<link rel = "таблица стилей" type = "text / css" media = "all"

href = http: //yourURL/style.css />

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

  • CSS Delivery Tool - показывает, сколько внешних стилей использует ваш сайт;
  • Инструкция по объединению внешних CSS-файлов.

Старайтесь не использовать встроенный CSS в коде HTML, чтобы получить более чистый исходный код. Мы рекомендуем выбирать код CSS только во внешних файлах.

Расставьте приоритеты видимого контента

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

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

Сократите количество плагинов, которые вы используете на своем сайте

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

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

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

Ограничить перенаправления

Перенаправления создают дополнительные HTTP-запросы и увеличивают время загрузки. Вот почему вы должны держать их на минимальном уровне.

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