Привет, это Adlook!
Если у вас есть свой сайт, забудьте фразы «Медленно, но верно» или «Тише едешь — дальше будешь». Пользователи становятся все требовательнее к времени загрузки страниц. Еще в исследовании от 2022 года рекомендовалась максимальная скорость загрузки 4 секунды. А спустя всего полтора года специалисты пришли к выводу, что лучше не тянуть дольше 2,5 секунд, иначе многие юзеры просто закроют вкладку и уйдут к конкурентам. К смартфонам требования помягче, так как процессоры на мобильных устройствах слабее, чем на десктопах. Но и тут не желательно, чтобы загрузка длилась дольше 3 секунд. В статье мы расскажем, как веб-издателю правильно следить за скоростью сайта и что можно сделать для ее увеличения. А обычные пользователи узнают, отчего страницы порой так долго грузятся.
Почему скорость загрузки снижает доход
В первую очередь, юзеру надоедает ждать, когда же наконец страница появится на дисплее. Не любят медлительные сайты и поисковые машины, а потому снижают их позиции в результатах выдачи. Рассмотрим подробнее, как это работает.
Негативный пользовательский опыт
Простой пример из жизни. Представьте, что на вашем кулинарном сайте вы публикуете рецепты, достойные мишленовского ресторана. Пользователь ищет в Яндексе «как приготовить карбонару» и видит ваш сайт в самом верху. Он кликает по нему, ждет секунду-другую-третью, а после его терпение кончается, и он переходит на следующую страницу в выдаче. Там он находит рецепт, готовит блюдо, а заодно кликает по рекламному баннеру с мультиваркой и добавляет сайт рекламодателя в закладки. Про ваш сайт он благополучно забывает, и так вы теряете не только посетителя, но и потенциальный доход от рекламы, просмотр которой принес бы вам (совсем не) лишнюю копеечку!
Представьте другую ситуацию. Пользователь всё же остался на вашем сайте, но сразу прокрутил страницу вниз еще до того, как загрузился блок с рекламой. Показ видеоролика не был засчитан, и вы снова потеряли доход из-за медленной загрузки. Обидно, правда?
Надо ли говорить, что если ваш сайт заточен на продажи, то быстрая загрузка жизненно необходима. Если страницы тормозят при каждом действии, пользователь может не дойти до добавления товара в корзину или оформления заказа. При этом каждая дополнительная секунда снижает вероятность успешной конверсии на десятки процентов.
Падение рейтинга сайта в выдаче
Мы уже говорили, что из-за медленной загрузки поисковики начинают реже рекомендовать сайт. Первыми они показывают те ресурсы, которыми удобно пользоваться. Сайты-улитки к таким не относятся. В Google таких «капуш» выявляют при помощи метрик под названием Core Web Vitals (приблизительно можно перевести как «Главные показатели жизнеспособности в сети»). В первую очередь учитываются:
- Largest Contentful Paint (LCP) — это время, за которое на экране появляется самый большой и важный элемент контента, будь то изображение или большой текстовый блок. Эта метрика особенно важна, ведь она во многом определяет первое впечатление пользователя при посещении сайта. Как говорится, встречают по одежке, а провожают, в нашем случае, по содержанию.
- Interaction to Next Paint (INP) измеряет время, за которое страница меняется после взаимодействия с пользователем, например, после скролла или клика по кнопке. Чем быстрее отклик, тем удобнее пользоваться сайтом.
- Cumulative Layout Shift (CLS) показывает, насколько часто макет страницы меняется во время загрузки. Ведь если изображения, кнопки и другие элементы постоянно двигаются, это создает неудобства и может привести к случайным кликам. Например, он может случайно положить в корзину совсем не то, что хотел, или перейти по рекламе на страницу с товаром, который ему не нужен. Уверены, вы часто с этим сталкивались и каждый раз испытывали сильное раздражение.
Кроме LCP, INP и CLS можно отметить еще две важные метрики:
- First Contentful Paint (FCP) показывает, сколько нужно времени, чтобы на экране появился первый видимый элемент контента.
- Time to First Byte (TTFB) демонстрирует, как быстро сервер отправляет первый байт данных в ответ на запрос пользователя. Показывает время отклика сервера.
Кроме того, низкая скорость сайта сказывается на работе полезных ботов, которые «ползают» по страницам, чтобы проиндексировать их. Если бот видит, что сайт медленно загружается или имеет проблемы с доступностью, он может сократить количество визитов или вовсе не индексировать новые страницы. В результате ваш сайт реже появляется в результатах поиска, и даже если контент качественный, он будет получать меньше просмотров.
Помните и о том, что сегодня люди заходят на сайты с мобильных устройств даже чаще, чем с компьютеров или ноутбуков. Поэтому особенно важно оптимизировать страницы для смартфонов и планшетов и обеспечить быструю загрузку страниц на этих устройствах.
Быстрый сайт = высокий доход: так ли это на самом деле?
Высокая скорость — это важно, но не единственное условие для успеха. Страница с парой бессвязных абзацев и пиксельной иллюстрацией загрузится быстро, но вероятность того, что она попадет в топ — минимальна. При этом информативный и полезный для аудитории сайт будет грузиться дольше из-за качественных картинок, гифок и большого количества информации, однако он обязательно привлечет трафик и обойдет быструю, но пустую страницу. Поэтому скорость — скоростью, но содержание превыше всего. Сделайте ставку на качестве контента: привлекайте к работе талантливых копирайтеров, дизайнеров и других специалистов. Помните, что скорость загрузки — это лишь один из факторов, влияющих на позиции сайта в выдаче.
Как проверить скорость загрузки?
Можно обратиться к «Яндекс.Метрике» или воспользоваться сервисом PageSpeed Insights от Google. Работать с ним очень просто:
- Нажмите на кнопку «Анализировать».
- Оцените полученные результаты.
С учетом этих метрик PSI оценивает общую производительность сайта. Замечательно, если значение находится в диапазоне 90 до 100, 50-89 — средний результат, ниже 49 — плохо.
Конечно, PageSpeed Insights может ошибаться, поэтому значения стоит сравнивать с показаниями других сервисов. На нашем сайте есть подробная статья о 10 лучших сервисах для проверки скорости загрузки сайта. Рекомендуем её к прочтению всем, кто работает с сайтами и зарабатывает на них.
От чего зависит скорость загрузки и как её ускорить
Основные факторы, влияющие на скорость загрузки веб-сайта, включают хостинг, тип и размер файлов, а также использование плагинов, кэша и оптимизированного кода. Рассмотрим каждый из них подробнее.
Сервер/ Хостинг
Именно от провайдера хостинга, расположения сервера и его рабочих характеристик в первую очередь зависят скорость и качество работы веб-сайта. Об этом свидетельствуют исследования, продемонстрировавшие, что у сайтов, расположенных на более быстрых серверах, ниже показатель «ненужных просмотров» (когда юзер сразу уходит со страницы). Подойдите к выбору провайдера очень ответственно, а если поняли, что сервер не справляется с нагрузкой, перейдите на другой, с более современным оборудованием и ПО.
Кроме того, каким бы продвинутым ни был сервер, чем дальше он расположен от юзера, тем дольше страницы будут грузиться. Данным ведь тоже нужно какое-то время, чтобы преодолеть пространство. Старайтесь, чтобы сервер физически находился поближе к целевой аудитории. Например, если сайт адресован, в первую очередь, питерцам, сервер должен располагаться в Санкт-Петербурге или, по крайней мере, в России. Если же ваша аудитория рассыпана по всему миру, подключитесь к сети доставки содержимого (CDN — Content delivery networks), включающую множество периферийных серверов в различных географических точках.
Тип и размер файлов
Тип и размер файлов тоже сильно сказывается на скорости загрузки. Чем «тяжелее» файл, тем больше ему нужно времени для отображения на устройстве пользователя. Первым на странице появляется текст, картинки же, и тем более анимация и видео, грузятся намного дольше. Как облегчить увесистый контент, чтобы он не тормозил страницы? У нас есть несколько советов.
- Картинки. На многих системах управления контентом (CMS), таких как WordPress, есть ограничения на размер изображений. Поэтому старайтесь сжимать файлы, используя инструменты вроде TinyPNG. Также выбирайте современные и более «легкие» форматы, такие как WebP, SVG или W3C, вместо громоздких JPEG и PNG.
Есть еще удобная функция отложенной (дословно — ленивой) загрузки Lazy Loading. В этом случае картинки загружаются не все сразу, а по мере прокрутки страницы, когда оказываются в видимой области экрана. Это помогает ускорить начальную загрузку страницы и снижает нагрузку на сервер. - Видео. Если у вас есть видеоролики, лучше загружать их на сторонние платформы, такие как YouTube (если он доступен), или на аналогичные российские площадки, а затем вставлять их на сайт для воспроизведения в плеере. Это поможет уменьшить нагрузку на ваш сервер и ускорить загрузку страниц, так как видео будет воспроизводиться с серверов платформ, специально предназначенных для обработки и стриминга медиа.
- Шрифты. Системные шрифты, такие как Arial, Times New Roman, Calibri и многие другие, уже установлены на устройствах пользователей и появляются на экране практически сразу. А вот для пользовательских шрифтов, которых нет в системе, нужно время. Проще всего — вообще отказаться от красивых, но тяжелых шрифтов, если они не критичны для дизайна. Но если они — важная часть вашего фирменного стиля, можно задать их как альтернативу. В этом случае сначала текст будет отображаться стандартным шрифтом, таким как Arial или Times New Roman, а затем автоматически изменится на ваш дизайнерский шрифт, когда он загрузится.
- Анимации. Конечно, приятно читать страницу со всякими бегущими строками и всплывающими элементами, но не тогда, когда она виснет из-за них. Если хотите использовать анимацию, ограничьтесь ею в тех местах, к которым важно привлечь внимание, например, в логотипе компании, заголовках или оффере.
Плагины
Не переусердствуйте с плагинами. Каждый из них требует дополнительного кода, что увеличивает нагрузку на сервер. Более того, плагины могут конфликтовать друг с другом, что приводит к ошибкам и дополнительному замедлению работы страниц. В общем, выбирайте только те расширения, которые действительно необходимы.
Кэш
Кэш помогает значительно ускорить загрузку, так как данные для загрузки уже хранятся на устройстве юзера, и заново загружать их не нужно. Когда юзер приходит на сайт, сервер не тратит времени на генерацию такого контента с нуля, а просто извлекает его из кэша. В результате страница появляется на экране пользователя намного быстрее.
Код
Замедлять загрузку может и слишком громоздкий CSS/JS-файл. В таком случае рекомендуется его минификация кода, в ходе которой вычищаются лишние комментарии, пробелы и прочие ненужные знаки.
Заключение
Итак, теперь вы знаете, почему важно следить за скоростью загрузки страниц сайта, как проверить ее и, при необходимости, увеличить. Еще раз напомним, что скорость работы сайта — важный, но не единственный элемент его доходности. Также необходимо следить, чтобы ваши посетители не просто оставались на странице, но и видели рекламу, которую на ней показывают. Об этом мы рассказываем в отдельной статье.
Кроме того, на нашем сайте много полезной информации для всех, кто интересуется интернет-рекламой, работает с сайтами и зарабатывает на них. Переходите по ссылке, и вы обязательно найдёте что-то интересное и полезное для себя!
Это был Adlook. На связи!