Вывод бизнеса в онлайн

Что влияет на скорость загрузки страниц интернет-магазина и как ее улучшить

* Материал предоставлен партнером Shop-Express и является личным мнением специалиста. Наша команда не несет ответственности за содержание и может не разделять взгляд, изложенный в тексте

10 мая 2024

Автор: HostPro

HostPro — украинская хостинговая компания

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

По данным Gitnux:

53% людей покинут сайт и уйдут к конкуренту, если страницы загружаются более 3 секунд.

При загрузке дольше 4 секунд процент отказов увеличивается до 75%.

Задержка в 2 секунды удваивает показатель отказов.

Улучшение скорости мобильной версии сайтов розничной торговли всего на 0,1 секунды увеличивает коэффициент конверсий на 8,4%.

Так сколько, в конце концов, должна загружаться страница интернет-магазина в идеале? Конкретной цифры относительно рекомендуемого времени загрузки Google никогда не публиковал. Однако встречаются заявления о том, что "две секунды — это пороговое значение для ecommerce сайтов. А в целом в Google стремятся к скорости менее чем полсекунды".

Поэтому ориентироваться можем на общепринятый среди экспертов отрасли "стандарт времени загрузки страницы" — 2 секунды (2000 мс) и меньше.

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

Как проверить скорость сайта?

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

Page Speed Insights

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

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

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

GTmetrix

Бесплатный инструмент для определения показателей скорости сайтов. Отчет предоставляется на основе данных Google Page Speed и YSlow. Также выдает список проблем, которые стоит решить для лучшей производительности.

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

Webpagetest

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

Комплексно подходит к анализу производительности сайта, поэтому так же как и Page Speed Insights и Webpagetest больше подойдет для вебмастеров и девелоперов.

Pingdom Website Spees Test (SolarWinds)

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

Подойдет и для новичков, и для профи в создании сайтов.

Dotcom-tools.com

Сервис с интуитивно понятным интерфейсом, на free-тарифе можно воспользоваться 3 локациями. Имеет хороший выбор стран для проверки скорости загрузки. Украины нет, ближайший регион — Польша. Можно тестировать из разных браузеров.

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

Подойдет и для владельцев сайтов, и для разработчиков.

8 причин, почему сайт медленно загружается

1. Медленный хостинг

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

перезагруженные серверы — настолько, что вашему сайту просто не хватает ресурсов;

географическую удаленность дата-центра от региона вашей целевой аудитории (например, ЦА в Украине, а сервер в Америке);

устаревшее и непродуктивное оборудование (процессоры и диски), а также вебсервер, который не соответствует конкретно вашим задачам и ожиданиям по скорости.

Как выбрать быстрый хостинг?

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

Отдаем предпочтение наиболее производительным вариантам. Что касается "железа" — это NVMe-диски + высокопроизводительный процессор с частотой 5 Ghz. Что касается вебсервера, то самым производительным сегодня на рынке является LiteSpeed, если не он, то на втором месте — связка "Apache+Nginx". Если есть возможность установить на сайт плагин LiteSpeed Cache, тогда точно отдаем предпочтение вариантам с веб-сервером LiteSpeed. Тогда можно будет использовать все возможности по оптимизации и кэшированию, а значит — в разы улучшить производительность вашего онлайн-магазина.

Выбираем корректную локацию. Это нужно делать отталкиваясь от того, где находится ваша основная ЦА. Если потенциальный клиент — украинец, подбираем хостинг с дата-центрами в Украине. Если житель стран ЕС — тогда хостимся в европейском регионе и т.д. Чем короче путь от сервера к клиенту, тем меньше будет время ответа сервера. И соответственно пользователи смогут максимально быстро добраться до контента страниц товаров. Единственное замечание — украинские хостеры, к примеру HostPro, имеют дата-центры не только в Украине, но и в Европе (Польша, Нидерланды) и США с одним существенным преимуществом перед зарубежными конкурентами — бесплатной и компетентной технической поддержкой 24/7 в каждом пакете Хостинга.

2. Неоптимизированный код

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

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

Как сделать минимизацию и оптимизацию кода?

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

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

3. Перегрузка мультимедийной рекламой

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

Как исправить проблему с рекламой?

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

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

4. Неоптимизированные изображения

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

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

Как оптимизировать изображения на сайте?

Проверьте размер файла ваших изображений. Все, что превышает 1 Мб, нужно уменьшать.

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

Используйте инструменты для сжатия изображений (ImageOptim, Kraken).

Воспользуйтесь специальными плагинами. Можем посоветовать LiteSpeed Cache, с которым можно за несколько кликов оптимизировать все изображения на сайте, а также настроить автоматическую оптимизацию для всех добавленных медиафайлов в будущем. Еще как вариант — Next3 Offload, который помогает загрузить изображения и другие мультимедийные файлы в сеть доставки содержимого (CDN), и тем самым обеспечивает более быстрое время загрузки.

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

5. Неоптимизированные базы данных

Оптимизация СУБД (системы управления базами данных) является одним из основных способов улучшения производительности интернет-магазина. Чтобы ускорить базу данных, можно рассмотреть варианты использования индексов, нормализации и денормализации БД. Вы можете выполнять эти оптимизации самостоятельно, при посредничестве разработчика или же обратиться за помощью к техподдержке своего хостера.

Как оптимизировать базу данных?

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

Используйте специальные плагины для оптимизации базы данных, например, WP-Optimize (для WordPress), если у вас сайт на CMS.

6. Отсутствие кэширования

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

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

Как настроить кэширование для сайта?

Используйте технологию CDN (Content Delivery Network). Ее можно подключить бесплатно через Cloudflare. Тогда последняя сохраненная версия вашего сайта будет кэшироваться на серверы, распределенные по всему миру. Пользователю будет доставляться кэшированный контент с ближайшего к нему сервера, что значительно сократит время загрузки.

Включите плагин LiteSpeed Cache, если ваш сайт на CMS. Сейчас это самый простой и производительный способ кэширования на уровне сервера. Можно, конечно, использовать и другие плагины кэширования, в частности W3 Total Cache или W3 Super Cache, однако они расположены поверх сервера, а LSCache интегрирован непосредственно в него. С установкой и настройками может помочь техподдержка хостера.

7. Тепловые карты сайта

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

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

Как оптимизировать тепловые карты?

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

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

Настроить CDN и кэширование браузера. Если ситуация со скоростью сайта не критична, или вы просто хотите перестраховаться.

8. Слишком много плагинов

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

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

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

Владельцам интернет-магазинов на Shop-Express не нужно собственноручно обновлять технические функции. Служба технической поддержки следит и вовремя обновляет систему для бесперебойной работы..

Как решить проблему с плагинами?

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

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

В завершение

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

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

Кроме того, чтобы наконец увидеть зелененькие показатели в Google PageSpeed Insights, советуем оптимизировать код, базу данных, медиафайлы вашего интернет-магазина, сократить использование мультимедийной рекламы, а также активировать плагин LiteSpeed Cache или Cloudflare для кэширования.