Как проверить скорость загрузки сайта и улучшить его производительность

Что такое скорость и производительность сайта

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

Под скоростью сайта мы, как правило, понимаем его быстродействие. Это не только время загрузки страницы в браузере, то есть количество секунд, которое уходит на отображение всех элементов. Например, значение также имеет время до первого байта (Time to First Byte или TTFB) — длительность промежутка между отправлением запроса и получением первых данных с сервера. Еще сюда можно отнести пропускную способность — количество запросов к серверу в секунду (Requests Per Second или RPS).

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

Ну во-первых, скорость работы сайта напрямую влияет на желание им пользоваться. А значит, и на совершение целевых действий со стороны клиентов, будь то оформление заказа, подписка на рассылку и так далее. По данным многих опросов, больше 50% пользователей уходит с сайта, если ждет загрузку дольше 3 секунд. Более того, исследования показывают, что оптимизация скорости сайта на 1 секунду может увеличить конверсию на 7%.

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

• First Paint (FP) — время появления чего-либо на экране до момента прорисовки контента, 
• First Contentful Paint (FCP) — время загрузки на странице первого значимого элемента (текста, картинки и так далее).
• First Meaningful Paint (FMP) и Hero Element Timing — время загрузки самых важных частей страницы. Какая часть считается важной — зависит от типа сайта. Например, для новостника важен свежий анонс, а для каталога интернет-магазина — карточка с товаром.
• Time to Interactive (TTI) — скорость взаимодействия, то есть время загрузки интерактивного элемента.
• Long Tasks — выполнение самых долгих задач (устаревших скриптов).

Также в Google для оценки сайтов на любых устройствах применяется Core Web Vitals (с английского “основные веб-показатели”). Когда этот набор критериев только появился в 2020-м году, он включал следующие количественные метрики, связанные с загрузкой:

• FID (First Input Delay) — время до взаимодействия пользователя с контентом, то есть с захода на сайт до полной его загрузки;
• CLS (Cumulative Layout Shift) — время, за которое верстка сайта становится идеальной;
• LCP (Largest Contentful Paint) — время, за которое прогружается самый тяжелый элемент на странице (видео, слайдер, даже текст). 

Не так давно в Core Web Vitals произошли изменения: вместо показателя FID появился INP — Interaction to Next Paint. Это время визуальной обратной связи, то есть скорость реагирования на взаимодействие с посетителем. Чем эта метрика ниже, тем быстрее отклик у сайта. Кстати, по статистике только 33% сайтов проходят порог Core Web Vitals. А что же тогда случается с остальными?

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

Важно отметить: однозначно ответить на вопрос, что такое “медленно”, а что такое “быстро” для сайта — непросто. Да, мы знаем о рекомендациях Google и об ожиданиях пользователей. Но мы также должны учитывать тип и масштаб своего сайта, а также объемы визуального контента. Для очень нагруженных страниц скорость загрузки может отличаться в сторону увеличения. В этом случае, чтобы понять, насколько вы в “тренде”, нужно посмотреть этот показатель у конкурентов и высчитать среднее значение.

Инструменты для анализа производительности: как узнать скорость загрузки страницы

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

Web Vitals

Это браузерное расширение для исследования разных UX-метрик. Здесь удобно анализировать сайт на прохождение порога Core Web Vitals в режиме реального времени: показатели измеряются с помощью библиотеки Google web-vitals.js. О состоянии каждой страницы расширение будет сообщать цветной индикацией, причем можно следить за INP, CLS, LSP прямо во время скроллинга. Кстати, можно смотреть не только свою площадку, но и конкурентов: изучение чужих сайтов из вашей ниши всегда помогает при составлении стратегии продвижения.

Lighthouse

Это инструмент от Google с открытым кодом для повышения качества страниц. Он поможет проводить регулярный аудит производительности сайта, SEO-оптимизации, доступности, безопасности и так далее. Можно использовать веб-интерфейс приложения, запускать Lighthouse в Chrome DevTools или через расширение в браузерах, а также интегрировать в свои системы как модуль Node.

Для проверки скорости загрузки сайта необходимо зайти на конкретную страницу, нажать на клавиши Ctrl + Shift + I, выбрать вкладку Audits и нажать на Run Audits. При оценке производительности Lighthouse смотрит сразу на 6 показателей, среди которых скорость отображения визуала, время загрузки самого большого элемента, прогрузка интерактивов, стабильность макета и так далее.

PageSpeed Insights

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

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

GTmetrix

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

UpTrends

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

Кроме времени работы и доступности сайта UpTrends проверяет удовлетворенность пользователей и производительность API и серверов.

Pingdom Tools Speed Test

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

С помощью сервиса можно вовремя обнаружить проблемы кэширования и проанализировать коды ответов сервера. Ну а в платной версии Pingdom можно даже изучать отдельные пользовательские сценарии.

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

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

Множество элементов на странице

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

Решение:

