Дизайн — статьи о сайтах
У сайта концертного зала нагрузка неравномерна. В день старта продаж на новый сезон страницы открывают сотни людей одновременно, и многие делают это с телефона по мобильному интернету. Если афиша грузится долго, часть посетителей уйдёт, так и не дойдя до выбора места. Ниже разобрано, что обычно замедляет такие сайты и как это исправить.
Что именно тормозит афишу концертного зала
Типичная страница афиши состоит из десятков постеров, слайдера на главной, кнопок соцсетей, счётчиков, карты проезда и встроенной билетной системы. Каждый элемент добавляет запросы и вес страницы. Прежде чем что-то менять, измерьте текущее состояние. Откройте страницу в браузере с инструментами разработчика, вкладка Network покажет число запросов, общий вес и самые долгие файлы. Дополнительно можно прогнать страницу через YSlow или Google PageSpeed. Запишите исходные цифры, чтобы потом сравнить их с результатом.
Пример: страница афиши на месяц
Допустим, на странице 24 события. Менеджер загружает в админку постеры в исходном размере 1600×1067 пикселей, а в вёрстке они показываются размером 220×147. Браузер всё равно скачивает полноразмерные файлы, и страница тянет десятки мегабайт. Решение: при загрузке постера система сама создаёт уменьшенную копию, а в разметке указан нужный размер.
<img src='/upload/afisha/symphony-small.jpg'
width='220' height='147'
alt='Симфонический оркестр, программа вечера'>Атрибуты width и height позволяют браузеру сразу зарезервировать место, и текст не «прыгает» во время загрузки. Полноразмерный постер открывайте только на странице самого события.
Какие изображения можно облегчить
- Фотографии сохраняйте в JPEG, а качество подберите на глаз: часто небольшое снижение незаметно, но заметно уменьшает файл.
- Мелкие иконки (билеты, парковка, гардероб, соцсети) соберите в один CSS-спрайт, это уменьшит число запросов.
- В галерее зала показывайте превью, а крупные фотографии загружайте по клику.
- Не ставьте на главную слайдер из множества больших снимков. Достаточно двух-трёх, остальные подгружайте после открытия страницы.
Сторонние виджеты и продажа билетов
Лента соцсети, кнопки «Мне нравится», интерактивная карта, видеоплеер и фрейм билетной системы загружаются с чужих серверов, и вы не можете повлиять на их скорость. Поэтому:
- подключайте скрипты внизу страницы или асинхронно, чтобы они не задерживали показ контента;
- вместо интерактивной карты на странице контактов можно вставить статичную картинку со ссылкой на подробную карту;
- виджет билетной системы нужен на странице события, а не на каждой странице сайта;
- код счётчиков берите в асинхронном варианте, если сервис его предоставляет.
Что настроить на сервере
Включите сжатие gzip для HTML, CSS и JavaScript: текстовые файлы при этом заметно уменьшаются. Для картинок, стилей и скриптов задайте заголовки Expires или Cache-Control, тогда постоянный посетитель не будет скачивать их повторно. При обновлении файла меняйте его имя или добавляйте номер версии, иначе у людей останется старая копия.
Объедините и минифицируйте CSS и JS, чтобы вместо десятка файлов загружалось два-три. Афиша меняется редко, поэтому её удобно кэшировать на сервере и не собирать заново из базы при каждом открытии. Проверьте и запросы к базе: выборка событий по дате должна опираться на индекс. Отдельно уточните у хостинг-провайдера, выдержит ли тариф всплеск посещений в день начала продаж.
Проверочный список
- Измерены число запросов и вес страницы афиши до изменений.
- Размер каждой картинки соответствует тому, как она показана на странице.
- В разметке указаны width и height изображений.
- Иконки собраны в спрайт.
- Скрипты соцсетей, счётчиков и карты не блокируют показ контента.
- Виджет билетов подключён только там, где он нужен.
- Включены gzip и кэширование статических файлов.
- CSS и JS объединены и минифицированы.
- Афиша кэшируется, запросы по дате используют индекс.
- Страницы проверены с телефона при медленном соединении.
Начните с картинок и сторонних скриптов: чаще всего именно они дают самый заметный выигрыш при небольших затратах. Затем переходите к настройкам сервера и повторно сравните замеры.
