Скорость загрузки и производительность сайта | Центр Поддержки

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

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

Содержание:

О скорости загрузки

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

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

Как Wix измеряет время загрузки

Wix измеряет время загрузки сайта с помощью метрики TTI. Это расшифровывается как Time To Interactive и измеряет загрузку до респонсивности.

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

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

Порядок загрузки элементов

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

Подробнее о порядке загрузки элементов на сайте.

Оптимизация элементов на сайте

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

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

Дизайн главной страницы

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

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

Изображения

Изображения, загруженные на сайты Wix, автоматически изменяются для оптимизации, если они меньше 25 МБ. Мы также рекомендуем использовать изображения JPG, а не PNG, если вам не нужен прозрачный фон, поскольку изображения JPG лучше оптимизированы для скорости загрузки сайта и производительности. Подробнее

Видео, добавленные на сайт, — это отличный способ стимулировать взаимодействие и интерес посетителей.

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

Сторонние приложения и iFrames

Контент, содержащийся в сторонних приложениях и iFrames (например, встроенные видео или ленты соцсетей), доставляется с внешних серверов, а не с серверов Wix. Это означает, что Wix не может оптимизировать их, и, следовательно, они могут создавать накладные расходы на время загрузки вашего сайта.

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

Шрифты

Мы рекомендуем использовать на сайте не более 3 или 4 шрифтов, так как это может улучшить внешний вид вашего сайта и придать ему профессиональный вид.

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

Спецэффекты

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

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

Оптимизация контента мобильного сайта

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

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

Подробнее:

Мобильный редактор

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

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

Чтобы открыть мобильный редактор:

1. Откройте редактор.
2. Нажмите значок Мобильного редактора на верхней панели инструментов.
3. (Необязательно) Нажмите значок Оптимальный вид страницы слева в мобильном редакторе, чтобы начать оптимизацию макета сайта для мобильных устройств.

Скрыть ненужные элементы

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

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

Чтобы скрыть элементы с мобильного сайта:

1. Нажмите на элемент, который хотите скрыть.
2. Нажмите значок Скрыть элемент .

Совет: скрытые элементы можно просмотреть и повторно добавить на мобильный сайт, нажав значок скрытых элементов в левой части мобильного редактора.

Кадрирование или изменение размера изображений

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

Чтобы кадрировать изображение:

1. Нажмите на изображение в редакторе.
2. Нажмите значок Кадрировать .
3. Перетащите маркеры, чтобы обрезать изображение.
4. Нажмите значок Применить .

Совет: размер изображений можно изменить, нажав на изображение, а затем перетащив маркеры, чтобы сделать его больше или меньше.

Уменьшите количество элементов в галереях и репитерах

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

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

Добавьте экран приветствия

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

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

Чтобы добавить экран приветствия:

1. Нажмите значок Мобильные инструменты  в левой части мобильного редактора.
2. Нажмите Экран приветствия.
3. Настройте экран приветствия, используя доступные параметры.
4. Нажмите Готово.

Используйте поддерживаемую систему и браузер

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

Поддерживаемые операционные системы на мобильных устройствах:

• iPhone: iOS 12 и выше (iPhone 6 и выше)
• Android: 9.0 и выше

Поддерживаемые браузеры на мобильных устройствах:

• Google Chrome
• Safari

Сторонние коды

Сторонние коды могут предоставить важную информацию и инструменты для сайта. Однако они могут повлиять на время загрузки и производительность вашего сайта.

Мы рекомендуем экономно использовать сторонние коды и использовать только проверенные и важные коды для отслеживания и аналитики.

Показатели скорости загрузки сайта и удобства страниц и как их улучшить

19 мин — время чтения

Мар 23, 2021

Поделиться

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

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

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

Баланс между удобством и скоростью

Google запустил инструмент для анализа производительности сайта в 2013 году: PageSpeed Insights сканировал ресурс и давал ему оценку вместе с рекомендациями по загрузке. Но этот анализ был не очень точным и репрезентативным. В 2018-м инструмент получил улучшенный алгоритм Lighthouse — с тех пор анализ скорости стал объективнее, так как инструмент начал оценивать рендеринг страницы. В 2021 году метрики удобства страницы выходят на передний план и станут важным аспектом ранжирования. 

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