• Можно разбить крупные блоки на несколько маленьких или разнести их по разным страницам, а не оставляя все элементы на главной. Например, интерактивная карта с расположением офисов/магазинов переедет в “Контакты”, а калькулятор стоимости — в раздел с прайсом. Более радикальный подход — просто удалить блоки, которые вам точно не понадобятся. Это актуально в тех случаях, когда вы разрабатывали сайт давно и не занимались обновлением дизайна и оптимизацией. Чтобы понять, что на странице не обязательно, можно провести тестирование для замера конверсии или анализ сайтов конкурентов.
• Часто на сайте бывают блоки, которые сами по себе долго подгружаются, на какую страницу их не поставь. Например, блок, который показывает ленту из социальных сетей. Он, конечно же, влияет на скорость всей страницы. Чтобы избежать подобной неприятности, поставьте элемент на отложенную загрузку (lazy loading). Все остальные блоки быстро прогрузятся, а этот начнет загружаться, как только пользователь сделает первый скролл. Расположите такой элемент в конце страницы, и пока юзер будет двигаться вниз, блок спокойно прогрузится. С отложенной загрузкой на WordPress, например, часто помогают плагины: мы собрали лучшие из них в отдельной статье.

Медленные и сложные запросы в базу данных

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

Решение:

• Оптимизируйте SQL-запросы. Избегайте большого количества вложенных JOIN, если это возможно, и используйте фильтры Select для сокращения объема данных. Также настраивайте индексы на ключевых полях.
• Кэшируйте. Используйте системы кэширования, чтобы хранить результаты часто выполняемых запросов. Это уменьшит количество обращений к базе. Когда данные сохраняются на стороне пользователя (обычно CSS-файлы и картинки), нагрузка на сервер снижается, а производительность сайта растет. Но кэширование может быть и на стороне сервера за счет прокси-серверов. Оптимизировать доставку контента к пользователю таким способом поможет технология CDN. Можно выбрать любой из CDN-сервисов, например, Cloudflare или Mediafront.

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

Объемное визуальное наполнение

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

Решение:

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

• FastStone Image Viewer,
• Shrink.Media,
• Optimizilla,
• Imagify,
• TinyPNG,
• Optidash,
• Fotosizer,
• iLoveIMG,
• Webresizer,
• RedKetchup. 

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

• Если у вас много видео на сайте, имеет смысл загрузить ролики на отдельный видеохостинг и просто встроить ссылки на них на нужных страницах. Раньше мы активно использовали для этих целей YouTube, но сейчас ищем альтернативы. Подробнее рассказали про важность и варианты перезалива тут.

Медленные каналы связи у хостинга

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

Решение:

В такой ситуации логичнее всего менять хостинг на более производительный и надежный, с оптимизированной серверной инфраструктурой и высокой пропускной способностью. Чем меньше задержек у провайдера — тем меньше времени уходит на отклик сервера. Можно рассмотреть облачный хостинг или аренду выделенного сервера (в том числе виртуального VPS). А как именно выбирать хостинг-провайдера, чтобы потом не столкнуться с проблемами даже по части SEO, мы рассказали в отдельной статье.

Как увеличить скорость сайта: бонусные советы LZ.Media

• Отслеживайте правильность подключения библиотек. Речь идет о сторонних библиотеках, хранящихся в CDN или в других ресурсах. Загрузка такого кода может перекрывать отрисовку страницы. Мы сталкиваемся с подобным, когда сайт работает с картами Google и “Яндекс”, аналитическими инструментами от поисковиков, онлайн-консультантами для создания чатов и так далее.
• Учитывайте количество тегов. Существует рекомендуемое ограничение по тегам на одной странице. То есть на производительность сайта в браузере будет влиять само количество этих тегов. Google Chrome, например, рекомендует на одной странице использовать не более 1500 тегов в идеальном случае и не более 3000 — в худшем . Если на странице больше 3000 тегов, можно увидеть предупреждение в том же Google Page Insights.
• Не забывайте о JavaScript. Бывают случаи, когда программист пишет большую и сложную логику, то есть код, которой срабатывает на стороне клиента, и делает это непонятно. Такое чревато появлением скрытых багов и лагов, что сказывается на интерфейсе сайта. Могут перестать работать клики, скроллы и так далее. Поэтому имейте в виду: для браузера всегда приоритетнее выполнить JS-код.
• Проводите мобильную оптимизацию. Очень важно продумать веб-версию для смартфонов и планшетов: почти 60% мирового трафика в интернете приходится на мобильные устройства. Основной способ улучшения скорости загрузки мобильного сайта — адаптивный дизайн. Подробнее об этом читайте в нашей статье.
• Сокращайте и минимизируйте. Мы уже обсуждали, что оптимизация изображений в виде сжатия файлов позитивно сказывается на ускорении сайта. Но также мы советуем обращать внимание на длинные цепочки с переадресацией (редиректы), битые ссылки, количество плагинов, которые часто перегружают CMS, и число внешних скриптов.

Напоследок, напомним две важных вещи. Во-первых, улучшение производительности сайта — постоянный процесс, а не одноразовая мера. Только регулярные замеры скорости позволят вовремя обнаружить и устранить проблему. Во-вторых, хоть время загрузки не является ключевым фактором ранжирования, оно может существенно повлияет на метрики пользовательского поведения. Очень быстрая работа сайта также не дает 100% гарантии попадания в топ выдачи, ведь на площадке могут быть и другие проблемы. Чтобы их выявить (а лучше даже не допустить), обращайтесь к команде LZ.Media.