Содержание

Оптимизация скорости загрузки сайта: гайд как ее уменьшить

Скорость загрузки страницы является фактором ранжирования в Google с 2010 года, когда ее впервые анонсировали. Дальнейшее крупное обновление состоялось в 2018 году, а затем в 2020-м. В статье рассмотрим, какая скорость загрузки страниц должна быть сегодня, как ее измерить и самое главное — как улучшить.

Что такое скорость загрузки

Существуют десятки показателей, влияющих на скорость страницы, и Google потребовало время, чтобы выяснить, какие из них действительно влияют на пользовательский опыт. Их собрали в группу — Core Web Vitals или основные интернет-показатели. В них входит скорость загрузки основного контента (LCP), время ожидания до первого взаимодействия с контентом (FID) и совокупное смещение макета (CLS). Эти показатели используются для измерения воспринимаемой скорости страницы, а не фактической.

Скорость загрузки основного контента

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

Контрольные показатели для LCP

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

Читайте также:

AMP-страницы: полный гайд по ускоренным страницам Google. Создание, валидация, публикация

Время ожидания до первого взаимодействия с контентом

Это задержка между отображением интерактивного элемента и моментом, когда он становится функциональным. Например, на странице нарисована кнопка, вы нажимаете на нее, но она еще не реагирует.

Контрольные показатели для FID

FID можно оптимизировать с помощью разделения кода и использования меньшего количества JavaScript.

Совокупное смещение макета

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

Контрольные показатели для CLS

CLS зависит от правильно установленных атрибутов размера и от последовательности загрузки ресурсов — сверху вниз.

Присоединяйтесь к нашему Telegram-каналу!

  • Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
  • Для этого вам необходимо подписаться на наш канал.

Как измерить скорость страницы

У Google есть целый набор инструментов, которые измеряют основные интернет-показатели.

Инструменты для аудита основных интернет-показателей

Одна из проблем заключается в том, что некоторые инструменты используют лабораторные данные вместо полевых, в то время как Google ранжирует страницы исключительно по второму набору.

Два инструмента в подборке используют TBT — общее время блокировки. Это лабораторный показатель.

Еще одна проблема — большинство инструментов оценивают за раз только одну страницу. Это не очень практичный подход к оптимизации сайта.

Из перечисленных выше инструментов Google лучше всего подходит Google Search Console. В ней можно посмотреть отчет по основным интернет-показателям по всем страницам сайта.

Отчет в Google Search Console

Читайте также:

Руководство по Google Search Console: обзор возможностей сервиса

Под отчетом находится список всех показателей, которые не дали хороших результатов.

Обнаруженные проблемы с основными интернет-показателями

Отсюда вы можете получить детализацию по проблемам с каждой метрикой, просмотреть страницы, на которых они присутствуют. Спустя несколько кликов вы попадете в отчет PageSpeed Insights для конкретной страницы.

Измерить скорость страницы можно с помощью WebSite Auditor. Для получения информации нужно ввести ключ API. Перейдите в структуру сайта > SEO-анализ вебсайта. Пролистайте до списка Page Speed. Вы увидите общий отчет о скорости загрузки страниц для всего сайта, сможете посмотреть затронутые страницы. 

WebSite Auditor показывает ключевые параметры для Core Web Vitals и статус соответствия им

Можно переключиться в режим «Страницы» и в столбце Core Web Vitals Assessment просмотреть список страниц, в которых обнаружились проблемы со скоростью.

Отчет можно сформировать по отдельным страницам

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

Как улучшить скорость загрузки

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

Ниже приведены наиболее распространенные способы оптимизации, а также несколько советов, как вы их использовать.

Читайте также:

О’кей, Google: Как оптимизировать сайт под голосовой поиск?

1. Установите размеры изображения

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

<img src=»pillow.jpg» alt=»purple pillow with flower pattern» />

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

2. Используйте современные форматы изображений

Не все форматы изображений одинаковы. Популярные ранее JPEG и PNG теперь отличаются худшими характеристиками сжатия и качества, чем AVIF, JPEG 2000, JPEG XR и WebP.

В первую очередь обратите внимание на WebP. Формат поддерживает сжатие как с потерями, так и без них, а также обеспечивает прозрачность и анимацию. Кроме того, файлы WebP, как правило, на 25–35 % легче, чем PNG и JPEG аналогичного качества. WebP поддерживается более, чем 90 % браузеров.

Если ваш сайт сделан на WordPress, вы можете создать WebP-копию изображений с помощью плагина, например, Imagify. Если сайт создан не на CMS-платформе или вы не хотите устанавливать много плагинов, конвертируйте изображения онлайн или в графических редакторах.

3. Сжатие изображений

Независимо от того, используете ли вы современные форматы изображений или нет, сжатие по-прежнему действенный способ уменьшения общего размера страницы. Если ваш сайт сделан на WordPress, вы можете сжимать изображения массово с помощью плагинов, например, WP Smush.

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

Сжатие изображений помогает сократить скорость загрузки

Инструмент TinyPNG позволил сократить размер файлов вплоть до 70 %. 

4. Откладывание закадровых изображений

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

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

5. Конвертируйте GIF в видео

Это может показаться нелогичным, но GIF-файлы зачастую весят больше, чем видео. Преобразование большого GIF-файла в видео может облегчить его вплоть до 500 %. Если в отчете WebSite Auditor в графе Use video formats for animated content есть страницы, стоит выполнить эту рекомендацию.

Чтобы конвертировать GIF-файлы в видео, можно использовать онлайн-инструмент или загрузить FFmpeg. Google рекомендует создавать два видеоформата: WebM и mp4. WebM похож на WebP — он легче, но пока не поддерживается всеми браузерами. При добавлении видео на страницу сначала нужно указать версию WebM, а затем версию mp4 в качестве резервной копии.

<video autoplay loop muted playsinline>

<source src=»animation.webm» type=»video/webm»>

<source src=»animation.mp4″ type=»video/mp4″>

