Как ускорить загрузку сайта на Adobe Muse — товарный лендинг

Как ускорить загрузку сайта на Adobe Muse

В этой статье пойдет речь об ускорении загрузки сайта, сделанного в Adobe Muse. Конкретно о товарном лендинге или аналогичном. Обычно такой сайт представляет из себя более-менее стандартный лендинг, на котором кроме обычных блоков есть раздел Каталог Товаров или услуг. Этот каталог выглядит примерно вот так, фото можно увеличить.

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

Проблема

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

Как ускорить загрузку сайта на Adobe Muse. Товарный лендинг или каталог. 1

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

В подтверждении своих слов привожу скриншот с такого сайта, провереного сервисом тестирования скорости загрузки сайта Webpagetest.org. Как видно, старт отрисовки страницы начинается на 5-й секунде, а для полной загрузки надо ждать полминуты! И не удивительно — количество элементов на странице — более 4 тысяч! Само-собой тяжело назвать такой сайт продающим 🙁 Фото можно увеличить.

Как ускорить загрузку сайта на Adobe Muse. Товарный лендинг или каталог. 2

Решение

Решение очевидно — уменьшить кол-во элементов или отложить их загрузку. Для подобного типа сайтов есть виджеты от MuseTT.ru, позволяющий сделать это. Один из них — виджет Фанбокс. Работает он так. Весь контент, входящий в карточку товара, мы выносим на отдельные страницы. Эта страница включает в себя фотографии, описание, форму заказа и т.д. А виджет позволяет открыть эту карточку товара в лайтбоксе. Лайтбокс адаптивный и автоматически подстраивается под любое разрешения экрана.

Проект в  Muse выглядит так ↓

Как ускорить загрузку сайта на Adobe Muse. Товарный лендинг или каталог. 3

А на сайте  отдельная страница открывается с главной в лайтбоксе, вот так ↓

Как ускорить загрузку сайта на Adobe Muse. Товарный лендинг или каталог. 4

 

Проведя анализ такого сайта получаем следующее:

  • Время загрузки и отрисовки уменьшено в 4-5 раз
  • Количество элементов уменьшено в 10 раз

Скриншот можно увеличить  ↓

Как ускорить загрузку сайта на Adobe Muse. Товарный лендинг или каталог. 5

 

Преимущество налицо! Мы выиграли в скорости загрузки страницы в 5 раз и посетитель от нас не ушел. Также данная схема дает нам преимущество в плане SEO. При правильном оформлении можно заполнить все нужные мета-теги и заголовки отдельных страниц и они будут индексироваться отдельно. Например главную можем продвигать по запросу товарная категория (запрос Powerbank для мобильного телефона), а страницы с товаром — по конкретным товарам или узким категориям (запрос Powerbank для Samsung и т.д).

Сухой остаток

Весь контент с карточек товаров выносим на отдельные страницы, ставим виджет и получаем профит — прирост скорости загрузки в 4 раза!

Демонстрация работы виджета

Демонстрация работы виджета

Купить виджет для ускорения загрузки