Как я улучшил скорость загрузки своего сайта Wix в 2 раза


Ускоряем загрузку сайта Викс
Как я разогнал свой сайт Викс в два раза

Скорость загрузки не зависит от CMS-платформы

Включаем кэширование страниц

Оптимизация визуального контента

Стандартизация шрифтов

Настройка шаблона шрифтов основных страниц сайта

Создание шаблона для текстов блога

Оптимизация загрузки на мобильные устройства

Не забудьте про AMP

Скорость загрузки не бывает статичной


Скорость загрузки веб-ресурса — один из важнейших критериев не только для посетителей, но и поисковых систем. Пользователи не хотят долго ждать, когда страницы нагруженных сайтов отобразятся на экране компьютера, тем более смартфона. Яндекс и Google давно сообщили, что сайты с медленной загрузкой никогда не получат первых строчек в поиске. Различные вебмастера и эксперты в сайтостроении утверждают, что конструктор Викс не дает возможности оптимизировать скорость отрисовки контента и единогласно предлагают сменить движок для решения этой задачи как минимум на WordPress. Не соглашусь с этим категоричным мнением. Вот как мне удалось ускорить загрузку своего сайта Викс встроенными инструментами конструктора в два раза.


Скорость загрузки не зависит от CMS-платформы


Когда я начал проверять, с какой скоростью мой сайт, созданный на Wix, загружается, то был слегка разочарован. Неужели противники самого популярного в мире CMS-конструктора правы? И чтобы решить эту задачу, придется отказаться от широкого, простого функционала и отличных параметров хостинга Викса? Для начала я решил проверить: действительно ли сайты, созданные на других платформах, по умолчанию более «быстрые». Или это очередной миф, сродни тому, который я развенчал в статье, касающейся ошибок в коде сайтов различных платформ.


Ошибки в HTML-коде встречаются только на сайтах, созданных в CMS-конструкторах? Это миф

Для проверки скорости загрузки ресурсов использую PageSpeed Insights. Этот онлайн-сервис от Google интересен тем, что помимо проверки текущей скорости компьютерной и мобильной версий сайтов, сразу предоставляет большой набор рекомендаций по оптимизации. Оценка проводится методом моделирования. Результат показан по стобалльной шкале — чем выше показатель, тем лучше обстоит дело с быстродействием ресурса. Итак, вот что у меня получилось.


Сайт

CMS

Мобильные устройства

Компьютер

Примечание

WordPress

10

49

Панда-Копирайтинг

WordPress

30

60

Лайфхакер

WordPress

14

46

Сайт Елены Малышевой 😃

WordPress

20

52

Разработчик сайтов WP

Битрикс

67

97

Texterra

Tilda

66

95

Конструктор Тильда

MODX

42

86

Интернет-магазин

Joomla

31

79

Сайт киножурнала

Wix

31

88

Конструктор Wix


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


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


А вот такие показатели у моего сайта после того, как я провел оптимизацию в целях увеличения скорости загрузки. Неплохой результат для «убогого конструктора Wix», согласитесь.
Скорость загрузки моего сайта
Довольно неплохой результат скорости загрузки моего сайта

Кстати, у Викс есть собственный встроенный спидтест для измерения и анализа в динамике показателя скорости загрузки, работающий в том же сервисе Google PageSpeed Insights. Находится он в «Панели управления» в разделе «Аналитика и отчеты». Здесь приводятся подробные рекомендации, как можно улучшить этот критерий встроенными инструментами конструктора.

Проверка скорости в ПУ Викс
Встроенный инструмент проверки скорости загрузки в панели управления Викс

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


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


Включаем кэширование страниц


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


  1. Перейдите в редактор.

  2. Нажмите Меню и страницы.

  3. Наведите на нужную страницу и нажмите на иконку Показать больше.

  4. Нажмите Настройки.

  5. Откройте раздел Дополнительная настройка.

  6. Выберите положение переключателя Включить кеширование страниц:

  • включен: страницы будут кэшироваться — выберите, как часто будет очищаться кэш этой страницы.

  • отключен: страница кэшироваться не будет.

Кэширование страниц Wix
Настройка режима кэширования страниц в конструкторе Викс

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


Не рекомендуется кэшировать страницы со следующими приложениями:

  • Страница корзины в магазине.

  • Галерея товаров в магазине.

  • Виджет товара в магазине.

  • Кнопка Добавить в корзину.

  • Виджет бронирования.

  • Пользовательское меню.


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

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


Оптимизация визуального контента


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

Настройка фона и стилей Викс
Установка дизайнерских стилей в конструкторе Викс

Разработчики Викс утверждают, что изображения в конструкторе сжимаются автоматически. Более того, рекомендуемый размер графики допустим с разрешением не менее 2560 X 1440 пикселей и объемом файла до 25 МБ. Формат лучше выбрать JPEG вместо PNG и векторную графику SVG для декоративных форм или бизнес-логотипов. Когда вы загружаете изображение на свой сайт, оно автоматически конвертируется в формат WebP, так как он лучше оптимизирован для производительности сайта.


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


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