</video>

Обратите внимание, что элемент video имеет четыре дополнительных атрибута: autoplay, loop, muted и playsinline. Благодаря ним видео ведет себя как GIF — начинает воспроизводиться автоматически, зацикливается, воспроизводится без звука и в строке.

6. Откладывание неиспользуемых CSS

Неиспользуемый CSS может замедлить построение дерева рендера браузером. Программа должна пройти все дерево DOM и проверить, какие правила CSS применяются к каждому узлу.

Следовательно, чем больше неиспользуемого CSS, тем больше времени потребуется браузеру для вычисления стилей. Определите неиспользуемые или некритичные фрагменты CSS и либо полностью удалите их, либо измените порядок их загрузки.

Читайте также:

Инструкция по визуальному оформлению текста

7. Минимизируйте JS и CSS

Файлы JS и CSS могут содержать ненужные комментарии, пробелы, разрывы строк и фрагменты кода. Их удаление может облегчить файл на 50 %, однако в среднем показатель меньше. Тем не менее, это небольшой вклад в увеличение скорости загрузки.

Если у вас небольшой сайт, вы можете сократить код с помощью онлайн-инструментов — например, CSS Minifier, JavaScript Minifier и HTML Compressor. Если ваш сайт создан на CMS-платформе, например, WordPress, есть специальные плагины.

8. Извлечение критического CSS

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

Чтобы решить проблему, вы можете извлечь только те стили, которые требуются для верхней части страницы, и добавить их в <head> HTML-документа. Остальные CSS-файлы могут загружаться асинхронно. Это улучшит показатели LCP и пользовательский опыт.

9. Улучшите время отклика сервера

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

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

Технический аудит сайта

  • Наличие дублей страниц, безопасность, корректность всех технических параметров: переадресаций, robots.
    txt, sitemap.xml скорость загрузки и др.
  • Техническая оптимизация — один из основных этапов в продвижении.

10. Отложенный / асинхронный JS сторонних разработчиков

Сторонние ресурсы, такие как кнопки публикации в социальных сетях и встроенные видеоплееры, сильно расходуют ресурсы. Всякий раз, когда браузер сталкивается с фрагментом JS, он приостанавливает выполнение HTML. Это приводит к заметному снижению скорости.

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

Атрибуты async и defer помогают улучшить скорость загрузки

Атрибут async более мягкий — он позволяет загружать HTML и JS одновременно, но приостанавливает HTML для выполнения JS. Атрибут defer более строгий — он не приостанавливает HTML для JS, выполняя его в самом конце.

11. Предварительное подключение к сторонним ресурсам

Установление соединений, особенно безопасных, занимает много времени. Для этого требуются DNS-запросы, SSL-рукопожатия, обмен секретными ключами и некоторые обходные пути к конечному серверу, который отвечает на запрос пользователя.

Чтобы сэкономить время, вы можете заранее подключиться к требуемым источникам. Для этого добавьте в код страницы ссылки на эти ресурсы.

<link rel=»preconnect» href=»https://example.com»>

После внедрения тега вашему сайту не нужно будет тратить дополнительное время на установление соединения с сервером. Это повысит скорость загрузки.

12. Разделите длинные задачи

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

Таким образом, процесс загрузки будет разделен на короткие промежутки.

DevTools поможет с поиском длинных задач

Вы можете использовать DevTools для выявления длинных задач. Они отмечены красными флажками.

Читайте также:

С 1 июня графический редактор Canva недоступен жителям России: мы нашли 5 российских альтернатив

13. Предварительная загрузка ключевых ресурсов

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

С помощью тега <link rel=»preload»> вы можете сообщить браузеру, что ресурс необходим как часть кода, ответственного за рендеринг содержимого. В результате ресурс будет извлекаться как можно скорее.

<link rel=»preload» as=»script» href=»script.js» />

<link rel=»preload» as=»style» href=»style.css» />

<link rel=»preload» as=»image» href=»img.png» />

<link rel=»preload» as=»video» href=»vid.webm» type=»video/webm» />

<link rel=»preload» href=»font.woff2″ as=»font» type=»font/woff2″ crossorigin />

Обратите внимание, что ресурс будет загружен с тем же приоритетом. Разница в том, что загрузка начнется раньше.

14. Включите кэширование 

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

Цель состоит в том, чтобы кэшировать как можно больше ресурсов страницы на более долгий срок. Важно убедиться, что обновленные ресурсы проходят повторную проверку для кэширования. Вы можете управлять этими параметрами с помощью специальных HTTP-заголовков, содержащих инструкции по кэшированию.

15. Уменьшите размер DOM

Слишком большое дерево DOM со сложными правилами стиля может негативно повлиять на скорость загрузки, время выполнения и производительность памяти. В идеале дерево DOM должно иметь не более 1 500 узлов, с максимальной глубиной 32 узла, а родительские узлы должны содержать не более 60 дочерних.

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

16. Избегайте большого числа редиректов

Избавление от всех ненужных редиректов поможет ускорить работу сайта. Каждое дополнительное перенаправление замедляет рендеринг страницы и добавляет один или несколько HTTP-запросов и HTTP-ответов.

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

Коротко о главном

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

Продвижение сайтов

  • Любой формат сотрудничества: позиции, лиды, трафик.
  • Подбираем запросы, которые приводят реальных покупателей!

Как ускорить загрузку сайта на Тильде

СПРАВОЧНЫЙ ЦЕНТР ТИЛЬДЫ

Сайты на Тильде загружаются быстро: пример 1 и пример 2. Можно сделать так, чтобы страницы загружались еще быстрее. Эту статью мы написали для людей, для которых скорость загрузки страниц первостепенна, поэтому они готовы пойти на компромисс в дизайне.

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

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