UX важен для всех поисковых систем: в руководстве Bing «положительный пользовательский опыт» признан более значимым, чем быстрая загрузка страниц, документация Yahoo! тоже указывает на приоритет удобства для пользователей в оценке скорости.

Процесс загрузки страницы от «а» до «я»

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

Незаметный для пользователя секундный процесс включает в себя несколько этапов:

• Юзер вводит URL-адрес или переходит по ссылке, отправляя запрос серверу.
• Сервер обрабатывает запрос и отправляет HTML браузеру.
• Браузер строит DOM-дерево (Document Object Model, модель страницы из HTML-объектов) и парсит CSS-атрибуты.
• Браузер рендерит страницу в соответствии с версткой, стилями и присутствующими элементами.

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

На поведенческие факторы влияет несколько аспектов. Визуальная и смысловая составляющие важны для восприятия страницы, но основой всему остальному служат технические параметры — их оценивают метрики удобства страницы (page experience) в системе ранжирования Google.

Оценка удобства страницы включает:

• Параметры Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS). Они отвечают за скорость загрузки, интерактивность страницы и стабильность верстки.
• Дизайн, оптимизированный для мобильных устройств. Мобильный поиск становится все популярнее, поэтому адаптивный дизайн — один из приоритетов для поисковиков. Инструмент Google TestMySite анализирует загрузку страницы на мобильных устройствах. Также существуют отдельные онлайн-сервисы для аналогичной проверки.
• Безопасный поиск. Алгоритм Safe Browsing проверяет сайты на наличие вредоносных факторов.
• Протокол HTTPS. Google маркирует все HTTP-сайты как небезопасные с июля 2018 года, так что если вы до сих пор не переехали на HTTPS, стоит этим заняться. Узнайте, как перевести сайт на HTTPS без потерь трафика из нашей статьи.
• Беспрепятственный доступ (отсутствие назойливых межстраничных объявлений). Межстраничные объявления (например, попапы) могут привести к штрафам от Google. Не подлежат штрафам объявления адекватного размера, которые не всплывают слишком неожиданно для пользователей, диалоговые окна для логина или вывода информации, требуемой по закону (например, о файлах cookie).

Рассмотрим детальнее параметры Core Web Vitals и способы их вычисления.

Largest Contentful Paint

Поисковые системы обращают внимание не на то, как быстро загрузится вся страница, а на то, как быстро станет доступным первый рендер (то есть первый экран, с которым можно взаимодействовать). Для пользователей точно так же важно, чтобы первый видимый фрагмент побыстрее стал читабельным и интерактивным. Largest Contentful Paint (LCP) — буквально «отрисовка самого большого элемента контента» — это изображение или текстовый блок, занимающий больше всего места на первом экране. 

Типы файлов, которые могут быть самым большим элементом контента:

• Изображения (<img>)
• Изображения внутри svg-объектов (<image> внутри <svg>)
• Видео (<video>)
• Фоновые изображения, загруженные с помощью функции url()
• Блочные элементы с текстовыми узлами

Что влияет на загрузку LCP:

• Время ответа сервера. Оно зависит от многих факторов — провайдера хостинга, системы управления контентом, задействованных баз данных и др.
• Блокирующие рендеринг JavaScript и CSS. Именно файлы JavaScript и CSS отвечают за интерактивность и визуальную привлекательность страницы. При обработке HTML браузер встречает JS- and CSS-файлы, которые нужно выгружать из сервера, — из-за этого тормозится процесс рендеринга.
• Время загрузки ресурсов. На показатель LCP влияет время загрузки ресурсов страницы — кода, картинок, видео.
• Тип рендеринга. Рендеринг JavaScript может осуществляться на стороне клиента и на стороне сервера. В первом случае рендеринг происходит непосредственно в браузере, а во втором браузер получает уже предварительно отрендеренный контент страницы из HTML-документа, запрошенного у сервера.

2.5 секунды и меньше — хороший показатель LCP.