Видео, встроенные в одиночный видеоплеер (Youtube, Vimeo, Dailymotion, Facebook), являются iframe, и контент доставляется не с серверов Wix. Это означает, что Wix не может его оптимизировать. Это не значит, что вы не должны их использовать; но рекомендуется избегать их чрезмерного использования, особенно в верхней части страницы.


Стандартизация шрифтов


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


Пользовательские шрифты — такой же графический элемент, как изображения и видео. Большое разнообразие эффектных текстов привлекает посетителей, помогает «оживить» контентные страницы. Но чем больше пользовательских шрифтов вы добавляете, тем больше времени требуется для их загрузки и соответственно появления на сайте. Это связано с тем, что браузер загружает все пользовательские шрифты, используемые на определенной странице, до того, как они появятся на сайте.


Для начала я минимизировал количество типов шрифтов, используемых на сайте. Общая рекомендация: задействовать 1–3 разных шрифта с 3–4 начертаниями каждый. Системные шрифты загружаются быстрее, чем пользовательские. Некоторые из системных шрифтов доступны в редакторе Wix, например, Arial, Comic Sans, Georgia, Impact и Times New Roman.

Я ввел такой стандарт: шрифт без засечек для заголовков Verdana и системный Arial для основного текста. В конструкторе Викс можно настроить единый стандарт для всего текстового контента в шаблонах стилей.


Настройка шаблона шрифтов основных страниц сайта


В редакторе Викс в левой панели откройте «Дизайн сайта» и выберите «Стиль сайта» → «Настроить» → «Текст/Настройка стиля текста».

Шаблоны текста сайта Викс
Настраиваем шаблон стилей текста для сайта

Поочередно выберите тип шрифта, его начертание, цвет, размер, интервал для Заголовков и Основного текста (Абзац). Сразу посмотрите, как будет выглядеть текст.

Выбор шрифтов для шаблона
Выберите подходящий шрифт для заголовков и текста сайта

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


Создание шаблона для текстов блога


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


Перейдите в редакторе на страницу Ленты блога. Кликните ЛКМ и откройте меню настроек. Выберите пункт «Дизайн».

Стили текста в блоге
Настраиваем стили текста для блога Викс

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

Шаблоны текстов блога Викс
Выбираем подходящий шрифт, цвет, размер для блога Викс

Перейдите в настройки постов, откройте «Стиль и цвет текста» и «Меню блога». В них создайте шаблоны для стилей и формата текстов, цитат.

Задание стилей текста блога Викс
Продолжаем настраивать стили текста блога

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


Оптимизация загрузки на мобильные устройства


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


Выбираю нужную страницу сайта и перехожу в режим «Мобильный редактор».

Мобильная оптимизация загрузки Викс
Приступаем к мобильной оптимизации загрузки сайта

Основная задача — убрать «тяжелые» элементы из мобильной версии: лишнюю графику, интерактив, цветной фон и пр. Для этого достаточно выделить блок и нажать кнопку «Скрыть элемент». Например, кнопки «Позвонить» и «Написать» в хедере совсем не нужны, т. к. они дублируют меню быстрых действий. Также я удаляю свою фотографию с главной страницы и некоторые другие элементы. Убираю цветной фон страниц. Помимо ускорения загрузки, такая оптимизация улучшает просмотр сайта на маленьких экранах смартфонов.

Убираю лишние элементы в мобильной версии
Убираю лишние элементы в мобильной версии

Вместо объемной формы «Узнайте стоимость» на главной странице, которую вряд ли будут заполнять на мобильном устройстве, добавляю кнопку СТА «Свяжитесь со мной».

Замена мобильных элементов
Заменяю неэффективные элементы в мобильном редакторе

Скрытые элементы можно легко вернуть в меню настроек.

Управление скрытыми элементами редактора
Управление скрытыми элементами редактора

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

Добавляем экран приветствия
Экран приветствия помогает при загрузке на мобильных устройствах

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

Оптимизация мобильной загрузки постов
Настройка поста для оптимальной загрузки на мобильных устройствах

Не забудьте про AMP


AMP (Accelerated Mobile Pages) – это технология ускоренных мобильных страниц, которая разрабатывается независимыми программистами и активно используется Google. Турбо-страницы Яндекс, которые якобы ускоряют загрузку текстового контента, сокрее реализуются как пережиток древней технологии WAP, созданной еще в прошлом веке для ускорения загрузки на кнопочных телефонах. Естественно, в Wix этот рудимент не поддерживается.


Как и весь продвинутый функционал, ускорение загрузки контентных страниц блога в Викс не требует покупки плагинов или «шаманства» со сложными HTML-кодами. Все можно сделать в несколько кликов.


Открываю Панель управления и «Шаблоны SEO».

Настраиваем AMP
Настройка быстрой загрузки с использованием технологии AMP

Открываю вкладку «Посты блога» и перехожу на «Ускоренные мобильные страницы (AMP)».