Содержание
Привет. Я Алексей из loading.express. Расскажу лучшие практики по проверке скорости загрузки сайта в 2024 году. Приведу примеры и инструкции к пониманию отчетов для не технарей, простым языком.
Выводы из статьи: этот материал поможет понять нормы по параметрам загрузки, как быстро найти отклонения от нормы, какие сервисы годятся, а какие могут повредить в 2024 году. В статье есть как технические подробности, так и информация изложенная простым, понятным языком.
Оглавление статьи
1. Что необходимо измерять на сайте
2. TTFB: Как проверить время ответа сервера
3. Как не надо измерять ответ сервера
4. Скорость загрузки темы сайта, верстки, шаблона
5. На что обратить внимание при замере скорости сайта
6. Как быстро понять из-за чего тормозит сайт
7. Пошаговый алгоритм, позволяющий дать оценку скорости загрузки сайта
Всего два: что необходимо измерять на сайте
Необходимо знать и измерять два параметра:
- Скорость загрузки фронтенда (верстки, темы сайта, шаблона);
- Скорость ответа сервера, TTFB.
Первое касается того, как сверстан шаблон вашего сайта. Второе касается сервера, на котором расположен сайт, то есть нагрузка на этот самый сервер, VPS, VDS или хостинг размещение.
Начнем со второго, потому как это является бОльшей проблемой для SEO и пользовательского опыта (UX). Из-за долгого ответа сервера, ваш сайт может иметь низкую индексацию в поисковиках. Поисковый бот не будет ждать каждую страницу слишком долго и проиндексирует и обновит те, которые отвечают в пределах нормы.
1. TTFB: Как проверить время ответа сервера
Перечислю несколько способов, в том числе, как делать не надо.
- TTFB сервисы, измеряющие именно ответ сервера — не частый гость в сервисах. Первый и самый быстрый 3D способ измерить скорость ответа сервера — ttfb.loading.express.
Как пользоваться. Зашли на сайт. Ввели адрес вашего сайта. Выбрали города, страны или нажали «Выбрать все». Проверяем. Не волнуйтесь. Нагрузку на ваш сервер этот замер не создаст.
Если замеры не начинаются, то стоит внести список адресов сервиса в белый лист на сервисе, который защищает ваш сервер от DDoS атак.
- Яндекс Вебмастер тоже может проверить скорость ответа сервера. Один замер, на один адрес. Страну/Город выбрать нельзя. Получить медианное значение тоже не получится, но как альтернатива — сгодится. Чаще это бывает бесполезно. В любом случае, у Яндекса есть встроенный способ мониторить ответ сервера вашего сайта. Если бот не достучался, то вы получите письмо об инциденте. Проверьте в настройках оповещения, что вы можете получать об этом письма.
- Пингадмин — сервис для масштабной проверки ответа сервера и доступности сайта. Есть бесплатная проверка из более чем 30 локаций в мире. После регистрации и оплаты, доступен мониторинг ответа сервера.
Больше сервисов я не нашел. Возможно, что-то упустил, пишите в комментариях. Все остальные сервисы, которые мне попались из поисковой выдачи, не подходят для определения ответа сервера, по разным причинам.
Как не надо измерять ответ сервера
2. Скорость загрузки темы сайта, верстки, шаблона
Такого рода замер производит всем известный сервис от Google — PageSpeed Insights. У него внутри OpenSource’ный Lighthouse, который обновляется несколько раз в квартал.
loading.express — измеряет из разных локаций, Москва, Санкт-Петербург, Новосибирск, Екатеринбург, Самара, Владивосток, Красноярск, Краснодар, Минск, Алматы, Бангалор, Сидней, Токио, Франкфурт, Нью-Йорк, Лондон, Амстердам, Париж, Сингапур, Торонто.
Список локаций постоянно пополняется.
В этом сервисе, после замера, вы можете перейти на измерение и в PageSpeed, и на Lighthouse, на ответ сервера и на живые данные из базы Core Web Vitals.
Вам не надо открывать много вкладок, можно открыть их из Лоадинга.
Раньше, в подобного рода статьях указывали ссылки на сервис GtMetrix, который измерял по умолчанию ПК версию сайта, они закрыли свой сервис для РФ, да и измерить мобильную версию там можно было только платно.
Был еще такой сервис Pingdom. Он был популярен при замерах, потому что показывал всегда очень хороший показатель скорости загрузки сайта. Никому неприятно смотреть на плохие показатели.
Эти ребята радовали любой сайт и его владельцев красивыми отчетами, по факту даже не делая замер. Было ощущение, что они его имитируют и берут рандомное значение в секундах.
Полноценной картины любой другой сервис не покажет. Немногие обновляют и следят за подобными тулзами, к сожалению.
На что обратить внимание при замере скорости сайта
Важными параметрами являются цифры под скриншотами:
- Число соединений. В идеале это 1 (одно) соединение. Внешние соединения — самый ресурсоемкий элемент в загрузке сайта. Убирайте всё, что сможете. Не бойтесь маркетологов, которые будут пугать тем, что «полетит» статистика. Никем это за 5 лет нашей работы по ускорению сайтов не было доказано по существу.
- Время выполнения JavaScript. Здесь часто бывает зарыта собака, особенно на сайтах с системой CMS Битрикс. Если в этом прямоугольнике снизу подчеркнуто желтым или красным — бейте тревогу и требуйте у разработчиков не просто спрятать весь джаваскрипт от замеров, а именно оптимизировать все внутренние подключения скриптов.
- Максимальная задержка ввода. Один из самых непонятных обывателю параметров. Надеемся, скоро в сервисе будет сделано визуальное представление. Это время, на которое сайт буквально заблокирован для взаимодействия. Оно наступает в моменты пиковой нагрузки основного потока и суммируется в результатах замера. В консоли бразуера Chrome это выглядит вот так:
Любая задача, которая выполняется более 50 мс — длинная задача. Период времени после 50 мс является частью блокировки. Например, если Lighthouse обнаружит задачу длительностью 70 мс, время блокировки составит 20 мс.
Очень часто этот параметр оптимизируется с помощью устранения внешних соединений, оптимизации скриптов и стилей, а так же оптимизации dom.
Как быстро понять из-за чего тормозит сайт
Прокрутите чуть ниже цифр в прямоугольниках и увидите такую таблицу:
Что тут можно понять, не имея технических познаний. Смотрите вот на что:
- Сторонние ресурсы — попросите программиста, максимально уменьшить их количество. Если шрифты, аудио или видео файлы тянет сторонний сервис, сделайте ему отложенную загрузку по всем событиям, touch, mouse move, scroll, click и прочие. Запросите наш скрипт-обертку здесь.
- Норма — 1-3 соединения.
- Шрифты — замените ваши шрифты на стандартные и загружайте их только со своего сервера, без поддоменов и CDN. Шрифты должны быть легковесными. 100 кб, это уже много. Не используйте шрифт Monserat.
- Норма — 0-3 соединения, до 100кб.
- JavaScript — 0-500 килобайт. Не используйте jquery и слайдеры на JS.
- Стили — можно объединить в один файл и подключить ассинхронно, в этом случае стили не будут блокировать основной поток. Пользуйтесь critical css (inline) , чтобы загрузка была еще быстрее и не появлялось лишних смещений контента (CLS).
- Норма — 1-70 килобайт.
- Аудио/Видео — если в этой строчке что-то есть и это видео, то уберите из файла звуковую дорожку, это облегчит вес файла и скорость его загрузки. Звук вам все равно не нужен. Если есть аудио, то отложите эти файлы от начала загрузки, чтобы это не блокировало основной поток.
- Норма — 0 (ноль).
- Изображение — обратите внимание, что изображений должно быть столько, сколько их у вас в первом экране. Включайте отложенную загрузку. Используйте формат картинок WebP. Он поддерживается уже 96.71% браузерами в мире. Используйте opensource разработку для сжатия картинок на лету — webp-sh.
- Норма — до 500 кб на все картинки, лучше 100-200 килобайт.
Запросите скрипты для получения лайфхаков по ускорению сайта через WhatsApp.
Пошаговый алгоритм, позволяющий дать оценку скорости загрузки сайта
- Измерьте ответ сервера, сервисами из раздела выше. Если ответ сервера больше 0.3 секунды, то необходимо уделить этому значению внимание.
- Измерьте скорость загрузки темы, шаблона, верстки сайта. Если итоговое значение выше 3-4 секунд — рассмотрите, что именно влияет, устраните лишнее и замерьте снова.
- Прогоните тесты несколько раз — каждый раз они будут разные. Это нормально, ведь сайт с каждым замером, открывается заново и во время его загрузки, снимаются все параметры с нуля. Как и автомобиль, если в моторе есть неполадка, она влияет на все параметры по-разному и машина едет медленнее, чем могла бы. Всё зависит от состояния каждого элемента и взаимосвязано друг с другом.
- Обратитесь в loading.express за советом. Быть может, за одну консультацию с вашими программистами, им удастся исправить причину медленной загрузки сайта.
Год только начинается. Желаю вашим сайтам успешно пройти ТО. Высоких конверсий и много продаж!