Как повысить скорость загрузки интернет-магазина

66
logo
Как повысить скорость загрузки интернет-магазина

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

Start

 
ОПТИМИЗАЦИЯ СЕРВЕРА

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

Изображение взято с сайта: http://www.us.ntt.com/en/services/network/cdn.html

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


КОМПОЗИТ

Технология Композит разработана компанией Битрикс для ускорения загрузки страниц сайтов. Эта технология позволяет разделить страницы сайта на две части: динамическую и статическую. Разделение позволяет сначала загружать статическую составляющую страницы, а после уже динамическую.

Разделение сайта на две части

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

Преимущества композита

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


ОПТИМИЗАЦИЯ JAVASCRIPT И CSS

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

JavaScript

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

CSS

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


ВКЛЮЧЕНИЕ КЭШИРОВАНИЯ

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

кэширование в Битрикс: Управление сайта

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


ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ

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

Модуль ресайза

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

Сервис для удаления метаданных

Еще один способ оптимизации изображения – удаления из него лишних метаданных (как дата и устройство съемки). Эти данные сохраняются трех форматах: EXIF, IPTC и XMP, и не нужны для сайта, занимая лишнее место. Поэтому удаление лишней информации тоже позволит уменьшить вес загружаемых картинок.


ИТОГ

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

Популярные статьи в разделе Разработка сайтов
Тип: Разработка сайтов Компания: MakeBeCool
Добавлено:22-11-2016 7858
Тренды веб-дизайна 2017: 11 способов быть на шаг впереди
Вот и 2016 год уже подходит к концу. Многие начинают его анализировать и формировать выводы. Дизайнеры же продолжают смотреть вперед в ожидании новых трендов 2017 года. О них и поговорим.
Тип: Разработка сайтов Компания: MakeBeCool
Добавлено:22-11-2016 7858
Тип: Разработка сайтов Компания: Promodex
Добавлено:11-03-2016 2903
Что выбрать — шаблон или уникальный дизайн?
В процессе создания продающего сайта неизбежно станет вопрос о внешнем виде, дизайнерском оформлении этого сайта. И здесь есть два варианта — использовать готовый шаблон или заказать уникальный дизайн.
Тип: Разработка сайтов Компания: Promodex
Добавлено:11-03-2016 2903
Тип: Разработка сайтов Компания: MakeBeCool
Добавлено:01-06-2016 2887
Как измерить влияние редизайна сайта? [digital note #12]
Первое, что интересует после проведения редизайна, это как изменилось количество продаж. О том, как измерить такое изменение, расскажем в статье.
Тип: Разработка сайтов Компания: MakeBeCool
Добавлено:01-06-2016 2887
Читайте нас в Facebook!

https://www.facebook.com/itrating/

или

Поделитесь данным материалом в соц.сетях: