Зритель заходит на сайт театра с конкретной целью: узнать, что идёт в субботу, и купить билеты. Если афиша открывается долго, особенно с телефона и мобильного интернета, часть посетителей закроет вкладку. Сайты театров устроены так, что тяжелеют почти сами: много крупных фотографий, видео, подключённые билетные сервисы и кнопки соцсетей. Ниже описано, где обычно теряется время и как это исправить.
С чего начать: измерить, а не угадывать
Откройте главную страницу, афишу и страницу одного спектакля в браузере с панелью разработчика (вкладка Network, «Сеть»). Обновите страницу с отключённым кэшем и посмотрите на три числа: общий вес страницы, количество запросов и время до появления основного содержимого. Для сравнения пригодятся бесплатные сервисы: Google PageSpeed Insights, YSlow и WebPageTest. Они показывают, какие файлы самые тяжёлые и что блокирует отображение. Сохраните результаты до правок, чтобы потом сравнить их с новыми.
Афиша: условный пример страницы на 30 карточек
Представим афишу на месяц: 30 карточек, у каждой постер, название, дата и кнопка «Купить билет». Типичная ошибка выглядит так:
<img src='poster_original.jpg' width='200' height='300' alt='Вишнёвый сад'>
Файл poster_original.jpg загружен из макета в полном размере, допустим 1600×2400 пикселей, а на странице показан в 200×300. Браузер скачивает все 30 таких файлов, а затем сжимает их на экране. Это условный пример, но механизм встречается часто. Что сделать:
- Для афиши заранее готовить уменьшенные копии постера. Размер должен соответствовать месту на странице, с небольшим запасом для экранов высокой плотности.
- Оригиналы хранить для страницы спектакля или для просмотра по клику.
- Указывать width и height в разметке: страница не будет «прыгать» при загрузке картинок.
- Для карточек ниже первого экрана подгружать изображения при прокрутке небольшим скриптом. Первые карточки при этом должны грузиться сразу.
- Если афиша длинная, разбить её по неделям или добавить переключатель по месяцам, а не выводить всё сразу.
Фотогалереи спектаклей: качество без лишнего веса
Театру важны хорошие фотографии, но сжать их можно без заметной потери. Для фотографий обычно подходит JPEG с умеренным качеством, а для логотипов и значков с плоской заливкой лучше PNG. Подбирайте степень сжатия на нескольких реальных снимках, глядя на результат. Если в галерее 40 кадров, на странице спектакля показывайте миниатюры, а крупный кадр загружайте только по клику. Мелкие значки (соцсети, стрелки, иконки зала) можно собрать в один CSS-спрайт: это сократит число запросов.
Видео, билетный виджет и соцсети: чужие элементы
Трейлер спектакля, встроенный через iframe, подтягивает собственные скрипты и стили плеера, даже если зритель его не запустит. Вместо плеера можно показать постер-заставку с кнопкой воспроизведения и подключать видео только после нажатия. То же относится к картам проезда и лентам соцсетей: размещайте их ближе к концу страницы или на странице «Контакты», а не на каждой.
Отдельно проверьте виджет продажи билетов. Он часто загружается синхронно и задерживает всю страницу, если сервис отвечает медленно. Подключайте его асинхронно, а на афише оставьте обычную ссылку-кнопку на страницу покупки. Если на сайте остались элементы на Flash, замените их: на мобильных устройствах они часто не работают, а загружаются всё равно.
Сервер, кэш и скрипты
- Включите сжатие текстовых файлов (gzip) для HTML, CSS и JavaScript.
- Задайте для картинок, стилей и скриптов срок хранения в кэше браузера. Тогда постоянные элементы оформления не скачиваются заново на каждой странице.
- Объедините и минимизируйте файлы CSS и JavaScript. Несколько десятков мелких файлов обходятся дороже, чем два-три крупных.
- Подключайте скрипты в конце страницы или с атрибутом async, чтобы они не задерживали показ текста.
- Уберите плагины и библиотеки, которыми никто не пользуется. Слайдер, подключённый «на всякий случай», загружается у каждого посетителя.
- Если сайт работает на CMS, включите кэширование страниц: афиша, которая обновляется раз в день, не должна собираться из базы данных при каждом заходе.
Проверочный список для владельца сайта
- Измерены вес и время загрузки главной, афиши и страницы спектакля, цифры сохранены.
- Размер картинок в файлах совпадает с размером на странице.
- Афиша не выводит десятки постеров в полном размере.
- Видео и карты не загружаются, пока посетитель их не запросил.
- Билетный виджет подключён так, что не блокирует страницу.
- Включены сжатие и кэширование, скрипты и стили объединены.
- После правок страницы проверены на телефоне и при медленном соединении.
Ускорение сайта не требует нового дизайна. Чаще всего достаточно навести порядок с изображениями и сторонними подключениями. Результат проверяйте повторными замерами, сравнивая их с теми, что сделаны до правок.