Метрики Time to First Byte (время до первого байта) и First Contentful Paint (первый отрисованный элемент контента) тоже полезны в анализе LCP и скорости загрузки сайта в целом. Раньше для оценки скорости использовали FCP и First Meaningful Paint (первый значимый отрисованный элемент), но измерения FMP были во многом неточными и их сложно было стандартизировать для всех браузеров. В результате Google пришел к LCP как к более объективной метрике.

Чтобы вы не путались в этих показателях, подсуммируем их отличия:

• FCP — любой отдельный элемент, который первым появляется на странице
• FMP — самый большой сдвиг верстки в первом экране
• LCP — самый большой отдельный элемент, показанный в первом экране

First Input Delay

Метрика First Input Delay (буквально «задержка первого ввода») определяет то, как быстро страница становится интерактивной. Любой кликабельный элемент должен побыстрее обрабатываться браузером — а зависит это от собственного и стороннего кода, который используется для интерактивного контента.

Измерение FID нельзя симулировать в тестовой среде, потому что реальное взаимодействие юзеров — которые могут кликнуть по любому элементу в любой момент, или по нескольким сразу или подряд — может приводить к разным задержкам. Можно определить параметр FID по JavaScript с помощью Event Timing API, библиотеки web-vitals или библиотеки от GoogleChromeLabs.

Раньше в отчете Lighthouse можно было просмотреть показатель Max Potential First Input Delay (максимально возможная задержка первого ввода) — система анализировала основной поток выполнения и рассчитывала самый худший вариант задержки. Сейчас отчет включает две другие метрики, так или иначе связанные с FID:

• Time To Interactive (время до интерактивности) — то, как быстро страница становится полностью интерактивной (когда со всеми ее элементами можно взаимодействовать).
• Total Blocking Time (общее время блокировки) — промежуток времени после рендеринга FCP (первого элемента контента) до возможности взаимодействия со всей страницей (TTI). Эта метрика подобна FID, но она высчитывает время без учета реальных пользователей — добавляя все долгие JavaScript-задачи, блокирующие основной поток выполнения. 

Для анализа интерактивности сайта стоит учитывать и FID, и TBT. Последнюю метрику вы можете увидеть в отчете Lighthouse:

Несколько уточнений об измерении FID:

• Значения FID зависят от каждой конкретной загрузки страницы реальным пользователем.
• Показатель FID не зафиксируется, если пользователь никак не взаимодействует со страницей.
• Измерения FID будут необъективными, если страница загружена в фоновой вкладке, потому что первое взаимодействие происходит не сразу после загрузки.

Хороший показатель FID — менее 100 миллисекунд.

Cumulative Layout Shift

Метрика Cumulative Layout Shift (совокупное смещение верстки) показывает, как быстро стабилизируется верстка страницы. Если ресурсы страницы загружаются асинхронно или DOM-элементы добавляются динамически, какие-то фрагменты могут смещаться во время загрузки. Низкий показатель CLS гарантирует легкое и беспрепятственное взаимодействие с веб-страницей.

Какие элементы могут быть причиной сдвига верстки:

• Изображения и видео с неуказанными размерами
• Шрифты, отличающиеся по размеру от резервных шрифтов
• Сторонние виджеты или рекламные блоки, динамически изменяющие размер

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

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

Давайте рассчитаем CLS по указанным на картинке выше данным. Доля воздействия — 0.375, доля расстояния — 0.125, так что показатель CLS равен 0.046875.

Показатель CLS ниже 0.1 считается хорошим, 0.1-0.25 требует улучшения, а выше 0.25 сигнализирует о серьезных проблемах.

Вы можете быстро оценить CLS любого сайта с помощью онлайн-калькуляторов:

Что можно сделать, чтобы улучшить CLS:

• Не размещайте контент поверх уже существующего.
• Указывайте размеры изображений и видео. Если вы используете адаптивные изображения, браузер сам их размещает по странице в зависимости от размеров экрана девайса. Чтобы избежать сдвигов, нужно прописывать пропорции в CSS или в атрибуте srcset.
• Используйте CSS-свойство transform для анимаций.
• Используйте CSS-значения font:display для шрифтов или предварительно загружайте файлы шрифтов.
• Указывайте точные параметры для рекламных блоков или используйте изначально фиксированные по размеру объявления.