Чеклист для ускорения загрузки сайта

  • Убедитесь, что на сайте включен Lazy Load

  • Оптимизируйте изображения на странице вручную

  • Используйте системные шрифты или включите мгновенную отрисовку контента в настройках

  • Отключите все внешние коды и скрипты на сайте

  • Не выключайте отложенную инициализацию счетчиков

  • Выключите вебвизор

  • Сократите длину страницы

  • Сократите количество изображений в начале страницы

  • Проверьте, не экспортирован ли ваш сайт

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

Как оценить скорость загрузки страниц

Многие пользователи Тильды проверяют скорость загрузки страниц на сайте через PageSpeed Insights — сервис от Google, который имитирует загрузку сайта на мобильных устройствах и компьютерах и ставит ему собственную оценку.

Оценка скорости загрузки сайта londonyoga.ws, созданного на Тильде, через PageSpeed Insights

Оценка скорости загрузки сайта londonyoga.ws, созданного на Тильде, через PageSpeed Insights

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

Лучше следить за реальной скоростью загрузки страниц сайта. Это можно сделать в консоли разработчика в Chrome — откройте консоль (alt + ctr + i / option + cmd + i) → перейдите в Toggle device bar и на вкладку Network → перезагрузите страницу, которую хотите оценить. Самые важные параметры: DOMContentLoaded (показывает скорость загрузки структуры страницы) и Load (показывает скорость полной загрузки страницы со всеми таблицами стилей и картинками).

Оценка реальной скорости загрузки сайта yourbeststylist.tilda.ws на Тильде через встроенную панель браузера Chrome. Обращаем внимание на показатели DOMContentLoaded и Load.

Но и этот способ не идеальный — имитация fast 3G в панели не совсем чётко и правильно имитирует загрузку сайта на мобильных. Поэтому нужно проверять скорость загрузки на реальных устройствах и, опираясь на факты, делать выводы.

Ускорение загрузки сайта, созданного на Тильде

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

Давайте проверим на реальном примере. Выберем шаблон из библиотеки Тильды и с его помощью создадим сайт для персонального стилиста Анны. А теперь узнаем скорость его загрузки через PageSpeed Insights.

Оценка скорости загрузки сайта персонального стилиста yourbeststylist.tilda.ws через PageSpeed Insights. Сайт создан по шаблону из библиотеки Тильды

Оценка скорости загрузки сайта персонального стилиста yourbeststylist.tilda.ws через PageSpeed Insights. Сайт создан по шаблону из библиотеки Тильды

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

Чтобы вы могли самостоятельно разобраться в вопросе, мы подготовили эту статью. Вы узнаете, какие настройки превратят ваш сайт в очень быстрый сайт. Но вам придется принять решение — применение всех пунктов из чек-листа скажется не только на скорости загрузки сайта, но и на его дизайне.

Разбор чек-листа по ускорению загрузки сайта

1. Убедитесь, что на сайте включен Lazy Load

Lazy Load позволяет скачивать все изображения не сразу при открытии, а по мере скролла страницы. Эта настройка включена по умолчанию и напрямую сказывается на производительности сайта.

Мы часто видим, что дизайнеры, создающие сайты на заказ, почему-то отключают Lazy Load. Не нужно так делать, это замедляет работу сайта.

Проверьте, не отключен ли у вас Lazy Load. Для этого перейдите в Настройки сайта → Ещё и убедитесь, что галочка снята с настройки Выключить Lazy Load изображений. Также проверьте, что функция не отключена в настройках изображений и шейпов в Zero Block.

Проверьте в настройках сайта, что у вас включен Lazy Load

Проверьте в настройках элементов в Zero Block, что включен Lazy Load

2. Оптимизируйте изображения на странице вручную

Lazy Load и ручная оптимизация изображений — это два наиболее весомых пункта, которые вы можете оптимизировать. Изображения — самое тяжелое, что есть на сайте, поэтому 70% успеха скорости загрузки страницы зависит от них.

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

В некоторых случаях автоматическая оптимизация «на лету» не сравнится со сжатием картинок вручную. Поэтому если для вас критически важна скорость загрузки страницы, мы рекомендуем дополнительно оптимизировать изображения через сервис TinyPNG. Он бесплатный и использует технологию lossless data compression, которая позволяет сжимать изображения без видимых потерь.

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

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

3. Используйте системные шрифты или включите мгновенную отрисовку контента в настройках

Это вторая категория оптимизаций по весу и по значимости. Системные шрифты есть на любом компьютере, например, Arial или Georgia. Ещё есть подключаемые шрифты, например, Futura или Roboto.

Если вы хотите максимально ускорить сайт, не подключайте собственный шрифт, а выберите один из системных. Таким образом вы сэкономите 100-400 кб, при загрузке страницы это существенно.

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

По умолчанию эта функция не включена. Если для вас скорость загрузки сайта важнее, чем плавность загрузки и визуальная составляющая, то включите функцию: перейдите в Настройки сайта → Шрифты и цвета → Продвинутые настройки.

Функция мгновенной отрисовки контента не включена по умолчанию. Активируйте её в настройках, если хотите ускорить загрузку сайта.

4. Отключите все внешние коды и скрипты на сайте

Проверьте, не подключены ли у вас внешние код или скрипты, например, чаты или счётчик. В Тильде их подключают с помощью блока Т123. Проверьте, есть ли такой блок на странице или в шапке сайта.

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

Если без стороннего кода не обойтись, то откладывайте загрузку и инициализацию скрипта. Первые секунды отрисовки страницы очень важны, поэтому не нужно грузить ничего лишнего. Например, если вы добавляете виджет Intercom, лучше подключать и инициализировать скрипт спустя 3 секунды после отрисовки основного контента страницы (наступления события «DOMContentLoaded» или «document ready»). Этот шаг поможет не блокировать основной поток загрузки, благодаря чему отрисовка страницы произойдёт быстрее.

Например, в Тильде по умолчанию счётчики загружаются спустя 2 секунды после загрузки страницы. Об этом расскажем в следующем пункте.

5. Не выключайте отложенную инициализацию счетчиков

