Почему сайт должен открываться за секунду

Простая арифметика

Представьте: человек стоит на остановке, ищет в телефоне, куда отдать ребёнка на танцы. Открывает первую ссылку — крутится. Две секунды, три. Он не будет ждать: вернётся назад и откроет вторую. Ваш сайт может быть лучше, дешевле и ближе к дому — он этого просто не узнает.

Мобильный интернет в автобусе, в лифте, за городом — это не идеальные условия. И именно в таких условиях люди чаще всего ищут.

Из-за чего сайты тормозят

1. Огромные картинки

Причина номер один, и она же самая обидная. Фотография с телефона весит 4–8 мегабайт. На странице она показывается размером с ладонь, но браузер всё равно скачивает её целиком. Десять таких фотографий — и страница весит как небольшая игра.

Правильно сжатая картинка того же качества весит 100–200 килобайт. Разница в тридцать раз, а на глаз — незаметна.

2. Тяжёлые конструкторы

Конструкторы удобны, но универсальны: они тянут код на все случаи жизни, даже если вам нужен один блок с текстом. Отсюда лишние сотни килобайт скриптов на каждой странице.

3. Чужие скрипты

Счётчики, чаты, виджеты обратного звонка, карты, кнопки соцсетей. Каждый — это запрос к чужому серверу. Если такой сервер сегодня медленный, ваш сайт тормозит вместе с ним, и вы даже не поймёте почему.

4. Шрифты

Красивый шрифт — это файл, который надо скачать до того, как появится текст. Два-три начертания легко добавляют полмегабайта. Иногда оно того стоит, но чаще нет.

5. Дешёвый хостинг

Если на одном сервере живёт тысяча сайтов, ваш будет отвечать медленно, что бы вы ни делали.

Как проверить свой сайт за две минуты

1. Откройте PageSpeed Insights — это бесплатный сервис Google.
2. Вставьте адрес своего сайта и нажмите «Анализировать».
3. Смотрите вкладку «Для мобильных» — она важнее, чем для компьютеров.

Что означают цифры: 90–100 — отлично, 50–89 — жить можно, но есть что чинить, меньше 50 — люди уходят, не дождавшись.

Ещё честнее — простой способ без сервисов: включите на телефоне мобильный интернет, отключите Wi-Fi, выйдите на улицу и откройте свой сайт. Считайте секунды вслух. Это ровно тот опыт, который получает ваш клиент.

Что реально помогает

• Сжать все картинки. Самое простое действие с самым большим эффектом.
• Убрать лишние виджеты. Честно спросите себя, пользуется ли кто-нибудь этим чатом.
• Загружать картинки по мере прокрутки. То, что ниже экрана, можно грузить не сразу.
• Обойтись системными шрифтами. Они уже есть на устройстве и грузятся мгновенно.
• Не тащить код, который не используется. Главный аргумент в пользу обычной вёрстки против конструктора.

Как это делаю я

Скорость для меня — не «оптимизация в конце», а условие с самого начала. Поэтому мои сайты собраны на обычном HTML и CSS, шрифты — системные, картинки сжаты, лишних скриптов нет, а всё, что ниже первого экрана, грузится по мере прокрутки.

Хороший пример — страница с видео тренировки на этом сайте. Видео весит около семи мегабайт, но страница открывается мгновенно: файл начинает грузиться только когда вы нажимаете «play». До этого браузер скачивает лишь маленькую картинку-заставку.

Что делать прямо сейчас

1. Проверьте сайт в PageSpeed Insights на вкладке «Для мобильных».
2. Если результат ниже 50 — начните с картинок, обычно дело в них.
3. Если после этого не помогло, напишите мне — посмотрю и скажу честно, что там происходит.