Какие смещения не влияют на параметр CLS:

• Намеренные изменения верстки, вызванные пользователем
• Движение элементов, не отображаемых в окне экрана 
• Смещения, вызванные добавлением нового элемента в DOM (если при этом существующие элементы не меняют своего начального положения)

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

Инструменты для измерения Core Web Vitals

Оценить сайт по параметрам Core Web Vitals можно с помощью отчета Chrome User Experience (CrUX), собирающего данные пользователей Chrome, инструмента PageSpeed Insights, который включает данные CrUX, или отчета Core Web Vitals в Google Search Console. Без учета пользовательских данных эти метрики можно проанализировать с помощью Chrome DevTools и Lighthouse.

Кроме этого существует множество онлайн-инструментов, которые мониторят разные показатели производительности сайта, включая Core Web Vitals. «Аудит сайта» в SE Ranking тоже включает в себя оценку этих метрик:

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

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

Основные аспекты улучшения работы сайта:

• Минимизация кода
• Оптимизация визуального контента
• Апгрейд хостинга

Давайте рассмотрим их детальнее.

Оптимизация JS, CSS, HTML

Ускорить загрузку сайта можно, удалив ненужные или блокирующие рендеринг ресурсы.

Минификация

Первое, что стоит сделать, для оптимизации загрузки сайта, — определить части кода, которые не используются, и удалить их. Этот процесс называется минификацией. Можно минимизировать код вручную или с помощью автоматизированных решений — например, Google рекомендует CSSNano и UglifyJS. Сеть доставки контента (CDN) тоже может автоматически минимизировать и сжимать файлы кода.

Пример результата минификации

Чтобы определить, какой код не используется для работы сайта, можно воспользоваться Developer Tools в Chrome — перейдите во вкладку Sources в верхнем меню и Coverage в нижнем. Инструмент покажет реальную статистику по файлам JS и CSS и укажет размеры и процентное соотношение лишних файлов:

Проверить, какая часть JS- и CSS-кода не минимизирована, можно и в «Аудите сайта» SE Ranking — в разделе «Отчет об ошибках»:

В этом инструменте вы также можете проверить соотношение текста к HTML: слишком низкий показатель может сигнализировать о лишнем HTML-коде, который тормозит страницу. Хорошее соотношение — 20-70%.

Адаптация под разные устройства

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

Встроенный стиль

Встроенный CSS используется для применения уникального стиля под каждый отдельный HTML-элемент. С ним браузер не будет загружать CSS-файлы (потому что стиль будет встроен в HTML-код) и рендеринг ускорится. Но с таким кодом сложнее работать, поэтому используйте встроенный стиль только при небольшом количестве CSS в целом. 

Постепенный рендеринг

Когда браузер натыкается на файлы CSS или JS перед первым рендером, выполнение этих файлов приостанавливает процесс загрузки. Стоит определить, какие ресурсы на странице могут блокировать рендеринг, — для этого можно запустить проверку с помощью WebPageTest:

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

Например, кнопки для распространения в соцсетях можно отображать не сразу — для этого нужно использовать асинхронную JavaScript-загрузку. Два атрибута помогают распределить скрипты и сделать рендеринг постепенным: async и defer. Их можно применять к собственному и стороннему JS-коду, сокращая время парсинга HTML без ущерба для отображения контента страницы.

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

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

• Используйте форматы, поддерживаемые всеми браузерами. Самые распространенные и беспроигрышные форматы — JPEG и PNG; WebP — многообещающий в плане качественного сжатия формат, но пока не доступен во всех браузерах; GIF можно использовать, если размер не слишком большой, или же конвертировать в видеофайл.
• Сжимайте изображения без существенной потери качества. Можно пользоваться онлайн-инструментами или встроенными в CMS решениями для сжатия.
• Указывайте несколько пропорций изображений, чтобы они выглядели как нужно на любом устройстве. Большинство CMS способны сделать это автоматически.
• Используйте асинхронную загрузку, если на странице много изображений. Сделать это можно с помощью ленивой загрузки или атрибута decoding=async.
• Храните большие видеофайлы на сторонних сайтах, чтобы уменьшить нагрузку при отображении сайта.