Отложенная инициализация счётчиков — новая функция, которую недавно открыли для всех пользователей Тильды. Чтобы счётчик на странице подключился, браузеру необходимо загрузить скрипт, проанализировать код и выполнить его. Файлы Яндекс.Метрики или Google Analytics довольно тяжелые, поэтому если загружать их сразу, они замедлят скорость отображения страницы. В связи с этим по умолчанию мы подключаем эти счетчики спустя 2 секунды с момента загрузки страницы.

Проверить, что настройка не выключена, можно в Настройках сайта → Аналитика.

Не выключайте отложенную инициализацию счётчиков, чтобы сайт загружался быстрее

6. Выключите вебвизор

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

Поэтому отключайте вебвизор и включайте только по необходимости. Чтобы отключить, перейдите в Настройки сайта → Аналитика → Яндекс.Метрика → Отключить Вебвизор 2.0.

Выключайте вебвизор, чтобы страницы сайта загружались быстрее

7. Сократите длину страницы

Пункт кажется очевидным, но это работает: чем меньше информации на странице, тем быстрее она загрузится. Посмотрите на свой сайт критически: вся ли информация и изображения действительно нужны на странице или её можно сократить? Например, если у вас очень длинная страница (20+ экранов), перенесите часть контента с неё на другую, чтобы увеличить скорость загрузки. Это пункт, на который вы можете влиять напрямую.

8. Сократите количество изображений в начале страницы

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

Не рекомендуем размещать много фотографий в начале страницы, это влияет на скорость загрузки сайта

9. Проверьте, не экспортирован ли ваш сайт

Проверьте, что ваш сайт не экспортирован, не синхронизирован через API, другими словами, находится на серверах Тильды. Или, если экспортирован, то ваш веб-сервер настроен оптимально.

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

На стороннем хостинге мы не можем контролировать объем и качество работы системных администраторов. Но можем дать несколько советов, что необходимо сделать для более быстрой загрузки сайтов, если вы экспортировали сайт:
— подключите CDN и отдавайте изображения через распределенную сеть доставки контента;
— в настройках веб-сервера включите заголовки кеширования css/js/html, чтобы браузер клиента не скачивал их каждый раз, а брал из кеша;
— включите сжатие gzip или brotli для файлов css, js и html;
— к сторонним js скриптам добавьте атрибут async, чтобы их загрузка не тормозила загрузку страницы;
— добавляйте сторонние виджеты только по необходимости, организуйте задержку инициализации на 2-3 секунды, чтобы контент страницы успел отрисоваться.

Подведем итог

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

Мы со своей стороны продолжаем непрерывно работать над оптимизацией платформы и внедрять новые решения, которые сделают ваш сайт еще быстрее.

Вернуться в Справочный Центр

Почему скорость имеет значение в 2023 году

Мы все предпочли бы иметь быстрый веб-сайт, чем медленную загрузку веб-сайта. Но время загрузки — это не просто вопрос предпочтений, оно также оказывает огромное влияние на успех сайта. 82%* потребителей говорят, что низкая скорость страницы влияет на их решение о покупке.

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

Короче говоря, скорость веб-сайта очень важна, и мы составили это руководство, которое поможет объяснить, почему. Мы также определим обычные факторы, способствующие замедлению работы сайтов, и дадим несколько советов о том, как можно ускорить работу собственного сайта.

«Скорость веб-сайта» означает скорость, с которой каждая веб-страница загружается с хостинг-сервера и отображается в веб-браузере пользователя. Между тем, «время загрузки страницы» — это время, необходимое для отображения всего содержимого веб-страницы в браузере пользователя после того, как он перешел на сайт.

Нравится то, что вы видите?

Если вы хотите использовать любую графику из нашей статьи или комбинированную инфографику, вы можете получить к ним доступ на этом Google Диске. Если вы используете какой-либо из них, просто упомяните нас и включите ссылку на эту статью — наслаждайтесь!

Ключевая статистика
  • Вероятность отказа увеличивается на 32% , когда время загрузки страницы уменьшается с одной до трех секунд.
  • На первой странице результатов поиска Google средняя скорость страницы составляет 1,65 секунды .
  • Каждый четвертый посетитель покинет веб-сайт, если загрузка займет более четырех секунд.
  • Страницы, которые загружаются в течение двух секунд, имеют средний показатель отказов 9% .
  • Отметка от двух до трех секунд — это поворотный момент, когда показатели отказов резко увеличиваются. 40% потребителей будут ждать не более трех секунд, прежде чем покинуть сайт.

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

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

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

Даже громкие имена не застрахованы от влияния скорости веб-сайта. BBC теряет дополнительно 10% пользователей за каждую дополнительную секунду загрузки сайта. И когда Yahoo! сократил время загрузки страницы всего на 0,4 секунды, трафик увеличился на 9%.

Итак, как быстро должен загружаться сайт?

В идеале ваш веб-сайт должен загружаться в течение трех секунд или двух секунд, если это сайт электронной коммерции. На первой странице результатов поиска Google типичная скорость страницы составляет 1,65 секунды. Отметка в две-три секунды — это поворотный момент, когда показатели отказов стремительно растут — фактически, 40% потребителей будут ждать не более трех секунд, прежде чем покинуть сайт.

Дополнительная информация

  • Конструкторы веб-сайтов и Core Web Vitals : Скорость и производительность играют огромную роль в рейтинге поисковой системы Google, особенно с обновлением Core Web Vitals. Мы рассматриваем влияние этого обновления на разработчиков веб-сайтов и то, что вы можете сделать, чтобы протестировать и оптимизировать свой сайт!
  • Как повысить конверсию : Узнайте, какие другие проблемы могут препятствовать вашим показателям продаж.

Анализ 5 миллионов страниц для компьютеров и мобильных устройств показал, что среднее время, необходимое для полной загрузки веб-страницы, составляет 10,3 секунды на компьютере, и 27,3 секунды на мобильном телефоне.

