×
Россия +7 (495) 139-20-33

Как уменьшить время загрузки сайта

Россия +7 (495) 139-20-33
Шрифт:
7 16739
Подпишитесь на нас в Telegram

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

Скорость загрузки сайта – что это такое и как её измерить?

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

Также нужно отметить два вида тестирования скорости: синтетическое и на реальных пользователях (RUM – real users monitoring, например реализовано в Google Analytics и Яндекс.Метрике). Оба вида полезны и должны использоваться на практике. Первый – на начальном этапе и в процессе оптимизации, второй – до и после оптимизации для оценки результатов.

Мы рекомендуем взять на основу такой параметр: время до первого полезного экрана (time to first meaningful paint). На практике значит, что по прошествии этого времени можно понять, что это за сайт, прочитать заголовки и другой текст, возможно увидеть оформление (частично). В идеале на этом этапе уже можно взаимодействовать с сайтом: переходить по ссылкам, прокручивать контент и т. д.

С метрикой разобрались, теперь определимся, чем измерять. Для выбранной метрики доступны несколько простых способов: Developers tools в Chrome и WebPagetest.

timeline.png

Если мы используем Chrome, что нужно выставить нужную скорость соединения (Network Throttling) и включить опцию «Capture Screenshots» на панели Network. Недавно появилась возможность также эмулировать замедление CPU (CPU Throttling на закладке Timeline). Далее перезагружаем страницу и получаем серию скриншотов на различных стадиях загрузки страницы – замечаем время первого полезного для пользователя скриншота. Для уточнения данных нужно провести серию измерений.

