Как сократить время загрузки страниц на сайте коворкинга

Посетитель сайта коворкинга часто выбирает место с телефона: в дороге, по мобильному интернету, иногда между встречами. Если страница с тарифами открывается долго, он вернётся к поисковой выдаче и посмотрит другой адрес. Ниже описано, что именно замедляет такие сайты и в каком порядке это исправлять.

Почему сайты коворкингов тяжелее обычных визиток

Коворкинг продаёт атмосферу, поэтому на сайте много крупных фотографий: open space, переговорные, кухня, вид из окна. Сюда добавляются сторонние элементы: календарь бронирования, карта проезда, ленты соцсетей, онлайн-консультант, счётчики. Каждый такой блок запрашивает свои файлы и скрипты на чужих серверах. Сайт может быть простым по структуре и всё равно загружать десятки файлов.

С чего начать: измерить, а не угадывать

Откройте главную, страницу тарифов и страницу бронирования в Google PageSpeed Insights и в WebPageTest. Дополнительно посмотрите вкладку Network в инструментах разработчика браузера. Вам нужны три ответа:

• какие файлы самые большие (почти всегда это изображения);
• сколько всего запросов делает страница и сколько из них уходит на чужие домены;
• через какое время посетитель видит первый экран с заголовком и кнопкой.

Проверяйте и с эмуляцией медленного соединения, а не только с офисного Wi-Fi. Запишите результаты до правок, чтобы потом сравнить.

Фотографии пространства: как показать интерьер и не перегрузить страницу

Типичная ошибка: фотограф передал снимки в большом разрешении, и их загрузили на сайт без обработки. Браузер скачивает файл на несколько мегабайт, а показывает его в окне шириной 600 пикселей. Что делать:

• готовить копии под реальный размер блока и сохранять в JPEG с умеренным сжатием; для схем и логотипов подходит PNG;
• указывать ширину и высоту в разметке, чтобы текст не «прыгал» после загрузки картинок;
• в галерее и слайдере загружать сразу только первый кадр, остальные подгружать при пролистывании или прокрутке страницы.

Условный пример: страница «Переговорные» с каруселью из восьми снимков по 1600 пикселей. Посетитель видит только первый кадр, но скачивает все восемь. Лучше показать один кадр и миниатюры, а крупные версии открывать по клику:

<img src="room-a-640.jpg" width="640" height="427" alt="Переговорная на 6 мест">
<a href="room-a-1600.jpg">Смотреть крупнее</a>

Крупный файл загрузится только у тех, кто действительно хочет рассмотреть комнату. Видеофон на главной стоит заменить статичным кадром, особенно для мобильных устройств.

Календарь бронирования, карта и соцсети: что можно отложить

Внешние виджеты часто тормозят страницу сильнее, чем собственные файлы. Просмотрите каждый блок и спросите себя, нужен ли он на первом экране.

• Карта. Интерактивную карту оставьте на странице контактов. На других страницах достаточно адреса и ссылки «Как добраться». Можно показать статичную картинку, а интерактивную карту подключать после нажатия.
• Кнопки и ленты соцсетей. Замените их обычными ссылками на сообщества. Лента, которая подгружает чужие скрипты и картинки, редко приносит пользу на странице тарифов.
• Календарь бронирования. Выносите его на отдельную страницу или подключайте после нажатия кнопки «Забронировать». Скрипт нужен только тем, кто уже готов выбирать дату.
• Онлайн-консультант и счётчики. Подключайте асинхронно, чтобы они не блокировали отрисовку страницы.

Сервер, кэш и сжатие: настройки, которые дают эффект на всех страницах

Эти меры не меняют дизайн, но ускоряют весь сайт:

• включить сжатие текстовых файлов (gzip) на сервере;
• объединить и минифицировать CSS и JavaScript, убрать плагины jQuery, которые никто не использует;
• задать браузеру срок хранения для изображений, стилей и скриптов, чтобы при втором визите они не скачивались заново;
• подключать скрипты в конце страницы или с атрибутом async, чтобы они не задерживали показ контента;
• если сайт на CMS, включить кэширование страниц: расписание мероприятий и тарифы не меняются при каждом запросе.

Если хостинг медленно отвечает даже на пустую страницу, проблема на стороне сервера. Тогда обсудите с хостинг-провайдером тариф или перенос сайта.

Проверочный список для страниц коворкинга

• Ни одна фотография не больше размера блока, в котором она показана.
• В слайдере и галерее при открытии страницы грузится только первый кадр.
• Карта, календарь и соцсети не мешают показу первого экрана.
• Включены сжатие и кэширование в браузере.
• Скрипты подключены в конце страницы или асинхронно.
• Страницы тарифов, переговорных и бронирования проверены на телефоне с медленным соединением.
• Результаты замеров до и после правок сохранены в одном месте.

Начните с самой посещаемой страницы, обычно это главная или тарифы. Исправьте на ней фотографии и сторонние виджеты, затем измерьте результат ещё раз и переходите к остальным разделам.

Все статьи блога