Дизайн — статьи о сайтах
У сайта организатора мероприятий нагрузка неравномерная. После анонса или открытия продаж приходит много посетителей, и многие заходят с телефона, по мобильному интернету. Если страница события открывается долго, человек уходит, так и не увидев дату, место и кнопку регистрации. Ниже разберём, что обычно тормозит такие сайты и как это исправить.
С чего начать: что именно тормозит страницу
Не оптимизируйте вслепую. Откройте три типа страниц: афишу или главную, страницу отдельного события и страницу покупки билета или регистрации. Проверьте каждую в PageSpeed Insights, а во вкладке Network инструментов разработчика Chrome включите ограничение скорости соединения. Так вы увидите страницу глазами посетителя на слабой сети.
Запишите вес страницы, число запросов и время ответа сервера. Отдельно отметьте, что именно задерживает показ первого экрана. Эти значения станут точкой сравнения: без них нельзя понять, помогла ли правка.
Изображения: афиши, фото спикеров, галереи прошлых событий
Для сайтов мероприятий это обычно главный источник веса. Фотографию из архива фотографа нередко загружают без обработки, и она может весить несколько мегабайт, хотя на странице занимает блок в несколько сотен пикселей.
- Подгоняйте размер файла под реальный размер блока на экране, а не берите исходник.
- Для фотографий используйте сжатый JPEG, PNG оставьте для графики с прозрачностью и логотипов.
- Для разных экранов задавайте несколько размеров через атрибут srcset, чтобы телефон не скачивал версию для большого монитора.
- Указывайте ширину и высоту изображений, чтобы текст не «прыгал» при подгрузке.
- Галереи прошлых мероприятий показывайте превью-миниатюрами, а крупное фото загружайте по клику. Картинки ниже первого экрана подгружайте при прокрутке.
Сторонние виджеты: билеты, карты, видео, соцсети
Каждый встроенный блок приносит свои скрипты и запросы к чужим серверам, и вы не управляете их скоростью. На страницах мероприятий таких блоков обычно много.
- Видео: вместо готового плеера покажите обложку и загрузите плеер после нажатия.
- Карта: на странице события достаточно адреса и статичной картинки. Интерактивную карту подключайте по кнопке или только в разделе «Как добраться».
- Ленты соцсетей с главной лучше убрать, оставив обычные ссылки на профили.
- Виджет продажи билетов подключайте только на страницах, где он нужен, а не на всех страницах сайта.
- Чаты и счётчики загружайте после основного содержимого.
Скрипты, стили и шрифты: что мешает показать первый экран
Скрипты в начале страницы блокируют отображение, пока не загрузятся. Подключайте их с атрибутами defer или async, где это безопасно. Объедините и минифицируйте файлы CSS и JS, уберите неиспользуемые библиотеки: часто на сайте остаются два слайдера и несколько плагинов, которыми давно никто не пользуется.
Шрифты тоже весят. Хватит одного-двух начертаний и только нужных наборов символов, например кириллицы и латиницы. Если дизайн позволяет, для основного текста подойдёт системный шрифт.
Сервер и кеширование в дни пиковых продаж
Афиша и страницы событий меняются редко, поэтому их выгодно кешировать, чтобы сервер не собирал страницу заново для каждого посетителя. Включите сжатие текстовых файлов (gzip) и заголовки кеширования для картинок, стилей и скриптов. Если сайт работает по HTTPS, проверьте, доступен ли HTTP/2: он ускоряет загрузку множества мелких файлов. Для аудитории из разных регионов может помочь CDN.
Не кешируйте корзину, личный кабинет и страницы с персональными данными. Фильтры афиши по дате и городу проверьте на скорость запросов к базе. Перед открытием продаж стоит провести нагрузочную проверку и убедиться, что тариф хостинга выдержит всплеск посетителей.
Условный пример: страница конференции
Представим страницу конференции «14 марта, Екатеринбург». На первом экране слайдер из пяти больших фото, ниже встроенное видео, лента соцсети, карта, виджет билетов и двенадцать портретов спикеров в исходном размере.
Что можно изменить: заменить слайдер одним лёгким изображением с датой, местом и кнопкой «Зарегистрироваться». Видео сделать обложкой с загрузкой по клику. Портреты уменьшить до реального размера и подгружать при прокрутке. Ленту соцсети убрать, карту заменить адресом и ссылкой «Показать на карте». Виджет билетов оставить, но подключать после основного содержимого. Посетитель сразу увидит главное, а тяжёлые элементы не задержат показ.
Проверочный список перед запуском правок
- Измерены главная, страница события и страница регистрации, значения записаны.
- Изображения сжаты и подогнаны под размеры блоков, заданы ширина и высота.
- Галереи и картинки ниже первого экрана подгружаются по мере прокрутки.
- Видео, карты и ленты соцсетей загружаются по клику или удалены.
- Скрипты подключены с defer или async, неиспользуемые плагины убраны.
- Шрифты ограничены по числу начертаний и наборов символов.
- Включены сжатие и кеширование, корзина и личные страницы в кеш не попадают.
- Сайт проверен на телефоне с медленным соединением и под нагрузкой перед открытием продаж.
Начните с изображений и сторонних виджетов: именно они чаще всего дают самый заметный выигрыш. После каждого изменения повторяйте замер, чтобы видеть, что действительно сработало.