Но важно максимально оптимизировать скорость мобильных страниц, потому что это по-прежнему предпочтительный метод просмотра. По состоянию на август 2020 года в США на мобильные минуты приходилось 79% онлайн-времени.

Как мобильный браузер сравнивается с настольным?

В исследовании веб-трафика в США, проведенном в 2018 году, на мобильные устройства приходилось 58% посещений сайтов и 42,3% общего времени, проведенного в Интернете. Больше людей просматривают страницы на смартфонах, чем на настольных компьютерах, хотя пользовательский опыт на последних все же лучше:

Фактически, 46% людей говорят, что ожидание загрузки страниц — это то, что им больше всего не нравится при просмотре веб-страниц на мобильных устройствах, в то время как 73% мобильных пользователей сталкивались с веб-сайтами, которые загружаются слишком долго.

Чем отличаются ожидания пользователей на мобильных устройствах от настольных?

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

85% пользователей мобильных устройств ожидают, что страницы будут загружаться так же или быстрее, чем на настольных компьютерах, а одно исследование потребителей в Великобритании даже показало, что 14% покупателей ожидают, что страницы на мобильных устройствах будут загружаться мгновенно.

Если вы ищете более легкую цель: 64% пользователей смартфонов ожидают, что страницы будут загружаться менее чем за четыре секунды, в то время как 74% мобильных пользователей в США отказались бы от мобильных сайтов, которые не загружаются в течение пяти секунд.

Какие самые распространенные проблемы с мобильным телефоном?

60% пользователей мобильного интернета говорят, что сталкивались хотя бы с одной проблемой при работе в Интернете за последние 12 месяцев. Сколько из этих мобильных пользователей сталкивались с веб-сайтом, который…

  • Слишком медленно загружался? 73%.
  • Сбой, зависание или ошибка? 51%.
  • Трудночитаемое форматирование? 48%.
  • Не работает, как ожидалось? 45%.
  • Просто не было в наличии? 38%.

Итак, что можно сделать с этими проблемами? Некоторые владельцы сайтов обращаются к ускоренным мобильным страницам или AMP. AMP — это проект, запущенный Google и Twitter, и это, по сути, урезанная версия HTML, которая позволяет мобильным страницам загружаться намного быстрее.

Страницы AMP должны быть «настолько быстрыми, что кажется, что они загружаются мгновенно», что может помочь справиться с этими надоедливыми ожиданиями клиентов, о которых мы говорили ранее. Тем не менее, 32% маркетологов избегают AMP, потому что у них нет возможностей разработчиков для его реализации.

Какие отрасли наиболее мобильны?

55% всего времени, проведенного на сайтах розничной торговли, приходится на мобильное устройство. Но некоторые отрасли больше переадресовывают звонки по телефону, чем другие:

Для всех 17 вышеперечисленных отраслей показатели отказов на настольных компьютерах были ниже, чем на мобильных:

Во всех отраслях среднее время пребывания на сайте для настольных компьютеров было больше, чем для мобильных устройств, за исключением «Книги и литература» — выброс, который лучше всего объясняется мобильными устройствами для чтения.

Скорость веб-сайта может влиять на все, от продаж до производительности поисковых систем, а это означает, что сайты электронной коммерции буквально расплачиваются за задержки. Если вы управляете сайтом электронной коммерции, который зарабатывает 100 000 долларов в день, задержка страницы в одну секунду может стоить вам 2,5 миллиона долларов в год в виде потерянных продаж.

Влияние скорости Интернета на продажи

Любое медленное время загрузки веб-сайта, будь то электронная торговля или что-то другое, приведет к увеличению показателя отказов и сокращению времени пребывания на сайте. Даже задержка всего в одну секунду снижает конверсию на 4,42% за каждую секунду.

Если вы пытаетесь продавать через Интернет, потери доходов из-за низкой скорости будут весьма разрушительными. Но посмотрите, сколько улучшений вы можете сделать, увеличив скорость сайта на всего на 0,1 секунды:

Как скорость работы в Интернете влияет на лояльность клиентов

Скорость также влияет на конкурентоспособность вашего бизнеса. 79% онлайн-покупателей, у которых неудовлетворительный опыт, с меньшей вероятностью снова совершат покупку на том же сайте, а 64% просто купят в другом интернет-магазине.

Как скорость веб-страницы влияет на SEO

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

Но почему скорость сайта является сигналом ранжирования?

Потому что для Google пользователь на первом месте, и, как мы видели, медленная загрузка означает неудовлетворенность пользователей. Исследование Google показало, что вероятность отказа увеличилась на 32%, когда время загрузки страницы уменьшилось с одной до трех секунд, и на 90%, когда время загрузки страницы уменьшилось с одной до пяти секунд. Если сайт загружается до 10 секунд, то вероятность отказа увеличивается до 123%.

Пользователи проводят больше времени на веб-сайте, когда его страницы загружаются быстрее. На самом деле пользователи посещают 8.9страниц, когда время загрузки составляет две секунды, по сравнению с 3,3 страницы, когда время загрузки составляет 8 секунд.

Практические примеры электронной коммерции

Ни один бизнес не застрахован от последствий медленной загрузки. Фактически, только один процент интернет-магазинов в Великобритании имел скорость загрузки мобильных страниц, которая получила отличную оценку Google в 2018 году — и это на два процента меньше, чем в 2017 году. И уязвимы не только малые и средние предприятия:

Хороший вопрос! В то время как время загрузки  – это время, необходимое веб-странице для загрузки в браузер пользователя, время рендеринга  – это время, необходимое для полной обработки содержимого страницы, чтобы посетители могли взаимодействовать с конечным результатом. Другими словами, время загрузки – это время, необходимое для того, чтобы страница стала  видимой,  , а время рендеринга – это время, необходимое для того, чтобы страница стала  пригодной для использования.

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

Веб-хостинг

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

Веб-хостинг и время безотказной работы

