Скорость загрузки веб-ресурса — один из важнейших критериев не только для посетителей, но и поисковых систем. Пользователи не хотят долго ждать, когда страницы нагруженных сайтов отобразятся на экране компьютера, тем более смартфона. Яндекс и Google давно сообщили, что сайты с медленной загрузкой никогда не получат первых строчек в поиске. Различные вебмастера и эксперты в сайтостроении утверждают, что конструктор Викс не дает возможности оптимизировать скорость отрисовки контента и единогласно предлагают сменить движок для решения этой задачи как минимум на WordPress. Не соглашусь с этим категоричным мнением. Вот как мне удалось ускорить загрузку своего сайта Викс встроенными инструментами конструктора в два раза.
Скорость загрузки не зависит от CMS-платформы
Когда я начал проверять, с какой скоростью мой сайт, созданный на Wix, загружается, то был слегка разочарован. Неужели противники самого популярного в мире CMS-конструктора правы? И чтобы решить эту задачу, придется отказаться от широкого, простого функционала и отличных параметров хостинга Викса? Для начала я решил проверить: действительно ли сайты, созданные на других платформах, по умолчанию более «быстрые». Или это очередной миф, сродни тому, который я развенчал в статье, касающейся ошибок в коде сайтов различных платформ.
Для проверки скорости загрузки ресурсов использую PageSpeed Insights. Этот онлайн-сервис от Google интересен тем, что помимо проверки текущей скорости компьютерной и мобильной версий сайтов, сразу предоставляет большой набор рекомендаций по оптимизации. Оценка проводится методом моделирования. Результат показан по стобалльной шкале — чем выше показатель, тем лучше обстоит дело с быстродействием ресурса. Итак, вот что у меня получилось.
Сайт | CMS | Мобильные устройства | Компьютер | Примечание |
|---|---|---|---|---|
petr-panda.ru | WordPress | 10 | 49 | Панда-Копирайтинг |
lifehacker.ru | WordPress | 30 | 60 | Лайфхакер |
zdorovieinfo.ru | WordPress | 14 | 46 | Сайт Елены Малышевой 😃 |
wordpress.prostodizain.ru | WordPress | 20 | 52 | Разработчик сайтов WP |
texterra.ru | Битрикс | 67 | 97 | Texterra |
tilda.cc/ru | Tilda | 66 | 95 | Конструктор Тильда |
doorsfull.demoultron.ru | MODX | 42 | 86 | Интернет-магазин |
kinoart.ru | Joomla | 31 | 79 | Сайт киножурнала |
wix.com | Wix | 31 | 88 | Конструктор Wix |
Как видите, прямой зависимости быстроты загрузки сайтов от платформы, на которых они созданы, нет. Более того, многие ресурсы ВордПресс грузятся очень медленно. Это связано с тем, что эти сайты часто размещаются на дешевом слабеньком хостинге. По мере роста количества разнообразных сторонних плагинов и тем, начинают очень сильно притормаживать. Для оптимизации этого показателя в WordPress требуется очень мощный хостинг и постоянная кропотливая работа веб-программистов.
Буду объективен. Очень неплохие показатели у материнского сайта конструктора Тильда, прямого конкурента Викс в России. Но вот ресурсы, созданные на нем, высокой скоростью загрузки также не могут похвастаться.
А вот такие показатели у моего сайта после того, как я провел оптимизацию в целях увеличения скорости загрузки. Неплохой результат для «убогого конструктора Wix», согласитесь.
Кстати, у Викс есть собственный встроенный спидтест для измерения и анализа в динамике показателя скорости загрузки, работающий в том же сервисе Google PageSpeed Insights. Находится он в «Панели управления» в разделе «Аналитика и отчеты». Здесь приводятся подробные рекомендации, как можно улучшить этот критерий встроенными инструментами конструктора.
Следует учитывать, что данные не статичны и меняются в динамике. Проверку рекомендуется проводить регулярно, особенно после внесения изменений на сайт. Это, в частности, поможет выявить зависимости между действиями в конструкторе и их влиянием на скорость загрузки. В ПУ Викс хранится история нескольких последних тестов.
Показатели моего сайта еще пару месяцев назад были примерно в два раза хуже, чем те, которые вы видите здесь. Оптимизировать загрузку мне удалось исключительно встроенными инструментами Викс. Хотя, многие из рекомендаций подходят для всех ресурсов, на каких бы движках они не были созданы.
Включаем кэширование страниц
Данный инструмент подходит для статичных страниц сайта с большим объемом контента. Кэширование ускоряет загрузку для пользователей с одинаковыми параметрами доступа: тип устройства, регион, версия браузера и другие. Викс кэширует страницы автоматически, но есть возможность индивидуальной настройки параметров.
Перейдите в редактор.
Нажмите Меню и страницы.
Наведите на нужную страницу и нажмите на иконку Показать больше.
Нажмите Настройки.
Откройте раздел Дополнительная настройка.
Выберите положение переключателя Включить кеширование страниц:
включен: страницы будут кэшироваться — выберите, как часто будет очищаться кэш этой страницы.
отключен: страница кэшироваться не будет.
Включите режим кэширования для статичных страниц, на которых контент не меняется в течение продолжительного времени. Предоставьте возможность автокэширования Викс, либо настройте параметры обновления вручную (п. 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. Всё, технология ускоренной загрузки на сайте Викс, которую Google использует для отображения лучших результатов поиска, работает.
После включения AMP вы можете увидеть снижение количества просмотров на мобильных устройствах в вашем аккаунте Google Analytics. Это не означает, что вы получаете меньше мобильного трафика, просто Google Analytics не может отслеживать трафик на AMP-страницы. Впрочем, вы можете сменить движок ради того, чтобы вернуться в «каменный век» и озадачиться подключением Турбо-страниц...
Скорость загрузки не бывает статичной
Естественно, это лишь малый объем той работы, которую я провел на сайте для ускорения загрузки. Многое еще предстоит сделать. Главная цель, которую я преследую написанием этого мануала — показать, что в конструкторе Викс предусмотрены многие возможности для решения этой задачи. Выполнив минимальные действия, у меня получилось значительно увеличить скорость загрузки сайта Wix. Заметьте, без необходимости лезть в дебри программного кода или платить немалые деньги веб-оптимизаторам.
На первый взгляд, и это все ну очень сложно для неискущенного пользователя. Тогда остается только поверить, что ВордПресс и Тильда — это лучшие решения для вашего сайта. Заплатить, и снова и снова, «продвинутым» разработчикам. Не забудьте дать мне созданный за большие деньги ресурс проверить — а стоит ли он этих затрат?
Уверен, я вас немоного разочарую: это разводка. 🤔
Comments