В «Аудите сайта» SE Ranking, в разделе «Найденные ресурсы», можно просмотреть размеры изображений и время их загрузки:

Оптимизация сервера

С помощью инструмента SE Ranking вы также можете проанализировать общую ситуацию скорости ответов сервера:

Кроме файлов кода и других ресурсов на сайте на время ответа сервера влияют:

• Возможности девайса и качество связи со стороны пользователя
• Количество получаемого сайтом трафика
• Ресурсы на каждой странице
• Выбранный провайдер и тип хостинга
• CMS и подключенные к ней плагины

Оборудование и сетевое подключение

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

Хостинг и CDN

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

Выделенный сервер — всегда лучший выбор, потому что так вы не будете делить сервер с другими сайтами. Как промежуточный вариант можно рассматривать виртуальный приватный сервер (VPS), который является совместным, но имитирует выделенный сервер.  

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

Кэширование

С помощью кэширования можно дать указания серверу или браузеру хранить ранее загруженный контент — так они не будут обрабатывать страницу, когда пользователь зайдет на нее повторно. Загрузка из кэша минимизирует нагрузку на сервер и улучшает производительность — например, исследование Kinsta показало, что кэширование на стороне сервера может уменьшить время загрузки на целых 30%. Можно настроить кэширование вручную в коде или с помощью плагинов вроде WP Rocket и W3 Total Cache. Некоторые провайдеры хостинга автоматически отправляют статический контент в кэш.

Редиректы

Каждый настроенный редирект замедляет процесс загрузки страницы, поэтому стоит проверять их количество и избегать проблем с цепочками перенаправлений. Узнайте больше о работе редиректов из нашего гайда, а пока разберемся с тем, как их отслеживать. В «Аудите сайта» SE Ranking вы можете просматривать список настроенных редиректов и их ответы сервера, определяя проблемные моменты:

Проверка плагинов

Еще один фактор влияния на скорость и производительность сайта — плагины. Используйте самые актуальные версии CMS и плагинов и следите, чтобы они работали на последней версии PHP. С помощью онлайн-инструментов проверяйте плагины на предмет использования памяти и влияния на скорость загрузки:

Чеклист оптимизации загрузки сайта

Подобьем итоги — почему важно улучшать показатели загрузки сайта и удобства страниц:

• Медленная загрузка веб-страниц несомненно портит впечатление о сайте и негативно влияет на конверсию, но не делайте ставку только на улучшение скорости — анализируйте и отслеживайте метрики, напрямую влияющие на взаимодействие пользователей с сайтом. Сигналы удобства страниц должны быть в центре вашего внимания, ведь они в приоритете Google и будут напрямую влиять на ранжирование с мая 2021 года.
• Метрики Core Web Vitals оценивают то, как быстро страница становится доступной и интерактивной, и здесь важна не скорость загрузки всей страницы, а скорость рендеринга первого экрана. Хорошими показателями считаются LCP до 2.5 секунды, FID до 100 миллисекунд и CLS до 0.1. Измеряйте их и в тестовой среде, и с учетом данных реальных пользователей.
• Отслеживая сигналы удобства страниц, вы будете лучше понимать, что нужно исправить для оптимизации скорости. Среди основных действий, улучшающих загрузку, — минификация кода, оптимизация изображений и выбор подходящего хостинга. Регулярно запускайте проверку своего сайта, чтобы вовремя реагировать на проблемы, влияющие на загрузку.

426 views

11 Статистика времени загрузки страницы сайта, которая вам нужна [+ Как увеличить коэффициент конверсии]

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

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

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

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

Что такое время загрузки сайта?

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

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

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

Кроме того, очень важно помнить о важности скорости мобильной загрузки вашего веб-сайта. Джиллиан Стрейт, стратег веб-сайтов в Blue Frog, сказала HubSpot: «Скорость страницы была фактором ранжирования в течение многих лет, и с переходом Google на индексирование с мобильных устройств еще более важно сосредоточиться на скорости загрузки вашего сайта с мобильных устройств».

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

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

Каково среднее время загрузки страницы?

