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

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

Россия +7 (495) 139-20-33
Шрифт:
7 17069
Подпишитесь на нас в 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 - Мда...Может Анне сразу в Яндекс написать кейсы по накрутке ПФ. Я бы такого сотрудника гнал вон.
Алексей Романенков (Rookee): как обеспечить проекту видимость в интернете и какими инструментами ее наращивать
Rookee
3
комментария
0
читателей
Полный профиль
Rookee - Добрый день. Взяли на заметку, спасибо. Чтобы не пропустить материал на тему репутационной стратегии от Алексея, следите за Rookee в соцсетях :)
Михаил Сливинский (Яндекс): об алгоритмах качества в поиске, сгенерированных текстах и накрутке ПФ
Анна Макарова
389
комментариев
0
читателей
Полный профиль
Анна Макарова - Владимир, спасибо за комментарий! Если вдруг Михаил сюда не придет, то мнением и мыслями можно напрямую поделиться в ТГ амбассадора. В этой новости оставляли контакт: www.seonews.ru/events/vebmasterskaya-2024-v-yandekse-poyavilsya-ambassador-internet-ploshchadok-v-poiske/
Создали ресурс для металлургов, который позволяет следить за аналитикой рынка и осуществлять продажи
Наталья Сталь
3
комментария
0
читателей
Полный профиль
Наталья Сталь -
Яндекс Маркет представил собственный бренд велосипедов Raskat
Анна Макарова
389
комментариев
0
читателей
Полный профиль
Анна Макарова - Для городского велосипеда 14-16 кг - вполне ок, можно сказать легкий. Почему нет? )) Понятно, что есть варианты и легче, но они уже скорее всего будут спортивного плана, где каждый грамм имеем значение.
Какие методы SEO-продвижения устарели в 2024 году
Эксперт
1
комментарий
0
читателей
Полный профиль
Эксперт - Ужасная вода. А начало "обзора" со слов - мне кажется - нечто.
Матвей Северянин дает экспертный отзыв: 788 000 ₽ за месяц на продаже Telegram-каналов – реально
Александр
1
комментарий
0
читателей
Полный профиль
Александр - Согласен с Матвеем. Сам покупаю- продаю Тг каналы на бирже : t.me/birga_prodagi_tg_kanalov - Биржа продажи ТГ каналов | Альянс-А
Контекстная реклама, таргет и SEO вошли в топ-3 каналов продвижения бизнеса в 2023 году
Сергей
1
комментарий
0
читателей
Полный профиль
Сергей - Например, так {censored} - продвижение карточки в органике Google :) Также в Яндекс.Директ есть направление контекста для маркетплейсов.
Как продвигать сайт на Tilda: особенности продвижения и рекомендации специалистов
Konstantin Bulgakov
15
комментариев
0
читателей
Полный профиль
Konstantin Bulgakov - Спасибо за рекомендации, полезно. Но кажется, что тематика в кейсе не самая конкурентная + часть запросов в продвижение брендовые, там и без сео позиции будут в топе.
23 сервиса для эффективного экспресс-аудита любого сайта
Илья
3
комментария
0
читателей
Полный профиль
Илья - Lighthouse - работаю пока с ним, не подводит
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
389
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

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