Как быстро протестировать скорость загрузки сайта и оптимизировать ее?
Опрос Unbounce, в котором участвовали сотни покупателей и маркетологов, показал, что около 70% респондентов с меньшей вероятностью совершат покупку на сайте, если время его загрузки оказалось дольше, чем ожидалось. Поэтому компаниям необходимо следить не только за ростом трафика, но и за тем, как посетители взаимодействуют с сайтом, т.к. скорость загрузки страниц влияет как на конверсию, повышение позиции в поисковиках и снижение процента отказов, так и другие важные для бизнеса KPI: количество MQL и SQL, LTV, ROI.
Что сейчас в тренде?
В прошлом году Google выпустил несколько новых обновлений своих поисковых алгоритмов. Согласно аналитике американской корпорации, в приоритете сейчас скорость работы сайта, качество предлагаемого контента, но основная ставка делается на удобство страниц.
Тренд на юзабилити сайта появился еще пол года назад – в середине 2021 года – факторы ранжирования, отражающие удобство страниц, стали использоваться в мобильном поиске. С февраля 2022 г. удобство страниц будет учитываться при ранжировании результатов поиска и на ПК. Алгоритмы готовы, поэтому изменения вступят в полную силу уже до конца марта 2022 г. Во внимание будут приниматься данные об удобстве страниц для мобильных устройств, используемые с августа 2021 г.
Под удобством страницы понимается набор признаков, определяющих, насколько пользователям просто и комфортно взаимодействовать с ней. Информационная ценность страницы при этом учитывается, но не является определяющей для поисковых систем, особенно когда сайт многостраничный. Юзабилити сайта на сегодняшний день имеет гораздо большее значение. Удобство оценивается по основным интернет-показателям, таким как скорость загрузки, интерактивность и визуальная стабильность. Кроме того, учитываются и другие сигналы: оптимизация для мобильных устройств, использование HTTPS и соблюдение правил в отношении назойливых межстраничных объявлений.
Показатели, отражающие удобство страницы:
- Основные интернет-показатели:
- Отрисовка самого крупного контента ( Largest Contentful Paint, LCP). Этот параметр показывает скорость загрузки основного контента. Чтобы страницей было удобно пользоваться, показатель должен составлять менее 2,5 с с начала скачивания страницы.
- Задержка после первого ввода (First Input Delay, FID). Это значение подразумевает интерактивность – время ожидания до первого взаимодействия с контентом. И оно должно составлять менее 100 мс.
- Совокупное смещение макета (Cumulative Layout Shift, CLS) свидетельствует о стабильности верстки и элементов, не препятствующих взаимодействию с контентом. Значение CLS должно быть менее 0,1.
- Использование сайта на мобильных устройствах. Ваш ресурс должен быть оптимизирован и адаптирован под мобильные устройства.
- HTTPS. Страница должна поддерживать протокол HTTPS. Это напрямую влияет на безопасность сайта.
Инструменты для тестирования скорости загрузки сайта
Для проверки интернет-ресурса существует множество различных инструментов. В зависимости от задач и требований по детализации, можно использовать встроенный в Chrome плагин lighthouse (его можно найти в консоли разработчика), консольную версию, либо воспользоваться online версией PageSpeed. Последний в списке инструмент тестирования считается наиболее популярным, удобным и легким в использовании. С помощью PageSpeed можно проанализировать скорость как на десктопных, так и на мобильных устройствах.
Показатели, которые диагностирует Google PageSpeed:
- Largest Contentful Paint или скорость загрузки основного контента – ориентированный на пользователя показатель, который определяет время, за которое браузер отрисовывает самый крупный видимый объект в области просмотра. Низкий показатель LCP сигнализирует о том, что страница полезна.
- First input delay или задержка после первого ввода – одна из ключевых метрик производительности ресурса. FID измеряет время от момента, когда пользователь впервые взаимодействует со страницей (то есть, когда он щелкает ссылку, нажимает кнопку или использует настраиваемый элемент управления на основе JavaScript), до момента, когда браузер действительно сможет начать реагировать на сигналы от обработчиков событий в ответ на это взаимодействие. Это user ориентированная метрика, необходимая для измерения отзывчивости при загрузке. Чем ниже значение, тем страница более пригодна для использования.
- Cumulative Layout Shift или совокупное смещение макета позволяет определить суммарное значение смещения во всех непредвиденных случаях за все время посещения страницы. Значение показателя может быть равно нулю (смещения нет) или любому положительную числу (чем оно выше, тем значительнее смещение).
- First Contentful Paint или первая отрисовка контента – показатель, который измеряет интервал времени с начала загрузки страницы до момента, когда на экране появится первое изображение или блок текста.
- Speed Index или индекс скорости загрузки показывает, как быстро на странице появляется контент.
- Time to Interactive или время загрузки для взаимодействия – этот показатель определяет время, когда основной контент был загружен и страница полностью готова к взаимодействию с пользователем.
- Total Blocking Time – это суммарное время абсолютно всех интервалов от первой отрисовки контента до полной загрузки страницы. Если скорость выполнения задач превышает 50 мс, то задержка будет заметной для пользователей.
Оптимизация скорости загрузки сайта: 9 основных рекомендаций
Если после тестирования скорости загрузки сайта результаты расходятся с требуемыми параметрами, следует провести ряд манипуляций, которые оптимизируют работу интернет-ресурса и исключат инциденты отложенной загрузки страниц:
- Сжать имеющиеся на сайте картинки и графику. Все изображения должны быть минимального разрешения (желательно WebP или AVIF), иметь прописанные в тэге img размеры. Для мобильных приложений и десктопных версий сайта иллюстрации должны использовать свои варианты изображения через picture.
- Сократить DOM (разметка HTML) до 800 строк. Страница не должна содержать лишней разметки, это позволяет оптимизировать код страницы.
- Включить кэширование на сервере. Такое изменение настроек позволит сохранять объемные элементы сайта в браузере. Когда пользователь повторно зайдет на страницу, она загрузится значительно быстрее.
- Запустить режим сжатия на сервере. С каждым годом вес HTML-страниц увеличивается, т.к. на сайты добавляют более качественные и тяжелые изображения и видео, CSS или JS-файлы. Включенный режим временного копирования файлов положительно скажется на оптимизации работы сайта.
- Исключить лишний код из файлов JS и CSS, которые подключены в верхней части разметки веб-страницы, т.к. это значительно утяжеляет их и замедляет загрузку сайта.
- Серверу необходимо по мощности соответстветствовать сайту. Он должен обладать не только необходимой мощностью, но и быть оснащен каналом связи с хорошей пропускной способностью.
- Подключение Js скриптов нужно делать перед закрывающимся тэгом body. Это позволит загрузить сначала весь сайт, а только потом добавить интерактивность.
- Защитить сайт с помощью HTTPS. Этот протокол не только увеличит скорость отображения страниц, но и обезопасит сайт за счет шифрования данных.
- Сделать ресурс адаптивным. Сайт должен быть полностью оптимизирован для просмотра как на компьютере, так и на мобильном устройстве.
Каждый из перечисленных способов поможет сделать сайт “легче” и улучшить его юзабилити. Остается лишь разобраться с приоритетностью реализации манипуляций, т.к. каждый сайт имеет индивидуальную архитектуру и нюансы. Часто в компании есть специалисты, которые понимают, как оптимизировать скорость загрузки сайта. Если же нет, всегда можно обратиться к digital студиям, которые подскажут как получить максимальный результат, затратив при этом минимальное количество ресурсов.
Отличная статья)
Можно было дополнить тем, что желательно не использовать высоконагруженные шаблоны и огромное количество плагинов в cms для серьезного бизнеса.
К примеру был опыт, когда человек делал сайт на WP. Установил туда пару десятков плагинов и скорость загрузки стала 5-10 секунд, потому что на сколько мне известно из коробки включаются сразу все плагины на каждой странице, даже там где они не нужны)
Попробуйте написать еще пост на тему говнокодерства на популярных cms-ках... Уж очень больная тема))
Да. Ну. Не знаю.
Думается, что в ТЗ не было ничего про высокую скорость загрузки сайта.
Напишите статью, про то, как анимация на сайте помогает в продажах и конверсии... У меня всегда по этому поводу вопрос - ну на кой так много? Чтобы только мощные процессоры могли это воспроизвести и загрузить быстро?
И заодно, очень востребована тема - как ускорить сайт на Тильде.
(спойлер - никак)
Замеры для истории:
https://loading.express/?test_id=6597daf35dd3afe5114232c1&server=main
https://lh.loading.express/reports/1704451060.report.html