Привет друзья!
Пришло время поговорить о скорости.
Поговорим о скорости загрузки сайтов, вот такая актуальная тема.
Часто спрашивают, влияет ли на скорость сайта его конверсию.
Конечно влияет! Сильно возрастает число отказов – многие уходят так и не дождавшись загрузки и не дав сайту даже шанса обратить на себя внимание.
А недавно, я сам заметил, что сайты медленно работают, и начал разбираться в чем дело, нашел несколько причин, почему сайты тормозят, и хочу ими поделиться.
Что влияет на скорость сайтов
Сразу скажу, что буду использовать SpeedTest от Google.
Знаю, что иногда показатели Google SpeedTest не совсем объективны, особенно в отношении Яндекс Метрики, а результаты могут ощутимо различаться.
Об этом даже написано в самом тесте.
Но на практике показатели SpeedTest сильно влияют на ранжирование сайтов в поисковых системах. Поэтому оценка скорости сайта этим инструментом очень важна.
Я создал для опытов несколько страниц, в своём старом сайте на Тильде.
Посмотрим, как изменения влияют на скорость. У страниц разный контент, буду проверять, как добавление или удаление блоков влияет на работу сайта.
И еще важно проверить, как сайты на телефоне и десктопе будут отличаться.
Начальная проверка показала, что в основном сайты работает нормально, открываются достаточно быстро, но на мобильных устройствах дольше и, как следствие, баллов меньше.
А если учесть, что по крайней мере у меня, порядка 80% пользователей приходят с мобильных.
На экспериментальных сайтах есть готовые блоки, обложка, а также зерро блоки и разделы footer, header.
В хедере у нас простой блок в качестве меню для компьютеров и гамбургер-меню для мобильных устройств.
Также тут есть форма, связанная с кнопкой в меню, и корзина. Корзина несложная, но она присутствует.
Есть еще Яндекс-карта и модификация, которая делает плавный скролл по якорным ссылкам.
Наша первая страница отправляется на speedtest и на мобильных устройствах набирает 93 балла, что я считаю за хороший результат.
Для компьютеров она ещё лучше, получается 99 баллов, что говорит о хорошей оптимизации страницы.
Попробую убрать footer, header и корзину на этой странице, и посмотрим, какие баллы получим.
Открываю без футера и хедера, всё остаётся таким же.
Как показывает практика, показатели практически не меняются, разница всего в один балл.
Главное, что сайт находится в зелёной зоне.
Дальше я подготовил готовые блоки без футера и хедера, но с товарами.
Почему выделены товары в отдельную историю?
Потому что товары могут замедлять загрузку сайта.
Все дело в том, что некоторые фотографии, которые подтягиваются с бэк-энда Тильды, могут замедлять загрузку сайта.
Чтобы это проверить, добавлю на страницу с небольшого котика, первая попавшаяся картинка.
Еще верну на страницу header и footer, думаю, показатели немного ухудшатся.
Да, сайт уже провалился в желтую зону с рейтингом 88.
Но это не так плохо, учитывая, что это результаты для мобильного телефона.
Для конструктора это тоже отличный результат, и я не вижу проблем с текущими показателями.
Теперь сделаю следующее.
"ЯDветы": Полезные советы и рекомендации по работе с Яндекс.Директ
Все эти три стандартные блока, которые дают нам 94 или 93 балла, я превратил в zero блоки с тем же контентом.
Посмотрим, будут ли готовые блоки работать быстрее, чем zero блоки.
В итоге, все три блока, которые мы имеем здесь, оказались полными копиями того, что было в готовых блоках, только в другом формате.
Да, есть небольшое падение показателей, но не критичное. От 93-94 они упали до 91.
Но зато с хедером у нас уже 87, из желтой зоны.
Если мы добавим наш магазин сюда, то снижаемся уже до 85.
Пробую заменить блок с преимуществами на блок магазина и еще раз проверяю эту страницу.
Уже 79.
В итоге, zero блоки работают немного медленнее, чем готовые блоки. Даже маленький каталог товаров на вашем сайте может влиять на его скорость. Но это все равно хорошие показатели.
Скорость работы сайта – очень важный показатель
И хоть цифры получились неплохими, я все равно продолжаю свои эксперименты в поисках лучших результатов.
Вношу изменения в блоки, решил добавить на первую страницу еще 3 преимущества, так, чтобы было более привлекательно для пользователей.
Просто часто на коммерческих сайтах люди так делают.
Время загрузки сейчас стало немного медленнее, 79, так себе. А если вместо всех этих преимуществ мы поставим нашу витрину, я думаю, что будет еще медленнее.
Для компов тоже не так круто, 93.
И это на сайте еще не подключено ни одной метрики!
Продолжаем усложнения нашей страницы
Добавил немного анимации, отключил header и footer.
И кстати, анимация включена на мобильных устройствах.
Тест показывает, что нет сильного замедления простой анимации на этой странице.
Добавляю девушку слева, от карты, уменьшаю число преимуществ, до исходных значений. Анимацию я тоже оставил.
Проверяю, как девушка в шляпе будет влиять на загрузку сайта на мобильном устройстве.
Замечу, на этой странице включены эффекты и хедер с футером.
И в принципе получилось неплохо. Тест изменений скорости загрузки не показал.
Добавляю виджеты
Проверим как они влияют на скорость загрузки страницы.
Я вставил код виджета Jivo Site - это такая фигня чат в правом нижнем углу.
Ее устанавливают на многих сайтах, как внешний скрипт, который тянется с серверов компании, владельца виджета.
Проверяю, как это повлияет на нашу страницу.
Результат налицо!
Jivo Site убивает скорость работы сайта полностью
Если у вас есть вариант установить виджет Telegram или Votza, да хотя бы Venyoo то поставьте его вместо Jivo Site - это будет гораздо лучше и быстрее для вас.
Я поражен, что он сделал со скоростью сайта.
Сайт практически уже в красной зоне. Это была абсолютная копия предыдущей страницы с девушкой, которая получала 80-81 баллов.
Теперь она получила 51.
Перепроверяю, чтобы убрать статистическую погрешность. Сильно лучше и легче не стало. Было 51 стало 52.
Такой Jivo Site отправляется на помойку скорости.
Добавляю соцсети
Проверим еще одну версию этого сайта.
В отличие от предыдущей версии, я убрал живой сайт, но добавил три иконки в окне справа - социальные сети.
Смотрю, как они влияют на рейтинг сайта, который составляет 81 балл.
После добавления этих трех иконок результат - 80 баллов.
Сайт не сильно, но замедлился.
Вывод: старайтесь минимизировать количество иконок с картинками на главном экране.
Тестирую шаблон Z
Это новые модные дизайнерские шаблоны, которые сейчас все используют - экспериментальные шаблоны в Zero Block со сложной версткой, нестандартной типографикой, пошаговой и триггерной анимацией.
Проверяем с какой скоростью они работают.
Мой результат - порядка 60-66 баллов.
Зато добавилась такая красивая обложка, анимация бокового меню с "гамбургером".
Ещё довольно большая картинка, и все всплывает снизу.
Есть бессмысленная анимация, когда все просто всплывает. Я не люблю это. Хотя есть и прикольная анимация.
Вообще, сам шаблон довольно интересный, но я не фанат анимации на всей странице.
Первый результат для этого шаблона - 66 баллов, а второй результат - 61 балл.
Не очень хорошо.
Делаю комбо, возвращаю живой сайт + этот шаблон.
Результат - 52 балла.
Подключаю метрику
Индикатор теста уже почти за гранью.
Как вы думаете, что произойдет с этим сайтом, когда я подключу к нему метрику?
Конечно же, он станет медленнее.
Что бы не быть голословным, подключаю метрики.
Google Аналитика
Выбираю самый медленный вариант сайта, с Z шаблоном плюс чат от живо сайт.
Оценка падает ниже 50, до 47 из 100 возможных.
Яндекс Метрика
Сайт уже в красной зоне, ему стало совсем плохо.
А делаю страшную вещь - подключаю к нему Яндекс Метрику.
Она, черт возьми, очень сильно тормозит сайт.
41, просто жесть.
Давай подведем итог
Первой моей рекомендацией будет пожелание, что бы для вас такие тесты вошли в привычку.
Важно, чтобы после внесения любых изменений на сайте, где бы и какие бы они ни были, обязательно проверяйте страницу в Google Speedtest.
Потому что всякое добавление, удаление или усовершенствование может повлиять на скорость работы сайта.
Если вам важна хорошая производительность, чтобы не падать сильно в рейтинге скорости, то всегда следите за этим после каждого изменения.
Но бывают и случаи, когда производительность не так важна. У меня на некоторых сайтах, которые работают медленно на мобильных устройствах, я отдаю приоритет дизайну. Я использую сложные анимации, которые замедляют работу, но делаю это осознанно.
Но в основном, особенно если на сайт идет реклама, нужно, чтобы сайт загружался быстро.
И чтобы он не загружался медленно, нужно уменьшить количество сторонних виджетов на сайте.
Лучше самому написать код и использовать его повсюду, только не использовать скрипты, которые вызывают другие серверы.
Все, что подтягивается с других серверов, тормозит сайт!
Использование гугловских шрифтов тоже может повлиять на скорость загрузки, кстати.
Яндекс.Метрика также сильно влияет на скорость, поэтому старайтесь минимизировать все эти сторонние скрипты, типа пикселей и т.д.
Еще одна рекомендация
Если есть возможность, используйте готовые блоки на Тильде. Они оптимизированы и работают лучше.
Кстати, не забывайте сжимать картинки. У одного из клиентов были проблемы с медленной загрузкой сайта из-за картинок. Они были размером один мегабайт каждая. Эти картинки использовались в витринах и при наведении на карточку они подменялись другими фотографиями. Это приводило к большому количеству загружаемых данных.
Лучше использовать сжатый формат JPEG. Рано или поздно эти картинки можно будет преобразовать в новый модный формат WebP.
Следующий момент, который поможет ускорить работу сайта.
Z шаблоны классные, но меня не устраивает в них анимация ради анимации.
Считаю, что анимация должна нести какой-то смысл, а не замедлять сайт без нужды.
Конечно, красивые буковки и эффекты могут быть интересны, но это необязательно на каждом втором сайте.
Я бы, например, подключал готовую анимацию только если она не влияет на скорость загрузки сайта
Ведь самое главное - это скорость, а не супер-красивая анимация.
Если тебе понравилось, не забудь поставить лайк и подписаться на канал. А также, если есть рекомендации по улучшению скорости работы сайта, обязательно поделись со мной и с другими в комментариях. Данная тема меня очень интересует, и я с удовольствием прочитаю комментарии.
На том прощаюсь, до скорой встречи!
