Дизайн — статьи о сайтах
Родители и взрослые ученики часто заходят на сайт школы с телефона: в перерыве, в дороге, из чата группы. Если расписание открывается долго, проще закрыть вкладку и позвонить в другую студию. У школ танцев причины медленной загрузки обычно типовые, и многое можно исправить без переделки всего сайта.
Что обычно тормозит сайт танцевальной школы
Тема визуальная, поэтому сайт часто перегружен: крупные фото с постановок, слайдер на главной, видео с отчётного концерта, лента соцсети, онлайн-запись, чат-кнопка, несколько счётчиков. Каждый элемент добавляет файлы и запросы, порой к чужим серверам. Прежде чем что-то менять, измерьте. Проверьте главную и страницу расписания в Google PageSpeed Insights, а во вкладке Network инструментов разработчика Chrome включите ограничение скорости, имитирующее мобильную сеть. Вам нужен список самых тяжёлых файлов и самых долгих запросов, а не впечатления.
Фотографии: как уменьшить вес и сохранить качество
Типичная ситуация: фотограф передал снимки в полном размере, их загрузили в карточки преподавателей как есть, а на странице они показаны шириной 300 пикселей. Браузер скачивает огромный файл и уменьшает его уже на экране.
- Готовьте файл под реальный размер показа. Для карточки шириной 300 px хватит версии около 600 px, этого достаточно и для экранов высокой плотности.
- Сохраняйте фотографии в JPEG с умеренным сжатием, а логотипы и значки делайте в SVG.
- Для крупных изображений задавайте несколько размеров через атрибут
srcset, чтобы телефон получал уменьшенную версию. - В слайдере на главной оставьте 2–3 кадра вместо восьми или замените его одним сильным снимком с кнопкой «Записаться на пробное занятие».
- В галерее показывайте миниатюры, а полноразмерный кадр загружайте только при открытии.
Видео и виджеты: загружать только по клику
Встроенный ролик с концерта подтягивает плеер и множество служебных запросов, даже если его никто не включал. Замените его картинкой-обложкой с кнопкой воспроизведения, а сам плеер подгружайте после нажатия. С картой так же: полноценная карта нужна на странице «Контакты», а в подвале каждой страницы достаточно адреса и ссылки. Ленту соцсети, если она нужна, разместите ниже первого экрана и не давайте ей блокировать показ основного содержимого.
Расписание и запись: страница должна показаться сразу
Расписание обычно самая посещаемая страница, и часто оно встроено фреймом из внешнего сервиса или строится скриптом после загрузки. Посетитель сначала видит пустое место, затем таблицу.
Условный пример страницы «Расписание». Было: большая шапка со слайдером, ниже фрейм с таблицей, затем лента соцсети и окно чата. Стало: компактная шапка; таблица по дням и залам прямо в HTML; простой фильтр по направлению (хип-хоп, бальные танцы, детские группы); кнопка «Записаться», открывающая короткую форму из трёх полей: имя, телефон, направление. Лента и чат убраны или вынесены ниже. На первом экране остаётся то, ради чего пришли: время, зал, возраст группы, кнопка.
Если без внешней системы записи не обойтись, не встраивайте её на каждую страницу. Достаточно кнопки, которая откроет её по нажатию.
Шрифты, скрипты и настройки сервера
Возьмите одно–два начертания веб-шрифта вместо пяти и только нужные наборы символов, например кириллицу и латиницу. Счётчики и чат подключайте асинхронно (атрибут async). Плагины, нужные для одного блока, не грузите на всех страницах. На стороне хостинга включите сжатие gzip, задайте срок кэширования для картинок, CSS и JS и объедините и минимизируйте файлы стилей и скриптов. Если сервер долго отвечает ещё до начала передачи страницы, дело в хостинге или CMS, а не в картинках. Для популярных CMS обычно есть плагины кэширования страниц, и стоит обсудить их с разработчиком.
Проверочный список для владельца школы
- Замерены главная, расписание и страница одного направления, результаты записаны.
- Ни одно изображение не больше, чем нужно для его места на странице.
- В слайдере не больше 2–3 кадров или он заменён одним баннером.
- Видео открывается по клику, а не загружается вместе со страницей.
- Расписание видно без ожидания скриптов и фреймов.
- Форма записи короткая, чат и счётчики подключены асинхронно.
- Шрифтов не больше двух начертаний.
- На сервере включены сжатие и кэширование.
- После правок замеры повторены на мобильном ограничении скорости и сравнены с первыми.
Двигайтесь по одному пункту и после каждого повторяйте замер, чтобы видеть, что именно дало эффект. Начните со страницы расписания: она нужна посетителям чаще всего.
