Почему сайт медленно грузится, и что тормозит на самом деле

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

Вторая: страница появилась, но главная картинка или заголовок доезжают заметно позже остального. Экран уже не пустой, однако смотреть ещё не на что. Это про вес и порядок загрузки того, что видно сразу.

Третья, самая раздражающая: содержимое прыгает. Человек тянется к кнопке, в этот момент сверху догружается баннер, всё съезжает, и палец попадает не туда. Скорость тут ни при чём, дело в том, что браузеру заранее не сказали, сколько места занять.

Эти три беды лечатся разными способами, и путать их дорого. Можно вылизать вес картинок и не сдвинуть с места первую проблему, потому что она про сервер. Поэтому начинать надо не с советов, а с вопроса, что именно у вас происходит.

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

Если открыть панель разработчика на медленном сайте и посмотреть, что весит больше всего, в подавляющем большинстве случаев это будут изображения. Не код, не шрифты, не аналитика. Фотографии, которые загрузили как есть.

Типичная история выглядит так. Снимок с телефона или из фотобанка имеет ширину в несколько тысяч точек и вес в несколько мегабайт. На странице он показывается в блоке шириной триста точек. Браузер честно скачивает всё, а потом ужимает. Человек ждёт мегабайты ради картинки размером с ладонь.

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

Про форматы коротко. Старые jpeg и png проигрывают webp примерно вдвое при той же картинке на глаз. Формат поддерживают все живые браузеры, оговорок больше нет. Прозрачность, анимация, фотографии - webp умеет всё это.

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

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

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

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

Третья: шрифт грузится с чужого домена. Это лишнее подключение к постороннему серверу до того, как появится текст. Файл, положенный рядом с сайтом, доезжает быстрее и не зависит от чужой доступности.

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

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

Беда чужих скриптов не только в весе. Они подключаются к посторонним серверам, и ваша скорость начинает зависеть от чужой. Пока их сервер думает, ваша страница ждёт. Проверить это просто: отключите скрипт и померьте снова.

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

Разумный подход не в том, чтобы убрать всё. Он в том, чтобы честно спросить по каждому: что этот скрипт приносит и сколько стоит. Виджет отзывов, которым никто не пользуется, но который тормозит первый экран, легко пережить.

Что до подсчёта заявок, аналитика нужна почти всем, и убирать её ради оценки в отчёте странно. Её просто подключают так, чтобы она грузилась после основного содержимого, а не перед ним.

Бывает так: страница лёгкая, картинок почти нет, а до появления содержимого проходят долгие секунды. Значит время уходит до того, как браузер вообще что-то получил.

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

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

Есть и третий случай, самый обидный. Сайт быстрый, но живёт на сервере далеко от своих посетителей, и заметная часть времени уходит просто на дорогу. Тут помогает сеть доставки содержимого, которая держит копии ближе к людям.

Как отличить эту беду от остальных: посмотрите время до первого байта. Если оно большое, начинать надо с сервера, а не с изображений. Мы разбираем это в услуге техническое SEO, но померить показатель можно и самому, бесплатными средствами.

Готовая тема пишется под все случаи сразу: под магазин, блог, портфолио и лендинг одновременно. Значит она несёт код всех этих сценариев, а вы используете один.

Сверху добавляются надстройки. Слайдер, всплывающие окна, галерея, конструктор блоков - каждая тянет свои файлы, и половина из них грузится на страницах, где не нужна вовсе.

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

Это не значит, что конструктор всегда плох. Он честно решает задачу быстрого старта. Но когда скорость становится важной, потолок упирается в платформу, и дальше двигаться некуда. Подробный разбор без фанатизма: минусы конструктора сайтов.

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

Инструменты проверки показывают несколько показателей, и полезно понимать смысл трёх главных. Первый отвечает на вопрос, когда появилось самое крупное содержимое первого экрана. Второй - насколько прыгала вёрстка, пока страница собиралась. Третий - быстро ли страница отзывается на нажатия.

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

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

И третье. Отчёт даёт список советов, отсортированный по расчётной выгоде, а не по здравому смыслу. Там честно окажется рядом «сожмите главную картинку» и «уберите неиспользуемый код», хотя первое делается за минуты, а второе может означать переделку темы.

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

Первое: откройте свой сайт на телефоне, отключив сеть оператора и включив её снова, чтобы не попасть в кеш. Ощущение от живого открытия честнее любого отчёта.

Второе: посмотрите отчёт по скорости от поисковых систем, если сайт добавлен в панель вебмастера. Он строится по данным реальных посетителей, а не по одному замеру, и поэтому ближе к правде.

Третье: в счётчике аналитики есть отчёт о времени загрузки, а также данные о том, с каких устройств приходят люди. Если основная аудитория мобильная, а вы смотрите на настольные показатели, картина будет сильно приукрашена.

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

Полезная привычка: перед правками сохранить замер, после правок сделать его снова в тех же условиях. Без этого невозможно понять, помогло ли, а вера в собственные улучшения обманывает всех.

Начните с картинок первого экрана. Это почти всегда самый крупный выигрыш за самое малое время: пересохранить, уменьшить до нужного размера, проставить размеры в разметке.

Дальше отложите всё, что ниже первого экрана: остальные изображения и скрипты, которые не нужны для показа верхней части. Человек начинает читать раньше, чем страница дозагрузилась целиком, и это нормально.

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

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

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

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