В 2018 году исследование Google сообщило, что средняя загрузка мобильной веб-страницы занимает 15,3 секунды. В том же отчете говорится, что проблема связана с тем, что на большинстве мобильных сайтов слишком много элементов страницы. Эта проблема сохраняется, несмотря на то, что большая часть веб-трафика приходится на 4G вместо 3G.

Что такое хорошее время загрузки страницы?

Согласно исследованию Portent, проведенному в 2019 году, время загрузки от 0 до 4 секунд лучше всего влияет на коэффициент конверсии, а первые пять секунд времени загрузки страницы оказывают наибольшее влияние на коэффициент конверсии.

На самом деле самые высокие коэффициенты конверсии в электронной торговле происходят на страницах со временем загрузки от 0 до 2 секунд. Согласно исследованию, с каждой дополнительной секундой загрузки коэффициент конверсии веб-сайта снижается в среднем на 4,42%.

11 Статистика времени загрузки страницы

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

1. Первые пять секунд загрузки страницы оказывают наибольшее влияние на коэффициент конверсии. (Portent, 2019)

2. Коэффициент конверсии веб-сайта снижается в среднем на 4,42% с каждой дополнительной секундой времени загрузки (между секундами 0-5). (Portent, 2019)

3. Средняя загрузка мобильной веб-страницы занимает 15,3 секунды. (Исследования Google, 2018 г.)

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

(Неотскок, 2019)

5. Из всех опрошенных половина заявила, что готова отказаться от анимации и видео ради более быстрой загрузки. (Unbounce, 2019)

6. Самые высокие коэффициенты конверсии в электронной торговле происходят на страницах со временем загрузки от 0 до 2 секунд. (Portent, 2019)

7. Коэффициент конверсии веб-сайта снижается в среднем на 2,11% с каждой дополнительной секундой времени загрузки (между секундами 0-9). (Portent, 2019)

8. Самые высокие коэффициенты конверсии электронной торговли происходят на страницах со временем загрузки от 0 до 2 секунд. (Предзнаменование, 2019 г.)

9. Оптимальное среднее количество запросов — количество отдельных фрагментов контента, необходимых для отображения всей веб-страницы — меньше 50. (Google, 2018) 25% страниц могут сэкономить более 250 КБ, а 10% могут сэкономить более 1 МБ (что увеличивает время загрузки страницы). (Google, 2018)

11.

Сегодня, несмотря на то, что большая часть веб-трафика приходится на 4G вместо 3G, большинство мобильных сайтов по-прежнему работают медленно и раздуты из-за слишком большого количества элементов страницы. (Гугл, 2018)

Время загрузки страницы Выводы для маркетологов

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

Если вы обеспокоены тем, что скорость загрузки страниц вашего веб-сайта может препятствовать росту вашей компании, есть несколько решений, позволяющих сократить время, необходимое для загрузки вашего веб-сайта. Онлайн-инструменты, такие как Pingdom Website Speed ​​Test, GTmetrix, Google PageSpeed ​​Insights, позволяют вам определять время и тестировать скорость страницы вашего сайта. Вы также можете кэшировать свой веб-сайт или включить кэширование браузера, чтобы ускорить загрузку страницы.

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

Примечание редактора: этот пост был первоначально опубликован в марте 2017 года и был обновлен для полноты.

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

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

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

Объяснение скорости загрузки страницы

Скорость загрузки страницы — это мера времени, которое требуется странице вашего сайта для загрузки на устройство посетителя, чтобы ее можно было использовать. Чтобы определить фактическую скорость загрузки страницы, Google использует важную метрику под названием Core Web Vitals, которая отслеживает следующие три вещи:

• Крупнейшая отрисовка контента (LCF): Это время, необходимое для того, чтобы самый большой элемент на странице отображаться, например, в виде блока текста или изображения.
• Задержка первого ввода: Показывает, сколько времени пользователь должен ждать, прежде чем он сможет что-либо сделать на вашем сайте, например, открыть раскрывающееся меню на мобильных устройствах, щелкнуть ссылку для перехода на другие страницы или переключить изображение в карусели.
• Совокупное смещение макета: Изображения, текстовые блоки и шрифты сильно меняют положение и размер по мере загрузки веб-страницы, часто из-за плохих каскадных таблиц стилей и кода JavaScript. Это называется изменением макета, и Google наказывает за это веб-сайты.

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

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

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

