×
Россия +7 (495) 960-65-87

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

Россия +7 (495) 960-65-87
SEOnews
Как уменьшить время загрузки сайта
Шрифт:
7 11468

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

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Светлана
    1
    комментарий
    0
    читателей
    Светлана
    6 месяцев назад
    Спасибо за статью!
    -
    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
Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
Светлана Зубрицкая
1
комментарий
0
читателей
Полный профиль
Светлана Зубрицкая - Нужно убрать пробелы между строк и заменить кавычки на вот такие "
#SEOnews14: мы празднуем – вы получаете подарки!
Анна Макарова
358
комментариев
0
читателей
Полный профиль
Анна Макарова - Гость, добрый день! С победителями мы связывались сразу после розыгрыша. Если мы вам не написали, значит, ваш номер не выпал. Но не расстраивайтесь, у нас обязательно будут новые розыгрыши!
Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
Георгий
1
комментарий
0
читателей
Полный профиль
Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
Война с дубликатами. Как нужно и как не нужно канонизировать URL
Ann Yaroshenko
5
комментариев
0
читателей
Полный профиль
Ann Yaroshenko - Дмитрий, добрый день! Если вы проставили на странице с автозапчастями rel=canonical ( а я вижу в коде, что не проставили) или в HTTP хедере, то бот, как правило: выберит ту страницу главной, которую вы указали в rel=canonical ссылке. Eсли же вы этого не сделали, то бот сам выберит оригинал (алгоритмы, по которым бот это делает, скрыты Googl-ом)
«Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
Евгений
1
комментарий
0
читателей
Полный профиль
Евгений - Воообще, на самом деле здесь двоякое впечатление от таких аудитов. Конечно, для полного глубокого анализа и подготовки рекомендаций по сайту - нужны доступы к системам аналитики и инструментам вебмастера. Но если оценивать подобные аудиты с точки зрения чистого SEO (которое все больше и больше становится лишь малой частью digital-маркетинга, лишь одним из каналов) - они имеют место быть. Но с оговоркой, что они сделаны с учетом анализа конкурентов/отрасли. Современные инструменты и алгоритмы позволяют делать это маркетологам в автоматическом режиме, и даже давать рекомендации - возможностями машинного обучения уже никого не удивишь. Да, полное перечисление "мифического" списка ошибок, построенного по предикативным правилам, да еще и с учетом устаревших особенностей ПС - это явный признак некачественного аудита. В первую очередь потому, что эти "ошибки" следует рассматривать в качестве рекомендаций от ПС (как и говорится в справочнике вебмастера у Яндекса/Google). Однако если эти данные даются с отсылкой на данные о конкурентах, об отрасли, используются методы ML и Natural language processing для обработки исходных данных, кластеризации запросов, классификации страниц/запросов/сайтов, определения структуры документа - такие отчеты имеют право на существование. Но ключевым моментом является то, что подобные инструменты достаточно сложны в разработке, а значит требуют квалифицированных специалистов для их разработки. Которых просто нет у студий рассылающих подобные "сео отчеты". Подобные отчеты по "ошибках" тоже неплохой источник информации, но лишь на 0 этапе анализа сайта. И в принципе, теоретически, возможно почти полное составление "хороших аудитов" без участия маркетолога, на основе лишь открытых данных сайта/внешних источников, но только при соответствующем применении всех современных возможностей анализа данных и рекомендательных систем. И в любом случае подобный "хороший отчет" требует конечного заключения от эксперта.
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Статья выглядит, как резюме студента - когда рассказать нечего, рассказываешь все подряд: "а потом я школу закончил, о жизни, о том, о сем..." Удачи, конечно, ребята, вам! Но, видимо, гранит науки ещё грызть и грызть, опыт нарабатывать и нарабатывать... Дерзайте.
BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
Feth
1
комментарий
0
читателей
Полный профиль
Feth - Тот момент, когда от статьи в интернете получаешь больше полезных знаний и навыков, чем от своего начальства. По статьям нетпиковцев можно учебник про SEO уже сшивать, ребята молодцы. Спасибо, что делитесь информацией.
10 элементов сайта, которые гарантированно отпугнут посетителей
Андрей
2
комментария
0
читателей
Полный профиль
Андрей - Ну типа потому что клиентское seo больше для коммерции предназначено. Типа контентники и сами знают что делать. В коммерции можно тысячу причин найти чтобы поработать с сайтом, а с контентными такие фокусы уже не прокатят, поэтому и не пишут. Всё продвижение для контентников сеошники описывают в трех словах: скорость, качество, систематичность. А, ну ещё конечно же СЯ, как же я про него забыл (фундамент жеть!).
Как вывести сайт в ТОП 10 Google в 2019 году
Анна Макарова
358
комментариев
0
читателей
Полный профиль
Анна Макарова - Сергей, в нашей отрасли много заимствований из английского, иногда с ними быстрее, проще .Но будем стараться ))
Как улучшить репутацию сайта недвижимости с помощью крауд-маркетинга
Евгений
2
комментария
0
читателей
Полный профиль
Евгений - а у вас какое впечатление от статьи?
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
358
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
106
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
73
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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