В современном мире сайт компании — это ее лицо. Первое впечатление о предприятии складывается уже на первых секундах, и как правило, оно правильное. Неряшливый или откровенно технически устаревший сайт говорит о том, что предприятие не нацелено на успех и переживает не лучшие времена. Очевидно, что доверять свои отправления компании, у которой какие-то проблемы, решится не каждый: хочется, чтобы груз находился в надежных руках.
Нацеленные на развитие компании это понимают и стараются сделать так, чтобы их сайт соответствовал всем параметрам, необходимым для роста клиентской базы. К ним относится:
- удобная и понятная навигация;
- достаточное количество необходимой информации;
- возможность получить/рассчитать полную стоимость услуг;
- доступные каналы связи;
- оптимизация страниц.
Из всего представленного выше списка большинство пунктов относится к тому, что можно сразу увидеть — неудобное меню, отсутствие нужной информации и так далее. Это бросается в глаза и это стараются исправить. При этом последний пункт является одним из важнейших для успешной работы сайта, как с точки зрения клиента, так и с точки зрения поисковых систем.
Нужно ли бороться за секунды?
Оптимизация сайта необходима по нескольким причинам. Самые главные из них — ее ранжирование в поисковой выдаче и количество отказов при первом посещении интернет-портала. Рассмотрим обе причины подробнее.
Ранжирование в поисковой выдаче
Скорость загрузки сайта напрямую влияет на его место в поисковой выдаче: чем быстрее загружается портал, тем выше его позиция. А вот откровенно медленные сайты совсем пропадают из выдачи или оказываются далеко внизу — там, где клиент их, скорее всего, никогда не увидит. С 2018 года Google, а затем и Яндекс, делают ставку на простоту, удобство и скорость работы сайта — в 2021 году влияние этих условий на положение в поисковой выдаче только усиливается.
Больше половины трафика в России приходится на мобильные устройства, и эта цифра непрерывно растет. При этом, 84% совмещают ПК и смартфон, с перевесом в сторону последнего — это означает, что у пользователя часто может быть слабый сигнал и низкая скорость соединения. В таких реалиях медленные сайты становятся полностью неконкурентоспособными.
Большое количество отказов
Все проводимые с 2006 года исследования указывают на то, что время, которое пользователь готов провести в ожидании загрузки страницы, сокращается с каждым годом. В далеком 2006 году масштабное исследование Amazon показало, что увеличение времени загрузки сайта всего на 0,1 секунды, влекло за собой падение продаж на 1%.
В 2021 году ситуация выглядит еще опаснее. Скорость интернет соединения значительно выросла — выросли и требования. Пользователи не готовы смотреть даже бесплатный фильм, если он не запускается в первые 10 – 15 секунд, а среднее время скорости загрузки страницы, по их мнению, не должно превышать 3 секунд.
Переходим к делу
Мы хотим наглядно продемонстрировать, какие шаги можно предпринять для оптимизации сайта и повышения скорости его загрузки у конечного пользователя. Все работы выполнялись в соответствии с ожиданиями заказчика. Цель стояла самая простая — повысить скорость загрузки сайта.
В рамках оптимизации сайта нами была проделана значительная работа. Постараемся коротко описать основные моменты. В первую очередь мы подключили все скрипты и стили на сайте с помощью API Битрикс.
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/assets/css/fonts.css");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/assets/css/swiper-bundle.css");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/assets/css/swiper-bundle.min.css");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/assets/css/libs.min.css");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/assets/css/style.min.css");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/assets/css/jquery.fancybox.min.css");
?>
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/assets/js/jquery.min.js");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/assets/js/swiper-bundle.min.js");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/assets/js/jquery.fancybox.min.js");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/assets/js/jquery.lazy.min.js");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/assets/js/libs.min.js");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/assets/js/main.js");
После этого приступили к процедурам тестирования и оптимизации:
- для сокращения запросов сторонние шрифты мы подключили локально на сайте;
- оптимизировали таблицы базы данных — это позволило ускорить получение ответов на запросы от базы данных сайта;
- устранили ошибки сайта, полученные в результате проверки системы Bitrix;
- скрипты, подгружаемые с внешних ресурсов, разместили на сайте и подключили их локально. Так мы решили сразу две проблемы: избавились от зависимости постоянного соединения со сторонними библиотеками и сократили количество запросов, а значит и время отклика;
- все скрипты, использованные на сайте, были минифицированы с целью сокращения объема кода;
- проанализировали и сократили код CSS — убрали лишние пробелы и повторяющийся код;
- файлы стилей были минифицированы с целью сокращения объема данных;
- стили и скрипты теперь сжимаются средствами системы Bitrix;
- переместили весь JS в конец страницы — это одно из требований Google Page Speed для более быстрой отдачи контента сайта;
- создали правило, по которому при загрузке страницы из нее исключаются скрипты и стили, недоступные неавторизованным пользователям — это позволило сократить объем кода и избавиться от лишних запросов;
- проверили и оптимизировали время кэширования в компонентах — фрагменты кода отдаются из кэша, а не грузятся заново;
- написали скрипт для сжатия html кода сайта при отдаче пользователю — это позволило снизить объем загружаемых данных.
Кроме этого, мы поработали с изображениями. Добавили «ленивую загрузку» изображений (Lazy Load) — технологию, позволяющую загружать картинки только по мере обращения к ним, когда они находятся в поле видимости пользователя сайта.
Переработали компонент, отвечающий за отображение контента:
Часть изображений загружалась сразу в высоком разрешении, что несовместимо с быстрой загрузкой. Была переработана логика: теперь картинки большого размера загружаются только после нажатия на них. Документы, показанные на скриншоте, автоматически обрезаются до нужного размера «на лету», и загружаются только в тот момент, когда пользователь долистал до нужного блока. Таким образом нам удалось существенно снизить объем загружаемых изображений.
Краткие итоги
Благодаря всем проведенным работам, удалось снизить время окончательной загрузки сайта до требуемых поисковиками 3 секунд. Основная часть страниц загружается еще быстрее — в пределах 1 секунды. В 2021 году быстрая загрузка сайта — конкурентное преимущество, которое позволяет получить больше обращений, охватить более широкую аудиторию, получить больше клиентов. Количество отказов (уходов пользователей, которые не дождались полной загрузки страницы) снизилось вполовину — а это тысячи потенциальных клиентов.
Именно скорость загрузки сайта, а не красота или индивидуальный дизайн, определяют его положение в поисковой выдаче. У вас может быть любой, самый уникальный сайт, но если он будет недостаточно быстрым — он бесполезен в роли инструмента для привлечения новых клиентов.
У нас большой опыт в разработке и настройке сайтов. Мы можем разработать сайт под любые потребности или провести глубокую оптимизацию уже существующего. Если вы уже потратились на разработку и запуск интернет-ресурса, то не позволяйте этим вложениям просто пропасть. Позвоните или напишите нам. Мы выполним диагностику и если потребуется, проведем глубокую оптимизацию сайта, которая вдохнет в него новую жизнь.
