Сайт медленно
загружается

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

Сервер и первый ответ

Первый шаг любой загрузки — ответ сервера на запрос браузера. Если ресурсов процессора не хватает или сервер перегружен, страница открывается с задержкой. Браузер получает первый байт кода позже обычного. Нагрузка на сервер растёт из-за большого числа посетителей одновременно, тяжёлых запросов или соседних сайтов на общем хостинге. Ресурсы в таком случае делятся между всеми, и чужой всплеск нагрузки замедляет данный сайт.

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

Файлы, изображения и код страницы

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

Часть файлов при этом не нужна пользователю вовсе. Старые скрипты, неиспользуемые стили и дублирующиеся изображения накапливаются на сайте после смены дизайна или переноса контента. Файлы проверяются на состав, лишнее удаляется — это сокращает объём страницы без потери функций.

Браузер пользователя и экран устройства

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

Проблема нередко проявляется только у части пользователей — у тех, кто заходит с мобильного устройства или через сервис, ограничивающий скорость соединения. Инструмент, который проверяет скорость, показывает результат по каждому типу устройства отдельно. Сравнение по типам устройств показывает разницу между мобильной и десктопной версией страницы.

Сторонние скрипты и внешний контент

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

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

Когда такой подход не подойдёт

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

Такой подход не подойдёт и тогда, когда медленно открывается только один элемент, добавленный намеренно. Например, тяжёлое видео или большая галерея на конкретной странице. Здесь дело не в поломке, а в выборе контента.

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

Порядок подключения CSS, JavaScript и HTML

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

Проблема редко в весе одного файла — чаще в порядке, в каком файлы подключаются. Специалист меняет порядок подключения: важный для отрисовки страницы CSS переносится выше, а второстепенный JavaScript — ближе к концу загрузки. Из-за этого браузер быстрее выводит основной текст, ещё до полной загрузки страницы.

Метрика и рекомендация специалиста

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

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

Раздача статики через CDN

Изображения, CSS и шрифты можно отдавать не с основного сервера сайта, а через CDN — сеть серверов, ближайших к посетителю. Для сайта с посетителями издалека это заметно повышает скорость загрузки статики. Такой перенос помогает браузеру быстрее получать статику, но не меняет код сайта.

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

Типичная ошибка при подключении виджета

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

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

Когда порядок подключения не пересматривают

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

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

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

Что измеряет бесплатный инструмент

Бесплатный инструмент присваивает странице числовую оценку из нескольких параметров. Time to First Byte означает время до первого байта, а First Contentful Paint — момент появления первого элемента в браузере. Оба параметра передают то, что не видно в итоговой оценке: первый сигнал от сервера и первое появление элемента на странице. Оценка отличается в зависимости от типа страницы: длинная статья с обилием картинок нагружает страницу сильнее, чем короткая главная.

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

Особенности сайта на WordPress

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

Обновление ядра WordPress способно влиять на скорость так же заметно, как дополнение, добавленное недавно. Устаревшая версия темы иногда конфликтует с новым дополнением и создаёт задержку при загрузке страницы. Неиспользуемое дополнение иногда продолжает работать в фоне без видимой пользы, хотя заказчик им давно не пользуется. Разработчик находит источник замедления и решает, что обновить, а что оставить как есть.

Сторонние ресурсы и трафик сайта

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

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

Когда такая доработка не подойдёт

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

Что видит заказчик по итогам доработки

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