Различные хостинговые компании имеют разные гарантии безотказной работы, которые представляют собой количество времени, в течение которого веб-сервер доступен без проблем. Вы хотите выбрать поставщика с гарантией не менее 99,90% времени безотказной работы. Десятые доли процента могут показаться тривиальными, но разница между временем безотказной работы 99,90% и временем безотказной работы 99,95% составляет 4 часа 23 минуты меньше времени простоя в год.

Типы веб-хостинга и серверов

После того, как вы выбрали хостинговую компанию, вам необходимо выбрать правильный план. Общие серверы — самый дешевый вариант, но тогда вашему веб-сайту придется «делиться» ресурсами с другими сайтами на том же сервере. Это нормально для сайтов малого и среднего размера, но более крупным сайтам будет сложно поддерживать удовлетворительную скорость.

VPS и выделенные серверы являются более продвинутыми вариантами, и крупным компаниям и продавцам электронной коммерции действительно требуется несколько выделенных серверов, чтобы их веб-сайты работали как можно быстрее.

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

Возможно, веб-сайты запустятся на общем сервере, а затем у них закончится место для хранения растущего числа файлов или они начнут получать больше трафика, чем может вместить общий сервер. Когда это произойдет, вы можете легко перейти с общего сервера на VPS или выделенный сервер. Мэтт Томкин из Tao Digital Marketing называет обновление серверов «самым простым, быстрым и, как правило, наиболее экономичным способом сокращения времени загрузки».

Изображения, видео и файлы

Чем больше размеры ваших файлов и чем больше файлов на странице, тем дольше будет загружаться страница. может.

Удивительное количество сайтов этого не делает. Том Бурле, менеджер по маркетингу в The Stag Company, поделился с нами своим опытом:

«Количество раз, когда я нахожу на веб-сайте полноразмерные изображения, которые не были сжаты или имеют надлежащий размер, невероятно. Даже крупные бренды часто совершают эту ошибку, особенно если у них огромное количество страниц и множество людей загружают изображения. Важно обучить команду сжатию изображений и важности загрузки изображений нужного размера. Обычно это лучшая быстрая победа для мгновенных результатов».

Плагины

Плагины WordPress отлично подходят для добавления дополнительных функций на веб-сайт. Тем не менее, стоит быть избирательным в отношении количества используемых вами плагинов, потому что слишком много сразу перегрузит ваш сервер. Расстаться с несколькими плагинами может быть проще, чем вы думаете, в чем Том лично убедился:

«Каждый плагин, который у вас есть, может увеличить время загрузки страницы, но сколько вам действительно нужно? Часто, когда я захожу на веб-сайты WordPress и перечисляю все плагины, менеджеры веб-сайтов не могут объяснить, что делает половина из них и правильно ли они настроены. Вернитесь к основам, и вы должны увидеть значительное улучшение».

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

В большинстве случаев люди загружают большие изображения, не сжимая их. Мой совет: всегда редактируйте свои изображения, сжимайте их на tinypng.com, а затем загружайте на свой веб-сайт. В качестве альтернативы, если у вас есть сайт WordPress, загрузите плагин, такой как Shortpixel или Smush, который автоматически сжимает каждое загружаемое вами изображение.

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

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

Браузеры

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

Очистка кэша

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

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

Сначала проверьте скорость загрузки вашего веб-сайта.

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

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

Вы также можете использовать инструмент Google Pagespeed Insights. Он не будет явно измерять скорость, но предложит советы о том, как улучшить время загрузки вашего веб-сайта — и все, что вам нужно сделать, это ввести свой URL-адрес.

Знайте, чего ожидают пользователи

Вы почти готовы приступить к оптимизации вашего веб-сайта. Но сначала важно иметь в виду, какой опыт будут ожидать ваши пользователи.

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

Примите меры

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

Оптимизация изображений

В среднем изображения составляют 21% от общего веса веб-страницы, поэтому важно убедиться, что они не мешают скорости страницы. Оптимизация изображений — это уравновешивание поиска наименьшего размера файла с наиболее приемлемым качеством, но это не так сложно, как кажется.

Сет, генеральный директор компании по покупке жилья Colerado Seth Buys Houses, рассказал нам пример оптимизации изображений на новом веб-сайте клиента:

Я использую www.gtmetrix.com для тестирования скорости загрузки. Это невероятно проницательно и оценивает ваш сайт. Он также подробно расскажет о предлагаемых обновлениях с прямыми ссылками на то, какая часть вашего сайта замедляет скорость загрузки.

Я использую их предложения и заменяю то, что нужно. Например, у меня было несколько фотографий неправильного размера. Он дал мне ссылку на эту фотографию, а также сказал мне, какой процент улучшения внесет изменение этой фотографии, чтобы увеличить скорость загрузки. Это изменило мою скорость загрузки на 33% и рейтинг «C» на рейтинг «A».

Чтобы перечислить несколько из 23 категорий, которые он имеет для рекомендаций по изменению скорости: — Подавать масштабированные изображения, Использовать кеширование браузера, Оптимизировать изображения, Указать средство проверки кэша, Минимизировать JavaScript, Указать размеры изображения, Минимизировать CSS — Отложить анализ Java Script, Включить Сжатие, избегайте неверных запросов и избегайте перенаправлений целевых страниц.

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

Код оптимизации

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

  1. Чтобы минимизировать HTML, попробуйте HTMLMinifier.
  2. Чтобы минимизировать CSS, попробуйте CSSNano и csso.
  3. Чтобы минимизировать JavaScript, попробуйте UglifyJS.

Когда мы разговаривали с Эми Фиск, менеджером по веб-разработке в InMotion Hosting, она рекомендовала использовать объектно-ориентированное программирование для сокращения объема кода. Она также подчеркнула, что устаревший код «может привести к фатальным ошибкам и узким местам в производительности, а также создать дыры в безопасности».

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

Оптимизация баз данных