При использовании WebPagetest (http://www.webpagetest.org/) достаточно выбрать точку тестирования (наиболее близкую к вашей аудитории), выбрать скорость подключения, браузер и поставить опцию «Capture video». Запускаем тест и заходим в раздел «Filmstrip View», где получаем серию скриншотов сайта. Здесь есть уже посчитанная метрика StartRender, но на неё не всегда можно опираться, так как за начало рендеринга может быть принято сообщение в интерфейсе браузера о начале загрузки сайта или значок «Loading».

wpt.png

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

Задержка реакции, мс

Восприятие пользователем

0-100

Мгновенная реакция

100-300

Небольшая, но заметная задержка

300-1000

Система работает, но нагружена

1000-10000

Вероятное переключение мыслей на другие задачи

10000 и более

Задача отменяется (система не работает)

Как видно из таблицы, очень желательно уложиться в 1000 мс (1 секунду) загрузки, потому что пользователь не успевает переключиться на другие задачи и забыть, что он делал с сайтом. В то же время загрузки более чем за 10 секунд – катастрофа для любого сайта, так как ведёт к отказам (пользователь закрывает вкладку браузера).

Почему так много медленных сайтов?

Кратко опишем основные причины плачевного состояния в области скорости сайтов.

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

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

В-третьих, требования к современному сайту неминуемо раздувают количество JS, CSS-кода и картинок (видео), а качество подключения прогрессирует очень медленно.

Наконец, есть разрыв между представлениями пользователей о быстром сайте и мнением владельцев/разработчиков сайта. Владельцы считают, что пользователи понимают, что сайт может работать не быстро и это нормально, потому что это обычный интернет-магазин. А при использовании мобильного интернета вообще нужно подождать: это ваша проблема, что интернет такой медленный. На самом деле, пользователи, по данным исследований, ожидают, что ваш сайт будет неизменно быстрым, таким же быстрым как Яндекс и Google, причём с любым качеством подключения. Всё, что хуже, воспринимается как недостаток сайта.

Способы ускорения сайта

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

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

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

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

Ручная оптимизация решает все задачи по ускорению сайта в условиях локализации аудитории. Также в процесс такой оптимизации может входить оптимизация сервера, хостинга или даже перенос сайта на другую инфраструктуру. Для распределённой географии пользователей полезно подключить CDN (можно без функций оптимизации сайта), но это относится к подавляющему меньшинству сайтов.

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

HTTPS (TLS) и ускорение

Ни для кого не секрет, что поисковые системы и браузеры призывают переводить все сайты не безопасное соединение с использованием TLS (ранее назывался SSL), особенно активно эту идею продвигает Google, который обещает в скором времени помечать обычные сайты как потенциально опасные, потому что они не используют шифрование. Суть технологии состоит в сквозном шифровании всего трафика от пользователя к серверу и обратно. При этом ключ для расшифровки есть только у сервера и клиента. Уже сейчас, Google рассматривает использование HTTPS как положительный сигнал для ранжирования. Со временем, значение этого фактора будет увеличиваться. Кроме того, многие нововведения в веб-стандартах будут работать только с HTTPS (сжатие brotli, service workers, HTTP/2).

tls.png

Причины предпочтения HTTPS-сайтов просты: только защищённое соединение даёт пользователю уверенность в том, что он зашёл на настоящий сайт и его данные невозможно перехватить. Для владельцев сайтов также очень полезно следующее свойство: в контент сайта с TLS невозможно внести изменения третьим лицам по пути следования трафика (например, провайдеру, который захотел вставить свою рекламу на ваш сайт).

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

Первую проблему позволяет решить использование нового протокола HTTP/2 и оптимизированные настройки веб-сервера (дающие как скорость, так и безопасность: OCSP, False Start, Session tickets, Session cache), вторая проблема решается использованием современных шифров, которые не требуют значительных ресурсов.

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

Итоги

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

Также мы затронули вопрос перехода на HTTPS (TLS) с точки зрения скорости: сейчас это можно сделать без потерь производительности, сохраняя все преимущества в возможностях.

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Светлана
    1
    комментарий
    0
    читателей
    Светлана
    больше года назад
    Спасибо за статью!
    -
    0
    +
    Ответить
  • Антон Геер
    1
    комментарий
    0
    читателей
    Антон Геер
    больше года назад
    2 инструмента аналитики и 1 инструмент оптимизации? От такого заголовка ждешь большего) Где банальная оптимизация изображений, сжатие CSS и JS, оптимизация кода, выполнение рекомендаций гугловского PageSpeed и так далее, и так далее. Где это все?)
    -
    1
    +
    Ответить
    • Николай Лавлинский
      4
      комментария
      0
      читателей
      Николай Лавлинский
      Антон Геер
      больше года назад
      Эта статья предназначена для заказчиков ускорения сайта, чтобы они могли ориентироваться в этой услуге. Если вы профессионально ускоряете сайты, то перечисленные выше методики вы уже освоили, если нет - лучше обратиться к профессионалом или пользоваться сервисами по ускорению.
      -
      2
      +
      Ответить
  • Сидор Оптимимизатор
    17
    комментариев
    0
    читателей
    Сидор Оптимимизатор
    больше года назад
    Полезно для несведущих, много тем не раскрыто. Про HTTPS – если ваш сайте реально МЕДЛЕННЫЙ и без него, это капля в болото.
    -
    0
    +
    Ответить
    • Николай Лавлинский
      4
      комментария
      0
      читателей
      Речь идёт о том, что HTTPS не бесплатен с точки зрения скорости сайта и приводятся технологии, призванные эту проблему снять. А насколько HTTPS может затормозить сайт заранее говорить сложно: всё зависит от кривизны рук.
      -
      1
      +
      Ответить
  • Anton Shaban
    13
    комментариев
    0
    читателей
    Anton Shaban
    больше года назад
    Статья полезная!
    Коллеги, но как-то заголовок не вяжется... "Как уменьшить скорость загрузки сайта". Может, "Как УВЕЛИЧИТЬ скорость загрузки сайта"? Или "Как уменьшить ВРЕМЯ загрузки сайта"? Ибо сейчас получается, что сайт предлагается замедлить)
    -
    7
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Накрутка поведенческих факторов: дорого, сложно, но можно. Если очень хочется
Oleg_bobr2012
1
комментарий
0
читателей
Полный профиль
Oleg_bobr2012 - Мда...Может Анне сразу в Яндекс написать кейсы по накрутке ПФ. Я бы такого сотрудника гнал вон.
28 способов повысить конверсию интернет-магазина
Татьяна
1
комментарий
0
читателей
Полный профиль
Татьяна - Очень действенные рекомендации представлены в статье! Всё четко расписано и легко внедряемо в работу интернет-магазинов.Удобство и наглядность+различные бонусы и скидки-именно то, что и цепляет покупателя.
7 актуальных сервисов для анализа сайта: сравнительная характеристика
Jenimeon
1
комментарий
0
читателей
Полный профиль
Jenimeon - SimilarWeb один из моих фаворитов, частенько им пользуюсь. Ценник не малый, но функционал хороший. Be1 тоже годный.
Какие сайты лидировали в поиске Яндекса и Google в 2023 году
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если что по рейтингу вы не правы, есть ядро по которому производиться оценка и вы можете по нему самостоятельно все посмотреть. Единственный объективный рейтинг по SEO. Других не знаю Ну я вам скажу что это не так и в предыдущие года сайт моего клиента попадал в рейтинг, при чем несколько раз. И я прекрасно знал еще до объявления результатов кто лидер - рейтинг прозрачный, есть фразы по которым набираются баллы. В этом году наш сайт не попал в рейтинг например и это было понятно, что не попадет (по статистике позиций)
Как онлайн-магазинам получать максимум трафика с помощью Поиска по товарам Яндекса
Гость из Тюмени
1
комментарий
0
читателей
Полный профиль
Гость из Тюмени - Производим пиломатериалы под заказ, от 1 до 14 дней. Яндекс постоянно банит наш яндекс фид по причине отсутствия товара на складе во время своих тайных проверок. Не возможно донести до модератора, что мы работаем под заказ, поэтому товара нет на складе, т.е. пришёл заказ - мы изготовили.
Создали ресурс для металлургов, который позволяет следить за аналитикой рынка и осуществлять продажи
Наталья Сталь
3
комментария
0
читателей
Полный профиль
Наталья Сталь -
5 способов увидеть сайт глазами поисковика: анализируем скрытый контент и cloaking
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Сейчас клоаку прячут, так что под нее можно глянуть только с гуггловских ip. Сейчас только гуггл сервисами можно глянуть
Как легко определять спрос на продукцию. Проводим мини-исследование, привлекая ChatGPT
Гость
1
комментарий
0
читателей
Полный профиль
Гость - норм статья, надо юзать и не бояться
Число доменов в зоне .ru достигло рекордных показателей с 2017 года
Валерия Власова
3
комментария
0
читателей
Полный профиль
Валерия Власова - Благодарим за внимательность, в зоне .рф зарегистрировано 762 тыс. доменов.
Видеокурс по Telegram Ads: кому подходит реклама в мессенджере
eLama
1
комментарий
0
читателей
Полный профиль
eLama - Елена, добрый день! Нам очень жаль, что у вас сложилось такое впечатление о работе нашего сервиса. Мы бы хотели разобраться в возникшей ситуации. Будем признательны, если вы пришлете ваш ID в eLama нам в личные сообщения ВКонтакте, чтобы мы могли проверить информацию по вашему кабинету: vk.com/elama
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
386
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!