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

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

Россия +7 (495) 139-20-33
Шрифт:
7 12387

Крупнейшие поисковики включают скорость загрузки сайта в факторы ранжирования, известные западные игроки 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) с точки зрения скорости: сейчас это можно сделать без потерь производительности, сохраняя все преимущества в возможностях.
(Голосов: 6, Рейтинг: 4.33)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
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
Что скрывает «Прогноз бюджета Яндекс.Директ»?
Михаил Мухин
15
комментариев
0
читателей
Полный профиль
Михаил Мухин - Здравствуйте! 1-2. Считает стенд. Ссылка на него дана, но могу повторить: online.p-c-l.ru/competition/task/card/id/106. Нажмите на кнопку "Начать" и заранее приготовьте прогноз бюджета Яндекс. Суть расчета: перебор комбинаций всех ставок на всех фразах, построение бюджетных когорт - бюджетов с одинаковым СРС, отбор в каждой когорте бюджета с максимальным количеством кликов и ..., да упорядочивание этих бюджетов по мере возрастания СРС, причем берем не все, а с фиксированным шагом. 3. Гугл считается через поправочные коэффициенты. Мы перевариваем океан данных и представляем их. На удивление, получается не менее, хотя и не более точно, как и прогноз Яндекс. Конечно, нужно понимать, что это очень примерные прикидки, фактически перевод неточного прогноза Яндекс в удобочитаемую форму, не больше. Самое интересное начинается, когда применяешь метод бюджетных когорт к измерению показателей фраз на реальной рекламной кампании в режиме 48х7. Первые результаты очень хорошие. Если хотите присоединиться к бесплатному тестированию, напишите Эльвире r-support@r-broker.ru. В теме укажите "хочу присоединиться к тестам Умного управления рекламой"
Ссылочное продвижение локальных сайтов: ТОП худших SEO-методов
demimurych
8
комментариев
0
читателей
Полный профиль
demimurych - о господи. это для регионального сайта? в яндексе? где у сайта по региону конкурентов меньше чем выдачи на двух страницах из которых перваш это реклама москвы? потешно ей богу. ктото чего то не понеимает.
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Виктор Брухис
5
комментариев
0
читателей
Полный профиль
Виктор Брухис - Статья выглядит так, как пожелали редакторы и интервьюер) Вопросы к интервью подбирал не я)) Хотя, в целом я согласен с вашим видением. А за пожелание удачи большое спасибо!
Зачем подменять контент на сайте: разбираем инструмент и развенчиваем мифы
Дмитрий Сульман
4
комментария
0
читателей
Полный профиль
Дмитрий Сульман - Все верно, об этом я и говорю. У крупных компаний есть много данных и они имеют доступ к дорогим технологиям и решениям для персонализации контента. Топовые западные сервисы для персонализации, такие как RichRelevance или Dynamic Yield, стоят от нескольких тысяч до десятков тысяч долларов в месяц. Понятно, что малый бизнес не может себе этого позволить. Да даже если бы чисто теоретически и мог, то это вряд ли бы имело хоть какой-то смысл. Во-первых, у малого бизнеса недостаточно данных, чтобы подобные алгоритмы персонализации начали эффективно работать, а во-вторых, тот профит, который МСБ получит от персонализации, никогда не покроет таких расходов. Мы же предлагаем решение, доступное как раз для малого и среднего бизнеса. При этом наше решение комплексное: МультиЧат - это одновременно и инструмент для персонализации, и для коммуникации.
Как провести анализ содержания страниц товаров и категорий
Никита Седнин
3
комментария
0
читателей
Полный профиль
Никита Седнин - Спасибо!
Монетизируйте свой сайт вместе с VIZTROM
VIZTROM
3
комментария
0
читателей
Полный профиль
VIZTROM - Добрый день! Так как мы сейчас работаем в приватном режиме, Вы врятли можете объективно оценить нашу рекламную площадку. У нас будет официальный запуск 3 марта для вебмастеров. Приглашаем Вас присоединиться к нам и лично посмотреть наш функционал.
Digital-разговор: Михаил Шакин про SEO, Google и заработок в интернете
Анна Макарова
368
комментариев
0
читателей
Полный профиль
Анна Макарова - Подготовим ) Пока предлагаю почитать интервью с Денисом Нарижным из той же серии. Там стенограмма =) www.seonews.ru/interviews/digital-razgovor-denis-narizhnyy-pro-ukhod-iz-seo-i-zarabotok-na-partnerkakh/
Как удвоить выручку за счет продвижения в поиске. Кейс coffee-butik.ru
Максим Боровой
3
комментария
0
читателей
Полный профиль
Максим Боровой - Последний вопрос (извиняюсь за количество) - почему на "В корзину" стоит Nofollow. Осознанно для распределение весов?
Кейс Hansa: как увеличить органический трафик в 1,5 раза
Алексей Порфирьев
3
комментария
0
читателей
Полный профиль
Алексей Порфирьев - Спасибо за замечание, о данной проблеме известно, но она не стоит в порядке приоритетных. Вопрос, на самом деле, дискуссионный. В тематике конкуренция не настолько велика, а в топе выдачи часто встречаются сайты с более серьёзными техническими проблемами. По этому, именно в статьях, более важно работать над релевантностью контента, отношением времени пользователя на странице к уровню доскрола, и различным пользовательским функционалом (рейтинг материала, просмотры и т. п.).
Автоматические SEO-аудиты: как напугать некорректными выводами
SEOquick
38
комментариев
0
читателей
Полный профиль
SEOquick - Парсинг сайтов – это самый лучший способ автоматизировать процесс сбора и сохранения информации. Конкурентов всегда нужно мониторить, а не сравнивать свой сайт через автоматический аудит анализатора.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
368
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
139
Комментариев
121
Комментариев
108
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
85
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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