Если вы используете CMS, например WordPress, то все текстовые и зашифрованные данные вашего сайта (например, записи, комментарии и страницы) хранятся в одной базе данных. Но со временем эта база данных может переполниться данными, которые вам не нужны, например:

  • Неутвержденные или спам-комментарии
  • Публикация черновиков и исправлений
  • Помещенные в корзину сообщения и страницы

Очистка вашей базы данных от этих элементов уменьшит ее размер и облегчит серверам веб-хостинга быстрый доступ к запрашиваемому контенту.

Используйте CDN

Сеть доставки контента или CDN — это географически распределенная сеть серверов, которые работают вместе для более быстрой доставки контента, поэтому вам не нужно полагаться на один сервер для доставки контента пользователям по всему миру.

CDN помогают ускорить сайт, распределяя пропускную способность между несколькими серверами, а не оставляя один сервер для обработки всего трафика сайта. Cloudflare — один из популярных вариантов CDN, но вы будете избалованы выбором, если решите изучить другие платформы.

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

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

Мы решили обновить наш хостинг-план, настроить сеть доставки контента (CDN) и добавить пару плагинов для кэширования и оптимизации изображений.

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

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

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

Источники : 82%*

Автор:

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

13 Статистика времени загрузки страницы веб-сайта (данные за 2023 г.)

Мы все знаем, что время загрузки страницы важно. Но насколько они важны?

Что говорят нам данные о том, насколько время загрузки страницы может повлиять на показатель отказов, конверсии и доход?

А какова средняя скорость страницы сайта?

В этом посте мы разбираем последние статистические данные о времени загрузки страниц веб-сайта. Мы ответим на все эти и другие вопросы.

Готов? Давайте начнем.

Лучший выбор редактора — статистика времени загрузки страницы

  • Коэффициент конверсии в 3 раза выше для сайтов электронной коммерции, которые загружаются за 1 секунду. (Предзнаменование)
  • Средняя скорость страницы первой страницы результатов Google составляет 1,65 секунды. (Бэклинко)
  • Средняя скорость страницы веб-сайта составляет 3,21 секунды. (Пингдом)
  • Сайты, которые загружаются за 1 секунду, имеют показатель отказов 7%. (Пингдом)
  • 82% потребителей говорят, что низкая скорость загрузки страниц влияет на их решения о покупке. (Отскок)
  • Предварительная выборка, выполняемая Facebook, повышает скорость страницы на целых 25%. (Фейсбук)

Как скорость загрузки страницы влияет на коэффициент конверсии?

1. Коэффициент конверсии в 3 раза выше для сайтов электронной коммерции, которые загружаются за 1 секунду

Portent — это агентство цифрового маркетинга, которое специализируется на поисковой оптимизации, рекламе с оплатой за клик и контент-маркетинге.

Агентство изучило более 100 миллионов просмотров страниц с 20 веб-сайтов, ориентированных на бизнес (B2B) и бизнес-потребитель (B2C).

После 30-дневного снимка они обнаружили, что в среднем сайты электронной коммерции, которые загружаются за одну секунду, имеют коэффициент конверсии 3,05%. Это число упало до 1,08% для сайтов, загрузка которых занимала пять секунд.

Для сравнения: при скорости страницы в одну секунду вы можете рассчитывать на 30,5 новых продаж на каждую 1000 посетителей вашего сайта электронной коммерции.

Это число упадет до 16,8 продаж, если ваш сайт загружается за две секунды. Сайты, загрузка которых занимает пять секунд, получают только 10,8 продаж.

Источник: Portent

Примечание: Конверсия происходит всякий раз, когда посетитель выполняет желаемое действие на вашем веб-сайте. Цели конверсии могут включать в себя такие действия, как покупка продукта или нажатие кнопки призыва к действию (CTA). Коэффициент конверсии — это количество успешных конверсий, разделенное на количество возможных успешных конверсий. В большинстве случаев это будет количество посетителей сайта, отображаемое в процентах. Например, если конвертируются 100 посетителей из 1000, формула будет выглядеть так: (100÷1000) x 100 = 10% .

2. Что касается лидогенерации, сайты, которые загружаются за 1 секунду, имеют коэффициент конверсии 39%

Исследование Portent также показало, что если сайт загружается за одну секунду, его средний коэффициент конверсии составляет 39%.

Это число упало до 18% для сайтов, загрузка которых заняла шесть секунд.

Таким образом, на каждую 1000 посещений сайты со временем загрузки в одну секунду могут рассчитывать на получение 390 новых подписчиков электронной почты. Это число снижается до 180 новых подписчиков для сайтов, загрузка которых занимает шесть секунд.

Источник: Portent

Насколько быстро загружаются страницы в Интернете?

3. Средняя скорость страницы веб-сайта составляет 3,21 секунды

Инструмент для тестирования скорости веб-сайта и мониторинга производительности Pingdom обнаружил, что на основе миллионов тестов, проведенных этим инструментом, среднее время загрузки веб-страницы составляет 3,21 секунды. .

. Источник: Pingdom..

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

82% веб-сайтов B2B загружались за пять секунд или меньше в 2019 году, и это число не изменилось.

Источник: Portent

5. Предварительная загрузка, выполняемая Facebook, сокращает время загрузки веб-сайта на целых 25 %

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

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

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

Если пользователь щелкнет эту ссылку, его мобильное устройство загрузит кэшированную версию этой веб-страницы, как если бы он уже просматривал ее.

Facebook обнаружил, что это увеличивает скорость страницы на 25%.

Таким образом, вы можете сделать продвижение статей и страниц продуктов на Facebook своим приоритетом.

Источник: Facebook

Как скорость страницы влияет на показатель отказов?

6. Сайты, которые загружаются за 1 секунду, имеют показатель отказов 7%

По данным Google…

«Вероятность отказов увеличивается на 32%, когда время загрузки страницы увеличивается с 1 секунды до 3 секунд».

Данные Pingdom показали, что сайты, которые загружаются за одну секунду, имеют показатель отказов 7%, сайты, которые загружаются за три секунды, имеют показатель отказов 11%, а сайты, которые загружаются за пять секунд, имеют показатель отказов 38%.

