Внешние скрипты и шрифты: как чужой код тормозит ваш сайт

Сайт, который делали быстрым, со временем становится медленным. Причём код никто не трогал, картинки те же, хостинг тот же. Что изменилось? Обычно — количество подключённых сервисов. Счётчик, второй счётчик, онлайн-консультант, виджет обратного звонка, всплывающее окно с акцией, карта, форма из конструктора, чат-бот, пиксель рекламной системы, красивый шрифт. Каждый по отдельности «весит всего ничего», а вместе они утраивают время загрузки.

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

Почему внешние скрипты особенно вредны

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

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

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

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

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

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

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

Шрифты: отдельная и недооценённая проблема

Красивый шрифт — вещь приятная, но за него платят скоростью.

Каждое начертание — отдельный файл. Обычный, полужирный, курсив, полужирный курсив — четыре файла. Если подключено пять весов, файлов десять. По 30–150 килобайт каждый.

Кириллица весит больше. Шрифты с полным набором символов заметно тяжелее латинских.

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

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

Что делать:

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

Экономия от аккуратной работы со шрифтами обычно составляет от половины секунды до полутора — это очень много.

Кто главные пожиратели скорости

По нашей практике порядок примерно такой.

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

Карты. Встроенная интерактивная карта — один из самых дорогих элементов. Легко добавляет секунду и больше. При этом на странице контактов она нужна не всем: многим достаточно адреса.

Видеоплееры. Встроенное видео подгружает плеер и обвязку даже до того, как человек нажал воспроизведение.

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

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

Конструкторы форм и квизов. Часто тянут собственный набор библиотек.

Библиотеки анимации и слайдеров. Особенно если подключены целиком ради одного эффекта.

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

Как найти виновников

Инструменты у вас под рукой, отдельных сервисов не требуется.

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

Общее количество запросов и вес страницы. Внизу панели показывается итог. Ориентир: до 60–80 запросов и до 2 мегабайт — нормально, больше — есть над чем работать.

Вкладка производительности. Показывает, что именно занимает процессор. Длинные задачи от чужих скриптов видны наглядно.

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

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

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

Что делать с найденным

Удалить лишнее

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

Обычно из десяти сервисов три оказываются ненужными. Их удаление — самое дешёвое ускорение, какое бывает.

Особое внимание — дубликатам: два счётчика аналитики, два виджета обратного звонка, две формы от разных конструкторов.

Отложить загрузку

Всё, что не нужно в первую секунду, должно грузиться позже.

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

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

Карта по нажатию. Вместо встроенной карты показывайте статичное изображение с кнопкой «показать карту». Сама карта грузится, только если человек нажал. Экономия — до секунды на странице контактов.

Видео по нажатию. Аналогично: превью-картинка, плеер грузится при нажатии.

Отложенная загрузка изображений. Картинки ниже первого экрана грузятся по мере прокрутки. Сегодня это делается одним атрибутом.

Ограничить область действия

Многие виджеты нужны не везде.

• Чат — на страницах услуг и товаров, но не в блоге и не в статьях.
• Карта — только на контактах.
• Квиз — только на страницах, где он к месту.
• Рекламные метки — только там, где идёт рекламный трафик.

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

Заменить тяжёлое на лёгкое

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

Свой слайдер вместо библиотеки. Современные средства оформления позволяют сделать листалку без единого килобайта стороннего кода.

Ссылка вместо встроенного видео.

Свои иконки вместо шрифта иконок. Подключать целый шрифт ради восьми значков — расточительство.

Собрать своё вместе

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

Как выбирать сервисы с оглядкой на скорость

Перед подключением нового сервиса задайте несколько вопросов.

Сколько весит? Поставьте на тестовой странице и посмотрите в панели разработчика.

Сколько дополнительных запросов тянет?

Можно ли загружать отложенно? Хорошие сервисы это поддерживают и документируют.

Можно ли подключать только на нужных страницах?

Где расположены серверы сервиса? Российские сервисы обычно отвечают быстрее для российской аудитории.

Что будет, если сервис недоступен? Хорошо, когда сайт продолжает работать; плохо, когда ломается вёрстка или зависает страница.

И главный вопрос: что этот сервис даст в обращениях? Если ответа нет — не подключайте.

Сколько это стоит в обращениях

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

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

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

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

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

Кто должен отвечать за подключения

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

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

Что помогает:

Реестр подключений. Простая таблица: что подключено, зачем, кто попросил, когда, кто имеет доступ к личному кабинету сервиса, сколько стоит. Пять минут на запись при подключении и огромная экономия времени потом.

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

Правило испытательного срока. Новый сервис ставится на месяц, потом смотрим: пользуемся или нет, дал ли обращения, сколько добавил к времени загрузки. Не оправдал — снимаем.

Ревизия раз в полгода. Прошли по реестру, сверили с реальным кодом, убрали лишнее.

Замер до и после. Любое новое подключение сопровождается замером скорости. Если виджет добавляет больше полусекунды — надо думать, стоит ли он того.

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

План действий на один день

1. Откройте панель разработчика, вкладку сети, и выпишите все внешние источники, с которых что-то грузится.
2. По каждому ответьте: что это, пользуемся ли, кто отвечает за этот сервис.
3. Удалите всё, чем не пользуетесь. Отдельно поищите забытые метки от закрытых рекламных кампаний.
4. Проверьте, нет ли дубликатов.
5. Замерьте скорость до изменений — на компьютере и на телефоне.
6. Переведите оставшиеся скрипты в отложенную загрузку.
7. Настройте подключение виджетов только на нужных страницах.
8. Замените встроенную карту на изображение с кнопкой.
9. Разберитесь со шрифтами: сократите начертания, перенесите на свой сервер, настройте поведение при загрузке.
10. Замерьте скорость после и сравните.
11. Через две недели посмотрите в Метрике, изменилось ли количество обращений.

Итог

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

Лечится это ревизией, отложенной загрузкой, ограничением области действия и заменой тяжёлых решений лёгкими. Работа не требует переделки сайта и обычно укладывается в один-два дня, а эффект виден сразу — и в замерах, и в поведении посетителей.

Главный принцип простой: каждый подключённый сервис должен оправдывать своё существование обращениями. Если не оправдывает — он не бесплатный, он просто платит вашей скоростью.

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