Почему мой сайт загружается медленно? Базовые метрики, инструменты анализа и способы повышения скорости

Низкая скорость — низкие продажи. Сейчас такое время, что скорость загрузки сайта напрямую влияет на пользовательский опыт и показатель отказов. Чем медленнее открывается страница, тем выше вероятность, что посетитель закроет сайт и уйдёт к конкуренту, у которого информация доступна быстрее. Согласно исследованию 2019 г. от агентства Unbounce, примерно 70% пользователей призналось, что скорость загрузки сайта повлияла на их решение о покупке товара или услуги. Помимо удобства и конкурентной борьбы, скорость загрузки участвует в ранжировании сайта в поисковой выдаче. Ещё в 2010 году Google заявил, что учитывает этот фактор, а после запуска Core Web Vitals в 2021 году показатели скорости заняли одно из важнейших мест в рулетке поисковой индексации.

• 1-3 секунды — показатель, к которому следует стремиться. 
• 4-7 секунд — допустимо, но есть над чем работать. 
• 8-12 секунд — негативный показатель с высоким риском отказов. 

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

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

1. FCP (First Contentful Paint) — показывает, сколько времени требуется браузеру от момента открытия страницы до отображения первого контента на ней. Чем ниже FCP, тем лучше.
2. LCP (Largest Contentful Paint) — оценивает время отображения самой увесистой части содержимого на странице сайта. Например, это может быть видео или крупное фоновое изображение. В идеале LCP не должен превышать 2,5 секунды. 
3. TTI (Time to Interact) — показывает скорость появления на экране первого интерактивного элемента.
4. CLS (Cumulative Layout Shift) — указывает на стабильность макета сайта и показывает наличие сдвигов компонентов на страницах.
5. TTFB (Time To First Byte) — оценивает время от момента отправки запроса до получения первого байта информации.

Для оценки производительности сайта есть масса многофункциональных онлайн-инструментов как для проверки скорости из России, так и из-за рубежа. 

1. Sitespeed.ru — бесплатный сервис от компании Rusonyx. Помимо результата тестирования, вы получите рекомендации по решению проблем и можете запросить детальный отчёт на почту. Проверка выполняется в том числе и с российских серверов, что несомненный плюс. 
2. Google PageSpeed ​​Insights — бесплатный инструмент, который показывает результаты по базовым метрикам производительности сайта: FCP, LCP, TTFB, CLS; оценивает общую производительность и предлагает рекомендации по улучшению.
3. WebPageTest — платный сервис с бесплатной функциональностью, в рамках которой можно провести 300 проверок в месяц из 30 разных локаций, а история хранится в течение 13 месяцев. 
4. Pr-cy.ru — русскоязычный сервис с частично бесплатными функциями: измерение скорости, анализ индексации сайта, данные о посещаемости, оценка юзабилити и не только. 
5. Be1.ru — бесплатный российский сервис с обширной функциональностью, которая включает не только оценку скорости загрузки сайта, но и проверяет индексацию в поисковой выдаче, анализирует конкурентов, предоставляет отчёт по ссылочной массе и оценивает множество других показателей.

Усвойте простое правило: чем меньше весит страница, тем быстрее она будет загружаться. Начните с простой ревизии и удалите ненужные видео и изображения. Остальные сожмите через специальные сервисы, например, Image Compressor, ResizePixel и другие, которые помогут уменьшить вес картинок без потери качества. Используйте форматы WebP, AVIF, которые занимают меньше места, чем привычные PNG, JPEG.

Удалите всё лишнее из CSS и JavaScript-файлов: лишние символы, пробелы, комментарии. Используйте для этого специальные сервисы: UglifyJS, CSSmin, Google Closure Compiler. Да, в результате такого сжатия код будет сложно прочитать, но скорость загрузки сайта увеличится значительно. Главное — не забудьте после проверить код на работоспособность.

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

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

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

Этот метод позволит минимум в 2 раза увеличить скорость загрузки сайта. GZIP позволяет уменьшить размер изображений, а также JS, HTML, CSS-файлов перед их отправкой браузеру. Так, вес страницы может быть уменьшен в 1,5 раза благодаря этой волшебной утилите — не пренебрегайте ею.

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

• Объединяйте файлы. Например, несколько больших CSS-файлов — в один stylesheet, несколько маленьких изображений — в одну картинку (CSS-спрайты). 
• Настройте кэширование, чтобы статические элементы хранились в памяти браузера, а не извлекались при каждом запросе из сервера. 
• Размещайте изображения, стили и скрипты на CDN.
• Используйте ленивую загрузку, когда контент подгружается постепенно при прокрутке страницы. 

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