Сайт открывается на рабочем ноутбуке и выглядит нормально. А потом клиент говорит, что на телефоне он грузился целую вечность, или вы сами открываете его с мобильного интернета на парковке и смотрите, как логотип одиноко висит на белом экране, пока остальное догоняет. Вы ищете, почему сайт медленно загружается, запускаете бесплатный тест скорости и получаете страницу красных отметок и терминов, из которых не понятно, что именно делать.
Привычные выводы: нужен хостинг подороже или сайт надо переделывать целиком. Иногда что-то из этого правда. Чаще причин немного, они видны в обычном браузере, а дешёвые исправления идут первыми. Медленный сайт — не просто раздражающая мелочь: посетитель, который ждал достаточно, чтобы разозлиться, редко заполняет форму, и это одна из тихих причин, по которым на сайт заходят, но не пишут.
Почему сайт медленно загружается: типичные причины
Картинки намного больше места, которое занимают. Фото попадают на страницу прямо с камеры или фотостока в несколько раз шире блока, в котором стоят, и браузер скачивает весь файл, прежде чем его уменьшить. Признак: структура страницы появляется быстро, а картинки подгружаются по одной, и на телефоне сайт заметно хуже, чем на проводном компьютере.
Слишком много плагинов, виджетов и скриптов. Сайт на CMS или конструкторе годами обрастает дополнениями: слайдер, виджет чата, несколько тегов аналитики, баннер про cookie, модуль бронирования, которым никто больше не пользуется, автовоспроизведение видео в шапке. Каждое грузит свой код, прежде чем страница успокоится. Признак: страница ещё долго «работает» после того, как текст уже виден, кнопки на мгновение не отвечают, а вёрстка прыгает, когда докатываются новые части.
Сервер медленно отвечает. Прежде чем появится хоть что-то, браузер ждёт сервер. Дешёвый общий хостинг, CMS, которая собирает каждую страницу с нуля на каждый визит, потому что кеширование выключено, или база данных, годами разраставшаяся, — всё это выглядит одинаково: мгновение белого экрана, а потом всё сразу.
Посетитель далеко от сервера. Сайт, размещённый в одной стране и открытый из другой, тратит время на само расстояние: дома он быстрый, за границей медленный, и дома этого никто не замечает. Признак: жалобы приходят из определённого региона.
Что-то на странице блокирует всё остальное. Шрифт, который должен загрузиться, прежде чем можно нарисовать текст, карта, встроенная на каждую страницу, скрипт, который ждёт сторонний сервис, у которого плохой день. Признак: в одни дни сайт нормальный, в другие нет, или он остаётся пустым, пока не появится один конкретный элемент.
Как понять, какая причина ваша
Всё ниже делается с телефоном, ноутбуком и бесплатными инструментами, которые уже есть в вашем браузере. Идите по порядку: первая проверка, которая не пройдёт, обычно и есть ваша причина.
- Откройте сайт на телефоне через мобильный интернет, а не Wi-Fi. Примерно засеките время по часам — от нажатия на ссылку до момента, когда можно читать и нажимать, — потом то же самое на ноутбуке. Если на телефоне резко хуже, дело в картинках и тяжёлых скриптах.
- Смотрите, что появляется первым. Перезагрузите и запомните порядок. Белый экран, а потом всё сразу — это сервер; сначала текст, а картинки подтягиваются — это изображения; вёрстка прыгает и кнопки не отвечают — это скрипты.
- Запустите один бесплатный тест скорости от крупной поисковой системы или разработчика браузера и не смотрите на оценку. Читайте только список самых больших файлов и предложенные улучшения: там простыми словами названы слишком большие картинки, неиспользуемые скрипты и медленный ответ сервера. Проверяйте страницу услуги, а не только главную.
- Откройте инструменты разработчика в браузере на вкладке сети, перезагрузите страницу и отсортируйте по размеру. Если самые большие записи — файлы картинок, намного больше видимого изображения, вот и ответ; если в списке десятки скриптов с доменов, которые вы не узнаёте, считайте плагины.
- Выпишите каждый плагин, виджет и сторонний тег на сайте и напротив каждого напишите, кто им пользуется и зачем. По нашему опыту список получается длиннее, чем все ожидали, и часть его мертва.
- Проверьте тариф хостинга и настройку кеширования. Зайдите в панель хостинга и посмотрите, за что вы платите и включено ли кеширование страниц. Если не знаете — знает тот, кто делал сайт, и это вопрос на одно письмо.
- Проверьте с других ваших рынков. Попросите коллегу за границей засечь ту же страницу или воспользуйтесь бесплатным тестом, в котором можно выбрать место проверки.
Что исправлять и в каком порядке
Сначала самое дешёвое. По нашему опыту большинство сайтов возвращает большую часть скорости на первых трёх шагах, без переделки.
- Уменьшите и сожмите картинки. Экспортируйте фото в том размере, который реально использует вёрстка, в современном веб-формате и замените оригиналы; на CMS плагин оптимизации изображений обработает всю библиотеку за один проход. Это самое частое исправление, и стоит оно один вечер.
- Уберите то, чем не пользуются. Отключите и удалите каждый плагин, виджет и тег, для которого никто не смог назвать пользователя, объедините дублирующие теги аналитики в один, замените живую карту статичной картинкой со ссылкой на карту и включите отложенную загрузку для всего, что ниже первого экрана.
- Включите кеширование. Кеширование страниц означает, что сервер отдаёт готовую копию вместо того, чтобы собирать страницу для каждого посетителя. Большинство CMS и хостингов предлагают это как настройку или плагин.
- Исправьте блокирующие элементы. Загружайте шрифты так, чтобы текст сразу показывался запасным шрифтом и подменялся позже, отложите скрипты, не нужные для первого экрана, и уберите видео из шапки. Обычно это час разработчика, а не проект.
- Приблизьте сайт к посетителю. Сеть доставки контента (CDN) хранит копии ваших статичных файлов во многих регионах, так что посетитель из другой страны скачивает их с ближайшего. Большинство хостингов и регистраторов доменов её предлагают; если вы продаёте за рубеж, этот пункт должен стоять в списке раньше любого апгрейда хостинга.
- Меняйте хостинг только тогда, когда сервер доказанно медленный. Если ожидание белого экрана остаётся после включения кеширования, узкое место — тариф. Переходите на план, который соответствует трафику, а не на самый дешёвый, который технически работает.
- Пересоберите самые тяжёлые страницы, а не сайт. Если шаблон тащит десятки компонентов на каждую страницу, часто достаточно собрать ключевые посадочные страницы на более лёгкой структуре. В наших проектах по разработке сайтов скорость — критерий запуска, и именно на этом шаге страницу проектируют под то, что она должна делать, а не под то, что предлагает тема.
Скорость влияет и на то, как сайт находят: поисковые системы измеряют те же ожидания, которые чувствуют ваши посетители, так что изменения выше — часть любой честной работы по SEO. А если сайт долго был медленным, часть обращений потерялась незаметно; учёт того, откуда пришло каждое обращение, — с него начинаются наши проекты по CRM и аналитике, — покажет, изменило ли исправление хоть что-то.
Что измерять
- Время до пригодной страницы на телефоне через мобильный интернет, засечённое вручную одинаково каждый раз, ежемесячно.
- Вес страницы и число запросов для главных посадочных страниц, из вкладки сети, до и после каждого изменения.
- Время ответа сервера из теста скорости — ожидание, пока хоть что-то придёт, — которое должно упасть после включения кеширования.
- Показатель отказов и заполненные формы на изменённых страницах, в вашей аналитике, за несколько недель после изменения против нескольких недель до.
Где подключаемся мы
Владелец со свободным вечером, часом разработчика и доступом к хостингу может сделать всё это сам. Мы добавляем порядок: картинки и мёртвый груз раньше хостинга, кеширование раньше переделки, и замер до и после, чтобы улучшение было фактом, а не ощущением. Если диагностику удобнее отдать, для старта достаточно короткого брифа с адресом сайта и страницами, которые важнее всего.