Что именно ищет Google? Согласно документации Core Web Vitals, Google хочет, чтобы метрика LCF выполнялась не более чем за 2,5 секунды. Также требуется менее 100 миллисекунд для первой задержки ввода и совокупного смещения макета. Итак, соответствуют ли сегодняшние веб-сайты этим критериям? Как правило, нет.

Компания Littledata проверила среднее время загрузки страницы на 5727 веб-сайтах с высокой посещаемостью, каждый из которых посещают от 20 000 до 500 000 человек в месяц. Среднее время загрузки на этих сайтах составило 4,2 секунды на компьютере. Согласно статистике Littledata, сайт нужно было скачать за 2,9секунд, чтобы попасть в топ-20 процентов самых быстрых веб-сайтов. Чтобы попасть в топ-10, нужно было 2,2 секунды.

Удивительно, как много сайтов в настоящее время не проходят тесты Core Web Vital. Вероятность того, что большинство сайтов ваших конкурентов, скорее всего, тоже сейчас потерпят неудачу. Но вы не должны самоуспокаиваться. Если вы можете, воспользуйтесь медленной скоростью веб-сайта конкурентов, повысив свой собственный, чтобы быстро опередить Google.

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

С каждой дополнительной секундой, затраченной на загрузку вашего сайта, скорость отклика (люди, покупающие у вас или оставляющие запросы) падает. По данным Portent, в одну секунду коэффициент конверсии составляет 40 процентов, но если увеличить его еще на одну секунду, то он составит 34 процента. Еще один, и конверсия достигает 29 процентов и продолжает снижаться по мере увеличения времени загрузки. Это доказательство того, что медленные веб-сайты резко снижают коэффициент конверсии.

«Поскольку потребители становятся все более ограниченными во времени, а концентрация внимания сокращается, страницы, которые не загружаются сразу, могут означать, что клиент откажется от покупки на [этом] сайте», — сказал Даниэль Чунг, менеджер по поисковой оптимизации в Optus. .

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

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

Как увеличить скорость загрузки страницы вашего веб-сайта

Хорошей новостью является то, что ускорить загрузку страницы не так уж сложно. Начните с анализа вашего веб-сайта и того, как он работает. Вы можете использовать Google PageSpeed ​​Insights, GTmetrix или Pingdom, чтобы узнать его текущую скорость и понять, что требует внимания.

Выполните следующие восемь шагов, чтобы реально повысить скорость загрузки вашего сайта:

1. Сжимайте текст и изображения.

По словам Беверли Фридманн, контент-менеджера ReviewingThis, один из ключевых советов по дизайну веб-сайтов, которому не следуют многие компании, заключается в том, чтобы не уменьшать размер файлов изображений и видео. «Уменьшение или преобразование размера и масштаба изображения может значительно помочь, а также удаление любого видеоконтента, который не имеет решающего значения для контента вашего сайта».

Прочтите наше руководство о том, как сжимать изображения JPEG.

2. Оптимизация для мобильных устройств.

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

«Я не могу не подчеркнуть, что сегодня веб-сайты должны быть оптимизированы для мобильных устройств», — сказал Янив Масджеди, занимающийся маркетингом в Aura. «Все хорошо, если сверхмощный процессор на вашем настольном компьютере может загружать страницы вашего веб-сайта за одну-две секунды, [но] большинство покупателей используют мобильные устройства для просмотра».

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

3. Проверьте своего хостинг-провайдера.

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

«Хостинговые компании могут стать слишком популярными, вызывая приток сайтов, размещенных на их серверах», — сказала Одри Страсенбург, SEO-стратег LogoMix. «Быстрое переключение [на другой сервер] может сэкономить жизненно важные секунды».

4. Кэшировать.

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

«В зависимости от программного обеспечения, — сказал Алекс Фурфаро, владелец Alex Furfaro SEO Consulting, — можно сохранить статическую версию веб-сайта, и эта версия будет первоначально загружаться в браузер и будет загружаться намного быстрее».

5. Уменьшить CSS и JavaScript.

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

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

6. Удалите неиспользуемые плагины.

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