Таким образом, на каждые 1000 посетителей вашего сайта ожидайте…

  • 70 посетителей уйдут, не зайдя на другую страницу, если она загрузится за одну секунду.
  • 110 посетителей уйдут, если загрузится за три секунды.
  • 380 посетителей уйдут, если загрузится за пять секунд.

Источники: Think with Google, Pingdom

7. Крупные медиа-сайты теряют дополнительно 10% пользователей за каждую секунду загрузки их страниц

BBC, или British Broadcasting Company, является известной медиа-компанией в Великобритании.

Они ведут новостные и образовательные передачи для радио и телевидения, а также веб-сайт для СМИ, на котором освещаются последние новости со всего мира.

Вот что написал ведущий технический архитектор BBC Мэтью Кларк в статье под названием «Как BBC создает веб-сайты такого масштаба»:

«В BBC мы заметили, что на каждую дополнительную секунду загрузки страницы уходит 10% пользователей».

BBC получает в среднем 207 миллионов пользователей в месяц. Вот сколько пользователей они теряют за каждую секунду загрузки их страниц:

  • 1 секунда – 20,7 млн ​​потерянных пользователей в месяц
  • 2 секунды – 41,4 миллиона потерянных пользователей в месяц
  • 3 секунды – 62,1 миллиона потерянных пользователей в месяц

Источник: Net Magazine

Как скорость страницы влияет на SEO?

8.

Средняя скорость страницы первой страницы результатов Google составляет 1,65 секунды.

Скорость страницы уже довольно давно является известным фактором ранжирования.

Когда Backlinko проанализировала 11,8 миллиона результатов поиска Google, они обнаружили, что средняя скорость страницы результата на первой странице Google составляет 1,65 секунды.

В исследовании Backlinko интересно то, что они не обнаружили корреляции между ранжированием в Google и скоростью страницы, несмотря на то, что Google (и индустрия цифрового маркетинга) настаивают на том, что это является решающим фактором ранжирования.

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

Источник: Backlinko

9. Среднее время загрузки страницы 20 ведущих веб-сайтов в США составляет 1,08 секунды

Мы проверили 20 самых посещаемых веб-сайтов в США с помощью теста скорости веб-сайта Pingdom и обнаружили, что их средняя скорость страницы составляет 1,08 секунды.

Мы тестировали с сервера Pingdom в Вашингтоне, округ Колумбия.

Самым быстрым сайтом был Bing.com со временем загрузки сайта 168 мс. Самым медленным оказался Yahoo.com — 2,54 секунды.

10. Среднее время загрузки страницы 10 ведущих веб-сайтов электронной коммерции в США составляет 1,96 секунды.

Мы провели тест скорости для 10 самых посещаемых розничных веб-сайтов в США. У них было среднее время загрузки страницы 1,9.6 секунд.

Лучший результат у BestBuy.com при времени загрузки сайта 177 мс. Худшим был Costco.com с результатом 4,24 секунды.

Costco также оказался в конце списка самых посещаемых сайтов розничной торговли.

Примечание: В этой теме есть еще несколько нюансов, поэтому я настоятельно рекомендую вам ознакомиться с этой статьей; Как скорость страницы влияет на SEO?

Как скорость страницы влияет на работу пользователей?

11. 82% потребителей говорят, что низкая скорость загрузки страниц влияет на их решения о покупке

Unbounce, разработчики популярного конструктора целевых страниц, опросили 525 потребителей.

Респондентов спросили: «Какие действия вы предпринимаете, когда сайт электронной коммерции загружается медленнее, чем ожидалось?»

По мнению респондентов,

  • 45,4% реже совершают покупки.
  • 36,8% с меньшей вероятностью вернутся.
  • 22,5% ничего не делают.
  • 11,9%, скорее всего, расскажут другу.

Источник: Unbounce

12. 73% пользователей сталкиваются с медленными сайтами при просмотре мобильных сайтов со своих телефонов

Более ранний опрос KISSmetrics показал, что 73% интернет-пользователей сталкивались с веб-сайтами, которые загружались слишком медленно в течение 12 месяцев.

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

Следующий по величине показатель показал, что 51% пользователей сталкивались с веб-сайтами, которые аварийно завершали работу или возвращали ошибки.

Источник: KISSmetrics

13.

25% интернет-пользователей ожидают одинаковую скорость загрузки страниц мобильных и настольных веб-сайтов

Эта статистика времени загрузки страницы получена из того же исследования KISSmetrics, что и раньше.

Однако это не самый высокий показатель в исследовании.

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

Источник: KISSmetrics

Источники статистики времени загрузки страницы

  • Portent
  • Пингдом
  • Фейсбук
  • Думай вместе с Google
  • Сетчатый магазин
  • Баклинко
  • Отменить
  • KISSmetrics

Статистика времени загрузки страницы: Заключительные мысли

Большинство статистических данных в этой статье доказывают, что вам нужно хорошее время загрузки страницы, а медленный веб-сайт может повредить вашим конверсиям, особенно если скорость сайта превышает 3 секунды.

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

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

Лучший способ повысить производительность сайта — выбрать качественного хостинг-провайдера. Это гарантирует, что ваш сайт имеет прочную основу.

Мы рекомендуем Cloudways. У них размещен этот самый веб-сайт, а наша домашняя страница загружается за 402 мс.

Cloudways предлагает быстрые облачные серверы всего за 10 долларов в месяц. У нас даже есть руководство о том, как сделать ваш сайт WordPress быстрее с помощью Cloudways всего за несколько кликов.

Вам также следует установить плагин кэширования, такой как WP Rocket. Он обладает некоторыми уникальными функциями, которые могут значительно повысить скорость страницы, а также Core Web Vitals.

Другие стратегии, которые вы должны реализовать, включают использование облегченной темы WordPress, а также CDN.

No related posts.